diff --git a/.env.example b/.env.example
deleted file mode 100644
index 449cb7e2..00000000
--- a/.env.example
+++ /dev/null
@@ -1 +0,0 @@
-REACT_APP_BACKEND_URL=http://localhost:5050
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 5b918750..ebdce9b9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,6 +20,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.history
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/.history/.prettierrc_20250226134824.js b/.history/.prettierrc_20250226134824.js
new file mode 100644
index 00000000..64dc4468
--- /dev/null
+++ b/.history/.prettierrc_20250226134824.js
@@ -0,0 +1,18 @@
+module.exports = {
+    trailingComma: 'es5',
+    tabWidth: 4,
+    semi: true,
+    singleQuote: true,
+    printWidth: 80,
+    jsxSingleQuote: true,
+    proseWrap: 'always',
+    plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+    importOrder: [
+        '^react$',
+        '<THIRD_PARTY_MODULES>',
+        '^(common|pages)/(.*)$',
+        '^[./]',
+    ],
+    importOrderSeparation: true,
+    importOrderSortSpecifiers: true,
+};
diff --git a/.history/.prettierrc_20250226140041.js b/.history/.prettierrc_20250226140041.js
new file mode 100644
index 00000000..47ecbfee
--- /dev/null
+++ b/.history/.prettierrc_20250226140041.js
@@ -0,0 +1,18 @@
+module.exports = {
+    trailingComma: 'es5',
+    tabWidth: 2,
+    semi: true,
+    singleQuote: true,
+    printWidth: 80,
+    jsxSingleQuote: true,
+    proseWrap: 'always',
+    plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+    importOrder: [
+        '^react$',
+        '<THIRD_PARTY_MODULES>',
+        '^(common|pages)/(.*)$',
+        '^[./]',
+    ],
+    importOrderSeparation: true,
+    importOrderSortSpecifiers: true,
+};
diff --git a/.history/.prettierrc_20250226154205.js b/.history/.prettierrc_20250226154205.js
new file mode 100644
index 00000000..ce8623ca
--- /dev/null
+++ b/.history/.prettierrc_20250226154205.js
@@ -0,0 +1,18 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+  jsxSingleQuote: true,
+  proseWrap: 'always',
+  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '^(common|pages)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};
diff --git a/.history/.prettierrc_20250226164717.js b/.history/.prettierrc_20250226164717.js
new file mode 100644
index 00000000..24673dbb
--- /dev/null
+++ b/.history/.prettierrc_20250226164717.js
@@ -0,0 +1,18 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 4,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+  jsxSingleQuote: true,
+  proseWrap: 'always',
+  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '^(common|pages)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};
diff --git a/.history/.prettierrc_20250226164741.js b/.history/.prettierrc_20250226164741.js
new file mode 100644
index 00000000..ce8623ca
--- /dev/null
+++ b/.history/.prettierrc_20250226164741.js
@@ -0,0 +1,18 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+  jsxSingleQuote: true,
+  proseWrap: 'always',
+  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '^(common|pages)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};
diff --git a/.history/.prettierrc_20250226165903.js b/.history/.prettierrc_20250226165903.js
new file mode 100644
index 00000000..24673dbb
--- /dev/null
+++ b/.history/.prettierrc_20250226165903.js
@@ -0,0 +1,18 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 4,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+  jsxSingleQuote: true,
+  proseWrap: 'always',
+  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '^(common|pages)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};
diff --git a/.history/.prettierrc_20250226165911.js b/.history/.prettierrc_20250226165911.js
new file mode 100644
index 00000000..ce8623ca
--- /dev/null
+++ b/.history/.prettierrc_20250226165911.js
@@ -0,0 +1,18 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+  jsxSingleQuote: true,
+  proseWrap: 'always',
+  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '^(common|pages)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};
diff --git a/.history/.prettierrc_20250226170025.js b/.history/.prettierrc_20250226170025.js
new file mode 100644
index 00000000..24673dbb
--- /dev/null
+++ b/.history/.prettierrc_20250226170025.js
@@ -0,0 +1,18 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 4,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+  jsxSingleQuote: true,
+  proseWrap: 'always',
+  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '^(common|pages)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};
diff --git a/.history/.prettierrc_20250226170311.js b/.history/.prettierrc_20250226170311.js
new file mode 100644
index 00000000..ce8623ca
--- /dev/null
+++ b/.history/.prettierrc_20250226170311.js
@@ -0,0 +1,18 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 80,
+  jsxSingleQuote: true,
+  proseWrap: 'always',
+  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
+  importOrder: [
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '^(common|pages)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};
diff --git a/.history/jsconfig_20250219202759.json b/.history/jsconfig_20250219202759.json
new file mode 100644
index 00000000..ef66e1dc
--- /dev/null
+++ b/.history/jsconfig_20250219202759.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "jsx": "react"
+  },
+  "include": ["src"]
+}
diff --git a/.history/jsconfig_20250226134748.json b/.history/jsconfig_20250226134748.json
new file mode 100644
index 00000000..7eab209e
--- /dev/null
+++ b/.history/jsconfig_20250226134748.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "jsx": "react",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/.history/package_20250219202759.json b/.history/package_20250219202759.json
new file mode 100644
index 00000000..1b4e33b9
--- /dev/null
+++ b/.history/package_20250219202759.json
@@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "cra-template": "1.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.2",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
+    "web-vitals": "^4.2.4"
+  },
+  "scripts": {
+    "start": "PORT=3001 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "check-imports": "prettier --check --plugin @trivago/prettier-plugin-sort-imports \"src/**/*.{js,jsx,mjs,cjs}\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@eslint/js": "^9.16.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "prettier-eslint": "^16.3.0"
+  }
+}
diff --git a/.history/package_20250219205120.json b/.history/package_20250219205120.json
new file mode 100644
index 00000000..b79ef30d
--- /dev/null
+++ b/.history/package_20250219205120.json
@@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "cra-template": "1.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.2",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
+    "web-vitals": "^4.2.4"
+  },
+  "scripts": {
+    "start": "PORT=3000 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "check-imports": "prettier --check --plugin @trivago/prettier-plugin-sort-imports \"src/**/*.{js,jsx,mjs,cjs}\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@eslint/js": "^9.16.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "prettier-eslint": "^16.3.0"
+  }
+}
diff --git a/.history/package_20250219205207.json b/.history/package_20250219205207.json
new file mode 100644
index 00000000..14f918ed
--- /dev/null
+++ b/.history/package_20250219205207.json
@@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "cra-template": "1.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.2",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
+    "web-vitals": "^4.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "check-imports": "prettier --check --plugin @trivago/prettier-plugin-sort-imports \"src/**/*.{js,jsx,mjs,cjs}\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@eslint/js": "^9.16.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "prettier-eslint": "^16.3.0"
+  }
+}
diff --git a/.history/package_20250226133050.json b/.history/package_20250226133050.json
new file mode 100644
index 00000000..b79ef30d
--- /dev/null
+++ b/.history/package_20250226133050.json
@@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "cra-template": "1.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.2",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
+    "web-vitals": "^4.2.4"
+  },
+  "scripts": {
+    "start": "PORT=3000 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "check-imports": "prettier --check --plugin @trivago/prettier-plugin-sort-imports \"src/**/*.{js,jsx,mjs,cjs}\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@eslint/js": "^9.16.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "prettier-eslint": "^16.3.0"
+  }
+}
diff --git a/.history/package_20250226133101.json b/.history/package_20250226133101.json
new file mode 100644
index 00000000..1b4e33b9
--- /dev/null
+++ b/.history/package_20250226133101.json
@@ -0,0 +1,58 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "cra-template": "1.2.0",
+    "prop-types": "^15.8.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.2",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
+    "web-vitals": "^4.2.4"
+  },
+  "scripts": {
+    "start": "PORT=3001 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "check-imports": "prettier --check --plugin @trivago/prettier-plugin-sort-imports \"src/**/*.{js,jsx,mjs,cjs}\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@eslint/js": "^9.16.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "prettier-eslint": "^16.3.0"
+  }
+}
diff --git a/.history/package_20250226191527.json b/.history/package_20250226191527.json
new file mode 100644
index 00000000..6a7da040
--- /dev/null
+++ b/.history/package_20250226191527.json
@@ -0,0 +1,73 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@tailwindcss/cli": "^4.0.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cra-template": "1.2.0",
+    "lucide-react": "^0.476.0",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.2",
+    "prop-types": "^15.8.1",
+    "radix-ui": "^1.1.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.2",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "web-vitals": "^4.2.4"
+  },
+  "scripts": {
+    "start": "PORT=3001 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,mjs,cjs,json,css,scss,md}\"",
+    "check-imports": "prettier --check --plugin @trivago/prettier-plugin-sort-imports \"src/**/*.{js,jsx,mjs,cjs}\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@eslint/js": "^9.16.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.13.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.4.2",
+    "prettier-eslint": "^16.3.0",
+    "tailwindcss": "^4.0.9"
+  }
+}
diff --git a/.history/src/App_20250219202759.css b/.history/src/App_20250219202759.css
new file mode 100644
index 00000000..161800f9
--- /dev/null
+++ b/.history/src/App_20250219202759.css
@@ -0,0 +1,13 @@
+/* global color presets */
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
diff --git a/.history/src/App_20250226134257.css b/.history/src/App_20250226134257.css
new file mode 100644
index 00000000..0f533e38
--- /dev/null
+++ b/.history/src/App_20250226134257.css
@@ -0,0 +1,15 @@
+/* global color presets */
+@import "tailwindcss";
+
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
diff --git a/.history/src/App_20250226134425.jsx b/.history/src/App_20250226134425.jsx
new file mode 100644
index 00000000..4ddd65ae
--- /dev/null
+++ b/.history/src/App_20250226134425.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import {
+    PrivateRoute,
+    PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+    return (
+        <UserProvider>
+            <BrowserRouter>
+                <Routes>
+                    <Route path='/' element={<NavLayout />}>
+                        <Route element={<PrivateRoute />}>
+                            <Route index element={<Home />} />
+                        </Route>
+                        <Route element={<PublicOnlyRoute />}>
+                            <Route path='login' element={<Login />} />
+                            <Route path='signup' element={<SignUp />} />
+                            <Route
+                                path='forgot-password'
+                                element={<RequestPasswordReset />}
+                            />
+                        </Route>
+                        <Route
+                            path='auth/callback'
+                            element={<AuthCallback />}
+                        />
+                        <Route
+                            path='auth/reset-password'
+                            element={<ResetPassword />}
+                        />
+                        <Route path='*' element={<NotFound />} />
+                    </Route>
+                </Routes>
+            </BrowserRouter>
+        </UserProvider>
+    );
+}
diff --git a/.history/src/App_20250226153700.jsx b/.history/src/App_20250226153700.jsx
new file mode 100644
index 00000000..9a6e3eff
--- /dev/null
+++ b/.history/src/App_20250226153700.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import {
+  PrivateRoute,
+  PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+  return (
+    <UserProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavLayout />}>
+            <Route element={<PrivateRoute />}>
+              <Route index element={<Home />} />
+            </Route>
+            <Route element={<PublicOnlyRoute />}>
+              <Route path='login' element={<Login />} />
+              <Route path='signup' element={<SignUp />} />
+              <Route
+                path='forgot-password'
+                element={<RequestPasswordReset />}
+              />
+            </Route>
+            <Route path='auth/callback' element={<AuthCallback />} />
+            <Route path='auth/reset-password' element={<ResetPassword />} />
+            <Route path='*' element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  );
+}
diff --git a/.history/src/App_20250226153747.jsx b/.history/src/App_20250226153747.jsx
new file mode 100644
index 00000000..9a6e3eff
--- /dev/null
+++ b/.history/src/App_20250226153747.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import {
+  PrivateRoute,
+  PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+  return (
+    <UserProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavLayout />}>
+            <Route element={<PrivateRoute />}>
+              <Route index element={<Home />} />
+            </Route>
+            <Route element={<PublicOnlyRoute />}>
+              <Route path='login' element={<Login />} />
+              <Route path='signup' element={<SignUp />} />
+              <Route
+                path='forgot-password'
+                element={<RequestPasswordReset />}
+              />
+            </Route>
+            <Route path='auth/callback' element={<AuthCallback />} />
+            <Route path='auth/reset-password' element={<ResetPassword />} />
+            <Route path='*' element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  );
+}
diff --git a/.history/src/App_20250226153839.jsx b/.history/src/App_20250226153839.jsx
new file mode 100644
index 00000000..9a6e3eff
--- /dev/null
+++ b/.history/src/App_20250226153839.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import {
+  PrivateRoute,
+  PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+  return (
+    <UserProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavLayout />}>
+            <Route element={<PrivateRoute />}>
+              <Route index element={<Home />} />
+            </Route>
+            <Route element={<PublicOnlyRoute />}>
+              <Route path='login' element={<Login />} />
+              <Route path='signup' element={<SignUp />} />
+              <Route
+                path='forgot-password'
+                element={<RequestPasswordReset />}
+              />
+            </Route>
+            <Route path='auth/callback' element={<AuthCallback />} />
+            <Route path='auth/reset-password' element={<ResetPassword />} />
+            <Route path='*' element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  );
+}
diff --git a/.history/src/App_20250226154043.jsx b/.history/src/App_20250226154043.jsx
new file mode 100644
index 00000000..697863b4
--- /dev/null
+++ b/.history/src/App_20250226154043.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import DialogDemo from 'common/components/FormPopup';
+import {
+  PrivateRoute,
+  PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+  return (
+    <UserProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavLayout />}>
+            <Route element={<PrivateRoute />}>
+              <Route index element={<Home />} />
+            </Route>
+            <Route element={<PublicOnlyRoute />}>
+              <Route path='login' element={<Login />} />
+              <Route path='signup' element={<SignUp />} />
+              <DialogDemo />
+              <Route
+                path='forgot-password'
+                element={<RequestPasswordReset />}
+              />
+            </Route>
+            <Route path='auth/callback' element={<AuthCallback />} />
+            <Route path='auth/reset-password' element={<ResetPassword />} />
+            <Route path='*' element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  );
+}
diff --git a/.history/src/App_20250226154058.jsx b/.history/src/App_20250226154058.jsx
new file mode 100644
index 00000000..697863b4
--- /dev/null
+++ b/.history/src/App_20250226154058.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import DialogDemo from 'common/components/FormPopup';
+import {
+  PrivateRoute,
+  PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+  return (
+    <UserProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavLayout />}>
+            <Route element={<PrivateRoute />}>
+              <Route index element={<Home />} />
+            </Route>
+            <Route element={<PublicOnlyRoute />}>
+              <Route path='login' element={<Login />} />
+              <Route path='signup' element={<SignUp />} />
+              <DialogDemo />
+              <Route
+                path='forgot-password'
+                element={<RequestPasswordReset />}
+              />
+            </Route>
+            <Route path='auth/callback' element={<AuthCallback />} />
+            <Route path='auth/reset-password' element={<ResetPassword />} />
+            <Route path='*' element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  );
+}
diff --git a/.history/src/App_20250226154252.jsx b/.history/src/App_20250226154252.jsx
new file mode 100644
index 00000000..88076686
--- /dev/null
+++ b/.history/src/App_20250226154252.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import DialogDemo from 'common/components/FormPopup';
+import {
+  PrivateRoute,
+  PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+  return (
+    <UserProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavLayout />}>
+            <Route element={<PrivateRoute />}>
+              <Route index element={<Home />} />
+            </Route>
+            <Route element={<PublicOnlyRoute />}>
+              <Route path='login' element={<Login />} />
+              <Route path='signup' element={<SignUp />} />
+              <Route
+                path='forgot-password'
+                element={<RequestPasswordReset />}
+              />
+            </Route>
+            <Route path='auth/callback' element={<AuthCallback />} />
+            <Route path='auth/reset-password' element={<ResetPassword />} />
+            <Route path='*' element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+      <DialogDemo />
+    </UserProvider>
+  );
+}
diff --git a/.history/src/App_20250226154303.jsx b/.history/src/App_20250226154303.jsx
new file mode 100644
index 00000000..9a6e3eff
--- /dev/null
+++ b/.history/src/App_20250226154303.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import {
+  PrivateRoute,
+  PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+  return (
+    <UserProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavLayout />}>
+            <Route element={<PrivateRoute />}>
+              <Route index element={<Home />} />
+            </Route>
+            <Route element={<PublicOnlyRoute />}>
+              <Route path='login' element={<Login />} />
+              <Route path='signup' element={<SignUp />} />
+              <Route
+                path='forgot-password'
+                element={<RequestPasswordReset />}
+              />
+            </Route>
+            <Route path='auth/callback' element={<AuthCallback />} />
+            <Route path='auth/reset-password' element={<ResetPassword />} />
+            <Route path='*' element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  );
+}
diff --git a/.history/src/App_20250226155035.css b/.history/src/App_20250226155035.css
new file mode 100644
index 00000000..7f744a42
--- /dev/null
+++ b/.history/src/App_20250226155035.css
@@ -0,0 +1,176 @@
+/* global color presets */
+@import "tailwindcss";
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
+
+/* reset */
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.DialogOverlay {
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  background-color: var(--gray-1);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogTitle {
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+}
+.Button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.Button:focus-visible {
+  outline: 2px solid var(--violet-6);
+  outline-offset: 1px;
+}
+.Button.violet {
+  background-color: var(--violet-4);
+  color: var(--violet-12);
+  outline-color: var(--violet-6);
+}
+.Button.violet:hover {
+  background-color: var(--mauve-3);
+}
+.Button.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+
+.IconButton {
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+}
+.IconButton:hover {
+  background-color: var(--violet-4);
+}
+.IconButton:focus {
+  box-shadow: 0 0 0 2px var(--violet-7);
+}
+
+.Fieldset {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.Label {
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+}
+
+.Input {
+  width: 100%;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
diff --git a/.history/src/App_20250226155356.css b/.history/src/App_20250226155356.css
new file mode 100644
index 00000000..7ee095d9
--- /dev/null
+++ b/.history/src/App_20250226155356.css
@@ -0,0 +1,176 @@
+/* global color presets */
+@import "tailwindcss";
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
+
+/* reset */
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.DialogOverlay {
+  background-color: var(--darkgrey);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  background-color: var(--gray-1);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogTitle {
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+}
+.Button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.Button:focus-visible {
+  outline: 2px solid var(--violet-6);
+  outline-offset: 1px;
+}
+.Button.violet {
+  background-color: var(--violet-4);
+  color: var(--violet-12);
+  outline-color: var(--violet-6);
+}
+.Button.violet:hover {
+  background-color: var(--mauve-3);
+}
+.Button.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+
+.IconButton {
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+}
+.IconButton:hover {
+  background-color: var(--violet-4);
+}
+.IconButton:focus {
+  box-shadow: 0 0 0 2px var(--violet-7);
+}
+
+.Fieldset {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.Label {
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+}
+
+.Input {
+  width: 100%;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
diff --git a/.history/src/App_20250226155414.css b/.history/src/App_20250226155414.css
new file mode 100644
index 00000000..7f744a42
--- /dev/null
+++ b/.history/src/App_20250226155414.css
@@ -0,0 +1,176 @@
+/* global color presets */
+@import "tailwindcss";
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
+
+/* reset */
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.DialogOverlay {
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  background-color: var(--gray-1);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogTitle {
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+}
+.Button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.Button:focus-visible {
+  outline: 2px solid var(--violet-6);
+  outline-offset: 1px;
+}
+.Button.violet {
+  background-color: var(--violet-4);
+  color: var(--violet-12);
+  outline-color: var(--violet-6);
+}
+.Button.violet:hover {
+  background-color: var(--mauve-3);
+}
+.Button.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+
+.IconButton {
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+}
+.IconButton:hover {
+  background-color: var(--violet-4);
+}
+.IconButton:focus {
+  box-shadow: 0 0 0 2px var(--violet-7);
+}
+
+.Fieldset {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.Label {
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+}
+
+.Input {
+  width: 100%;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
diff --git a/.history/src/App_20250226155418.css b/.history/src/App_20250226155418.css
new file mode 100644
index 00000000..3803ee74
--- /dev/null
+++ b/.history/src/App_20250226155418.css
@@ -0,0 +1,176 @@
+/* global color presets */
+@import "tailwindcss";
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
+
+/* reset */
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.DialogOverlay {
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  background-color: var(--darkgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogTitle {
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+}
+.Button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.Button:focus-visible {
+  outline: 2px solid var(--violet-6);
+  outline-offset: 1px;
+}
+.Button.violet {
+  background-color: var(--violet-4);
+  color: var(--violet-12);
+  outline-color: var(--violet-6);
+}
+.Button.violet:hover {
+  background-color: var(--mauve-3);
+}
+.Button.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+
+.IconButton {
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+}
+.IconButton:hover {
+  background-color: var(--violet-4);
+}
+.IconButton:focus {
+  box-shadow: 0 0 0 2px var(--violet-7);
+}
+
+.Fieldset {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.Label {
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+}
+
+.Input {
+  width: 100%;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
diff --git a/.history/src/App_20250226155436.css b/.history/src/App_20250226155436.css
new file mode 100644
index 00000000..51952e84
--- /dev/null
+++ b/.history/src/App_20250226155436.css
@@ -0,0 +1,176 @@
+/* global color presets */
+@import "tailwindcss";
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
+
+/* reset */
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.DialogOverlay {
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogTitle {
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+}
+.Button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.Button:focus-visible {
+  outline: 2px solid var(--violet-6);
+  outline-offset: 1px;
+}
+.Button.violet {
+  background-color: var(--violet-4);
+  color: var(--violet-12);
+  outline-color: var(--violet-6);
+}
+.Button.violet:hover {
+  background-color: var(--mauve-3);
+}
+.Button.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+
+.IconButton {
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+}
+.IconButton:hover {
+  background-color: var(--violet-4);
+}
+.IconButton:focus {
+  box-shadow: 0 0 0 2px var(--violet-7);
+}
+
+.Fieldset {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.Label {
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+}
+
+.Input {
+  width: 100%;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
diff --git a/.history/src/App_20250226155503.css b/.history/src/App_20250226155503.css
new file mode 100644
index 00000000..84384f1b
--- /dev/null
+++ b/.history/src/App_20250226155503.css
@@ -0,0 +1,175 @@
+/* global color presets */
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
+
+/* reset */
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.DialogOverlay {
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogTitle {
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+}
+.Button:focus:not(:focus-visible) {
+  outline: 0;
+}
+.Button:focus-visible {
+  outline: 2px solid var(--violet-6);
+  outline-offset: 1px;
+}
+.Button.violet {
+  background-color: var(--violet-4);
+  color: var(--violet-12);
+  outline-color: var(--violet-6);
+}
+.Button.violet:hover {
+  background-color: var(--mauve-3);
+}
+.Button.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+
+.IconButton {
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+}
+.IconButton:hover {
+  background-color: var(--violet-4);
+}
+.IconButton:focus {
+  box-shadow: 0 0 0 2px var(--violet-7);
+}
+
+.Fieldset {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.Label {
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+}
+
+.Input {
+  width: 100%;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
diff --git a/.history/src/App_20250226155634.css b/.history/src/App_20250226155634.css
new file mode 100644
index 00000000..3645395f
--- /dev/null
+++ b/.history/src/App_20250226155634.css
@@ -0,0 +1,18 @@
+/* global color presets */
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+:root {
+  --primary-green: #45bf84;
+  --secondary-lightgrey: #f3f3f3;
+  --darkgrey: #747474;
+  --white: #fff;
+  --text: #191a23;
+}
+
+* {
+  font-family: Verdana, sans-serif;
+  color: var(--text);
+}
diff --git a/.history/src/App_20250226155645.jsx b/.history/src/App_20250226155645.jsx
new file mode 100644
index 00000000..9a6e3eff
--- /dev/null
+++ b/.history/src/App_20250226155645.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import {
+  PrivateRoute,
+  PublicOnlyRoute,
+} from 'common/components/routes/ProtectedRoutes';
+import { UserProvider } from 'common/contexts/UserContext';
+import NavLayout from 'common/layouts/NavLayout';
+import AuthCallback from 'pages/account/AuthCallback';
+import Login from 'pages/account/Login';
+import RequestPasswordReset from 'pages/account/RequestPasswordReset';
+import ResetPassword from 'pages/account/ResetPassword';
+import SignUp from 'pages/account/SignUp';
+import Home from 'pages/home/Home';
+import NotFound from 'pages/not-found/NotFound';
+
+import './App.css';
+
+export default function App() {
+  return (
+    <UserProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<NavLayout />}>
+            <Route element={<PrivateRoute />}>
+              <Route index element={<Home />} />
+            </Route>
+            <Route element={<PublicOnlyRoute />}>
+              <Route path='login' element={<Login />} />
+              <Route path='signup' element={<SignUp />} />
+              <Route
+                path='forgot-password'
+                element={<RequestPasswordReset />}
+              />
+            </Route>
+            <Route path='auth/callback' element={<AuthCallback />} />
+            <Route path='auth/reset-password' element={<ResetPassword />} />
+            <Route path='*' element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  );
+}
diff --git a/src/common/components/Button.js b/.history/src/common/components/Button_20250219202759.js
similarity index 100%
rename from src/common/components/Button.js
rename to .history/src/common/components/Button_20250219202759.js
diff --git a/.history/src/common/components/Button_20250226140619.js b/.history/src/common/components/Button_20250226140619.js
new file mode 100644
index 00000000..ab016464
--- /dev/null
+++ b/.history/src/common/components/Button_20250226140619.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+const ButtonBase = styled.button`
+    font-size: 0.8em;
+    padding: 8px 20px;
+    border-radius: 5px;
+    border: solid 1px var(--text);
+    color: var(--text);
+    cursor: pointer;
+`;
+
+const ButtonPrimary = styled(ButtonBase)`
+    background-color: var(--primary-green);
+    border-color: var(--primary-green);
+    color: var(--white);
+`;
+
+const ButtonSecondary = styled(ButtonBase)`
+    background-color: var(--secondary-lightgrey);
+    border-color: var(--text);
+`;
+
+const ButtonTransparent = styled(ButtonBase)`
+    background-color: transparent;
+`;
+
+const ButtonInvisible = styled(ButtonBase)`
+    background-color: transparent;
+    border-color: transparent;
+`;
+
+export const Button = {
+    Primary: ButtonPrimary,
+    Secondary: ButtonSecondary,
+    Transparent: ButtonTransparent,
+    Invisible: ButtonInvisible,
+};
diff --git a/.history/src/common/components/Button_20250226152747.js b/.history/src/common/components/Button_20250226152747.js
new file mode 100644
index 00000000..a14a6bbf
--- /dev/null
+++ b/.history/src/common/components/Button_20250226152747.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+const ButtonBase = styled.button`
+  font-size: 0.8em;
+  padding: 8px 20px;
+  border-radius: 5px;
+  border: solid 1px var(--text);
+  color: var(--text);
+  cursor: pointer;
+`;
+
+const ButtonPrimary = styled(ButtonBase)`
+  background-color: var(--primary-green);
+  border-color: var(--primary-green);
+  color: var(--white);
+`;
+
+const ButtonSecondary = styled(ButtonBase)`
+  background-color: var(--secondary-lightgrey);
+  border-color: var(--text);
+`;
+
+const ButtonTransparent = styled(ButtonBase)`
+  background-color: transparent;
+`;
+
+const ButtonInvisible = styled(ButtonBase)`
+  background-color: transparent;
+  border-color: transparent;
+`;
+
+export const Button = {
+  Primary: ButtonPrimary,
+  Secondary: ButtonSecondary,
+  Transparent: ButtonTransparent,
+  Invisible: ButtonInvisible,
+};
diff --git a/.history/src/common/components/FormPopup_20250226132140.jsx b/.history/src/common/components/FormPopup_20250226132140.jsx
new file mode 100644
index 00000000..27f4a5d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226132140.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function FormPopup() {
+  return (
+    <div>
+      <h1>FormPopup</h1>
+    </div>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250226132154.jsx b/.history/src/common/components/FormPopup_20250226132154.jsx
new file mode 100644
index 00000000..27f4a5d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226132154.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function FormPopup() {
+  return (
+    <div>
+      <h1>FormPopup</h1>
+    </div>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250226140843.jsx b/.history/src/common/components/FormPopup_20250226140843.jsx
new file mode 100644
index 00000000..b8a152d0
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226140843.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function FormPopup() {
+    return (
+        <div>
+            <h1>FormPopup</h1>
+        </div>
+    );
+}
+
+FormPopup.propTypes = {
+    promptText: PropTypes.string,
+    placeholderText: PropTypes.string,
+    submitButtonText: PropTypes.string,
+    cancelButtonText: PropTypes.string,
+    onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+    promptText: 'Prompt',
+    placeholderText: 'Enter text here',
+    submitButtonText: 'Submit',
+    cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250226152728.jsx b/.history/src/common/components/FormPopup_20250226152728.jsx
new file mode 100644
index 00000000..27f4a5d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226152728.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function FormPopup() {
+  return (
+    <div>
+      <h1>FormPopup</h1>
+    </div>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250226153114.jsx b/.history/src/common/components/FormPopup_20250226153114.jsx
new file mode 100644
index 00000000..27f4a5d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226153114.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function FormPopup() {
+  return (
+    <div>
+      <h1>FormPopup</h1>
+    </div>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250226153232.jsx b/.history/src/common/components/FormPopup_20250226153232.jsx
new file mode 100644
index 00000000..27f4a5d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226153232.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function FormPopup() {
+  return (
+    <div>
+      <h1>FormPopup</h1>
+    </div>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250226153235.jsx b/.history/src/common/components/FormPopup_20250226153235.jsx
new file mode 100644
index 00000000..27f4a5d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226153235.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function FormPopup() {
+  return (
+    <div>
+      <h1>FormPopup</h1>
+    </div>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250226153300.jsx b/.history/src/common/components/FormPopup_20250226153300.jsx
new file mode 100644
index 00000000..27f4a5d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226153300.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function FormPopup() {
+  return (
+    <div>
+      <h1>FormPopup</h1>
+    </div>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250226153620.jsx b/.history/src/common/components/FormPopup_20250226153620.jsx
new file mode 100644
index 00000000..bc65d197
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226153620.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+// import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+
+const DialogDemo = () => (
+  <Dialog.Root>
+    <Dialog.Trigger asChild>
+      <button className='Button violet'>Edit profile</button>
+    </Dialog.Trigger>
+    <Dialog.Portal>
+      <Dialog.Overlay className='DialogOverlay' />
+      <Dialog.Content className='DialogContent'>
+        <Dialog.Title className='DialogTitle'>Edit profile</Dialog.Title>
+        <Dialog.Description className='DialogDescription'>
+          Make changes to your profile here. Click save when you&apos;re done.
+        </Dialog.Description>
+        <fieldset className='Fieldset'>
+          <label className='Label' htmlFor='name'>
+            Name
+          </label>
+          <input className='Input' id='name' defaultValue='Pedro Duarte' />
+        </fieldset>
+        <fieldset className='Fieldset'>
+          <label className='Label' htmlFor='username'>
+            Username
+          </label>
+          <input className='Input' id='username' defaultValue='@peduarte' />
+        </fieldset>
+        <div
+          style={{ display: 'flex', marginTop: 25, justifyContent: 'flex-end' }}
+        >
+          <Dialog.Close asChild>
+            <button className='Button green'>Save changes</button>
+          </Dialog.Close>
+        </div>
+        <Dialog.Close asChild>
+          <button className='IconButton' aria-label='Close'>
+            <Cross2Icon />
+          </button>
+        </Dialog.Close>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+);
+
+export default DialogDemo;
+
+// export default function FormPopup() {
+//   return (
+//     <div>
+//       <h1>FormPopup</h1>
+//     </div>
+//   );
+// }
+
+// FormPopup.propTypes = {
+//   promptText: PropTypes.string,
+//   placeholderText: PropTypes.string,
+//   submitButtonText: PropTypes.string,
+//   cancelButtonText: PropTypes.string,
+//   onSubmit: PropTypes.func,
+// };
+
+// FormPopup.defaultProps = {
+//   promptText: 'Prompt',
+//   placeholderText: 'Enter text here',
+//   submitButtonText: 'Submit',
+//   cancelButtonText: 'Cancel',
+// };
diff --git a/.history/src/common/components/FormPopup_20250226153635.jsx b/.history/src/common/components/FormPopup_20250226153635.jsx
new file mode 100644
index 00000000..4df18495
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226153635.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+//import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+
+const DialogDemo = () => (
+  <Dialog.Root>
+    <Dialog.Trigger asChild>
+      <button className='Button violet'>Edit profile</button>
+    </Dialog.Trigger>
+    <Dialog.Portal>
+      <Dialog.Overlay className='DialogOverlay' />
+      <Dialog.Content className='DialogContent'>
+        <Dialog.Title className='DialogTitle'>Edit profile</Dialog.Title>
+        <Dialog.Description className='DialogDescription'>
+          Make changes to your profile here. Click save when you&apos;re done.
+        </Dialog.Description>
+        <fieldset className='Fieldset'>
+          <label className='Label' htmlFor='name'>
+            Name
+          </label>
+          <input className='Input' id='name' defaultValue='Pedro Duarte' />
+        </fieldset>
+        <fieldset className='Fieldset'>
+          <label className='Label' htmlFor='username'>
+            Username
+          </label>
+          <input className='Input' id='username' defaultValue='@peduarte' />
+        </fieldset>
+        <div
+          style={{ display: 'flex', marginTop: 25, justifyContent: 'flex-end' }}
+        >
+          <Dialog.Close asChild>
+            <button className='Button green'>Save changes</button>
+          </Dialog.Close>
+        </div>
+        <Dialog.Close asChild>
+          <button className='IconButton' aria-label='Close'>
+            <Cross2Icon />
+          </button>
+        </Dialog.Close>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+);
+
+export default DialogDemo;
+
+// export default function FormPopup() {
+//   return (
+//     <div>
+//       <h1>FormPopup</h1>
+//     </div>
+//   );
+// }
+
+// FormPopup.propTypes = {
+//   promptText: PropTypes.string,
+//   placeholderText: PropTypes.string,
+//   submitButtonText: PropTypes.string,
+//   cancelButtonText: PropTypes.string,
+//   onSubmit: PropTypes.func,
+// };
+
+// FormPopup.defaultProps = {
+//   promptText: 'Prompt',
+//   placeholderText: 'Enter text here',
+//   submitButtonText: 'Submit',
+//   cancelButtonText: 'Cancel',
+// };
diff --git a/.history/src/common/components/FormPopup_20250226155659.jsx b/.history/src/common/components/FormPopup_20250226155659.jsx
new file mode 100644
index 00000000..76bcf56c
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226155659.jsx
@@ -0,0 +1,228 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+//import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+
+/* reset */
+// button,
+// fieldset,
+// input {
+//   all: unset;
+// }
+
+// .DialogOverlay {
+//   background-color: var(--black-a9);
+//   position: fixed;
+//   inset: 0;
+//   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+
+// .DialogContent {
+//   background-color: var(--secondary-lightgrey);
+//   border-radius: 6px;
+//   box-shadow: var(--shadow-6);
+//   position: fixed;
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+//   width: 90vw;
+//   max-width: 500px;
+//   max-height: 85vh;
+//   padding: 25px;
+//   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+// .DialogContent:focus {
+//   outline: none;
+// }
+
+// .DialogTitle {
+//   margin: 0;
+//   font-weight: 500;
+//   color: var(--mauve-12);
+//   font-size: 17px;
+// }
+
+// .DialogDescription {
+//   margin: 10px 0 20px;
+//   color: var(--mauve-11);
+//   font-size: 15px;
+//   line-height: 1.5;
+// }
+
+// .Button {
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 15px;
+//   font-size: 15px;
+//   line-height: 1;
+//   font-weight: 500;
+//   height: 35px;
+//   user-select: none;
+// }
+// .Button:focus:not(:focus-visible) {
+//   outline: 0;
+// }
+// .Button:focus-visible {
+//   outline: 2px solid var(--violet-6);
+//   outline-offset: 1px;
+// }
+// .Button.violet {
+//   background-color: var(--violet-4);
+//   color: var(--violet-12);
+//   outline-color: var(--violet-6);
+// }
+// .Button.violet:hover {
+//   background-color: var(--mauve-3);
+// }
+// .Button.green {
+//   background-color: var(--green-4);
+//   color: var(--green-11);
+//   outline-color: var(--green-7);
+// }
+// .Button.green:hover {
+//   background-color: var(--green-5);
+// }
+
+// .IconButton {
+//   all: unset;
+//   font-family: inherit;
+//   border-radius: 100%;
+//   height: 25px;
+//   width: 25px;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   color: var(--violet-11);
+//   position: absolute;
+//   top: 10px;
+//   right: 10px;
+//   background-color: var(--gray-3);
+// }
+// .IconButton:hover {
+//   background-color: var(--violet-4);
+// }
+// .IconButton:focus {
+//   box-shadow: 0 0 0 2px var(--violet-7);
+// }
+
+// .Fieldset {
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// }
+
+// .Label {
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// }
+
+// .Input {
+//   width: 100%;
+//   flex: 1;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+// }
+// .Input:focus {
+//   box-shadow: 0 0 0 2px var(--violet-8);
+// }
+
+// @keyframes overlayShow {
+//   from {
+//     opacity: 0;
+//   }
+//   to {
+//     opacity: 1;
+//   }
+// }
+
+// @keyframes contentShow {
+//   from {
+//     opacity: 0;
+//     transform: translate(-50%, -48%) scale(0.96);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translate(-50%, -50%) scale(1);
+//   }
+// }
+
+const DialogDemo = () => (
+  <Dialog.Root>
+    <Dialog.Trigger asChild>
+      <button className='Button violet'>Edit profile</button>
+    </Dialog.Trigger>
+    <Dialog.Portal>
+      <Dialog.Overlay className='DialogOverlay' />
+      <Dialog.Content className='DialogContent'>
+        <Dialog.Title className='DialogTitle'>Edit profile</Dialog.Title>
+        <Dialog.Description className='DialogDescription'>
+          Make changes to your profile here. Click save when you&apos;re done.
+        </Dialog.Description>
+        <fieldset className='Fieldset'>
+          <label className='Label' htmlFor='name'>
+            Name
+          </label>
+          <input className='Input' id='name' defaultValue='Pedro Duarte' />
+        </fieldset>
+        <fieldset className='Fieldset'>
+          <label className='Label' htmlFor='username'>
+            Username
+          </label>
+          <input className='Input' id='username' defaultValue='@peduarte' />
+        </fieldset>
+        <div
+          style={{ display: 'flex', marginTop: 25, justifyContent: 'flex-end' }}
+        >
+          <Dialog.Close asChild>
+            <button className='Button green'>Save changes</button>
+          </Dialog.Close>
+        </div>
+        <Dialog.Close asChild>
+          <button className='IconButton' aria-label='Close'>
+            <Cross2Icon />
+          </button>
+        </Dialog.Close>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+);
+
+export default DialogDemo;
+
+// export default function FormPopup() {
+//   return (
+//     <div>
+//       <h1>FormPopup</h1>
+//     </div>
+//   );
+// }
+
+// FormPopup.propTypes = {
+//   promptText: PropTypes.string,
+//   placeholderText: PropTypes.string,
+//   submitButtonText: PropTypes.string,
+//   cancelButtonText: PropTypes.string,
+//   onSubmit: PropTypes.func,
+// };
+
+// FormPopup.defaultProps = {
+//   promptText: 'Prompt',
+//   placeholderText: 'Enter text here',
+//   submitButtonText: 'Submit',
+//   cancelButtonText: 'Cancel',
+// };
diff --git a/.history/src/common/components/FormPopup_20250226155939.jsx b/.history/src/common/components/FormPopup_20250226155939.jsx
new file mode 100644
index 00000000..a1d99a2d
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226155939.jsx
@@ -0,0 +1,230 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+//import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+
+/* reset */
+// button,
+// fieldset,
+// input {
+//   all: unset;
+// }
+
+// .DialogOverlay {
+//   background-color: var(--black-a9);
+//   position: fixed;
+//   inset: 0;
+//   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+
+// .DialogContent {
+//   background-color: var(--secondary-lightgrey);
+//   border-radius: 6px;
+//   box-shadow: var(--shadow-6);
+//   position: fixed;
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+//   width: 90vw;
+//   max-width: 500px;
+//   max-height: 85vh;
+//   padding: 25px;
+//   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+// .DialogContent:focus {
+//   outline: none;
+// }
+
+// .DialogTitle {
+//   margin: 0;
+//   font-weight: 500;
+//   color: var(--mauve-12);
+//   font-size: 17px;
+// }
+
+// .DialogDescription {
+//   margin: 10px 0 20px;
+//   color: var(--mauve-11);
+//   font-size: 15px;
+//   line-height: 1.5;
+// }
+
+// .Button {
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 15px;
+//   font-size: 15px;
+//   line-height: 1;
+//   font-weight: 500;
+//   height: 35px;
+//   user-select: none;
+// }
+// .Button:focus:not(:focus-visible) {
+//   outline: 0;
+// }
+// .Button:focus-visible {
+//   outline: 2px solid var(--violet-6);
+//   outline-offset: 1px;
+// }
+// .Button.violet {
+//   background-color: var(--violet-4);
+//   color: var(--violet-12);
+//   outline-color: var(--violet-6);
+// }
+// .Button.violet:hover {
+//   background-color: var(--mauve-3);
+// }
+// .Button.green {
+//   background-color: var(--green-4);
+//   color: var(--green-11);
+//   outline-color: var(--green-7);
+// }
+// .Button.green:hover {
+//   background-color: var(--green-5);
+// }
+
+// .IconButton {
+//   all: unset;
+//   font-family: inherit;
+//   border-radius: 100%;
+//   height: 25px;
+//   width: 25px;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   color: var(--violet-11);
+//   position: absolute;
+//   top: 10px;
+//   right: 10px;
+//   background-color: var(--gray-3);
+// }
+// .IconButton:hover {
+//   background-color: var(--violet-4);
+// }
+// .IconButton:focus {
+//   box-shadow: 0 0 0 2px var(--violet-7);
+// }
+
+// .Fieldset {
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// }
+
+// .Label {
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// }
+
+// .Input {
+//   width: 100%;
+//   flex: 1;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+// }
+// .Input:focus {
+//   box-shadow: 0 0 0 2px var(--violet-8);
+// }
+
+// @keyframes overlayShow {
+//   from {
+//     opacity: 0;
+//   }
+//   to {
+//     opacity: 1;
+//   }
+// }
+
+// @keyframes contentShow {
+//   from {
+//     opacity: 0;
+//     transform: translate(-50%, -48%) scale(0.96);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translate(-50%, -50%) scale(1);
+//   }
+// }
+export default function FormPopup() {
+  return(
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button className='Button violet'>Edit profile</button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className='DialogOverlay' />
+        <Dialog.Content className='DialogContent'>
+          <Dialog.Title className='DialogTitle'>Edit profile</Dialog.Title>
+          <Dialog.Description className='DialogDescription'>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </Dialog.Description>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='name'>
+              Name
+            </label>
+            <input className='Input' id='name' defaultValue='Pedro Duarte' />
+          </fieldset>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='username'>
+              Username
+            </label>
+            <input className='Input' id='username' defaultValue='@peduarte' />
+          </fieldset>
+          <div
+            style={{ display: 'flex', marginTop: 25, justifyContent: 'flex-end' }}
+          >
+            <Dialog.Close asChild>
+              <button className='Button green'>Save changes</button>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <button className='IconButton' aria-label='Close'>
+              <Cross2Icon />
+            </button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+
+export default DialogDemo;
+
+// export default function FormPopup() {
+//   return (
+//     <div>
+//       <h1>FormPopup</h1>
+//     </div>
+//   );
+// }
+
+// FormPopup.propTypes = {
+//   promptText: PropTypes.string,
+//   placeholderText: PropTypes.string,
+//   submitButtonText: PropTypes.string,
+//   cancelButtonText: PropTypes.string,
+//   onSubmit: PropTypes.func,
+// };
+
+// FormPopup.defaultProps = {
+//   promptText: 'Prompt',
+//   placeholderText: 'Enter text here',
+//   submitButtonText: 'Submit',
+//   cancelButtonText: 'Cancel',
+// };
diff --git a/.history/src/common/components/FormPopup_20250226160000.jsx b/.history/src/common/components/FormPopup_20250226160000.jsx
new file mode 100644
index 00000000..e7a9c7d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226160000.jsx
@@ -0,0 +1,231 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+//import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+
+/* reset */
+// button,
+// fieldset,
+// input {
+//   all: unset;
+// }
+
+// .DialogOverlay {
+//   background-color: var(--black-a9);
+//   position: fixed;
+//   inset: 0;
+//   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+
+// .DialogContent {
+//   background-color: var(--secondary-lightgrey);
+//   border-radius: 6px;
+//   box-shadow: var(--shadow-6);
+//   position: fixed;
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+//   width: 90vw;
+//   max-width: 500px;
+//   max-height: 85vh;
+//   padding: 25px;
+//   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+// .DialogContent:focus {
+//   outline: none;
+// }
+
+// .DialogTitle {
+//   margin: 0;
+//   font-weight: 500;
+//   color: var(--mauve-12);
+//   font-size: 17px;
+// }
+
+// .DialogDescription {
+//   margin: 10px 0 20px;
+//   color: var(--mauve-11);
+//   font-size: 15px;
+//   line-height: 1.5;
+// }
+
+// .Button {
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 15px;
+//   font-size: 15px;
+//   line-height: 1;
+//   font-weight: 500;
+//   height: 35px;
+//   user-select: none;
+// }
+// .Button:focus:not(:focus-visible) {
+//   outline: 0;
+// }
+// .Button:focus-visible {
+//   outline: 2px solid var(--violet-6);
+//   outline-offset: 1px;
+// }
+// .Button.violet {
+//   background-color: var(--violet-4);
+//   color: var(--violet-12);
+//   outline-color: var(--violet-6);
+// }
+// .Button.violet:hover {
+//   background-color: var(--mauve-3);
+// }
+// .Button.green {
+//   background-color: var(--green-4);
+//   color: var(--green-11);
+//   outline-color: var(--green-7);
+// }
+// .Button.green:hover {
+//   background-color: var(--green-5);
+// }
+
+// .IconButton {
+//   all: unset;
+//   font-family: inherit;
+//   border-radius: 100%;
+//   height: 25px;
+//   width: 25px;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   color: var(--violet-11);
+//   position: absolute;
+//   top: 10px;
+//   right: 10px;
+//   background-color: var(--gray-3);
+// }
+// .IconButton:hover {
+//   background-color: var(--violet-4);
+// }
+// .IconButton:focus {
+//   box-shadow: 0 0 0 2px var(--violet-7);
+// }
+
+// .Fieldset {
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// }
+
+// .Label {
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// }
+
+// .Input {
+//   width: 100%;
+//   flex: 1;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+// }
+// .Input:focus {
+//   box-shadow: 0 0 0 2px var(--violet-8);
+// }
+
+// @keyframes overlayShow {
+//   from {
+//     opacity: 0;
+//   }
+//   to {
+//     opacity: 1;
+//   }
+// }
+
+// @keyframes contentShow {
+//   from {
+//     opacity: 0;
+//     transform: translate(-50%, -48%) scale(0.96);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translate(-50%, -50%) scale(1);
+//   }
+// }
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button className='Button violet'>Edit profile</button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className='DialogOverlay' />
+        <Dialog.Content className='DialogContent'>
+          <Dialog.Title className='DialogTitle'>Edit profile</Dialog.Title>
+          <Dialog.Description className='DialogDescription'>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </Dialog.Description>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='name'>
+              Name
+            </label>
+            <input className='Input' id='name' defaultValue='Pedro Duarte' />
+          </fieldset>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='username'>
+              Username
+            </label>
+            <input className='Input' id='username' defaultValue='@peduarte' />
+          </fieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <button className='Button green'>Save changes</button>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <button className='IconButton' aria-label='Close'>
+              <Cross2Icon />
+            </button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// export default function FormPopup() {
+//   return (
+//     <div>
+//       <h1>FormPopup</h1>
+//     </div>
+//   );
+// }
+
+// FormPopup.propTypes = {
+//   promptText: PropTypes.string,
+//   placeholderText: PropTypes.string,
+//   submitButtonText: PropTypes.string,
+//   cancelButtonText: PropTypes.string,
+//   onSubmit: PropTypes.func,
+// };
+
+// FormPopup.defaultProps = {
+//   promptText: 'Prompt',
+//   placeholderText: 'Enter text here',
+//   submitButtonText: 'Submit',
+//   cancelButtonText: 'Cancel',
+// };
diff --git a/.history/src/common/components/FormPopup_20250226160002.jsx b/.history/src/common/components/FormPopup_20250226160002.jsx
new file mode 100644
index 00000000..e7a9c7d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226160002.jsx
@@ -0,0 +1,231 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+//import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+
+/* reset */
+// button,
+// fieldset,
+// input {
+//   all: unset;
+// }
+
+// .DialogOverlay {
+//   background-color: var(--black-a9);
+//   position: fixed;
+//   inset: 0;
+//   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+
+// .DialogContent {
+//   background-color: var(--secondary-lightgrey);
+//   border-radius: 6px;
+//   box-shadow: var(--shadow-6);
+//   position: fixed;
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+//   width: 90vw;
+//   max-width: 500px;
+//   max-height: 85vh;
+//   padding: 25px;
+//   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+// .DialogContent:focus {
+//   outline: none;
+// }
+
+// .DialogTitle {
+//   margin: 0;
+//   font-weight: 500;
+//   color: var(--mauve-12);
+//   font-size: 17px;
+// }
+
+// .DialogDescription {
+//   margin: 10px 0 20px;
+//   color: var(--mauve-11);
+//   font-size: 15px;
+//   line-height: 1.5;
+// }
+
+// .Button {
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 15px;
+//   font-size: 15px;
+//   line-height: 1;
+//   font-weight: 500;
+//   height: 35px;
+//   user-select: none;
+// }
+// .Button:focus:not(:focus-visible) {
+//   outline: 0;
+// }
+// .Button:focus-visible {
+//   outline: 2px solid var(--violet-6);
+//   outline-offset: 1px;
+// }
+// .Button.violet {
+//   background-color: var(--violet-4);
+//   color: var(--violet-12);
+//   outline-color: var(--violet-6);
+// }
+// .Button.violet:hover {
+//   background-color: var(--mauve-3);
+// }
+// .Button.green {
+//   background-color: var(--green-4);
+//   color: var(--green-11);
+//   outline-color: var(--green-7);
+// }
+// .Button.green:hover {
+//   background-color: var(--green-5);
+// }
+
+// .IconButton {
+//   all: unset;
+//   font-family: inherit;
+//   border-radius: 100%;
+//   height: 25px;
+//   width: 25px;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   color: var(--violet-11);
+//   position: absolute;
+//   top: 10px;
+//   right: 10px;
+//   background-color: var(--gray-3);
+// }
+// .IconButton:hover {
+//   background-color: var(--violet-4);
+// }
+// .IconButton:focus {
+//   box-shadow: 0 0 0 2px var(--violet-7);
+// }
+
+// .Fieldset {
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// }
+
+// .Label {
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// }
+
+// .Input {
+//   width: 100%;
+//   flex: 1;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+// }
+// .Input:focus {
+//   box-shadow: 0 0 0 2px var(--violet-8);
+// }
+
+// @keyframes overlayShow {
+//   from {
+//     opacity: 0;
+//   }
+//   to {
+//     opacity: 1;
+//   }
+// }
+
+// @keyframes contentShow {
+//   from {
+//     opacity: 0;
+//     transform: translate(-50%, -48%) scale(0.96);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translate(-50%, -50%) scale(1);
+//   }
+// }
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button className='Button violet'>Edit profile</button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className='DialogOverlay' />
+        <Dialog.Content className='DialogContent'>
+          <Dialog.Title className='DialogTitle'>Edit profile</Dialog.Title>
+          <Dialog.Description className='DialogDescription'>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </Dialog.Description>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='name'>
+              Name
+            </label>
+            <input className='Input' id='name' defaultValue='Pedro Duarte' />
+          </fieldset>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='username'>
+              Username
+            </label>
+            <input className='Input' id='username' defaultValue='@peduarte' />
+          </fieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <button className='Button green'>Save changes</button>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <button className='IconButton' aria-label='Close'>
+              <Cross2Icon />
+            </button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// export default function FormPopup() {
+//   return (
+//     <div>
+//       <h1>FormPopup</h1>
+//     </div>
+//   );
+// }
+
+// FormPopup.propTypes = {
+//   promptText: PropTypes.string,
+//   placeholderText: PropTypes.string,
+//   submitButtonText: PropTypes.string,
+//   cancelButtonText: PropTypes.string,
+//   onSubmit: PropTypes.func,
+// };
+
+// FormPopup.defaultProps = {
+//   promptText: 'Prompt',
+//   placeholderText: 'Enter text here',
+//   submitButtonText: 'Submit',
+//   cancelButtonText: 'Cancel',
+// };
diff --git a/.history/src/common/components/FormPopup_20250226160350.jsx b/.history/src/common/components/FormPopup_20250226160350.jsx
new file mode 100644
index 00000000..f060ce31
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226160350.jsx
@@ -0,0 +1,188 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// Define styled components scoped to this component
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Edit profile</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Edit profile</StyledTitle>
+          <StyledDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </StyledDescription>
+          <StyledFieldset>
+            <StyledLabel htmlFor='name'>Name</StyledLabel>
+            <StyledInput id='name' defaultValue='Pedro Duarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='username'>Username</StyledLabel>
+            <StyledInput id='username' defaultValue='@peduarte' />
+          </StyledFieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <StyledButton className='green'>Save changes</StyledButton>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/.history/src/common/components/FormPopup_20250226173723.jsx b/.history/src/common/components/FormPopup_20250226173723.jsx
new file mode 100644
index 00000000..4f2e5361
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250226173723.jsx
@@ -0,0 +1,192 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// Define styled components scoped to this component
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Edit profile</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Edit profile</StyledTitle>
+          <StyledDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </StyledDescription>
+          <StyledFieldset>
+            <StyledLabel htmlFor='name'>Name</StyledLabel>
+            <StyledInput id='name' defaultValue='Pedro Duarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='username'>Username</StyledLabel>
+            <StyledInput id='username' defaultValue='@peduarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='itemName'>Item Name</StyledLabel>
+            <StyledInput id='itemName' defaultValue='Item' />
+          </StyledFieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <StyledButton className='green'>Save changes</StyledButton>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/.history/src/common/components/FormPopup_20250227222951.jsx b/.history/src/common/components/FormPopup_20250227222951.jsx
new file mode 100644
index 00000000..5554b428
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227222951.jsx
@@ -0,0 +1,207 @@
+import { default as PropTypes, default as React } from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// Define styled components scoped to this component
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Edit profile</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Edit profile</StyledTitle>
+          <StyledDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </StyledDescription>
+          <StyledFieldset>
+            <StyledLabel htmlFor='name'>Name</StyledLabel>
+            <StyledInput id='name' defaultValue='Pedro Duarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='username'>Username</StyledLabel>
+            <StyledInput id='username' defaultValue='@peduarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='itemName'>Item Name</StyledLabel>
+            <StyledInput id='itemName' defaultValue='Item' />
+          </StyledFieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <StyledButton className='green'>Save changes</StyledButton>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250227223057.jsx b/.history/src/common/components/FormPopup_20250227223057.jsx
new file mode 100644
index 00000000..989a5c34
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227223057.jsx
@@ -0,0 +1,208 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// Define styled components scoped to this component
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Edit profile</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Edit profile</StyledTitle>
+          <StyledDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </StyledDescription>
+          <StyledFieldset>
+            <StyledLabel htmlFor='name'>Name</StyledLabel>
+            <StyledInput id='name' defaultValue='Pedro Duarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='username'>Username</StyledLabel>
+            <StyledInput id='username' defaultValue='@peduarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='itemName'>Item Name</StyledLabel>
+            <StyledInput id='itemName' defaultValue='Item' />
+          </StyledFieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <StyledButton className='green'>Save changes</StyledButton>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250227223259.jsx b/.history/src/common/components/FormPopup_20250227223259.jsx
new file mode 100644
index 00000000..b6c73715
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227223259.jsx
@@ -0,0 +1,208 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Edit profile</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Edit profile</StyledTitle>
+          <StyledDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </StyledDescription>
+          <StyledFieldset>
+            <StyledLabel htmlFor='name'>Name</StyledLabel>
+            <StyledInput id='name' defaultValue='Pedro Duarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='username'>Username</StyledLabel>
+            <StyledInput id='username' defaultValue='@peduarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='itemName'>Item Name</StyledLabel>
+            <StyledInput id='itemName' defaultValue='Item' />
+          </StyledFieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <StyledButton className='green'>Save changes</StyledButton>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250227223652.jsx b/.history/src/common/components/FormPopup_20250227223652.jsx
new file mode 100644
index 00000000..59f71342
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227223652.jsx
@@ -0,0 +1,209 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Edit profile</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Edit profile</StyledTitle>
+          <StyledDescription>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </StyledDescription>
+          <StyledFieldset>
+            <StyledLabel htmlFor='name'>Name</StyledLabel>
+            <StyledInput id='name' defaultValue='Pedro Duarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='username'>Username</StyledLabel>
+            <StyledInput id='username' defaultValue='@peduarte' />
+          </StyledFieldset>
+          <StyledFieldset>
+            <StyledLabel htmlFor='itemName'>Item Name</StyledLabel>
+            <StyledInput id='itemName' defaultValue='Item' />
+          </StyledFieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <StyledButton className='green'>Save changes</StyledButton>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  promptText: PropTypes.string,
+  placeholderText: PropTypes.string,
+  submitButtonText: PropTypes.string,
+  cancelButtonText: PropTypes.string,
+  onSubmit: PropTypes.func,
+};
+
+FormPopup.defaultProps = {
+  promptText: 'Prompt',
+  placeholderText: 'Enter text here',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250227224428.jsx b/.history/src/common/components/FormPopup_20250227224428.jsx
new file mode 100644
index 00000000..172ab18b
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227224428.jsx
@@ -0,0 +1,196 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup({ title, description, children, onSubmit }) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <StyledButton className='green' type='submit'>
+                  Save changes
+                </StyledButton>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+};
diff --git a/.history/src/common/components/FormPopup_20250227232142.jsx b/.history/src/common/components/FormPopup_20250227232142.jsx
new file mode 100644
index 00000000..71c68680
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227232142.jsx
@@ -0,0 +1,204 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${(props) => props.width || '90vw'};
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  width,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent width={width}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <StyledButton className='green' type='submit'>
+                  Save changes
+                </StyledButton>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  width: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  width: '90vw',
+};
diff --git a/.history/src/common/components/FormPopup_20250227232255.jsx b/.history/src/common/components/FormPopup_20250227232255.jsx
new file mode 100644
index 00000000..7e48c6ac
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227232255.jsx
@@ -0,0 +1,204 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${(props) => props.width || '90vw'};
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  width,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={width}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <StyledButton className='green' type='submit'>
+                  Save changes
+                </StyledButton>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  width: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  width: '90vw',
+};
diff --git a/.history/src/common/components/FormPopup_20250227232338.jsx b/.history/src/common/components/FormPopup_20250227232338.jsx
new file mode 100644
index 00000000..71c68680
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227232338.jsx
@@ -0,0 +1,204 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${(props) => props.width || '90vw'};
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  width,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent width={width}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <StyledButton className='green' type='submit'>
+                  Save changes
+                </StyledButton>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  width: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  width: '90vw',
+};
diff --git a/.history/src/common/components/FormPopup_20250227232439.jsx b/.history/src/common/components/FormPopup_20250227232439.jsx
new file mode 100644
index 00000000..972323e5
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227232439.jsx
@@ -0,0 +1,204 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <StyledButton className='green' type='submit'>
+                  Save changes
+                </StyledButton>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+};
diff --git a/.history/src/common/components/FormPopup_20250227234152.jsx b/.history/src/common/components/FormPopup_20250227234152.jsx
new file mode 100644
index 00000000..ba1e3a32
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250227234152.jsx
@@ -0,0 +1,205 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--violet-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: var(--gray-3);
+  &:hover {
+    background-color: var(--violet-4);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <StyledButton className='green' type='submit'>
+                  Save changes
+                </StyledButton>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+};
diff --git a/.history/src/common/components/FormPopup_20250228142210.jsx b/.history/src/common/components/FormPopup_20250228142210.jsx
new file mode 100644
index 00000000..0620c9ad
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250228142210.jsx
@@ -0,0 +1,222 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <StyledButton className='green' type='submit'>
+                  Save changes
+                </StyledButton>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250228142433.jsx b/.history/src/common/components/FormPopup_20250228142433.jsx
new file mode 100644
index 00000000..da703881
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250228142433.jsx
@@ -0,0 +1,224 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <StyledButton className='green' type='submit'>
+                    Save changes
+                  </StyledButton>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250228142534.jsx b/.history/src/common/components/FormPopup_20250228142534.jsx
new file mode 100644
index 00000000..7b0dec0a
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250228142534.jsx
@@ -0,0 +1,225 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <StyledButton className='green' type='submit'>
+                    Save changes
+                  </StyledButton>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250228142801.jsx b/.history/src/common/components/FormPopup_20250228142801.jsx
new file mode 100644
index 00000000..122ff766
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250228142801.jsx
@@ -0,0 +1,225 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <StyledButton className='green' type='submit'>
+                    Save changes
+                  </StyledButton>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250228155411.jsx b/.history/src/common/components/FormPopup_20250228155411.jsx
new file mode 100644
index 00000000..f4263f72
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250228155411.jsx
@@ -0,0 +1,228 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <StyledButton className='green' type='submit'>
+                    Save changes
+                  </StyledButton>
+                  <StyledButton className='violet' type='submit'>
+                    Cancel
+                  </StyledButton>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250228155451.jsx b/.history/src/common/components/FormPopup_20250228155451.jsx
new file mode 100644
index 00000000..fc66c201
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250228155451.jsx
@@ -0,0 +1,230 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div>
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250228155641.jsx b/.history/src/common/components/FormPopup_20250228155641.jsx
new file mode 100644
index 00000000..a795b46c
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250228155641.jsx
@@ -0,0 +1,230 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div style={{ display: 'flex' }}>
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250228155955.jsx b/.history/src/common/components/FormPopup_20250228155955.jsx
new file mode 100644
index 00000000..89e1d401
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250228155955.jsx
@@ -0,0 +1,232 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301222736.jsx b/.history/src/common/components/FormPopup_20250301222736.jsx
new file mode 100644
index 00000000..e7a9c7d6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301222736.jsx
@@ -0,0 +1,231 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+//import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+
+/* reset */
+// button,
+// fieldset,
+// input {
+//   all: unset;
+// }
+
+// .DialogOverlay {
+//   background-color: var(--black-a9);
+//   position: fixed;
+//   inset: 0;
+//   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+
+// .DialogContent {
+//   background-color: var(--secondary-lightgrey);
+//   border-radius: 6px;
+//   box-shadow: var(--shadow-6);
+//   position: fixed;
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+//   width: 90vw;
+//   max-width: 500px;
+//   max-height: 85vh;
+//   padding: 25px;
+//   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+// }
+// .DialogContent:focus {
+//   outline: none;
+// }
+
+// .DialogTitle {
+//   margin: 0;
+//   font-weight: 500;
+//   color: var(--mauve-12);
+//   font-size: 17px;
+// }
+
+// .DialogDescription {
+//   margin: 10px 0 20px;
+//   color: var(--mauve-11);
+//   font-size: 15px;
+//   line-height: 1.5;
+// }
+
+// .Button {
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 15px;
+//   font-size: 15px;
+//   line-height: 1;
+//   font-weight: 500;
+//   height: 35px;
+//   user-select: none;
+// }
+// .Button:focus:not(:focus-visible) {
+//   outline: 0;
+// }
+// .Button:focus-visible {
+//   outline: 2px solid var(--violet-6);
+//   outline-offset: 1px;
+// }
+// .Button.violet {
+//   background-color: var(--violet-4);
+//   color: var(--violet-12);
+//   outline-color: var(--violet-6);
+// }
+// .Button.violet:hover {
+//   background-color: var(--mauve-3);
+// }
+// .Button.green {
+//   background-color: var(--green-4);
+//   color: var(--green-11);
+//   outline-color: var(--green-7);
+// }
+// .Button.green:hover {
+//   background-color: var(--green-5);
+// }
+
+// .IconButton {
+//   all: unset;
+//   font-family: inherit;
+//   border-radius: 100%;
+//   height: 25px;
+//   width: 25px;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   color: var(--violet-11);
+//   position: absolute;
+//   top: 10px;
+//   right: 10px;
+//   background-color: var(--gray-3);
+// }
+// .IconButton:hover {
+//   background-color: var(--violet-4);
+// }
+// .IconButton:focus {
+//   box-shadow: 0 0 0 2px var(--violet-7);
+// }
+
+// .Fieldset {
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// }
+
+// .Label {
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// }
+
+// .Input {
+//   width: 100%;
+//   flex: 1;
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+// }
+// .Input:focus {
+//   box-shadow: 0 0 0 2px var(--violet-8);
+// }
+
+// @keyframes overlayShow {
+//   from {
+//     opacity: 0;
+//   }
+//   to {
+//     opacity: 1;
+//   }
+// }
+
+// @keyframes contentShow {
+//   from {
+//     opacity: 0;
+//     transform: translate(-50%, -48%) scale(0.96);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translate(-50%, -50%) scale(1);
+//   }
+// }
+export default function FormPopup() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button className='Button violet'>Edit profile</button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className='DialogOverlay' />
+        <Dialog.Content className='DialogContent'>
+          <Dialog.Title className='DialogTitle'>Edit profile</Dialog.Title>
+          <Dialog.Description className='DialogDescription'>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </Dialog.Description>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='name'>
+              Name
+            </label>
+            <input className='Input' id='name' defaultValue='Pedro Duarte' />
+          </fieldset>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='username'>
+              Username
+            </label>
+            <input className='Input' id='username' defaultValue='@peduarte' />
+          </fieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <button className='Button green'>Save changes</button>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <button className='IconButton' aria-label='Close'>
+              <Cross2Icon />
+            </button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// export default function FormPopup() {
+//   return (
+//     <div>
+//       <h1>FormPopup</h1>
+//     </div>
+//   );
+// }
+
+// FormPopup.propTypes = {
+//   promptText: PropTypes.string,
+//   placeholderText: PropTypes.string,
+//   submitButtonText: PropTypes.string,
+//   cancelButtonText: PropTypes.string,
+//   onSubmit: PropTypes.func,
+// };
+
+// FormPopup.defaultProps = {
+//   promptText: 'Prompt',
+//   placeholderText: 'Enter text here',
+//   submitButtonText: 'Submit',
+//   cancelButtonText: 'Cancel',
+// };
diff --git a/.history/src/common/components/FormPopup_20250301223722.jsx b/.history/src/common/components/FormPopup_20250301223722.jsx
new file mode 100644
index 00000000..09581e45
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301223722.jsx
@@ -0,0 +1,238 @@
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+//import PropTypes from 'prop-types';
+// import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledFieldset = styled.fieldset`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+`;
+
+const StyledLabel = styled.label`
+  font-size: 15px;
+  color: var(--violet-11);
+  width: 90px;
+  text-align: right;
+`;
+
+const StyledInput = styled.input`
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--violet-11);
+  box-shadow: 0 0 0 1px var(--violet-7);
+  height: 35px;
+  &:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+  }
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button className='Button violet'>Edit profile</button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className='DialogOverlay' />
+        <Dialog.Content className='DialogContent'>
+          <Dialog.Title className='DialogTitle'>Edit profile</Dialog.Title>
+          <Dialog.Description className='DialogDescription'>
+            Make changes to your profile here. Click save when you&apos;re done.
+          </Dialog.Description>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='name'>
+              Name
+            </label>
+            <input className='Input' id='name' defaultValue='Pedro Duarte' />
+          </fieldset>
+          <fieldset className='Fieldset'>
+            <label className='Label' htmlFor='username'>
+              Username
+            </label>
+            <input className='Input' id='username' defaultValue='@peduarte' />
+          </fieldset>
+          <div
+            style={{
+              display: 'flex',
+              marginTop: 25,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <Dialog.Close asChild>
+              <button className='Button green'>Save changes</button>
+            </Dialog.Close>
+          </div>
+          <Dialog.Close asChild>
+            <button className='IconButton' aria-label='Close'>
+              <Cross2Icon />
+            </button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// export default function FormPopup() {
+//   return (
+//     <div>
+//       <h1>FormPopup</h1>
+//     </div>
+//   );
+// }
+
+// FormPopup.propTypes = {
+//   promptText: PropTypes.string,
+//   placeholderText: PropTypes.string,
+//   submitButtonText: PropTypes.string,
+//   cancelButtonText: PropTypes.string,
+//   onSubmit: PropTypes.func,
+// };
+
+// FormPopup.defaultProps = {
+//   promptText: 'Prompt',
+//   placeholderText: 'Enter text here',
+//   submitButtonText: 'Submit',
+//   cancelButtonText: 'Cancel',
+// };
diff --git a/.history/src/common/components/FormPopup_20250301223907.jsx b/.history/src/common/components/FormPopup_20250301223907.jsx
new file mode 100644
index 00000000..89e1d401
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301223907.jsx
@@ -0,0 +1,232 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: rgb(255, 74, 74); // same color from Figma
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: red; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230227.jsx b/.history/src/common/components/FormPopup_20250301230227.jsx
new file mode 100644
index 00000000..3c8c4da6
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230227.jsx
@@ -0,0 +1,232 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: white;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: white;
+  }
+
+  &:hover {
+    background-color: gray; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230243.jsx b/.history/src/common/components/FormPopup_20250301230243.jsx
new file mode 100644
index 00000000..291a0377
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230243.jsx
@@ -0,0 +1,232 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: white;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: gray; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230256.jsx b/.history/src/common/components/FormPopup_20250301230256.jsx
new file mode 100644
index 00000000..a34cff97
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230256.jsx
@@ -0,0 +1,232 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: gray; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230319.jsx b/.history/src/common/components/FormPopup_20250301230319.jsx
new file mode 100644
index 00000000..cf00ae26
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230319.jsx
@@ -0,0 +1,232 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    opacity: 0.8; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230352.jsx b/.history/src/common/components/FormPopup_20250301230352.jsx
new file mode 100644
index 00000000..8ace819f
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230352.jsx
@@ -0,0 +1,232 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230435.jsx b/.history/src/common/components/FormPopup_20250301230435.jsx
new file mode 100644
index 00000000..d93bdd6f
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230435.jsx
@@ -0,0 +1,236 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg > path {
+      height: 50px;
+      width: 50px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230524.jsx b/.history/src/common/components/FormPopup_20250301230524.jsx
new file mode 100644
index 00000000..20295ee2
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230524.jsx
@@ -0,0 +1,236 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.1s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg > path {
+      height: 50px;
+      width: 50px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230536.jsx b/.history/src/common/components/FormPopup_20250301230536.jsx
new file mode 100644
index 00000000..d93bdd6f
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230536.jsx
@@ -0,0 +1,236 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg > path {
+      height: 50px;
+      width: 50px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230548.jsx b/.history/src/common/components/FormPopup_20250301230548.jsx
new file mode 100644
index 00000000..caadb934
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230548.jsx
@@ -0,0 +1,236 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg {
+      height: 50px;
+      width: 50px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230603.jsx b/.history/src/common/components/FormPopup_20250301230603.jsx
new file mode 100644
index 00000000..27021434
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230603.jsx
@@ -0,0 +1,236 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg {
+      height: 42px;
+      width: 42px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230620.jsx b/.history/src/common/components/FormPopup_20250301230620.jsx
new file mode 100644
index 00000000..c40547b4
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230620.jsx
@@ -0,0 +1,236 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg {
+      height: 25px;
+      width: 25px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230654.jsx b/.history/src/common/components/FormPopup_20250301230654.jsx
new file mode 100644
index 00000000..d419e4ff
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230654.jsx
@@ -0,0 +1,237 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg {
+      height: 25px;
+      width: 25px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+    transition: 0.1s;
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230857.jsx b/.history/src/common/components/FormPopup_20250301230857.jsx
new file mode 100644
index 00000000..897d024b
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230857.jsx
@@ -0,0 +1,237 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg {
+      height: 25px;
+      width: 25px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+    transition: 1s;
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230907.jsx b/.history/src/common/components/FormPopup_20250301230907.jsx
new file mode 100644
index 00000000..26a4e967
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230907.jsx
@@ -0,0 +1,237 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg {
+      height: 25px;
+      width: 25px;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px red; // button appears a tad bigger when clicked
+    transition: 0.05s;
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301230952.jsx b/.history/src/common/components/FormPopup_20250301230952.jsx
new file mode 100644
index 00000000..ab3dd928
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301230952.jsx
@@ -0,0 +1,232 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg {
+      height: 25px;
+      width: 25px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301231315.jsx b/.history/src/common/components/FormPopup_20250301231315.jsx
new file mode 100644
index 00000000..bbeffab5
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301231315.jsx
@@ -0,0 +1,235 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+    svg {
+      height: 25px;
+      width: 25px;
+    }
+    svg > path {
+      stroke-width: 1px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301231612.jsx b/.history/src/common/components/FormPopup_20250301231612.jsx
new file mode 100644
index 00000000..08225a4b
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301231612.jsx
@@ -0,0 +1,235 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 25px;
+      width: 25px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301231621.jsx b/.history/src/common/components/FormPopup_20250301231621.jsx
new file mode 100644
index 00000000..2e7b3c0d
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301231621.jsx
@@ -0,0 +1,235 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 30px;
+      width: 230px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301231624.jsx b/.history/src/common/components/FormPopup_20250301231624.jsx
new file mode 100644
index 00000000..ac426433
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301231624.jsx
@@ -0,0 +1,235 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 30px;
+      width: 30px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250301231637.jsx b/.history/src/common/components/FormPopup_20250301231637.jsx
new file mode 100644
index 00000000..d824308c
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250301231637.jsx
@@ -0,0 +1,235 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{ display: 'flex', flexDirection: 'row-reverse' }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250302132932.jsx b/.history/src/common/components/FormPopup_20250302132932.jsx
new file mode 100644
index 00000000..9917e923
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302132932.jsx
@@ -0,0 +1,239 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='violet' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250302133127.jsx b/.history/src/common/components/FormPopup_20250302133127.jsx
new file mode 100644
index 00000000..662a3ef5
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302133127.jsx
@@ -0,0 +1,248 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title,
+  description,
+  children,
+  onSubmit,
+  maxWidth,
+  defaultSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      Save changes
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      Save changes
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+};
diff --git a/.history/src/common/components/FormPopup_20250302133317.jsx b/.history/src/common/components/FormPopup_20250302133317.jsx
new file mode 100644
index 00000000..a35d3e67
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302133317.jsx
@@ -0,0 +1,254 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup',
+  description = 'Form Desc.',
+  children,
+  onSubmit,
+  maxWidth = '500px',
+  defaultSubmit = true,
+  submitText = 'Submit',
+  cancelText = 'Cancel',
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      {cancelText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250302133535.jsx b/.history/src/common/components/FormPopup_20250302133535.jsx
new file mode 100644
index 00000000..ad3ff82a
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302133535.jsx
@@ -0,0 +1,255 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup',
+  description = 'Form Desc.',
+  children,
+  onSubmit,
+  maxWidth = '500px',
+  defaultSubmit = true,
+  submitText = 'Submit',
+  cancelText = 'Cancel',
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open Form</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      {cancelText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+};
diff --git a/.history/src/common/components/FormPopup_20250302133903.jsx b/.history/src/common/components/FormPopup_20250302133903.jsx
new file mode 100644
index 00000000..70ff58b2
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302133903.jsx
@@ -0,0 +1,258 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      {cancelText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+};
diff --git a/.history/src/common/components/FormPopup_20250302133954.jsx b/.history/src/common/components/FormPopup_20250302133954.jsx
new file mode 100644
index 00000000..f0f0667a
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302133954.jsx
@@ -0,0 +1,258 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      {cancelText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+};
diff --git a/.history/src/common/components/FormPopup_20250302134057.jsx b/.history/src/common/components/FormPopup_20250302134057.jsx
new file mode 100644
index 00000000..17c196ff
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302134057.jsx
@@ -0,0 +1,259 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children} {/* what will go in the form */}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      {cancelText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+};
diff --git a/.history/src/common/components/FormPopup_20250302134233.jsx b/.history/src/common/components/FormPopup_20250302134233.jsx
new file mode 100644
index 00000000..211ab24c
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302134233.jsx
@@ -0,0 +1,262 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children} {/* what will go in the form */}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      {cancelText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// Form title, children nodes, and onSubmit functionality are required. Title because
+// the user must know that the form does, children because the form must include some content, and
+// onSubmit because the form must do something when it is completed
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+};
+
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+};
diff --git a/.history/src/common/components/FormPopup_20250302134246.jsx b/.history/src/common/components/FormPopup_20250302134246.jsx
new file mode 100644
index 00000000..b0114bfe
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302134246.jsx
@@ -0,0 +1,263 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children} {/* what will go in the form */}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      {cancelText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// Form title, children nodes, and onSubmit functionality are required. Title because
+// the user must know that the form does, children because the form must include some content, and
+// onSubmit because the form must do something when it is completed
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+};
+
+// Reiteration of default values for the FormPopup component
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+};
diff --git a/.history/src/common/components/FormPopup_20250302134313.jsx b/.history/src/common/components/FormPopup_20250302134313.jsx
new file mode 100644
index 00000000..b0114bfe
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302134313.jsx
@@ -0,0 +1,263 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {children} {/* what will go in the form */}
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            {defaultSubmit && (
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className='green' type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <StyledButton className='red' type='submit'>
+                      {cancelText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            )}
+          </form>
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// Form title, children nodes, and onSubmit functionality are required. Title because
+// the user must know that the form does, children because the form must include some content, and
+// onSubmit because the form must do something when it is completed
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+};
+
+// Reiteration of default values for the FormPopup component
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+};
diff --git a/.history/src/common/components/FormPopup_20250302135329.jsx b/.history/src/common/components/FormPopup_20250302135329.jsx
new file mode 100644
index 00000000..126352ac
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302135329.jsx
@@ -0,0 +1,268 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+  customForm = false, // if false, then caller must provide input fields. If true, then caller must provide another form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          {!customForm && (
+            <form onSubmit={onSubmit}>
+              {children} {/* what will go in the form */}
+              {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+              {defaultSubmit && (
+                <div
+                  style={{
+                    display: 'flex',
+                    marginTop: 25,
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <Dialog.Close asChild>
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row-reverse',
+                        gap: '10px',
+                      }}
+                    >
+                      <StyledButton className='green' type='submit'>
+                        {submitText}
+                      </StyledButton>
+                      <StyledButton className='red' type='submit'>
+                        {cancelText}
+                      </StyledButton>
+                    </div>
+                  </Dialog.Close>
+                </div>
+              )}
+            </form>
+          )}
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// Form title, children nodes, and onSubmit functionality are required. Title because
+// the user must know that the form does, children because the form must include some content, and
+// onSubmit because the form must do something when it is completed
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+  customForm: PropTypes.bool,
+};
+
+// Reiteration of default values for the FormPopup component
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+  customForm: false,
+};
diff --git a/.history/src/common/components/FormPopup_20250302135447.jsx b/.history/src/common/components/FormPopup_20250302135447.jsx
new file mode 100644
index 00000000..e517d24d
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302135447.jsx
@@ -0,0 +1,269 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+  customForm = false, // if false, then caller must provide input fields. If true, then caller must provide another form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          {customForm && { children }}
+          {!customForm && (
+            <form onSubmit={onSubmit}>
+              {children} {/* what will go in the form */}
+              {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+              {defaultSubmit && (
+                <div
+                  style={{
+                    display: 'flex',
+                    marginTop: 25,
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <Dialog.Close asChild>
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row-reverse',
+                        gap: '10px',
+                      }}
+                    >
+                      <StyledButton className='green' type='submit'>
+                        {submitText}
+                      </StyledButton>
+                      <StyledButton className='red' type='submit'>
+                        {cancelText}
+                      </StyledButton>
+                    </div>
+                  </Dialog.Close>
+                </div>
+              )}
+            </form>
+          )}
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// Form title, children nodes, and onSubmit functionality are required. Title because
+// the user must know that the form does, children because the form must include some content, and
+// onSubmit because the form must do something when it is completed
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+  customForm: PropTypes.bool,
+};
+
+// Reiteration of default values for the FormPopup component
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+  customForm: false,
+};
diff --git a/.history/src/common/components/FormPopup_20250302135556.jsx b/.history/src/common/components/FormPopup_20250302135556.jsx
new file mode 100644
index 00000000..3e6e333b
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302135556.jsx
@@ -0,0 +1,269 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+  customForm = false, // if false, then caller must provide input fields. If true, then caller must provide another form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          {customForm && <div>{children}</div>}
+          {!customForm && (
+            <form onSubmit={onSubmit}>
+              {children} {/* what will go in the form */}
+              {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+              {defaultSubmit && (
+                <div
+                  style={{
+                    display: 'flex',
+                    marginTop: 25,
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <Dialog.Close asChild>
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row-reverse',
+                        gap: '10px',
+                      }}
+                    >
+                      <StyledButton className='green' type='submit'>
+                        {submitText}
+                      </StyledButton>
+                      <StyledButton className='red' type='submit'>
+                        {cancelText}
+                      </StyledButton>
+                    </div>
+                  </Dialog.Close>
+                </div>
+              )}
+            </form>
+          )}
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// Form title, children nodes, and onSubmit functionality are required. Title because
+// the user must know that the form does, children because the form must include some content, and
+// onSubmit because the form must do something when it is completed
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+  customForm: PropTypes.bool,
+};
+
+// Reiteration of default values for the FormPopup component
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+  customForm: false,
+};
diff --git a/.history/src/common/components/FormPopup_20250302135747.jsx b/.history/src/common/components/FormPopup_20250302135747.jsx
new file mode 100644
index 00000000..4e700811
--- /dev/null
+++ b/.history/src/common/components/FormPopup_20250302135747.jsx
@@ -0,0 +1,271 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled from 'styled-components';
+
+// MAKE SURE TO STYLE COMPONENT IN SAME FILE IT IS BEING EXPORTED FROM!!
+// Below is styling for FormPopup, translated from CSS to styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: var(--secondary-lightgrey);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+// Below is unused for now, may use later (leaving commented out, ignore until further notice)
+// const StyledFieldset = styled.fieldset`
+//   display: flex;
+//   gap: 20px;
+//   align-items: center;
+//   margin-bottom: 15px;
+// `;
+
+// const StyledLabel = styled.label`
+//   font-size: 15px;
+//   color: var(--violet-11);
+//   width: 90px;
+//   text-align: right;
+// `;
+
+// const StyledInput = styled.input`
+//   width: 100%;
+//   flex: 1;
+//   border-radius: 4px;
+//   padding: 0 10px;
+//   font-size: 15px;
+//   line-height: 1;
+//   color: var(--violet-11);
+//   box-shadow: 0 0 0 1px var(--violet-7);
+//   height: 35px;
+//   &:focus {
+//     box-shadow: 0 0 0 2px var(--violet-8);
+//   }
+// `;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function FormPopup({
+  title = 'Form Popup', // title of the form
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+  customForm = false, // if false, then caller must provide input fields. If true, then caller must provide another form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          {/* if custom form is true, then caller must be providing their own form (since form nested in a form is NOT allowed) */}
+          {customForm && <div>{children}</div>}
+          {/* if custom form is false, then caller is expecting to use supplied form (not providing their own) */}
+          {!customForm && (
+            <form onSubmit={onSubmit}>
+              {children} {/* what will go in the form */}
+              {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+              {defaultSubmit && (
+                <div
+                  style={{
+                    display: 'flex',
+                    marginTop: 25,
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <Dialog.Close asChild>
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row-reverse',
+                        gap: '10px',
+                      }}
+                    >
+                      <StyledButton className='green' type='submit'>
+                        {submitText}
+                      </StyledButton>
+                      <StyledButton className='red' type='submit'>
+                        {cancelText}
+                      </StyledButton>
+                    </div>
+                  </Dialog.Close>
+                </div>
+              )}
+            </form>
+          )}
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// Form title, children nodes, and onSubmit functionality are required. Title because
+// the user must know that the form does, children because the form must include some content, and
+// onSubmit because the form must do something when it is completed
+FormPopup.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  buttonText: PropTypes.string,
+  customForm: PropTypes.bool,
+};
+
+// Reiteration of default values for the FormPopup component
+FormPopup.defaultProps = {
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  buttonText: 'Open Form',
+  customForm: false,
+};
diff --git a/src/common/components/GoogleButton.jsx b/.history/src/common/components/GoogleButton_20250219202759.jsx
similarity index 100%
rename from src/common/components/GoogleButton.jsx
rename to .history/src/common/components/GoogleButton_20250219202759.jsx
diff --git a/.history/src/common/components/GoogleButton_20250226140618.jsx b/.history/src/common/components/GoogleButton_20250226140618.jsx
new file mode 100644
index 00000000..9cdb0157
--- /dev/null
+++ b/.history/src/common/components/GoogleButton_20250226140618.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    background-color: white;
+    border: 1px solid #e2e2e2;
+    border-radius: 4px;
+    padding: 8px 16px;
+    color: #5f6368;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+        background-color: #f8f9fa;
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #e8e8e8;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+`;
+
+const Divider = styled.div`
+    position: relative;
+    margin: 24px 0;
+    text-align: center;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background-color: #e2e2e2;
+    }
+
+    span {
+        position: relative;
+        background-color: white;
+        padding: 0 12px;
+        color: #666;
+        font-size: 14px;
+    }
+`;
+
+export default function GoogleButton({
+    isLoading,
+    onClick,
+    text = 'Sign in with Google',
+}) {
+    return (
+        <>
+            <Divider>
+                <span>Or continue with</span>
+            </Divider>
+            <StyledButton type='button' onClick={onClick} disabled={isLoading}>
+                <svg width='18' height='18' viewBox='0 0 24 24'>
+                    <path
+                        d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'
+                        fill='#4285F4'
+                    />
+                    <path
+                        d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'
+                        fill='#34A853'
+                    />
+                    <path
+                        d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'
+                        fill='#FBBC05'
+                    />
+                    <path
+                        d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'
+                        fill='#EA4335'
+                    />
+                </svg>
+                {text}
+            </StyledButton>
+        </>
+    );
+}
+
+GoogleButton.propTypes = {
+    isLoading: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    text: PropTypes.string,
+};
+
+GoogleButton.defaultProps = {
+    isLoading: false,
+    text: 'Sign in with Google',
+};
diff --git a/.history/src/common/components/GoogleButton_20250226152730.jsx b/.history/src/common/components/GoogleButton_20250226152730.jsx
new file mode 100644
index 00000000..c1758b7a
--- /dev/null
+++ b/.history/src/common/components/GoogleButton_20250226152730.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  background-color: white;
+  border: 1px solid #e2e2e2;
+  border-radius: 4px;
+  padding: 8px 16px;
+  color: #5f6368;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f8f9fa;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #e8e8e8;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const Divider = styled.div`
+  position: relative;
+  margin: 24px 0;
+  text-align: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: #e2e2e2;
+  }
+
+  span {
+    position: relative;
+    background-color: white;
+    padding: 0 12px;
+    color: #666;
+    font-size: 14px;
+  }
+`;
+
+export default function GoogleButton({
+  isLoading,
+  onClick,
+  text = 'Sign in with Google',
+}) {
+  return (
+    <>
+      <Divider>
+        <span>Or continue with</span>
+      </Divider>
+      <StyledButton type='button' onClick={onClick} disabled={isLoading}>
+        <svg width='18' height='18' viewBox='0 0 24 24'>
+          <path
+            d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'
+            fill='#4285F4'
+          />
+          <path
+            d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'
+            fill='#34A853'
+          />
+          <path
+            d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'
+            fill='#FBBC05'
+          />
+          <path
+            d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'
+            fill='#EA4335'
+          />
+        </svg>
+        {text}
+      </StyledButton>
+    </>
+  );
+}
+
+GoogleButton.propTypes = {
+  isLoading: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  text: PropTypes.string,
+};
+
+GoogleButton.defaultProps = {
+  isLoading: false,
+  text: 'Sign in with Google',
+};
diff --git a/.history/src/common/components/NewOrderForm_20250227224353.jsx b/.history/src/common/components/NewOrderForm_20250227224353.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/.history/src/common/components/NewOrderForm_20250227224458.jsx b/.history/src/common/components/NewOrderForm_20250227224458.jsx
new file mode 100644
index 00000000..94444083
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227224458.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  return (
+    <FormPopup
+      title='New Order'
+      description='Enter the details for the new order'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Order Name'
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <Input.Text
+        title='Order Description'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227224956.jsx b/.history/src/common/components/NewOrderForm_20250227224956.jsx
new file mode 100644
index 00000000..201faf1d
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227224956.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Order Name'
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <Input.Text
+        title='Order Description'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225143.jsx b/.history/src/common/components/NewOrderForm_20250227225143.jsx
new file mode 100644
index 00000000..c150b7a5
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225143.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <Input.Text
+        title='Order Description'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225328.jsx b/.history/src/common/components/NewOrderForm_20250227225328.jsx
new file mode 100644
index 00000000..f7851b8d
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225328.jsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225348.jsx b/.history/src/common/components/NewOrderForm_20250227225348.jsx
new file mode 100644
index 00000000..cf174728
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225348.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h1>hi</h1>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225414.jsx b/.history/src/common/components/NewOrderForm_20250227225414.jsx
new file mode 100644
index 00000000..d33787d2
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225414.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h3 style='color: blue;'>Hi</h3>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225516.jsx b/.history/src/common/components/NewOrderForm_20250227225516.jsx
new file mode 100644
index 00000000..58f6cbaf
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225516.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h3 style={{ color: 'blue' }}>Hi</h3>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225529.jsx b/.history/src/common/components/NewOrderForm_20250227225529.jsx
new file mode 100644
index 00000000..46c2307e
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225529.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue' }}>Hi</h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225613.jsx b/.history/src/common/components/NewOrderForm_20250227225613.jsx
new file mode 100644
index 00000000..81df4a7b
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225613.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '16px' }}>Hi</h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225635.jsx b/.history/src/common/components/NewOrderForm_20250227225635.jsx
new file mode 100644
index 00000000..e0797337
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225635.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px' }}>Hi</h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225709.jsx b/.history/src/common/components/NewOrderForm_20250227225709.jsx
new file mode 100644
index 00000000..3f421656
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225709.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px' }}>
+        Selected program budget: {{}}
+      </h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225721.jsx b/.history/src/common/components/NewOrderForm_20250227225721.jsx
new file mode 100644
index 00000000..52849e3b
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225721.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px' }}>
+        Selected program budget: 4
+      </h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225740.jsx b/.history/src/common/components/NewOrderForm_20250227225740.jsx
new file mode 100644
index 00000000..613e2337
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225740.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225812.jsx b/.history/src/common/components/NewOrderForm_20250227225812.jsx
new file mode 100644
index 00000000..a7c73495
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225812.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://SomeSite.com'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225821.jsx b/.history/src/common/components/NewOrderForm_20250227225821.jsx
new file mode 100644
index 00000000..7826d055
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225821.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://....com'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225841.jsx b/.history/src/common/components/NewOrderForm_20250227225841.jsx
new file mode 100644
index 00000000..f67aa682
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225841.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225926.jsx b/.history/src/common/components/NewOrderForm_20250227225926.jsx
new file mode 100644
index 00000000..f67aa682
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225926.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleOrderNameChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleOrderNameChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227225955.jsx b/.history/src/common/components/NewOrderForm_20250227225955.jsx
new file mode 100644
index 00000000..1348b4d2
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227225955.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230210.jsx b/.history/src/common/components/NewOrderForm_20250227230210.jsx
new file mode 100644
index 00000000..5e97347a
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230210.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='Enter order name'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230227.jsx b/.history/src/common/components/NewOrderForm_20250227230227.jsx
new file mode 100644
index 00000000..f9eb1c02
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230227.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230244.jsx b/.history/src/common/components/NewOrderForm_20250227230244.jsx
new file mode 100644
index 00000000..5722f1f1
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230244.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230408.jsx b/.history/src/common/components/NewOrderForm_20250227230408.jsx
new file mode 100644
index 00000000..3a15b7a2
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230408.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230530.jsx b/.history/src/common/components/NewOrderForm_20250227230530.jsx
new file mode 100644
index 00000000..75813afe
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230530.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='qty'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230539.jsx b/.history/src/common/components/NewOrderForm_20250227230539.jsx
new file mode 100644
index 00000000..5ea061c6
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230539.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity '
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230540.jsx b/.history/src/common/components/NewOrderForm_20250227230540.jsx
new file mode 100644
index 00000000..b395a194
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230540.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230559.jsx b/.history/src/common/components/NewOrderForm_20250227230559.jsx
new file mode 100644
index 00000000..be5c090d
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230559.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230614.jsx b/.history/src/common/components/NewOrderForm_20250227230614.jsx
new file mode 100644
index 00000000..22fd1134
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230614.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230746.jsx b/.history/src/common/components/NewOrderForm_20250227230746.jsx
new file mode 100644
index 00000000..ced8be80
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230746.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', { orderName, orderDescription });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Text Field */}
+      <Input.Text
+        title='Reason for buying (150 characters max)'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter order description'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230855.jsx b/.history/src/common/components/NewOrderForm_20250227230855.jsx
new file mode 100644
index 00000000..8df6d1c9
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230855.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'var(--violet-11)',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '100%',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'var(--violet-11)',
+            boxShadow: '0 0 0 1px var(--violet-7)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230910.jsx b/.history/src/common/components/NewOrderForm_20250227230910.jsx
new file mode 100644
index 00000000..583acb0a
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230910.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'var(--violet-11)',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: 'inherit',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'var(--violet-11)',
+            boxShadow: '0 0 0 1px var(--violet-7)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230930.jsx b/.history/src/common/components/NewOrderForm_20250227230930.jsx
new file mode 100644
index 00000000..57ebb488
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230930.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'var(--violet-11)',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'var(--violet-11)',
+            boxShadow: '0 0 0 1px var(--violet-7)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227230952.jsx b/.history/src/common/components/NewOrderForm_20250227230952.jsx
new file mode 100644
index 00000000..f5e982df
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227230952.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'var(--violet-11)',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'black',
+            boxShadow: '0 0 0 1px var(--violet-7)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227231035.jsx b/.history/src/common/components/NewOrderForm_20250227231035.jsx
new file mode 100644
index 00000000..246611d9
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227231035.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'var(--violet-11)',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'black',
+            border: 'solid 2px var(--text)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227231138.jsx b/.history/src/common/components/NewOrderForm_20250227231138.jsx
new file mode 100644
index 00000000..246611d9
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227231138.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'var(--violet-11)',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'black',
+            border: 'solid 2px var(--text)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227231210.jsx b/.history/src/common/components/NewOrderForm_20250227231210.jsx
new file mode 100644
index 00000000..03ef26fb
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227231210.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'black',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'black',
+            border: 'solid 2px var(--text)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227231922.jsx b/.history/src/common/components/NewOrderForm_20250227231922.jsx
new file mode 100644
index 00000000..03285d3d
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227231922.jsx
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      style={{ maxWidth: '60%' }}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'black',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'black',
+            border: 'solid 2px var(--text)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227231941.jsx b/.history/src/common/components/NewOrderForm_20250227231941.jsx
new file mode 100644
index 00000000..03ef26fb
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227231941.jsx
@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'black',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'black',
+            border: 'solid 2px var(--text)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227232212.jsx b/.history/src/common/components/NewOrderForm_20250227232212.jsx
new file mode 100644
index 00000000..900e3b76
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227232212.jsx
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      width='60%'
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'black',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'black',
+            border: 'solid 2px var(--text)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227232455.jsx b/.history/src/common/components/NewOrderForm_20250227232455.jsx
new file mode 100644
index 00000000..7b8740a6
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227232455.jsx
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  // const guidelinesLink = <Link />;
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='60%'
+    >
+      {/* Program Budget Field - Dropdown */}
+      <Input.Text
+        title='Select Program Budget '
+        value={orderName}
+        onChange={handleBudgetChange}
+        placeholder='REPLACE WITH DROPDOWN'
+        required
+      />
+      <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+        Selected program budget: 4
+      </h6>
+      {/* Link Field - Text Input */}
+      <Input.Text
+        title='Link to Purchase Item'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='https://ExampleSite.com'
+        required
+      />
+      {/* PPU Field - Text Input */}
+      <Input.Text
+        title='Price Per Unit'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='x.xx'
+        required
+      />
+      {/* Quantity Field - Text Input */}
+      <Input.Text
+        title='Quantity'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='Enter Quantity'
+        required
+      />
+      {/* Priority Level Field - Dropdown */}
+      <Input.Text
+        title='Priority Level'
+        value={orderDescription}
+        onChange={handleOrderDescriptionChange}
+        placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+        required
+      />
+      {/* Reason for Buying Field - Textarea */}
+      <div style={{ marginBottom: '15px' }}>
+        <label
+          htmlFor='reasonForBuying'
+          style={{
+            display: 'block',
+            fontSize: '15px',
+            color: 'black',
+          }}
+        >
+          Reason for buying (150 characters max)
+          <span style={{ color: 'red' }}>*</span>
+        </label>
+        <textarea
+          id='reasonForBuying'
+          value={reasonForBuying}
+          onChange={handleReasonForBuyingChange}
+          placeholder='Enter reason for buying'
+          required
+          style={{
+            width: '375px',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: '15px',
+            lineHeight: '1.5',
+            color: 'black',
+            border: 'solid 2px var(--text)',
+            height: '100px',
+            resize: 'vertical',
+          }}
+        />
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227232631.jsx b/.history/src/common/components/NewOrderForm_20250227232631.jsx
new file mode 100644
index 00000000..9abb4ebe
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227232631.jsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='60%'
+    >
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Program Budget Field - Dropdown */}
+          <Input.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4
+          </h6>
+          {/* Link Field - Text Input */}
+          <Input.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <Input.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </div>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Quantity Field - Text Input */}
+          <Input.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <Input.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <div style={{ marginBottom: '15px' }}>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'vertical',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227232700.jsx b/.history/src/common/components/NewOrderForm_20250227232700.jsx
new file mode 100644
index 00000000..5c959930
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227232700.jsx
@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='60%'
+    >
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Program Budget Field - Dropdown */}
+          <Input.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4
+          </h6>
+          {/* Link Field - Text Input */}
+          <Input.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <Input.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </div>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Quantity Field - Text Input */}
+          <Input.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <Input.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <div style={{ marginBottom: '15px' }}>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '375px',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'vertical',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227232739.jsx b/.history/src/common/components/NewOrderForm_20250227232739.jsx
new file mode 100644
index 00000000..b36487bd
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227232739.jsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='60%'
+    >
+      {/* Allows for 2 columns of 3 inputs */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Program Budget Field - Dropdown */}
+          <Input.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4
+          </h6>
+          {/* Link Field - Text Input */}
+          <Input.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <Input.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </div>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Quantity Field - Text Input */}
+          <Input.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <Input.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <div style={{ marginBottom: '15px' }}>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '375px',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'vertical',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227232819.jsx b/.history/src/common/components/NewOrderForm_20250227232819.jsx
new file mode 100644
index 00000000..efcf2808
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227232819.jsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='60%'
+    >
+      {/* Allows for 2 columns of 3 inputs */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Program Budget Field - Dropdown */}
+          <Input.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <Input.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <Input.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </div>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Quantity Field - Text Input */}
+          <Input.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <Input.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <div style={{ marginBottom: '15px' }}>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '375px',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'vertical',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227233033.jsx b/.history/src/common/components/NewOrderForm_20250227233033.jsx
new file mode 100644
index 00000000..9897b36c
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227233033.jsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='60%'
+    >
+      {/* Allows for 2 columns of 3 inputs */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Program Budget Field - Dropdown */}
+          <Input.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <Input.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <Input.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </div>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Quantity Field - Text Input */}
+          <Input.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <Input.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <div style={{ marginBottom: '15px' }}>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '375px',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227233134.jsx b/.history/src/common/components/NewOrderForm_20250227233134.jsx
new file mode 100644
index 00000000..fdfe1661
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227233134.jsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      {/* Allows for 2 columns of 3 inputs */}
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Program Budget Field - Dropdown */}
+          <Input.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <Input.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <Input.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </div>
+        <div style={{ flex: '1 1 45%' }}>
+          {/* Quantity Field - Text Input */}
+          <Input.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <Input.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <div style={{ marginBottom: '15px' }}>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '375px',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227234734.jsx b/.history/src/common/components/NewOrderForm_20250227234734.jsx
new file mode 100644
index 00000000..85da9b66
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227234734.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 768px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <Input.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <Input.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <Input.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <Input.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <Input.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '375px',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250227235707.jsx b/.history/src/common/components/NewOrderForm_20250227235707.jsx
new file mode 100644
index 00000000..3c59af55
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250227235707.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 768px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228000245.jsx b/.history/src/common/components/NewOrderForm_20250228000245.jsx
new file mode 100644
index 00000000..42c856d2
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228000245.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228000447.jsx b/.history/src/common/components/NewOrderForm_20250228000447.jsx
new file mode 100644
index 00000000..b2ca1636
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228000447.jsx
@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          >
+            <h6
+              style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}
+            >
+              Selected program budget: 4 BILLION
+            </h6>
+          </CustomInput.Text>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228000617.jsx b/.history/src/common/components/NewOrderForm_20250228000617.jsx
new file mode 100644
index 00000000..42c856d2
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228000617.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginBottom: '5px' }}>
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228000648.jsx b/.history/src/common/components/NewOrderForm_20250228000648.jsx
new file mode 100644
index 00000000..cbe7cf6c
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228000648.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6 style={{ color: 'blue', fontSize: '14px', marginTop: '-15px' }}>
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228000710.jsx b/.history/src/common/components/NewOrderForm_20250228000710.jsx
new file mode 100644
index 00000000..ff4c4f56
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228000710.jsx
@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6
+            style={{
+              color: 'blue',
+              fontSize: '14px',
+              marginTop: '-15px',
+              marginBottom: '15px',
+            }}
+          >
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228000742.jsx b/.history/src/common/components/NewOrderForm_20250228000742.jsx
new file mode 100644
index 00000000..0785573f
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228000742.jsx
@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6
+            style={{
+              color: 'blue',
+              fontSize: '14px',
+              marginTop: '-15px',
+              marginBottom: '5px',
+            }}
+          >
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228000803.jsx b/.history/src/common/components/NewOrderForm_20250228000803.jsx
new file mode 100644
index 00000000..e52a3894
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228000803.jsx
@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+    gap: 20px;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6
+            style={{
+              color: 'blue',
+              fontSize: '14px',
+              marginTop: '-15px',
+              marginBottom: '5px',
+            }}
+          >
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228000902.jsx b/.history/src/common/components/NewOrderForm_20250228000902.jsx
new file mode 100644
index 00000000..0785573f
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228000902.jsx
@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6
+            style={{
+              color: 'blue',
+              fontSize: '14px',
+              marginTop: '-15px',
+              marginBottom: '5px',
+            }}
+          >
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228002643.jsx b/.history/src/common/components/NewOrderForm_20250228002643.jsx
new file mode 100644
index 00000000..c164769d
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228002643.jsx
@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <h6
+            style={{
+              color: 'blue',
+              fontSize: '14px',
+              marginTop: '-15px',
+              marginBottom: '5px',
+              zIndex: '10',
+            }}
+          >
+            Selected program budget: 4 BILLION
+          </h6>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228002737.jsx b/.history/src/common/components/NewOrderForm_20250228002737.jsx
new file mode 100644
index 00000000..508c48f8
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228002737.jsx
@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <div>
+            <h6
+              style={{
+                color: 'blue',
+                fontSize: '14px',
+                marginTop: '-15px',
+                marginBottom: '5px',
+                zIndex: '10',
+              }}
+            >
+              Selected program budget: 4 BILLION
+            </h6>
+          </div>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228002802.jsx b/.history/src/common/components/NewOrderForm_20250228002802.jsx
new file mode 100644
index 00000000..25b26639
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228002802.jsx
@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <div style={{ position: 'relative' }}>
+            <h6
+              style={{
+                color: 'blue',
+                fontSize: '14px',
+                marginTop: '-15px',
+                marginBottom: '5px',
+                zIndex: '10',
+              }}
+            >
+              Selected program budget: 4 BILLION
+            </h6>
+          </div>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228002826.jsx b/.history/src/common/components/NewOrderForm_20250228002826.jsx
new file mode 100644
index 00000000..17a8505e
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228002826.jsx
@@ -0,0 +1,169 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <div style={{ position: 'relative', zIndex: '10' }}>
+            <h6
+              style={{
+                color: 'blue',
+                fontSize: '14px',
+                marginTop: '-15px',
+                marginBottom: '5px',
+                zIndex: '10',
+              }}
+            >
+              Selected program budget: 4 BILLION
+            </h6>
+          </div>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228002902.jsx b/.history/src/common/components/NewOrderForm_20250228002902.jsx
new file mode 100644
index 00000000..22a81604
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228002902.jsx
@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          {/* Program Budget Field - Dropdown */}
+          <CustomInput.Text
+            title='Select Program Budget '
+            value={orderName}
+            onChange={handleBudgetChange}
+            placeholder='REPLACE WITH DROPDOWN'
+            required
+          />
+          <div style={{ position: 'relative', zIndex: '10' }}>
+            <h6
+              style={{
+                color: 'blue',
+                fontSize: '14px',
+                marginTop: '-15px',
+                marginBottom: '5px',
+              }}
+            >
+              Selected program budget: 4 BILLION
+            </h6>
+          </div>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228003054.jsx b/.history/src/common/components/NewOrderForm_20250228003054.jsx
new file mode 100644
index 00000000..ea59b82c
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228003054.jsx
@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+const RelativeContainer = styled.div`
+  position: relative;
+`;
+
+const AbsoluteH6 = styled.h6`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  color: blue;
+  font-size: 14px;
+  margin-top: 5px;
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          <RelativeContainer>
+            {/* Program Budget Field - Dropdown */}
+            <CustomInput.Text
+              title='Select Program Budget '
+              value={orderName}
+              onChange={handleBudgetChange}
+              placeholder='REPLACE WITH DROPDOWN'
+              required
+            />
+            <AbsoluteH6>Selected program budget: 4 BILLION</AbsoluteH6>
+          </RelativeContainer>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228003121.jsx b/.history/src/common/components/NewOrderForm_20250228003121.jsx
new file mode 100644
index 00000000..d383d490
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228003121.jsx
@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+const RelativeContainer = styled.div`
+  position: relative;
+`;
+
+const AbsoluteH6 = styled.h6`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  color: blue;
+  font-size: 14px;
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+    >
+      <FormContainer>
+        <Column>
+          <RelativeContainer>
+            {/* Program Budget Field - Dropdown */}
+            <CustomInput.Text
+              title='Select Program Budget '
+              value={orderName}
+              onChange={handleBudgetChange}
+              placeholder='REPLACE WITH DROPDOWN'
+              required
+            />
+            <AbsoluteH6>Selected program budget: 4 BILLION</AbsoluteH6>
+          </RelativeContainer>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/NewOrderForm_20250228142655.jsx b/.history/src/common/components/NewOrderForm_20250228142655.jsx
new file mode 100644
index 00000000..35e739df
--- /dev/null
+++ b/.history/src/common/components/NewOrderForm_20250228142655.jsx
@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import { CustomInput } from './form/CustomInput';
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+    gap: 0px;
+  }
+`;
+
+const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+const RelativeContainer = styled.div`
+  position: relative;
+`;
+
+const AbsoluteH6 = styled.h6`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  color: blue;
+  font-size: 14px;
+`;
+
+export default function NewOrderForm() {
+  const [orderName, setOrderName] = useState('');
+  const [orderDescription, setOrderDescription] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+
+  const handleBudgetChange = (e) => setOrderName(e.target.value);
+  const handleOrderDescriptionChange = (e) =>
+    setOrderDescription(e.target.value);
+  const handleReasonForBuyingChange = (e) => setReasonForBuying(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle new order logic here
+    handleOrderDescriptionChange(' ');
+    console.log('New order created:', {
+      orderName,
+      orderDescription,
+      reasonForBuying,
+    });
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      maxWidth='50%'
+      defaultSubmit={true}
+    >
+      <FormContainer>
+        <Column>
+          <RelativeContainer>
+            {/* Program Budget Field - Dropdown */}
+            <CustomInput.Text
+              title='Select Program Budget '
+              value={orderName}
+              onChange={handleBudgetChange}
+              placeholder='REPLACE WITH DROPDOWN'
+              required
+            />
+            <AbsoluteH6>Selected program budget: 4 BILLION</AbsoluteH6>
+          </RelativeContainer>
+          {/* Link Field - Text Input */}
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {/* PPU Field - Text Input */}
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='x.xx'
+            required
+          />
+        </Column>
+        <Column>
+          {/* Quantity Field - Text Input */}
+          <CustomInput.Text
+            title='Quantity'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {/* Priority Level Field - Dropdown */}
+          <CustomInput.Text
+            title='Priority Level'
+            value={orderDescription}
+            onChange={handleOrderDescriptionChange}
+            placeholder='REPLACE WITH PRIORITY LEVEL DROPDOWN'
+            required
+          />
+          {/* Reason for Buying Field - Textarea */}
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+              style={{
+                width: '100%',
+                borderRadius: '4px',
+                padding: '10px',
+                fontSize: '15px',
+                lineHeight: '1.5',
+                color: 'black',
+                border: 'solid 2px var(--text)',
+                height: '100px',
+                resize: 'none',
+              }}
+            />
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226191220.jsx b/.history/src/common/components/OrderTable_20250226191220.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/.history/src/common/components/OrderTable_20250226191321.jsx b/.history/src/common/components/OrderTable_20250226191321.jsx
new file mode 100644
index 00000000..7415f91e
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226191321.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+
+const ProductTable = () => {
+  const products = [
+    {
+      id: 1,
+      name: 'Apple Watch',
+      price: '$350',
+      category: 'Accessories',
+      quantity: 7,
+    },
+    {
+      id: 2,
+      name: 'Fitness Watch',
+      price: '$100',
+      category: 'Fitness',
+      quantity: 23,
+    },
+    // Add more products as needed
+  ];
+
+  return (
+    <div className='card'>
+      <DataTable value={products} responsiveLayout='scroll'>
+        <Column field='name' header='Name' />
+        <Column field='price' header='Price' />
+        <Column field='category' header='Category' />
+        <Column field='quantity' header='Quantity' />
+      </DataTable>
+    </div>
+  );
+};
+
+export default ProductTable;
diff --git a/.history/src/common/components/OrderTable_20250226191425.jsx b/.history/src/common/components/OrderTable_20250226191425.jsx
new file mode 100644
index 00000000..26994b12
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226191425.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+
+export default function OrderTable() {
+  const products = [
+    {
+      id: 1,
+      name: 'Apple Watch',
+      price: '$350',
+      category: 'Accessories',
+      quantity: 7,
+    },
+    {
+      id: 2,
+      name: 'Fitness Watch',
+      price: '$100',
+      category: 'Fitness',
+      quantity: 23,
+    },
+    // Add more products as needed
+  ];
+  return (
+    <div className='card'>
+      <DataTable value={products} responsiveLayout='scroll'>
+        <Column field='name' header='Name' />
+        <Column field='price' header='Price' />
+        <Column field='category' header='Category' />
+        <Column field='quantity' header='Quantity' />
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226191741.jsx b/.history/src/common/components/OrderTable_20250226191741.jsx
new file mode 100644
index 00000000..7ae4e55b
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226191741.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+export default function TemplateDemo() {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    ProductService.getProductsMini().then((data) => setProducts(data));
+  }, []);
+
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  const imageBodyTemplate = (product) => {
+    return (
+      <img
+        src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`}
+        alt={product.image}
+        className='w-6rem shadow-2 border-round'
+      />
+    );
+  };
+
+  const priceBodyTemplate = (product) => {
+    return formatCurrency(product.price);
+  };
+
+  const ratingBodyTemplate = (product) => {
+    return <Rating value={product.rating} readOnly cancel={false} />;
+  };
+
+  const statusBodyTemplate = (product) => {
+    return (
+      <Tag
+        value={product.inventoryStatus}
+        severity={getSeverity(product)}
+      ></Tag>
+    );
+  };
+
+  const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+      case 'INSTOCK':
+        return 'success';
+
+      case 'LOWSTOCK':
+        return 'warning';
+
+      case 'OUTOFSTOCK':
+        return 'danger';
+
+      default:
+        return null;
+    }
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Products</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+  const footer = `In total there are ${products ? products.length : 0} products.`;
+
+  return (
+    <div className='card'>
+      <DataTable
+        value={products}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+      >
+        <Column field='name' header='Name'></Column>
+        <Column header='Image' body={imageBodyTemplate}></Column>
+        <Column field='price' header='Price' body={priceBodyTemplate}></Column>
+        <Column field='category' header='Category'></Column>
+        <Column
+          field='rating'
+          header='Reviews'
+          body={ratingBodyTemplate}
+        ></Column>
+        <Column header='Status' body={statusBodyTemplate}></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226191900.jsx b/.history/src/common/components/OrderTable_20250226191900.jsx
new file mode 100644
index 00000000..cdcd7863
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226191900.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+export default function TemplateDemo() {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    console.log('OrderTable mounted');
+  }, []);
+
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  const imageBodyTemplate = (product) => {
+    return (
+      <img
+        src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`}
+        alt={product.image}
+        className='w-6rem shadow-2 border-round'
+      />
+    );
+  };
+
+  const priceBodyTemplate = (product) => {
+    return formatCurrency(product.price);
+  };
+
+  const ratingBodyTemplate = (product) => {
+    return <Rating value={product.rating} readOnly cancel={false} />;
+  };
+
+  const statusBodyTemplate = (product) => {
+    return (
+      <Tag
+        value={product.inventoryStatus}
+        severity={getSeverity(product)}
+      ></Tag>
+    );
+  };
+
+  const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+      case 'INSTOCK':
+        return 'success';
+
+      case 'LOWSTOCK':
+        return 'warning';
+
+      case 'OUTOFSTOCK':
+        return 'danger';
+
+      default:
+        return null;
+    }
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Products</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+  const footer = `In total there are ${products ? products.length : 0} products.`;
+
+  return (
+    <div className='card'>
+      <DataTable
+        value={products}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+      >
+        <Column field='name' header='Name'></Column>
+        <Column header='Image' body={imageBodyTemplate}></Column>
+        <Column field='price' header='Price' body={priceBodyTemplate}></Column>
+        <Column field='category' header='Category'></Column>
+        <Column
+          field='rating'
+          header='Reviews'
+          body={ratingBodyTemplate}
+        ></Column>
+        <Column header='Status' body={statusBodyTemplate}></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226191910.jsx b/.history/src/common/components/OrderTable_20250226191910.jsx
new file mode 100644
index 00000000..9f831408
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226191910.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+export default function OrderTable() {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    console.log('OrderTable mounted');
+  }, []);
+
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  const imageBodyTemplate = (product) => {
+    return (
+      <img
+        src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`}
+        alt={product.image}
+        className='w-6rem shadow-2 border-round'
+      />
+    );
+  };
+
+  const priceBodyTemplate = (product) => {
+    return formatCurrency(product.price);
+  };
+
+  const ratingBodyTemplate = (product) => {
+    return <Rating value={product.rating} readOnly cancel={false} />;
+  };
+
+  const statusBodyTemplate = (product) => {
+    return (
+      <Tag
+        value={product.inventoryStatus}
+        severity={getSeverity(product)}
+      ></Tag>
+    );
+  };
+
+  const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+      case 'INSTOCK':
+        return 'success';
+
+      case 'LOWSTOCK':
+        return 'warning';
+
+      case 'OUTOFSTOCK':
+        return 'danger';
+
+      default:
+        return null;
+    }
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Products</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+  const footer = `In total there are ${products ? products.length : 0} products.`;
+
+  return (
+    <div className='card'>
+      <DataTable
+        value={products}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+      >
+        <Column field='name' header='Name'></Column>
+        <Column header='Image' body={imageBodyTemplate}></Column>
+        <Column field='price' header='Price' body={priceBodyTemplate}></Column>
+        <Column field='category' header='Category'></Column>
+        <Column
+          field='rating'
+          header='Reviews'
+          body={ratingBodyTemplate}
+        ></Column>
+        <Column header='Status' body={statusBodyTemplate}></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226192245.jsx b/.history/src/common/components/OrderTable_20250226192245.jsx
new file mode 100644
index 00000000..6ccf99ad
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226192245.jsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+import { ProductService } from './service/ProductService';
+
+export default function TemplateDemo() {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    ProductService.getProductsMini().then((data) => setProducts(data));
+  }, []);
+
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  const imageBodyTemplate = (product) => {
+    return (
+      <img
+        src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`}
+        alt={product.image}
+        className='w-6rem shadow-2 border-round'
+      />
+    );
+  };
+
+  const priceBodyTemplate = (product) => {
+    return formatCurrency(product.price);
+  };
+
+  const ratingBodyTemplate = (product) => {
+    return <Rating value={product.rating} readOnly cancel={false} />;
+  };
+
+  const statusBodyTemplate = (product) => {
+    return (
+      <Tag
+        value={product.inventoryStatus}
+        severity={getSeverity(product)}
+      ></Tag>
+    );
+  };
+
+  const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+      case 'INSTOCK':
+        return 'success';
+
+      case 'LOWSTOCK':
+        return 'warning';
+
+      case 'OUTOFSTOCK':
+        return 'danger';
+
+      default:
+        return null;
+    }
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Products</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+  const footer = `In total there are ${products ? products.length : 0} products.`;
+
+  return (
+    <div className='card'>
+      <DataTable
+        value={products}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+      >
+        <Column field='name' header='Name'></Column>
+        <Column header='Image' body={imageBodyTemplate}></Column>
+        <Column field='price' header='Price' body={priceBodyTemplate}></Column>
+        <Column field='category' header='Category'></Column>
+        <Column
+          field='rating'
+          header='Reviews'
+          body={ratingBodyTemplate}
+        ></Column>
+        <Column header='Status' body={statusBodyTemplate}></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226192313.jsx b/.history/src/common/components/OrderTable_20250226192313.jsx
new file mode 100644
index 00000000..7ae4e55b
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226192313.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+export default function TemplateDemo() {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    ProductService.getProductsMini().then((data) => setProducts(data));
+  }, []);
+
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  const imageBodyTemplate = (product) => {
+    return (
+      <img
+        src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`}
+        alt={product.image}
+        className='w-6rem shadow-2 border-round'
+      />
+    );
+  };
+
+  const priceBodyTemplate = (product) => {
+    return formatCurrency(product.price);
+  };
+
+  const ratingBodyTemplate = (product) => {
+    return <Rating value={product.rating} readOnly cancel={false} />;
+  };
+
+  const statusBodyTemplate = (product) => {
+    return (
+      <Tag
+        value={product.inventoryStatus}
+        severity={getSeverity(product)}
+      ></Tag>
+    );
+  };
+
+  const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+      case 'INSTOCK':
+        return 'success';
+
+      case 'LOWSTOCK':
+        return 'warning';
+
+      case 'OUTOFSTOCK':
+        return 'danger';
+
+      default:
+        return null;
+    }
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Products</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+  const footer = `In total there are ${products ? products.length : 0} products.`;
+
+  return (
+    <div className='card'>
+      <DataTable
+        value={products}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+      >
+        <Column field='name' header='Name'></Column>
+        <Column header='Image' body={imageBodyTemplate}></Column>
+        <Column field='price' header='Price' body={priceBodyTemplate}></Column>
+        <Column field='category' header='Category'></Column>
+        <Column
+          field='rating'
+          header='Reviews'
+          body={ratingBodyTemplate}
+        ></Column>
+        <Column header='Status' body={statusBodyTemplate}></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226192511.jsx b/.history/src/common/components/OrderTable_20250226192511.jsx
new file mode 100644
index 00000000..ad3c50e1
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226192511.jsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+import { ProductService } from './service/ProductService';
+
+export default function TemplateDemo() {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    ProductService.getProductsMini().then((data) => setProducts(data));
+  }, []);
+
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  const imageBodyTemplate = (product) => {
+    return (
+      <img
+        src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`}
+        alt={product.image}
+        className='w-6rem shadow-2 border-round'
+      />
+    );
+  };
+
+  const priceBodyTemplate = (product) => {
+    return formatCurrency(product.price);
+  };
+
+  const ratingBodyTemplate = (product) => {
+    return <Rating value={product.rating} readOnly cancel={false} />;
+  };
+
+  const statusBodyTemplate = (product) => {
+    return (
+      <Tag
+        value={product.inventoryStatus}
+        severity={getSeverity(product)}
+      ></Tag>
+    );
+  };
+
+  const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+      case 'INSTOCK':
+        return 'success';
+
+      case 'LOWSTOCK':
+        return 'warning';
+
+      case 'OUTOFSTOCK':
+        return 'danger';
+
+      default:
+        return null;
+    }
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Products</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+  const footer = `In total there are ${products ? products.length : 0} products.`;
+  console.log(products);
+  return (
+    <div className='card'>
+      <DataTable
+        value={products}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+      >
+        <Column field='name' header='Name'></Column>
+        <Column header='Image' body={imageBodyTemplate}></Column>
+        <Column field='price' header='Price' body={priceBodyTemplate}></Column>
+        <Column field='category' header='Category'></Column>
+        <Column
+          field='rating'
+          header='Reviews'
+          body={ratingBodyTemplate}
+        ></Column>
+        <Column header='Status' body={statusBodyTemplate}></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226192529.jsx b/.history/src/common/components/OrderTable_20250226192529.jsx
new file mode 100644
index 00000000..70c48ac2
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226192529.jsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+//import { ProductService } from './service/ProductService';
+
+export default function TemplateDemo() {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    console.log('hi');
+  }, []);
+
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  const imageBodyTemplate = (product) => {
+    return (
+      <img
+        src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`}
+        alt={product.image}
+        className='w-6rem shadow-2 border-round'
+      />
+    );
+  };
+
+  const priceBodyTemplate = (product) => {
+    return formatCurrency(product.price);
+  };
+
+  const ratingBodyTemplate = (product) => {
+    return <Rating value={product.rating} readOnly cancel={false} />;
+  };
+
+  const statusBodyTemplate = (product) => {
+    return (
+      <Tag
+        value={product.inventoryStatus}
+        severity={getSeverity(product)}
+      ></Tag>
+    );
+  };
+
+  const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+      case 'INSTOCK':
+        return 'success';
+
+      case 'LOWSTOCK':
+        return 'warning';
+
+      case 'OUTOFSTOCK':
+        return 'danger';
+
+      default:
+        return null;
+    }
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Products</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+  const footer = `In total there are ${products ? products.length : 0} products.`;
+  console.log(products);
+  return (
+    <div className='card'>
+      <DataTable
+        value={products}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+      >
+        <Column field='name' header='Name'></Column>
+        <Column header='Image' body={imageBodyTemplate}></Column>
+        <Column field='price' header='Price' body={priceBodyTemplate}></Column>
+        <Column field='category' header='Category'></Column>
+        <Column
+          field='rating'
+          header='Reviews'
+          body={ratingBodyTemplate}
+        ></Column>
+        <Column header='Status' body={statusBodyTemplate}></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226193514.jsx b/.history/src/common/components/OrderTable_20250226193514.jsx
new file mode 100644
index 00000000..60b28f40
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226193514.jsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+//import { ProductService } from './service/ProductService';
+
+export default function TemplateDemo() {
+  const [products, setProducts] = useState([]);
+
+  // useEffect gets called after the initial render
+  useEffect(() => {
+    console.log('hi');
+  }, []); // Empty dependency array means it runs only once after the initial render
+
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  const imageBodyTemplate = (product) => {
+    return (
+      <img
+        src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`}
+        alt={product.image}
+        className='w-6rem shadow-2 border-round'
+      />
+    );
+  };
+
+  const priceBodyTemplate = (product) => {
+    return formatCurrency(product.price);
+  };
+
+  const ratingBodyTemplate = (product) => {
+    return <Rating value={product.rating} readOnly cancel={false} />;
+  };
+
+  const statusBodyTemplate = (product) => {
+    return (
+      <Tag
+        value={product.inventoryStatus}
+        severity={getSeverity(product)}
+      ></Tag>
+    );
+  };
+
+  const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+      case 'INSTOCK':
+        return 'success';
+
+      case 'LOWSTOCK':
+        return 'warning';
+
+      case 'OUTOFSTOCK':
+        return 'danger';
+
+      default:
+        return null;
+    }
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Products</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+  const footer = `In total there are ${products ? products.length : 0} products.`;
+  console.log(products);
+  return (
+    <div className='card'>
+      <DataTable
+        value={products}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+      >
+        <Column field='name' header='Name'></Column>
+        <Column header='Image' body={imageBodyTemplate}></Column>
+        <Column field='price' header='Price' body={priceBodyTemplate}></Column>
+        <Column field='category' header='Category'></Column>
+        <Column
+          field='rating'
+          header='Reviews'
+          body={ratingBodyTemplate}
+        ></Column>
+        <Column header='Status' body={statusBodyTemplate}></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226194119.jsx b/.history/src/common/components/OrderTable_20250226194119.jsx
new file mode 100644
index 00000000..6efc6ae2
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226194119.jsx
@@ -0,0 +1,276 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Tag } from 'primereact/tag';
+
+export default function InventoryTable() {
+  const [items, setItems] = useState([]);
+
+  // Mock data – in real usage, you might fetch from an API
+  useEffect(() => {
+    // Example data closely matching your screenshot
+    const mockData = [
+      {
+        orderName: 'Drum Pads',
+        reasonForBuying: 'Description',
+        price: 50,
+        itemLink: 'https://example.com/drum-pads',
+        status: 'Approved',
+        priorityLevel: '< 2 weeks',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '10/20/2025',
+        specialization: 'Music',
+        program: 'Private Therapy',
+        therapistName: 'John Doe',
+      },
+      {
+        orderName: 'Crayola Markers variety pack (24 pack)',
+        reasonForBuying: 'Description',
+        price: 10,
+        itemLink: 'https://example.com/crayola-markers',
+        status: 'Denied',
+        priorityLevel: '< 2 weeks',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '10/20/2025',
+        specialization: 'Art',
+        program: 'CXC',
+        therapistName: 'Jeffrey Lee',
+      },
+      {
+        orderName: 'Guitar',
+        reasonForBuying: 'Description',
+        price: 90,
+        itemLink: 'https://example.com/guitar',
+        status: 'Denied',
+        priorityLevel: 'Regular',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '01/10/2025',
+        specialization: 'Music',
+        program: 'Community Partner',
+        therapistName: 'Jane Doe',
+      },
+      {
+        orderName: 'Piano',
+        reasonForBuying: 'Hat', // Not sure if "Hat" was a placeholder in your screenshot
+        price: 140,
+        itemLink: 'https://example.com/piano',
+        status: 'Purchased',
+        priorityLevel: '< 2 weeks',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '02/15/2025',
+        specialization: 'Art',
+        program: 'CXC',
+        therapistName: 'Carl X CK',
+      },
+      {
+        orderName: 'Diapers',
+        reasonForBuying: 'Description',
+        price: 15,
+        itemLink: 'https://example.com/diapers',
+        status: 'Purchased',
+        priorityLevel: 'Regular',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '03/01/2025',
+        specialization: 'Music',
+        program: 'Private Therapy',
+        therapistName: 'Branden Grena',
+      },
+      {
+        orderName: 'Pencils',
+        reasonForBuying: 'Description',
+        price: 15,
+        itemLink: 'https://example.com/pencils',
+        status: 'Denied',
+        priorityLevel: 'Regular',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '01/01/2025',
+        specialization: 'Art',
+        program: 'CXC',
+        therapistName: 'Billie Eilish',
+      },
+      {
+        orderName: 'Foam Slime',
+        reasonForBuying: 'Description',
+        price: 45,
+        itemLink: 'https://example.com/foam-slime',
+        status: 'Denied',
+        priorityLevel: 'Regular',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '01/02/2025',
+        specialization: 'Music',
+        program: 'Community Partner',
+        therapistName: 'John Doe',
+      },
+      {
+        orderName: 'Clown-themed Ballet Shoes',
+        reasonForBuying: 'Description',
+        price: 1000,
+        itemLink: 'https://example.com/clown-ballet-shoes',
+        status: 'Purchased',
+        priorityLevel: '< 2 weeks',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '09/12/2025',
+        specialization: 'Art',
+        program: 'CXC',
+        therapistName: 'Jeffrey Lee',
+      },
+      {
+        orderName: 'Macbook Pro',
+        reasonForBuying: 'Description',
+        price: 1500,
+        itemLink: 'https://example.com/macbook-pro',
+        status: 'Approved',
+        priorityLevel: 'Ready to Go',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '01/02/2025',
+        specialization: 'Music',
+        program: 'Private Therapy',
+        therapistName: 'Billie Eilish',
+      },
+    ];
+    setItems(mockData);
+  }, []);
+
+  // Format currency for Price column
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  // Body templates
+  const priceBodyTemplate = (rowData) => {
+    return formatCurrency(rowData.price);
+  };
+
+  const linkBodyTemplate = (rowData) => {
+    return (
+      <a href={rowData.itemLink} target='_blank' rel='noreferrer'>
+        Link
+      </a>
+    );
+  };
+
+  const statusBodyTemplate = (rowData) => {
+    return (
+      <Tag
+        value={rowData.status}
+        severity={getStatusSeverity(rowData.status)}
+      />
+    );
+  };
+
+  // Customize tag colors based on status
+  const getStatusSeverity = (status) => {
+    switch (status) {
+      case 'Approved':
+      case 'Ready to Go':
+        return 'success';
+      case 'Denied':
+        return 'danger';
+      case 'Purchased':
+        return 'info';
+      default:
+        return null;
+    }
+  };
+
+  // Priority tag (like "< 2 weeks" or "Ready to Go")
+  const priorityBodyTemplate = (rowData) => {
+    return (
+      <Tag
+        value={rowData.priorityLevel}
+        severity={getPrioritySeverity(rowData.priorityLevel)}
+      />
+    );
+  };
+
+  // Customize tag colors based on priority
+  const getPrioritySeverity = (priority) => {
+    if (priority === '< 2 weeks') return 'warning';
+    if (priority === 'Ready to Go') return 'success';
+    // default or 'Regular'
+    return null;
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Inventory Items</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+
+  const footer = `In total there are ${items ? items.length : 0} items.`;
+
+  return (
+    <div className='card'>
+      <DataTable
+        value={items}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+        responsiveLayout='scroll'
+      >
+        <Column
+          field='orderName'
+          header='Order Name'
+          style={{ width: '15rem' }}
+        ></Column>
+        <Column
+          field='reasonForBuying'
+          header='Reason for Buying'
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='price'
+          header='Price'
+          body={priceBodyTemplate}
+          style={{ width: '8rem' }}
+        ></Column>
+        <Column
+          header='Item Link'
+          body={linkBodyTemplate}
+          style={{ width: '8rem' }}
+        ></Column>
+        <Column
+          header='Status'
+          body={statusBodyTemplate}
+          style={{ width: '8rem' }}
+        ></Column>
+        <Column
+          header='Priority Level'
+          body={priorityBodyTemplate}
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='trackingNumber'
+          header='Tracking Number'
+          style={{ width: '12rem' }}
+        ></Column>
+        <Column
+          field='requestDate'
+          header='Request Date'
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='specialization'
+          header='Specialization'
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='program'
+          header='Program'
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='therapistName'
+          header='Therapist Name'
+          style={{ width: '12rem' }}
+        ></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/OrderTable_20250226202941.jsx b/.history/src/common/components/OrderTable_20250226202941.jsx
new file mode 100644
index 00000000..6efc6ae2
--- /dev/null
+++ b/.history/src/common/components/OrderTable_20250226202941.jsx
@@ -0,0 +1,276 @@
+import React, { useEffect, useState } from 'react';
+
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Tag } from 'primereact/tag';
+
+export default function InventoryTable() {
+  const [items, setItems] = useState([]);
+
+  // Mock data – in real usage, you might fetch from an API
+  useEffect(() => {
+    // Example data closely matching your screenshot
+    const mockData = [
+      {
+        orderName: 'Drum Pads',
+        reasonForBuying: 'Description',
+        price: 50,
+        itemLink: 'https://example.com/drum-pads',
+        status: 'Approved',
+        priorityLevel: '< 2 weeks',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '10/20/2025',
+        specialization: 'Music',
+        program: 'Private Therapy',
+        therapistName: 'John Doe',
+      },
+      {
+        orderName: 'Crayola Markers variety pack (24 pack)',
+        reasonForBuying: 'Description',
+        price: 10,
+        itemLink: 'https://example.com/crayola-markers',
+        status: 'Denied',
+        priorityLevel: '< 2 weeks',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '10/20/2025',
+        specialization: 'Art',
+        program: 'CXC',
+        therapistName: 'Jeffrey Lee',
+      },
+      {
+        orderName: 'Guitar',
+        reasonForBuying: 'Description',
+        price: 90,
+        itemLink: 'https://example.com/guitar',
+        status: 'Denied',
+        priorityLevel: 'Regular',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '01/10/2025',
+        specialization: 'Music',
+        program: 'Community Partner',
+        therapistName: 'Jane Doe',
+      },
+      {
+        orderName: 'Piano',
+        reasonForBuying: 'Hat', // Not sure if "Hat" was a placeholder in your screenshot
+        price: 140,
+        itemLink: 'https://example.com/piano',
+        status: 'Purchased',
+        priorityLevel: '< 2 weeks',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '02/15/2025',
+        specialization: 'Art',
+        program: 'CXC',
+        therapistName: 'Carl X CK',
+      },
+      {
+        orderName: 'Diapers',
+        reasonForBuying: 'Description',
+        price: 15,
+        itemLink: 'https://example.com/diapers',
+        status: 'Purchased',
+        priorityLevel: 'Regular',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '03/01/2025',
+        specialization: 'Music',
+        program: 'Private Therapy',
+        therapistName: 'Branden Grena',
+      },
+      {
+        orderName: 'Pencils',
+        reasonForBuying: 'Description',
+        price: 15,
+        itemLink: 'https://example.com/pencils',
+        status: 'Denied',
+        priorityLevel: 'Regular',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '01/01/2025',
+        specialization: 'Art',
+        program: 'CXC',
+        therapistName: 'Billie Eilish',
+      },
+      {
+        orderName: 'Foam Slime',
+        reasonForBuying: 'Description',
+        price: 45,
+        itemLink: 'https://example.com/foam-slime',
+        status: 'Denied',
+        priorityLevel: 'Regular',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '01/02/2025',
+        specialization: 'Music',
+        program: 'Community Partner',
+        therapistName: 'John Doe',
+      },
+      {
+        orderName: 'Clown-themed Ballet Shoes',
+        reasonForBuying: 'Description',
+        price: 1000,
+        itemLink: 'https://example.com/clown-ballet-shoes',
+        status: 'Purchased',
+        priorityLevel: '< 2 weeks',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '09/12/2025',
+        specialization: 'Art',
+        program: 'CXC',
+        therapistName: 'Jeffrey Lee',
+      },
+      {
+        orderName: 'Macbook Pro',
+        reasonForBuying: 'Description',
+        price: 1500,
+        itemLink: 'https://example.com/macbook-pro',
+        status: 'Approved',
+        priorityLevel: 'Ready to Go',
+        trackingNumber: 'xxx-xxx-xxx-xxxx',
+        requestDate: '01/02/2025',
+        specialization: 'Music',
+        program: 'Private Therapy',
+        therapistName: 'Billie Eilish',
+      },
+    ];
+    setItems(mockData);
+  }, []);
+
+  // Format currency for Price column
+  const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    });
+  };
+
+  // Body templates
+  const priceBodyTemplate = (rowData) => {
+    return formatCurrency(rowData.price);
+  };
+
+  const linkBodyTemplate = (rowData) => {
+    return (
+      <a href={rowData.itemLink} target='_blank' rel='noreferrer'>
+        Link
+      </a>
+    );
+  };
+
+  const statusBodyTemplate = (rowData) => {
+    return (
+      <Tag
+        value={rowData.status}
+        severity={getStatusSeverity(rowData.status)}
+      />
+    );
+  };
+
+  // Customize tag colors based on status
+  const getStatusSeverity = (status) => {
+    switch (status) {
+      case 'Approved':
+      case 'Ready to Go':
+        return 'success';
+      case 'Denied':
+        return 'danger';
+      case 'Purchased':
+        return 'info';
+      default:
+        return null;
+    }
+  };
+
+  // Priority tag (like "< 2 weeks" or "Ready to Go")
+  const priorityBodyTemplate = (rowData) => {
+    return (
+      <Tag
+        value={rowData.priorityLevel}
+        severity={getPrioritySeverity(rowData.priorityLevel)}
+      />
+    );
+  };
+
+  // Customize tag colors based on priority
+  const getPrioritySeverity = (priority) => {
+    if (priority === '< 2 weeks') return 'warning';
+    if (priority === 'Ready to Go') return 'success';
+    // default or 'Regular'
+    return null;
+  };
+
+  const header = (
+    <div className='flex flex-wrap align-items-center justify-content-between gap-2'>
+      <span className='text-xl text-900 font-bold'>Inventory Items</span>
+      <Button icon='pi pi-refresh' rounded raised />
+    </div>
+  );
+
+  const footer = `In total there are ${items ? items.length : 0} items.`;
+
+  return (
+    <div className='card'>
+      <DataTable
+        value={items}
+        header={header}
+        footer={footer}
+        tableStyle={{ minWidth: '60rem' }}
+        responsiveLayout='scroll'
+      >
+        <Column
+          field='orderName'
+          header='Order Name'
+          style={{ width: '15rem' }}
+        ></Column>
+        <Column
+          field='reasonForBuying'
+          header='Reason for Buying'
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='price'
+          header='Price'
+          body={priceBodyTemplate}
+          style={{ width: '8rem' }}
+        ></Column>
+        <Column
+          header='Item Link'
+          body={linkBodyTemplate}
+          style={{ width: '8rem' }}
+        ></Column>
+        <Column
+          header='Status'
+          body={statusBodyTemplate}
+          style={{ width: '8rem' }}
+        ></Column>
+        <Column
+          header='Priority Level'
+          body={priorityBodyTemplate}
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='trackingNumber'
+          header='Tracking Number'
+          style={{ width: '12rem' }}
+        ></Column>
+        <Column
+          field='requestDate'
+          header='Request Date'
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='specialization'
+          header='Specialization'
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='program'
+          header='Program'
+          style={{ width: '10rem' }}
+        ></Column>
+        <Column
+          field='therapistName'
+          header='Therapist Name'
+          style={{ width: '12rem' }}
+        ></Column>
+      </DataTable>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250227224350.jsx b/.history/src/common/components/PasswordChangeForm_20250227224350.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/.history/src/common/components/PasswordChangeForm_20250227224538.jsx b/.history/src/common/components/PasswordChangeForm_20250227224538.jsx
new file mode 100644
index 00000000..b683be94
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250227224538.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function PasswordChangeForm() {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+
+  const handleCurrentPasswordChange = (e) => setCurrentPassword(e.target.value);
+  const handleNewPasswordChange = (e) => setNewPassword(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password change logic here
+    console.log('Password changed:', { currentPassword, newPassword });
+  };
+
+  return (
+    <FormPopup
+      title='Change Password'
+      description='Enter your current and new password'
+      onSubmit={handleSubmit}
+    >
+      <Input.Password
+        title='Current Password'
+        value={currentPassword}
+        onChange={handleCurrentPasswordChange}
+        placeholder='Enter current password'
+        required
+      />
+      <Input.Password
+        title='New Password'
+        value={newPassword}
+        onChange={handleNewPasswordChange}
+        placeholder='Enter new password'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250227235222.jsx b/.history/src/common/components/PasswordChangeForm_20250227235222.jsx
new file mode 100644
index 00000000..b683be94
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250227235222.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function PasswordChangeForm() {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+
+  const handleCurrentPasswordChange = (e) => setCurrentPassword(e.target.value);
+  const handleNewPasswordChange = (e) => setNewPassword(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password change logic here
+    console.log('Password changed:', { currentPassword, newPassword });
+  };
+
+  return (
+    <FormPopup
+      title='Change Password'
+      description='Enter your current and new password'
+      onSubmit={handleSubmit}
+    >
+      <Input.Password
+        title='Current Password'
+        value={currentPassword}
+        onChange={handleCurrentPasswordChange}
+        placeholder='Enter current password'
+        required
+      />
+      <Input.Password
+        title='New Password'
+        value={newPassword}
+        onChange={handleNewPasswordChange}
+        placeholder='Enter new password'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250227235226.jsx b/.history/src/common/components/PasswordChangeForm_20250227235226.jsx
new file mode 100644
index 00000000..b683be94
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250227235226.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import FormPopup from './FormPopup';
+import { Input } from './form/Input';
+
+export default function PasswordChangeForm() {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+
+  const handleCurrentPasswordChange = (e) => setCurrentPassword(e.target.value);
+  const handleNewPasswordChange = (e) => setNewPassword(e.target.value);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password change logic here
+    console.log('Password changed:', { currentPassword, newPassword });
+  };
+
+  return (
+    <FormPopup
+      title='Change Password'
+      description='Enter your current and new password'
+      onSubmit={handleSubmit}
+    >
+      <Input.Password
+        title='Current Password'
+        value={currentPassword}
+        onChange={handleCurrentPasswordChange}
+        placeholder='Enter current password'
+        required
+      />
+      <Input.Password
+        title='New Password'
+        value={newPassword}
+        onChange={handleNewPasswordChange}
+        placeholder='Enter new password'
+        required
+      />
+    </FormPopup>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228141745.jsx b/.history/src/common/components/PasswordChangeForm_20250228141745.jsx
new file mode 100644
index 00000000..6ecab642
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228141745.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from './FormPopup';
+import ResetPassword from './ResetPassword';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+const TriggerButton = styled.button`
+  padding: 10px 20px;
+  font-size: 16px;
+  color: white;
+  background-color: var(--violet-4);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--violet-6);
+  }
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+        >
+          <ResetPassword />
+        </FormPopup>
+        <TriggerButton>Reset Password</TriggerButton>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228141934.jsx b/.history/src/common/components/PasswordChangeForm_20250228141934.jsx
new file mode 100644
index 00000000..e5da0e86
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228141934.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+const TriggerButton = styled.button`
+  padding: 10px 20px;
+  font-size: 16px;
+  color: white;
+  background-color: var(--violet-4);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--violet-6);
+  }
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+        >
+          <ResetPassword />
+        </FormPopup>
+        <TriggerButton>Reset Password</TriggerButton>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228142029.jsx b/.history/src/common/components/PasswordChangeForm_20250228142029.jsx
new file mode 100644
index 00000000..f3883bcc
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228142029.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+const TriggerButton = styled.button`
+  padding: 10px 20px;
+  font-size: 16px;
+  color: white;
+  background-color: var(--violet-4);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--violet-6);
+  }
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+        >
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228142547.jsx b/.history/src/common/components/PasswordChangeForm_20250228142547.jsx
new file mode 100644
index 00000000..a5f4d8b5
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228142547.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+        >
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228151050.jsx b/.history/src/common/components/PasswordChangeForm_20250228151050.jsx
new file mode 100644
index 00000000..9217f805
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228151050.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+        >
+          <ResetPassword />
+          <Button type='submit'>{'Cancel Password'}</Button>
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228151113.jsx b/.history/src/common/components/PasswordChangeForm_20250228151113.jsx
new file mode 100644
index 00000000..a5f4d8b5
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228151113.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+        >
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228152629.jsx b/.history/src/common/components/PasswordChangeForm_20250228152629.jsx
new file mode 100644
index 00000000..63b53ec4
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228152629.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+          defaultSubmit={false}
+        >
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228153408.jsx b/.history/src/common/components/PasswordChangeForm_20250228153408.jsx
new file mode 100644
index 00000000..63b53ec4
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228153408.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+          defaultSubmit={false}
+        >
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228154529.jsx b/.history/src/common/components/PasswordChangeForm_20250228154529.jsx
new file mode 100644
index 00000000..10a574f9
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228154529.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <ResetPassword />
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228154541.jsx b/.history/src/common/components/PasswordChangeForm_20250228154541.jsx
new file mode 100644
index 00000000..63b53ec4
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228154541.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+          defaultSubmit={false}
+        >
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250228155047.jsx b/.history/src/common/components/PasswordChangeForm_20250228155047.jsx
new file mode 100644
index 00000000..6fcef275
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250228155047.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='40%'
+          defaultSubmit={false}
+        >
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250301223957.jsx b/.history/src/common/components/PasswordChangeForm_20250301223957.jsx
new file mode 100644
index 00000000..6fcef275
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250301223957.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle password reset logic here
+    console.log('Password reset');
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='40%'
+          defaultSubmit={false}
+        >
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250302134811.jsx b/.history/src/common/components/PasswordChangeForm_20250302134811.jsx
new file mode 100644
index 00000000..2a1e3693
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250302134811.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          maxWidth='40%'
+          defaultSubmit={false}
+        >
+          {/* ResetPassword component (from template) handles Logic for resetting password */}
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/PasswordChangeForm_20250302135348.jsx b/.history/src/common/components/PasswordChangeForm_20250302135348.jsx
new file mode 100644
index 00000000..b0b188a9
--- /dev/null
+++ b/.history/src/common/components/PasswordChangeForm_20250302135348.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import ResetPassword from 'pages/account/ResetPassword';
+
+import FormPopup from './FormPopup';
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+export default function PasswordChangeForm() {
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          maxWidth='40%'
+          defaultSubmit={false}
+          customForm={true}
+        >
+          {/* ResetPassword component (from template) handles Logic for resetting password */}
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/common/components/SomeOtherComponent_20250227224128.jsx b/.history/src/common/components/SomeOtherComponent_20250227224128.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/.history/src/common/components/SomeOtherComponent_20250227224211.jsx b/.history/src/common/components/SomeOtherComponent_20250227224211.jsx
new file mode 100644
index 00000000..6a8897ec
--- /dev/null
+++ b/.history/src/common/components/SomeOtherComponent_20250227224211.jsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+
+import { Input } from './form/Input';
+
+// Adjust the import path as necessary
+
+export default function SomeOtherComponent() {
+  const [textValue, setTextValue] = useState('');
+  const [passwordValue, setPasswordValue] = useState('');
+
+  const handleTextChange = (e) => {
+    setTextValue(e.target.value);
+  };
+
+  const handlePasswordChange = (e) => {
+    setPasswordValue(e.target.value);
+  };
+
+  return (
+    <div>
+      <Input.Text
+        title='Username'
+        value={textValue}
+        onChange={handleTextChange}
+        placeholder='Enter your username'
+        required
+      />
+      <Input.Password
+        title='Password'
+        value={passwordValue}
+        onChange={handlePasswordChange}
+        placeholder='Enter your password'
+        required
+      />
+    </div>
+  );
+}
diff --git a/src/common/components/Text.js b/.history/src/common/components/Text_20250219202759.js
similarity index 100%
rename from src/common/components/Text.js
rename to .history/src/common/components/Text_20250219202759.js
diff --git a/.history/src/common/components/Text_20250226140618.js b/.history/src/common/components/Text_20250226140618.js
new file mode 100644
index 00000000..cd15a4a0
--- /dev/null
+++ b/.history/src/common/components/Text_20250226140618.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+    font-size: 2.5em;
+    font-weight: bold;
+    margin: 0;
+`;
+
+export const Subtitle = styled.h2`
+    font-size: 1.5em;
+    margin: 0;
+    font-weight: normal;
+`;
diff --git a/.history/src/common/components/Text_20250226152732.js b/.history/src/common/components/Text_20250226152732.js
new file mode 100644
index 00000000..b989b6f0
--- /dev/null
+++ b/.history/src/common/components/Text_20250226152732.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+  font-size: 2.5em;
+  font-weight: bold;
+  margin: 0;
+`;
+
+export const Subtitle = styled.h2`
+  font-size: 1.5em;
+  margin: 0;
+  font-weight: normal;
+`;
diff --git a/.history/src/common/components/YNPopup_20250226132137.jsx b/.history/src/common/components/YNPopup_20250226132137.jsx
new file mode 100644
index 00000000..1c30006a
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250226132137.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+    return (
+        <div onClick={yesOnClick}>
+            <h1 onClick={noOnClick}>
+                {yesText}
+                {noText}
+            </h1>
+        </div>
+    );
+}
+
+YNPopup.propTypes = {
+    yesText: PropTypes.string,
+    noText: PropTypes.string,
+    noOnClick: PropTypes.func,
+    yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+    yesText: 'Yes',
+    noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250226132239.jsx b/.history/src/common/components/YNPopup_20250226132239.jsx
new file mode 100644
index 00000000..1c30006a
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250226132239.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+    return (
+        <div onClick={yesOnClick}>
+            <h1 onClick={noOnClick}>
+                {yesText}
+                {noText}
+            </h1>
+        </div>
+    );
+}
+
+YNPopup.propTypes = {
+    yesText: PropTypes.string,
+    noText: PropTypes.string,
+    noOnClick: PropTypes.func,
+    yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+    yesText: 'Yes',
+    noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250226132313.jsx b/.history/src/common/components/YNPopup_20250226132313.jsx
new file mode 100644
index 00000000..1c30006a
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250226132313.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+    return (
+        <div onClick={yesOnClick}>
+            <h1 onClick={noOnClick}>
+                {yesText}
+                {noText}
+            </h1>
+        </div>
+    );
+}
+
+YNPopup.propTypes = {
+    yesText: PropTypes.string,
+    noText: PropTypes.string,
+    noOnClick: PropTypes.func,
+    yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+    yesText: 'Yes',
+    noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250226140848.jsx b/.history/src/common/components/YNPopup_20250226140848.jsx
new file mode 100644
index 00000000..cabc98f7
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250226140848.jsx
@@ -0,0 +1,29 @@
+// YNPopup.jsx
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+    return (
+        <div onClick={yesOnClick}>
+            <h1 onClick={noOnClick}>
+                {yesText}
+                {noText}
+            </h1>
+        </div>
+    );
+}
+
+YNPopup.propTypes = {
+    yesText: PropTypes.string,
+    noText: PropTypes.string,
+    noOnClick: PropTypes.func,
+    yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+    yesText: 'Yes',
+    noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250226141732.jsx b/.history/src/common/components/YNPopup_20250226141732.jsx
new file mode 100644
index 00000000..10bcd5d2
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250226141732.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+// YNPop
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+    return (
+        <div onClick={yesOnClick}>
+            <h1 onClick={noOnClick}>
+                {yesText}
+                {noText}
+            </h1>
+        </div>
+    );
+}
+
+YNPopup.propTypes = {
+    yesText: PropTypes.string,
+    noText: PropTypes.string,
+    noOnClick: PropTypes.func,
+    yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+    yesText: 'Yes',
+    noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250226141846.jsx b/.history/src/common/components/YNPopup_20250226141846.jsx
new file mode 100644
index 00000000..76f77679
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250226141846.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+// YNPopup == Yes/No Popup. This will be used for when basic actions + when admins need to edit order table
+// such as 'Are you sure you want to Logout?', 'Item arrived?', 'Item ready for pickup?', etc.
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+    return (
+        <div onClick={yesOnClick}>
+            <h1 onClick={noOnClick}>
+                {yesText}
+                {noText}
+            </h1>
+        </div>
+    );
+}
+
+YNPopup.propTypes = {
+    yesText: PropTypes.string,
+    noText: PropTypes.string,
+    noOnClick: PropTypes.func,
+    yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+    yesText: 'Yes',
+    noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250226152726.jsx b/.history/src/common/components/YNPopup_20250226152726.jsx
new file mode 100644
index 00000000..a50fca4a
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250226152726.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+// YNPopup == Yes/No Popup. This will be used for when basic actions + when admins need to edit order table
+// such as 'Are you sure you want to Logout?', 'Item arrived?', 'Item ready for pickup?', etc.
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <div onClick={yesOnClick}>
+      <h1 onClick={noOnClick}>
+        {yesText}
+        {noText}
+      </h1>
+    </div>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250226160402.jsx b/.history/src/common/components/YNPopup_20250226160402.jsx
new file mode 100644
index 00000000..4675cd72
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250226160402.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <div onClick={yesOnClick}>
+      <h1 onClick={noOnClick}>
+        {yesText}
+        {noText}
+      </h1>
+    </div>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302123947.jsx b/.history/src/common/components/YNPopup_20250302123947.jsx
new file mode 100644
index 00000000..a4397dbb
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302123947.jsx
@@ -0,0 +1,159 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: var(--gray-1);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+`;
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className='mauve' onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className='red' onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302124019.jsx b/.history/src/common/components/YNPopup_20250302124019.jsx
new file mode 100644
index 00000000..011c1e27
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302124019.jsx
@@ -0,0 +1,159 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+`;
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className='mauve' onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className='red' onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302124327.jsx b/.history/src/common/components/YNPopup_20250302124327.jsx
new file mode 100644
index 00000000..b0a084c3
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302124327.jsx
@@ -0,0 +1,159 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: rgba(0, 0, 0, 0.9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: rgb(245, 245, 245);
+  border-radius: 6px;
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: rgb(68, 68, 68);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: rgb(102, 102, 102);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(102, 51, 153);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: rgb(204, 153, 255);
+    color: rgb(68, 68, 68);
+    outline-color: rgb(102, 51, 153);
+    &:hover {
+      background-color: rgb(230, 230, 230);
+    }
+  }
+
+  &.red {
+    background-color: rgb(255, 102, 102);
+    color: rgb(255, 255, 255);
+    outline-color: rgb(204, 0, 0);
+    &:hover {
+      background-color: rgb(255, 77, 77);
+    }
+  }
+
+  &.mauve {
+    background-color: rgb(204, 153, 204);
+    color: rgb(102, 102, 102);
+    outline-color: rgb(153, 102, 153);
+    &:hover {
+      background-color: rgb(230, 230, 230);
+    }
+  }
+`;
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className='mauve' onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className='red' onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302124408.jsx b/.history/src/common/components/YNPopup_20250302124408.jsx
new file mode 100644
index 00000000..a4397dbb
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302124408.jsx
@@ -0,0 +1,159 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: var(--gray-1);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+`;
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className='mauve' onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className='red' onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302124516.jsx b/.history/src/common/components/YNPopup_20250302124516.jsx
new file mode 100644
index 00000000..fb676022
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302124516.jsx
@@ -0,0 +1,164 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: var(--gray-1);
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+`;
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className='mauve' onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className='red' onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302124529.jsx b/.history/src/common/components/YNPopup_20250302124529.jsx
new file mode 100644
index 00000000..e9914761
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302124529.jsx
@@ -0,0 +1,164 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+`;
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className='mauve' onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className='red' onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302125043.jsx b/.history/src/common/components/YNPopup_20250302125043.jsx
new file mode 100644
index 00000000..e9914761
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302125043.jsx
@@ -0,0 +1,164 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+`;
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className='mauve' onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className='red' onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302125300.jsx b/.history/src/common/components/YNPopup_20250302125300.jsx
new file mode 100644
index 00000000..8bb29a22
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302125300.jsx
@@ -0,0 +1,166 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+`;
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            {/* For 'noOnClick' and 'yesOnClick', these functions must be defined in the file where we are
+            using this Popup.  */}
+            <AlertDialog.Cancel asChild>
+              <StyledButton className='mauve' onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className='red' onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302125531.jsx b/.history/src/common/components/YNPopup_20250302125531.jsx
new file mode 100644
index 00000000..19377063
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302125531.jsx
@@ -0,0 +1,187 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText,
+  noText,
+  noOnClick,
+  yesOnClick,
+  yesColor,
+  noColor,
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            {/* For 'noOnClick' and 'yesOnClick', these functions must be defined in the file where we are
+            using this Popup.  */}
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={yesColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={noColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302125611.jsx b/.history/src/common/components/YNPopup_20250302125611.jsx
new file mode 100644
index 00000000..b755ef22
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302125611.jsx
@@ -0,0 +1,187 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText,
+  noText,
+  noOnClick,
+  yesOnClick,
+  yesColor,
+  noColor,
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            {/* For 'noOnClick' and 'yesOnClick', these functions must be defined in the file where we are
+            using this Popup.  */}
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302125839.jsx b/.history/src/common/components/YNPopup_20250302125839.jsx
new file mode 100644
index 00000000..bb7beb40
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302125839.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText,
+  noText,
+  noOnClick,
+  yesOnClick,
+  yesColor,
+  noColor,
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302130120.jsx b/.history/src/common/components/YNPopup_20250302130120.jsx
new file mode 100644
index 00000000..0bad277d
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302130120.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: rgba(0, 0, 0, 0.9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: rgb(68, 68, 68);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: rgb(102, 102, 102);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(102, 51, 153);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: rgb(204, 153, 255);
+    color: rgb(68, 68, 68);
+    outline-color: rgb(102, 51, 153);
+    &:hover {
+      background-color: rgb(230, 230, 230);
+    }
+  }
+
+  &.red {
+    background-color: rgb(255, 102, 102);
+    color: rgb(255, 255, 255);
+    outline-color: rgb(204, 0, 0);
+    &:hover {
+      background-color: rgb(255, 77, 77);
+    }
+  }
+
+  &.mauve {
+    background-color: rgb(204, 153, 204);
+    color: rgb(102, 102, 102);
+    outline-color: rgb(153, 102, 153);
+    &:hover {
+      background-color: rgb(230, 230, 230);
+    }
+  }
+
+  &.green {
+    background-color: rgb(102, 204, 102);
+    color: rgb(255, 255, 255);
+    outline-color: rgb(0, 153, 0);
+    &:hover {
+      background-color: rgb(77, 179, 77);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText,
+  noText,
+  noOnClick,
+  yesOnClick,
+  yesColor,
+  noColor,
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302130143.jsx b/.history/src/common/components/YNPopup_20250302130143.jsx
new file mode 100644
index 00000000..bb7beb40
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302130143.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText,
+  noText,
+  noOnClick,
+  yesOnClick,
+  yesColor,
+  noColor,
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302130445.jsx b/.history/src/common/components/YNPopup_20250302130445.jsx
new file mode 100644
index 00000000..6153f6ee
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302130445.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302130510.jsx b/.history/src/common/components/YNPopup_20250302130510.jsx
new file mode 100644
index 00000000..3a6e9b4d
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302130510.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Confirm',
+  noText = 'Cancel',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302130629.jsx b/.history/src/common/components/YNPopup_20250302130629.jsx
new file mode 100644
index 00000000..6153f6ee
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302130629.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Delete account</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302130648.jsx b/.history/src/common/components/YNPopup_20250302130648.jsx
new file mode 100644
index 00000000..6da2190f
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302130648.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>Are you absolutely sure?</StyledTitle>
+          <StyledDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+};
diff --git a/.history/src/common/components/YNPopup_20250302130854.jsx b/.history/src/common/components/YNPopup_20250302130854.jsx
new file mode 100644
index 00000000..588b746f
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302130854.jsx
@@ -0,0 +1,188 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302130940.jsx b/.history/src/common/components/YNPopup_20250302130940.jsx
new file mode 100644
index 00000000..588b746f
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302130940.jsx
@@ -0,0 +1,188 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131032.jsx b/.history/src/common/components/YNPopup_20250302131032.jsx
new file mode 100644
index 00000000..ea18022d
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131032.jsx
@@ -0,0 +1,231 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { AlertDialog, Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131219.jsx b/.history/src/common/components/YNPopup_20250302131219.jsx
new file mode 100644
index 00000000..9e06d2b3
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131219.jsx
@@ -0,0 +1,235 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { AlertDialog, Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <Dialog>
+          <StyledOverlay />
+          <StyledContent>
+            <StyledTitle>{title}</StyledTitle>
+            <StyledDescription>{description}</StyledDescription>
+            <div
+              style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}
+            >
+              <AlertDialog.Cancel asChild>
+                <StyledButton className={noColor} onClick={noOnClick}>
+                  {noText}
+                </StyledButton>
+              </AlertDialog.Cancel>
+              <AlertDialog.Action asChild>
+                <StyledButton className={yesColor} onClick={yesOnClick}>
+                  {yesText}
+                </StyledButton>
+              </AlertDialog.Action>
+            </div>
+            <Dialog.Close asChild>
+              <IconButton aria-label='Close'>
+                <Cross2Icon />
+              </IconButton>
+            </Dialog.Close>
+          </StyledContent>
+        </Dialog>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131238.jsx b/.history/src/common/components/YNPopup_20250302131238.jsx
new file mode 100644
index 00000000..1fce57ce
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131238.jsx
@@ -0,0 +1,234 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { AlertDialog, Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <Dialog>
+          <StyledContent>
+            <StyledTitle>{title}</StyledTitle>
+            <StyledDescription>{description}</StyledDescription>
+            <div
+              style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}
+            >
+              <AlertDialog.Cancel asChild>
+                <StyledButton className={noColor} onClick={noOnClick}>
+                  {noText}
+                </StyledButton>
+              </AlertDialog.Cancel>
+              <AlertDialog.Action asChild>
+                <StyledButton className={yesColor} onClick={yesOnClick}>
+                  {yesText}
+                </StyledButton>
+              </AlertDialog.Action>
+            </div>
+            <Dialog.Close asChild>
+              <IconButton aria-label='Close'>
+                <Cross2Icon />
+              </IconButton>
+            </Dialog.Close>
+          </StyledContent>
+        </Dialog>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131259.jsx b/.history/src/common/components/YNPopup_20250302131259.jsx
new file mode 100644
index 00000000..588b746f
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131259.jsx
@@ -0,0 +1,188 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131554.jsx b/.history/src/common/components/YNPopup_20250302131554.jsx
new file mode 100644
index 00000000..ea18022d
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131554.jsx
@@ -0,0 +1,231 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { AlertDialog, Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131620.jsx b/.history/src/common/components/YNPopup_20250302131620.jsx
new file mode 100644
index 00000000..588b746f
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131620.jsx
@@ -0,0 +1,188 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131632.jsx b/.history/src/common/components/YNPopup_20250302131632.jsx
new file mode 100644
index 00000000..588b746f
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131632.jsx
@@ -0,0 +1,188 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131836.jsx b/.history/src/common/components/YNPopup_20250302131836.jsx
new file mode 100644
index 00000000..4675cd72
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131836.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+// import styled from 'styled-components';
+
+export default function YNPopup({ yesText, noText, noOnClick, yesOnClick }) {
+  return (
+    <div onClick={yesOnClick}>
+      <h1 onClick={noOnClick}>
+        {yesText}
+        {noText}
+      </h1>
+    </div>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131844.jsx b/.history/src/common/components/YNPopup_20250302131844.jsx
new file mode 100644
index 00000000..588b746f
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131844.jsx
@@ -0,0 +1,188 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131910.jsx b/.history/src/common/components/YNPopup_20250302131910.jsx
new file mode 100644
index 00000000..cc946dd5
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131910.jsx
@@ -0,0 +1,189 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+    cursor: pointer;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302131935.jsx b/.history/src/common/components/YNPopup_20250302131935.jsx
new file mode 100644
index 00000000..e389e6aa
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302131935.jsx
@@ -0,0 +1,189 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+    cursor: pointer;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302132003.jsx b/.history/src/common/components/YNPopup_20250302132003.jsx
new file mode 100644
index 00000000..a9bbbeab
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302132003.jsx
@@ -0,0 +1,192 @@
+import React from 'react';
+
+// Import CSS files
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302132046.jsx b/.history/src/common/components/YNPopup_20250302132046.jsx
new file mode 100644
index 00000000..73d212fe
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302132046.jsx
@@ -0,0 +1,192 @@
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import PropTypes from 'prop-types';
+import { AlertDialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(AlertDialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(AlertDialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(AlertDialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(AlertDialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+}) {
+  return (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
+            <AlertDialog.Cancel asChild>
+              <StyledButton className={noColor} onClick={noOnClick}>
+                {noText}
+              </StyledButton>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <StyledButton className={yesColor} onClick={yesOnClick}>
+                {yesText}
+              </StyledButton>
+            </AlertDialog.Action>
+          </div>
+        </StyledContent>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302132549.jsx b/.history/src/common/components/YNPopup_20250302132549.jsx
new file mode 100644
index 00000000..17f69083
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302132549.jsx
@@ -0,0 +1,246 @@
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+  onSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+                  <StyledButton className='green' type='submit'>
+                    Save changes
+                  </StyledButton>
+                  <StyledButton className='violet' type='submit'>
+                    Save changes
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302132612.jsx b/.history/src/common/components/YNPopup_20250302132612.jsx
new file mode 100644
index 00000000..cda3d73d
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302132612.jsx
@@ -0,0 +1,246 @@
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+  onSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+                  <StyledButton className='green' type='submit'>
+                    Save changes
+                  </StyledButton>
+                  <StyledButton className='red' type='submit'>
+                    Save changes
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302132624.jsx b/.history/src/common/components/YNPopup_20250302132624.jsx
new file mode 100644
index 00000000..22807f52
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302132624.jsx
@@ -0,0 +1,246 @@
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+  onSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+                  <StyledButton className='green' type='submit'>
+                    {yesText}
+                  </StyledButton>
+                  <StyledButton className='red' type='submit'>
+                    {noText}
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302132710.jsx b/.history/src/common/components/YNPopup_20250302132710.jsx
new file mode 100644
index 00000000..c407c584
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302132710.jsx
@@ -0,0 +1,246 @@
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+  onSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+                  <StyledButton className={yesColor} onClick={yesOnClick}>
+                    {yesText}
+                  </StyledButton>
+                  <StyledButton className={noColor} onClick={noOnClick}>
+                    {noText}
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302132743.jsx b/.history/src/common/components/YNPopup_20250302132743.jsx
new file mode 100644
index 00000000..e942fc87
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302132743.jsx
@@ -0,0 +1,247 @@
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+  onSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              {/* Caller must provide + define functions for both buttons when clicked */}
+              <Dialog.Close asChild>
+                <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+                  <StyledButton className={yesColor} onClick={yesOnClick}>
+                    {yesText}
+                  </StyledButton>
+                  <StyledButton className={noColor} onClick={noOnClick}>
+                    {noText}
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302132914.jsx b/.history/src/common/components/YNPopup_20250302132914.jsx
new file mode 100644
index 00000000..a9daea23
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302132914.jsx
@@ -0,0 +1,253 @@
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes',
+  noText = 'No',
+  noOnClick,
+  yesOnClick,
+  yesColor = 'green',
+  noColor = 'red',
+  title = 'Popup Title',
+  description = 'Popup Desc.',
+  onSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              {/* Caller must provide + define functions for both buttons when clicked */}
+              <Dialog.Close asChild>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+                    gap: '10px',
+                  }}
+                >
+                  <StyledButton className={yesColor} onClick={yesOnClick}>
+                    {yesText}
+                  </StyledButton>
+                  <StyledButton className={noColor} onClick={noOnClick}>
+                    {noText}
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302134510.jsx b/.history/src/common/components/YNPopup_20250302134510.jsx
new file mode 100644
index 00000000..e18ff566
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302134510.jsx
@@ -0,0 +1,254 @@
+// YNPopup === Yes/No Popup -- used for simple Confirm/Deny actions
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes', // default text for the 'Yes/Confirm' button
+  noText = 'No', // default text for the 'No/Deny' button
+  noOnClick, // functionality for what happens when user clicks 'No'
+  yesOnClick, // functionality for what happens when user clicks 'Yes'
+  yesColor = 'green', // default color styling for 'Yes' button
+  noColor = 'red', // default color styling for 'No' button
+  title = 'Popup Title', // default Title text for YNPopup
+  description = 'Popup Desc.',
+  onSubmit,
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form onSubmit={onSubmit}>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              {/* Caller must provide + define functions for both buttons when clicked */}
+              <Dialog.Close asChild>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+                    gap: '10px',
+                  }}
+                >
+                  <StyledButton className={yesColor} onClick={yesOnClick}>
+                    {yesText}
+                  </StyledButton>
+                  <StyledButton className={noColor} onClick={noOnClick}>
+                    {noText}
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302134545.jsx b/.history/src/common/components/YNPopup_20250302134545.jsx
new file mode 100644
index 00000000..e91f3845
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302134545.jsx
@@ -0,0 +1,253 @@
+// YNPopup === Yes/No Popup -- used for simple Confirm/Deny actions
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes', // default text for the 'Yes/Confirm' button
+  noText = 'No', // default text for the 'No/Deny' button
+  noOnClick, // functionality for what happens when user clicks 'No'
+  yesOnClick, // functionality for what happens when user clicks 'Yes'
+  yesColor = 'green', // default color styling for 'Yes' button
+  noColor = 'red', // default color styling for 'No' button
+  title = 'Popup Title', // default Title text for YNPopup
+  description = 'Popup Desc.', // default description for YNPopup
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>Open YNPopup</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              {/* Caller must provide + define functions for both buttons when clicked */}
+              <Dialog.Close asChild>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+                    gap: '10px',
+                  }}
+                >
+                  <StyledButton className={yesColor} onClick={yesOnClick}>
+                    {yesText}
+                  </StyledButton>
+                  <StyledButton className={noColor} onClick={noOnClick}>
+                    {noText}
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+};
diff --git a/.history/src/common/components/YNPopup_20250302134640.jsx b/.history/src/common/components/YNPopup_20250302134640.jsx
new file mode 100644
index 00000000..e6762743
--- /dev/null
+++ b/.history/src/common/components/YNPopup_20250302134640.jsx
@@ -0,0 +1,255 @@
+// YNPopup === Yes/No Popup -- used for simple Confirm/Deny actions
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import styled, { keyframes } from 'styled-components';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--violet-6);
+    outline-offset: 1px;
+  }
+
+  &.violet {
+    background-color: var(--violet-4);
+    color: var(--violet-12);
+    outline-color: var(--violet-6);
+    &:hover {
+      background-color: var(--mauve-3);
+    }
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.mauve {
+    background-color: var(--mauve-4);
+    color: var(--mauve-11);
+    outline-color: var(--mauve-7);
+    &:hover {
+      background-color: var(--mauve-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export default function YNPopup({
+  yesText = 'Yes', // default text for the 'Yes/Confirm' button
+  noText = 'No', // default text for the 'No/Deny' button
+  noOnClick, // functionality for what happens when user clicks 'No'
+  yesOnClick, // functionality for what happens when user clicks 'Yes'
+  yesColor = 'green', // default color styling for 'Yes' button
+  noColor = 'red', // default color styling for 'No' button
+  title = 'Popup Title', // default Title text for YNPopup
+  description = 'Popup Desc.', // default description for YNPopup
+  buttonText = 'Open YNPopup', // text that appears over form button --> click --> opens form
+}) {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className='violet'>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form>
+            {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              {/* Caller must provide + define functions for both buttons when clicked */}
+              <Dialog.Close asChild>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+                    gap: '10px',
+                  }}
+                >
+                  <StyledButton className={yesColor} onClick={yesOnClick}>
+                    {yesText}
+                  </StyledButton>
+                  <StyledButton className={noColor} onClick={noOnClick}>
+                    {noText}
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  buttonText: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+  buttonText: 'Open YNPopup',
+};
diff --git a/.history/src/common/components/form/CustomInput_20250227235607.jsx b/.history/src/common/components/form/CustomInput_20250227235607.jsx
new file mode 100644
index 00000000..e69de29b
diff --git a/.history/src/common/components/form/CustomInput_20250227235655.jsx b/.history/src/common/components/form/CustomInput_20250227235655.jsx
new file mode 100644
index 00000000..2f19215f
--- /dev/null
+++ b/.history/src/common/components/form/CustomInput_20250227235655.jsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const CustomInputContainer = styled.div`
+  margin-bottom: 15px;
+`;
+
+const CustomInputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+
+const CustomInputTitle = styled.span`
+  margin-right: 2px;
+`;
+
+const CustomRedSpan = styled.span`
+  color: red;
+`;
+
+const CustomStyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  width: 100%;
+
+  @media (min-width: 769px) {
+    width: 375px;
+  }
+`;
+
+const CustomPasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+const CustomIconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+function CustomTitledInput({ title, required, children }) {
+  return (
+    <CustomInputContainer>
+      <CustomInputName>
+        <CustomInputTitle>{title}</CustomInputTitle>
+        {required && <CustomRedSpan>*</CustomRedSpan>}
+      </CustomInputName>
+      {children}
+    </CustomInputContainer>
+  );
+}
+
+CustomTitledInput.propTypes = {
+  title: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+const CustomInputPropTypes = {
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+function CustomTextField(props) {
+  props.placeholder ??= 'Text Here';
+  return <CustomStyledInput type='text' {...props} />;
+}
+
+CustomTextField.propTypes = CustomInputPropTypes;
+
+function CustomInputText({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomTextField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputText.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+function CustomPasswordField(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <CustomPasswordContainer>
+      <CustomStyledInput type={showPassword ? 'text' : 'password'} {...props} />
+      <CustomIconContainer onClick={toggleShowPassword}>
+        {showPassword ? '🙈' : '👁️'}
+      </CustomIconContainer>
+    </CustomPasswordContainer>
+  );
+}
+
+CustomPasswordField.propTypes = CustomInputPropTypes;
+
+function CustomInputPassword({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomPasswordField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputPassword.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+export const CustomInput = {
+  Text: CustomInputText,
+  Password: CustomInputPassword,
+};
diff --git a/.history/src/common/components/form/CustomInput_20250227235836.jsx b/.history/src/common/components/form/CustomInput_20250227235836.jsx
new file mode 100644
index 00000000..36ec049c
--- /dev/null
+++ b/.history/src/common/components/form/CustomInput_20250227235836.jsx
@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const CustomInputContainer = styled.div`
+  margin-bottom: 15px;
+`;
+
+const CustomInputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+
+const CustomInputTitle = styled.span`
+  margin-right: 2px;
+`;
+
+const CustomRedSpan = styled.span`
+  color: red;
+`;
+
+const CustomStyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  width: 100%;
+`;
+
+const CustomPasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+const CustomIconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+function CustomTitledInput({ title, required, children }) {
+  return (
+    <CustomInputContainer>
+      <CustomInputName>
+        <CustomInputTitle>{title}</CustomInputTitle>
+        {required && <CustomRedSpan>*</CustomRedSpan>}
+      </CustomInputName>
+      {children}
+    </CustomInputContainer>
+  );
+}
+
+CustomTitledInput.propTypes = {
+  title: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+const CustomInputPropTypes = {
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+function CustomTextField(props) {
+  props.placeholder ??= 'Text Here';
+  return <CustomStyledInput type='text' {...props} />;
+}
+
+CustomTextField.propTypes = CustomInputPropTypes;
+
+function CustomInputText({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomTextField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputText.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+function CustomPasswordField(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <CustomPasswordContainer>
+      <CustomStyledInput type={showPassword ? 'text' : 'password'} {...props} />
+      <CustomIconContainer onClick={toggleShowPassword}>
+        {showPassword ? '🙈' : '👁️'}
+      </CustomIconContainer>
+    </CustomPasswordContainer>
+  );
+}
+
+CustomPasswordField.propTypes = CustomInputPropTypes;
+
+function CustomInputPassword({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomPasswordField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputPassword.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+export const CustomInput = {
+  Text: CustomInputText,
+  Password: CustomInputPassword,
+};
diff --git a/.history/src/common/components/form/CustomInput_20250228000330.jsx b/.history/src/common/components/form/CustomInput_20250228000330.jsx
new file mode 100644
index 00000000..dcac98a0
--- /dev/null
+++ b/.history/src/common/components/form/CustomInput_20250228000330.jsx
@@ -0,0 +1,127 @@
+// Created this component that is basically same as Input.jsx but we can edit width
+import React, { useState } from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const CustomInputContainer = styled.div`
+  margin-bottom: 15px;
+`;
+
+const CustomInputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+
+const CustomInputTitle = styled.span`
+  margin-right: 2px;
+`;
+
+const CustomRedSpan = styled.span`
+  color: red;
+`;
+
+const CustomStyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  width: 100%;
+`;
+
+const CustomPasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+const CustomIconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+function CustomTitledInput({ title, required, children }) {
+  return (
+    <CustomInputContainer>
+      <CustomInputName>
+        <CustomInputTitle>{title}</CustomInputTitle>
+        {required && <CustomRedSpan>*</CustomRedSpan>}
+      </CustomInputName>
+      {children}
+    </CustomInputContainer>
+  );
+}
+
+CustomTitledInput.propTypes = {
+  title: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+const CustomInputPropTypes = {
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+function CustomTextField(props) {
+  props.placeholder ??= 'Text Here';
+  return <CustomStyledInput type='text' {...props} />;
+}
+
+CustomTextField.propTypes = CustomInputPropTypes;
+
+function CustomInputText({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomTextField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputText.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+function CustomPasswordField(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <CustomPasswordContainer>
+      <CustomStyledInput type={showPassword ? 'text' : 'password'} {...props} />
+      <CustomIconContainer onClick={toggleShowPassword}>
+        {showPassword ? '🙈' : '👁️'}
+      </CustomIconContainer>
+    </CustomPasswordContainer>
+  );
+}
+
+CustomPasswordField.propTypes = CustomInputPropTypes;
+
+function CustomInputPassword({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomPasswordField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputPassword.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+export const CustomInput = {
+  Text: CustomInputText,
+  Password: CustomInputPassword,
+};
diff --git a/.history/src/common/components/form/CustomInput_20250228003141.jsx b/.history/src/common/components/form/CustomInput_20250228003141.jsx
new file mode 100644
index 00000000..4192d374
--- /dev/null
+++ b/.history/src/common/components/form/CustomInput_20250228003141.jsx
@@ -0,0 +1,127 @@
+// Created this component that is basically same as Input.jsx but we can edit width
+import React, { useState } from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const CustomInputContainer = styled.div`
+  margin-bottom: 25px;
+`;
+
+const CustomInputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+
+const CustomInputTitle = styled.span`
+  margin-right: 2px;
+`;
+
+const CustomRedSpan = styled.span`
+  color: red;
+`;
+
+const CustomStyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  width: 100%;
+`;
+
+const CustomPasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+const CustomIconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+function CustomTitledInput({ title, required, children }) {
+  return (
+    <CustomInputContainer>
+      <CustomInputName>
+        <CustomInputTitle>{title}</CustomInputTitle>
+        {required && <CustomRedSpan>*</CustomRedSpan>}
+      </CustomInputName>
+      {children}
+    </CustomInputContainer>
+  );
+}
+
+CustomTitledInput.propTypes = {
+  title: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+const CustomInputPropTypes = {
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+function CustomTextField(props) {
+  props.placeholder ??= 'Text Here';
+  return <CustomStyledInput type='text' {...props} />;
+}
+
+CustomTextField.propTypes = CustomInputPropTypes;
+
+function CustomInputText({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomTextField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputText.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+function CustomPasswordField(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <CustomPasswordContainer>
+      <CustomStyledInput type={showPassword ? 'text' : 'password'} {...props} />
+      <CustomIconContainer onClick={toggleShowPassword}>
+        {showPassword ? '🙈' : '👁️'}
+      </CustomIconContainer>
+    </CustomPasswordContainer>
+  );
+}
+
+CustomPasswordField.propTypes = CustomInputPropTypes;
+
+function CustomInputPassword({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomPasswordField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputPassword.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+export const CustomInput = {
+  Text: CustomInputText,
+  Password: CustomInputPassword,
+};
diff --git a/.history/src/common/components/form/Input_20250219202759.jsx b/.history/src/common/components/form/Input_20250219202759.jsx
new file mode 100644
index 00000000..c367d9d4
--- /dev/null
+++ b/.history/src/common/components/form/Input_20250219202759.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+
+import { Icon } from 'assets/icons/icons';
+import PropTypes from 'prop-types';
+
+import {
+  IconContainer,
+  InputContainer,
+  InputName,
+  InputTitle,
+  PasswordContainer,
+  RedSpan,
+  StyledInput,
+} from './styles';
+
+TitledInput.propTypes = {
+  title: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+function TitledInput({ title, required, children }) {
+  return (
+    <InputContainer>
+      <InputName>
+        <InputTitle>{title}</InputTitle>
+        {required && <RedSpan>*</RedSpan>}
+      </InputName>
+      {children}
+    </InputContainer>
+  );
+}
+
+const InputPropTypes = {
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+TextField.propTypes = InputPropTypes;
+function TextField(props) {
+  props.placeholder ??= 'Text Here';
+  return <StyledInput type='text' {...props} />;
+}
+
+InputText.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...InputPropTypes,
+};
+function InputText({ title, ...rest }) {
+  return (
+    <TitledInput title={title} required={rest.required}>
+      <TextField {...rest} />
+    </TitledInput>
+  );
+}
+
+PasswordField.propTypes = InputPropTypes;
+function PasswordField(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <PasswordContainer>
+      <StyledInput type={showPassword ? 'text' : 'password'} {...props} />
+      <IconContainer onClick={toggleShowPassword}>
+        {showPassword ? <Icon.eyeClosed /> : <Icon.eye />}
+      </IconContainer>
+    </PasswordContainer>
+  );
+}
+
+InputPassword.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...InputPropTypes,
+};
+function InputPassword({ title, ...rest }) {
+  return (
+    <TitledInput title={title} required={rest.required}>
+      <PasswordField {...rest} />
+    </TitledInput>
+  );
+}
+
+export const Input = {
+  Text: InputText,
+  Password: InputPassword,
+};
diff --git a/.history/src/common/components/form/Input_20250226140429.jsx b/.history/src/common/components/form/Input_20250226140429.jsx
new file mode 100644
index 00000000..dbdb5202
--- /dev/null
+++ b/.history/src/common/components/form/Input_20250226140429.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+
+import { Icon } from 'assets/icons/icons';
+import PropTypes from 'prop-types';
+
+import {
+    IconContainer,
+    InputContainer,
+    InputName,
+    InputTitle,
+    PasswordContainer,
+    RedSpan,
+    StyledInput,
+} from './styles';
+
+TitledInput.propTypes = {
+    title: PropTypes.string.isRequired,
+    required: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+};
+function TitledInput({ title, required, children }) {
+    return (
+        <InputContainer>
+            <InputName>
+                <InputTitle>{title}</InputTitle>
+                {required && <RedSpan>*</RedSpan>}
+            </InputName>
+            {children}
+        </InputContainer>
+    );
+}
+
+const InputPropTypes = {
+    onChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    required: PropTypes.bool,
+};
+
+TextField.propTypes = InputPropTypes;
+function TextField(props) {
+    props.placeholder ??= 'Text Here';
+    return <StyledInput type='text' {...props} />;
+}
+
+InputText.propTypes = {
+    title: PropTypes.string.isRequired,
+    ...InputPropTypes,
+};
+function InputText({ title, ...rest }) {
+    return (
+        <TitledInput title={title} required={rest.required}>
+            <TextField {...rest} />
+        </TitledInput>
+    );
+}
+
+PasswordField.propTypes = InputPropTypes;
+function PasswordField(props) {
+    const [showPassword, setShowPassword] = useState(false);
+    const toggleShowPassword = () => {
+        setShowPassword(!showPassword);
+    };
+
+    return (
+        <PasswordContainer>
+            <StyledInput type={showPassword ? 'text' : 'password'} {...props} />
+            <IconContainer onClick={toggleShowPassword}>
+                {showPassword ? <Icon.eyeClosed /> : <Icon.eye />}
+            </IconContainer>
+        </PasswordContainer>
+    );
+}
+
+InputPassword.propTypes = {
+    title: PropTypes.string.isRequired,
+    ...InputPropTypes,
+};
+function InputPassword({ title, ...rest }) {
+    return (
+        <TitledInput title={title} required={rest.required}>
+            <PasswordField {...rest} />
+        </TitledInput>
+    );
+}
+
+export const Input = {
+    Text: InputText,
+    Password: InputPassword,
+};
diff --git a/.history/src/common/components/form/Input_20250227223428.jsx b/.history/src/common/components/form/Input_20250227223428.jsx
new file mode 100644
index 00000000..c367d9d4
--- /dev/null
+++ b/.history/src/common/components/form/Input_20250227223428.jsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+
+import { Icon } from 'assets/icons/icons';
+import PropTypes from 'prop-types';
+
+import {
+  IconContainer,
+  InputContainer,
+  InputName,
+  InputTitle,
+  PasswordContainer,
+  RedSpan,
+  StyledInput,
+} from './styles';
+
+TitledInput.propTypes = {
+  title: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+function TitledInput({ title, required, children }) {
+  return (
+    <InputContainer>
+      <InputName>
+        <InputTitle>{title}</InputTitle>
+        {required && <RedSpan>*</RedSpan>}
+      </InputName>
+      {children}
+    </InputContainer>
+  );
+}
+
+const InputPropTypes = {
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+TextField.propTypes = InputPropTypes;
+function TextField(props) {
+  props.placeholder ??= 'Text Here';
+  return <StyledInput type='text' {...props} />;
+}
+
+InputText.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...InputPropTypes,
+};
+function InputText({ title, ...rest }) {
+  return (
+    <TitledInput title={title} required={rest.required}>
+      <TextField {...rest} />
+    </TitledInput>
+  );
+}
+
+PasswordField.propTypes = InputPropTypes;
+function PasswordField(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <PasswordContainer>
+      <StyledInput type={showPassword ? 'text' : 'password'} {...props} />
+      <IconContainer onClick={toggleShowPassword}>
+        {showPassword ? <Icon.eyeClosed /> : <Icon.eye />}
+      </IconContainer>
+    </PasswordContainer>
+  );
+}
+
+InputPassword.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...InputPropTypes,
+};
+function InputPassword({ title, ...rest }) {
+  return (
+    <TitledInput title={title} required={rest.required}>
+      <PasswordField {...rest} />
+    </TitledInput>
+  );
+}
+
+export const Input = {
+  Text: InputText,
+  Password: InputPassword,
+};
diff --git a/.history/src/common/components/form/styles_20250219202759.js b/.history/src/common/components/form/styles_20250219202759.js
new file mode 100644
index 00000000..cf88c1e5
--- /dev/null
+++ b/.history/src/common/components/form/styles_20250219202759.js
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+import { Button } from 'common/components/Button';
+
+export const InputContainer = styled.div``;
+
+export const InputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+export const InputTitle = styled.span`
+  margin-right: 2px;
+`;
+export const RedSpan = styled.span`
+  color: red;
+`;
+
+export const StyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  width: 375px;
+`;
+
+export const PasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+export const StyledButton = styled(Button.Primary)`
+  font-size: 1.1rem;
+  width: 200px;
+  font-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
diff --git a/.history/src/common/components/form/styles_20250227234419.js b/.history/src/common/components/form/styles_20250227234419.js
new file mode 100644
index 00000000..1d8e6773
--- /dev/null
+++ b/.history/src/common/components/form/styles_20250227234419.js
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+import { Button } from 'common/components/Button';
+
+export const InputContainer = styled.div``;
+
+export const InputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+export const InputTitle = styled.span`
+  margin-right: 2px;
+`;
+export const RedSpan = styled.span`
+  color: red;
+`;
+
+export const StyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  min-width: 375px;
+`;
+
+export const PasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+export const StyledButton = styled(Button.Primary)`
+  font-size: 1.1rem;
+  width: 200px;
+  font-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
diff --git a/.history/src/common/components/form/styles_20250227234720.js b/.history/src/common/components/form/styles_20250227234720.js
new file mode 100644
index 00000000..5a7b4a07
--- /dev/null
+++ b/.history/src/common/components/form/styles_20250227234720.js
@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+import { Button } from 'common/components/Button';
+
+export const InputContainer = styled.div``;
+
+export const InputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+export const InputTitle = styled.span`
+  margin-right: 2px;
+`;
+export const RedSpan = styled.span`
+  color: red;
+`;
+
+export const StyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  min-width: 375px;
+  width: 100%;
+
+  @media (min-width: 769px) {
+    width: 375px;
+  }
+`;
+
+export const PasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+export const StyledButton = styled(Button.Primary)`
+  font-size: 1.1rem;
+  width: 200px;
+  font-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
diff --git a/.history/src/common/components/form/styles_20250227234826.js b/.history/src/common/components/form/styles_20250227234826.js
new file mode 100644
index 00000000..1d8e6773
--- /dev/null
+++ b/.history/src/common/components/form/styles_20250227234826.js
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+import { Button } from 'common/components/Button';
+
+export const InputContainer = styled.div``;
+
+export const InputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+export const InputTitle = styled.span`
+  margin-right: 2px;
+`;
+export const RedSpan = styled.span`
+  color: red;
+`;
+
+export const StyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  min-width: 375px;
+`;
+
+export const PasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+export const StyledButton = styled(Button.Primary)`
+  font-size: 1.1rem;
+  width: 200px;
+  font-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
diff --git a/.history/src/common/components/form/styles_20250227234848.js b/.history/src/common/components/form/styles_20250227234848.js
new file mode 100644
index 00000000..fc6af3a8
--- /dev/null
+++ b/.history/src/common/components/form/styles_20250227234848.js
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+import { Button } from 'common/components/Button';
+
+export const InputContainer = styled.div``;
+
+export const InputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+export const InputTitle = styled.span`
+  margin-right: 2px;
+`;
+export const RedSpan = styled.span`
+  color: red;
+`;
+
+export const StyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  min-width: 375px;
+  width: 100%;
+`;
+
+export const PasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+export const StyledButton = styled(Button.Primary)`
+  font-size: 1.1rem;
+  width: 200px;
+  font-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
diff --git a/.history/src/common/components/form/styles_20250227235011.js b/.history/src/common/components/form/styles_20250227235011.js
new file mode 100644
index 00000000..825fb30d
--- /dev/null
+++ b/.history/src/common/components/form/styles_20250227235011.js
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+import { Button } from 'common/components/Button';
+
+export const InputContainer = styled.div``;
+
+export const InputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+export const InputTitle = styled.span`
+  margin-right: 2px;
+`;
+export const RedSpan = styled.span`
+  color: red;
+`;
+
+export const StyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  min-width: 375px;
+  width: 75%;
+`;
+
+export const PasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+export const StyledButton = styled(Button.Primary)`
+  font-size: 1.1rem;
+  width: 200px;
+  font-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
diff --git a/.history/src/common/components/form/styles_20250227235135.js b/.history/src/common/components/form/styles_20250227235135.js
new file mode 100644
index 00000000..cf88c1e5
--- /dev/null
+++ b/.history/src/common/components/form/styles_20250227235135.js
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+import { Button } from 'common/components/Button';
+
+export const InputContainer = styled.div``;
+
+export const InputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+export const InputTitle = styled.span`
+  margin-right: 2px;
+`;
+export const RedSpan = styled.span`
+  color: red;
+`;
+
+export const StyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  width: 375px;
+`;
+
+export const PasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+export const IconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+export const StyledButton = styled(Button.Primary)`
+  font-size: 1.1rem;
+  width: 200px;
+  font-align: center;
+  margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
diff --git a/.history/src/index_20250219202759.css b/.history/src/index_20250219202759.css
new file mode 100644
index 00000000..85e778f4
--- /dev/null
+++ b/.history/src/index_20250219202759.css
@@ -0,0 +1,13 @@
+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;
+}
diff --git a/.history/src/index_20250226134256.css b/.history/src/index_20250226134256.css
new file mode 100644
index 00000000..b5132c0d
--- /dev/null
+++ b/.history/src/index_20250226134256.css
@@ -0,0 +1,16 @@
+@import "tailwindcss";
+
+
+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;
+}
diff --git a/.history/src/index_20250226134402.jsx b/.history/src/index_20250226134402.jsx
new file mode 100644
index 00000000..1d7eb3a6
--- /dev/null
+++ b/.history/src/index_20250226134402.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);
diff --git a/.history/src/index_20250226153721.jsx b/.history/src/index_20250226153721.jsx
new file mode 100644
index 00000000..a29b8bfa
--- /dev/null
+++ b/.history/src/index_20250226153721.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/.history/src/index_20250226191158.jsx b/.history/src/index_20250226191158.jsx
new file mode 100644
index 00000000..7ba15133
--- /dev/null
+++ b/.history/src/index_20250226191158.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+// Core CSS
+import 'primeicons/primeicons.css';
+// Theme
+import 'primereact/resources/primereact.min.css';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import ReactDOM from 'react-dom/client';
+
+// Icons
+
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/.history/src/index_20250226193627.jsx b/.history/src/index_20250226193627.jsx
new file mode 100644
index 00000000..7ba15133
--- /dev/null
+++ b/.history/src/index_20250226193627.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+// Core CSS
+import 'primeicons/primeicons.css';
+// Theme
+import 'primereact/resources/primereact.min.css';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import ReactDOM from 'react-dom/client';
+
+// Icons
+
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/.history/src/index_20250226193706.jsx b/.history/src/index_20250226193706.jsx
new file mode 100644
index 00000000..5ac18270
--- /dev/null
+++ b/.history/src/index_20250226193706.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+// CSS for order table
+import 'primeicons/primeicons.css';
+// Theme for order table
+import 'primereact/resources/primereact.min.css';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import ReactDOM from 'react-dom/client';
+
+// Icons
+
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/.history/src/index_20250226193717.jsx b/.history/src/index_20250226193717.jsx
new file mode 100644
index 00000000..59f4f9a1
--- /dev/null
+++ b/.history/src/index_20250226193717.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+// CSS for order table
+import 'primeicons/primeicons.css';
+// Theme for order table
+import 'primereact/resources/primereact.min.css';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+import './index.css';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/.history/src/output_20250226134456.css b/.history/src/output_20250226134456.css
new file mode 100644
index 00000000..c8023913
--- /dev/null
+++ b/.history/src/output_20250226134456.css
@@ -0,0 +1,228 @@
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-red-500: oklch(0.637 0.237 25.331);
+    --spacing: 0.25rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --default-font-variation-settings: var(
+      --font-sans--font-variation-settings
+    );
+    --default-mono-font-family: var(--font-mono);
+    --default-mono-font-feature-settings: var(
+      --font-mono--font-feature-settings
+    );
+    --default-mono-font-variation-settings: var(
+      --font-mono--font-variation-settings
+    );
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var( --default-font-variation-settings, normal );
+    -webkit-tap-highlight-color: transparent;
+  }
+  body {
+    line-height: inherit;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
+    font-feature-settings: var( --default-mono-font-feature-settings, normal );
+    font-variation-settings: var( --default-mono-font-variation-settings, normal );
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+    color: color-mix(in oklab, currentColor 50%, transparent);
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .flex {
+    display: flex;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+}
+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;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
diff --git a/.history/src/output_20250226134552.css b/.history/src/output_20250226134552.css
new file mode 100644
index 00000000..768ebb00
--- /dev/null
+++ b/.history/src/output_20250226134552.css
@@ -0,0 +1,228 @@
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-red-500: oklch(0.637 0.237 25.331);
+    --spacing: 0.25rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --default-font-variation-settings: var(
+      --font-sans--font-variation-settings
+    );
+    --default-mono-font-family: var(--font-mono);
+    --default-mono-font-feature-settings: var(
+      --font-mono--font-feature-settings
+    );
+    --default-mono-font-variation-settings: var(
+      --font-mono--font-variation-settings
+    );
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var( --default-font-variation-settings, normal );
+    -webkit-tap-highlight-color: transparent;
+  }
+  body {
+    line-height: inherit;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
+    font-feature-settings: var( --default-mono-font-feature-settings, normal );
+    font-variation-settings: var( --default-mono-font-variation-settings, normal );
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    /*vertical-align: middle; */
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+    color: color-mix(in oklab, currentColor 50%, transparent);
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .flex {
+    display: flex;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+}
+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;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
diff --git a/.history/src/pages/account/Login_20250219202759.jsx b/.history/src/pages/account/Login_20250219202759.jsx
new file mode 100644
index 00000000..f7d06554
--- /dev/null
+++ b/.history/src/pages/account/Login_20250219202759.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250226154747.jsx b/.history/src/pages/account/Login_20250226154747.jsx
new file mode 100644
index 00000000..14b89fb6
--- /dev/null
+++ b/.history/src/pages/account/Login_20250226154747.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import DialogDemo from 'common/components/FormPopup';
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+        <DialogDemo />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250226155609.jsx b/.history/src/pages/account/Login_20250226155609.jsx
new file mode 100644
index 00000000..f7d06554
--- /dev/null
+++ b/.history/src/pages/account/Login_20250226155609.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250226160429.jsx b/.history/src/pages/account/Login_20250226160429.jsx
new file mode 100644
index 00000000..358cf765
--- /dev/null
+++ b/.history/src/pages/account/Login_20250226160429.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+        <FormPopup />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250226191440.jsx b/.history/src/pages/account/Login_20250226191440.jsx
new file mode 100644
index 00000000..358cf765
--- /dev/null
+++ b/.history/src/pages/account/Login_20250226191440.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+        <FormPopup />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250226191450.jsx b/.history/src/pages/account/Login_20250226191450.jsx
new file mode 100644
index 00000000..76643286
--- /dev/null
+++ b/.history/src/pages/account/Login_20250226191450.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import GoogleButton from 'common/components/GoogleButton';
+import OrderTable from 'common/components/OrderTable';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+        <FormPopup />
+        <OrderTable />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250226191924.jsx b/.history/src/pages/account/Login_20250226191924.jsx
new file mode 100644
index 00000000..9c47c07e
--- /dev/null
+++ b/.history/src/pages/account/Login_20250226191924.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import GoogleButton from 'common/components/GoogleButton';
+import OrderTable from 'common/components/OrderTable';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+        <FormPopup />
+      </Form>
+      <OrderTable />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250226194737.jsx b/.history/src/pages/account/Login_20250226194737.jsx
new file mode 100644
index 00000000..358cf765
--- /dev/null
+++ b/.history/src/pages/account/Login_20250226194737.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+        <FormPopup />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250226194804.jsx b/.history/src/pages/account/Login_20250226194804.jsx
new file mode 100644
index 00000000..f7d06554
--- /dev/null
+++ b/.history/src/pages/account/Login_20250226194804.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250227222751.jsx b/.history/src/pages/account/Login_20250227222751.jsx
new file mode 100644
index 00000000..f7d06554
--- /dev/null
+++ b/.history/src/pages/account/Login_20250227222751.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250227222824.jsx b/.history/src/pages/account/Login_20250227222824.jsx
new file mode 100644
index 00000000..a7c6c51f
--- /dev/null
+++ b/.history/src/pages/account/Login_20250227222824.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <FormPopup />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250227223753.jsx b/.history/src/pages/account/Login_20250227223753.jsx
new file mode 100644
index 00000000..b1e28f1e
--- /dev/null
+++ b/.history/src/pages/account/Login_20250227223753.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import PasswordField, { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <PasswordField />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250227223925.jsx b/.history/src/pages/account/Login_20250227223925.jsx
new file mode 100644
index 00000000..d6f3fe71
--- /dev/null
+++ b/.history/src/pages/account/Login_20250227223925.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <Input />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250227224024.jsx b/.history/src/pages/account/Login_20250227224024.jsx
new file mode 100644
index 00000000..a47773cf
--- /dev/null
+++ b/.history/src/pages/account/Login_20250227224024.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <Input Text='Hello' Password='pass' />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250227224049.jsx b/.history/src/pages/account/Login_20250227224049.jsx
new file mode 100644
index 00000000..34e0b977
--- /dev/null
+++ b/.history/src/pages/account/Login_20250227224049.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      {/* <Input Text='Hello' Password='pass' /> */}
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250227224239.jsx b/.history/src/pages/account/Login_20250227224239.jsx
new file mode 100644
index 00000000..11d2896a
--- /dev/null
+++ b/.history/src/pages/account/Login_20250227224239.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import SomeOtherComponent from 'common/components/SomeOtherComponent';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <SomeOtherComponent />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250227224703.jsx b/.history/src/pages/account/Login_20250227224703.jsx
new file mode 100644
index 00000000..aeb0bd73
--- /dev/null
+++ b/.history/src/pages/account/Login_20250227224703.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import NewOrderForm from 'common/components/NewOrderForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <NewOrderForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228141046.jsx b/.history/src/pages/account/Login_20250228141046.jsx
new file mode 100644
index 00000000..cd5a9948
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228141046.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228141239.jsx b/.history/src/pages/account/Login_20250228141239.jsx
new file mode 100644
index 00000000..6df12a11
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228141239.jsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <PasswordChangeForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228141424.jsx b/.history/src/pages/account/Login_20250228141424.jsx
new file mode 100644
index 00000000..8f3211ed
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228141424.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import ResetPassword from './ResetPassword';
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <ResetPassword />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228141959.jsx b/.history/src/pages/account/Login_20250228141959.jsx
new file mode 100644
index 00000000..6df12a11
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228141959.jsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <PasswordChangeForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228142604.jsx b/.history/src/pages/account/Login_20250228142604.jsx
new file mode 100644
index 00000000..aeb0bd73
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228142604.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import NewOrderForm from 'common/components/NewOrderForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <NewOrderForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228142712.jsx b/.history/src/pages/account/Login_20250228142712.jsx
new file mode 100644
index 00000000..f7d06554
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228142712.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228142917.jsx b/.history/src/pages/account/Login_20250228142917.jsx
new file mode 100644
index 00000000..aeb0bd73
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228142917.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import NewOrderForm from 'common/components/NewOrderForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <NewOrderForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228143016.jsx b/.history/src/pages/account/Login_20250228143016.jsx
new file mode 100644
index 00000000..c56d2562
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228143016.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <PasswordChangeForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228143120.jsx b/.history/src/pages/account/Login_20250228143120.jsx
new file mode 100644
index 00000000..f7d06554
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228143120.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228150741.jsx b/.history/src/pages/account/Login_20250228150741.jsx
new file mode 100644
index 00000000..c56d2562
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228150741.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <PasswordChangeForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250228152403.jsx b/.history/src/pages/account/Login_20250228152403.jsx
new file mode 100644
index 00000000..04ca515b
--- /dev/null
+++ b/.history/src/pages/account/Login_20250228152403.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import NewOrderForm from 'common/components/NewOrderForm';
+import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <PasswordChangeForm />
+      <NewOrderForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250301232008.jsx b/.history/src/pages/account/Login_20250301232008.jsx
new file mode 100644
index 00000000..37da453e
--- /dev/null
+++ b/.history/src/pages/account/Login_20250301232008.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250301232103.jsx b/.history/src/pages/account/Login_20250301232103.jsx
new file mode 100644
index 00000000..0e03bcc9
--- /dev/null
+++ b/.history/src/pages/account/Login_20250301232103.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302124557.jsx b/.history/src/pages/account/Login_20250302124557.jsx
new file mode 100644
index 00000000..0fea198f
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302124557.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup yesText='Confirm' noText='Cancel' />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302124658.jsx b/.history/src/pages/account/Login_20250302124658.jsx
new file mode 100644
index 00000000..d86483a2
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302124658.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup
+        yesText='Confirm'
+        noText='Cancel'
+        yesOnClick={console.log('Yes!')}
+        noOnClick={console.log('No!')}
+      />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302125139.jsx b/.history/src/pages/account/Login_20250302125139.jsx
new file mode 100644
index 00000000..50c82270
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302125139.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  const handleYesClick = () => {
+    console.log('Yes!');
+  };
+
+  const handleNoClick = () => {
+    console.log('No!');
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup
+        yesText='Confirm'
+        noText='Cancel'
+        yesOnClick={handleYesClick}
+        noOnClick={handleNoClick}
+      />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302125212.jsx b/.history/src/pages/account/Login_20250302125212.jsx
new file mode 100644
index 00000000..0fea198f
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302125212.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup yesText='Confirm' noText='Cancel' />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302125553.jsx b/.history/src/pages/account/Login_20250302125553.jsx
new file mode 100644
index 00000000..12c5631e
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302125553.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup
+        yesText='Confirm'
+        noText='Cancel'
+        yesColor='green'
+        noColor='red'
+      />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302125722.jsx b/.history/src/pages/account/Login_20250302125722.jsx
new file mode 100644
index 00000000..0fea198f
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302125722.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup yesText='Confirm' noText='Cancel' />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302125904.jsx b/.history/src/pages/account/Login_20250302125904.jsx
new file mode 100644
index 00000000..d17cc537
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302125904.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup yesText='Confirm' noText='Cancel' />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302130128.jsx b/.history/src/pages/account/Login_20250302130128.jsx
new file mode 100644
index 00000000..d17cc537
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302130128.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup yesText='Confirm' noText='Cancel' />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302130226.jsx b/.history/src/pages/account/Login_20250302130226.jsx
new file mode 100644
index 00000000..eefa3951
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302130226.jsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup yesText='Confirm' noText='Cancel' />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302130234.jsx b/.history/src/pages/account/Login_20250302130234.jsx
new file mode 100644
index 00000000..d17cc537
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302130234.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup yesText='Confirm' noText='Cancel' />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302130515.jsx b/.history/src/pages/account/Login_20250302130515.jsx
new file mode 100644
index 00000000..49789531
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302130515.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302130615.jsx b/.history/src/pages/account/Login_20250302130615.jsx
new file mode 100644
index 00000000..49789531
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302130615.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302133025.jsx b/.history/src/pages/account/Login_20250302133025.jsx
new file mode 100644
index 00000000..3155a09c
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302133025.jsx
@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+import NewOrderForm from 'common/components/NewOrderForm';
+import PasswordChangeForm from 'common/components/PasswordChangeForm';
+import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+      <YNPopup />
+      <NewOrderForm />
+      <PasswordChangeForm />
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/Login_20250302135830.jsx b/.history/src/pages/account/Login_20250302135830.jsx
new file mode 100644
index 00000000..9cfde54c
--- /dev/null
+++ b/.history/src/pages/account/Login_20250302135830.jsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import GoogleButton from 'common/components/GoogleButton';
+// import NewOrderForm from 'common/components/NewOrderForm';
+// import PasswordChangeForm from 'common/components/PasswordChangeForm';
+// import YNPopup from 'common/components/YNPopup';
+import { Form, FormTitle } from 'common/components/form/Form';
+import { Input } from 'common/components/form/Input';
+import SubmitButton from 'common/components/form/SubmitButton';
+import { RedSpan } from 'common/components/form/styles';
+import { useUser } from 'common/contexts/UserContext';
+
+import { StyledPage } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  margin-top: -10px;
+  align-self: flex-end;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default function Login() {
+  const navigate = useNavigate();
+  const { login, googleAuth } = useUser();
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [formState, setFormState] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleChange = (e) => {
+    setFormState({ ...formState, [e.target.name]: e.target.value });
+    setError('');
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      await login(formState.email, formState.password);
+      navigate('/', { replace: true });
+    } catch (error) {
+      setError(error.message || 'Failed to login. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleLogin = async () => {
+    try {
+      await googleAuth();
+    } catch (error) {
+      setError(error.message);
+    }
+  };
+
+  return (
+    <StyledPage>
+      <Form onSubmit={handleSubmit}>
+        <FormTitle>Log In</FormTitle>
+        {error && <RedSpan>{error}</RedSpan>}
+        <Input.Text
+          title='Email'
+          name='email'
+          placeholder='jsmith or j@example.com'
+          value={formState.email}
+          onChange={handleChange}
+          required
+        />
+        <Input.Password
+          title='Password'
+          name='password'
+          value={formState.password}
+          onChange={handleChange}
+          required
+        />
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <SubmitButton disabled={isLoading}>
+          {isLoading ? 'Logging in...' : 'Log In'}
+        </SubmitButton>
+        <GoogleButton
+          onClick={handleGoogleLogin}
+          isLoading={isLoading}
+          text='Sign in with Google'
+        />
+      </Form>
+    </StyledPage>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250219202759.jsx b/.history/src/pages/account/ResetPassword_20250219202759.jsx
new file mode 100644
index 00000000..890c4e8e
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250219202759.jsx
@@ -0,0 +1,239 @@
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250228151340.jsx b/.history/src/pages/account/ResetPassword_20250228151340.jsx
new file mode 100644
index 00000000..16e458e8
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250228151340.jsx
@@ -0,0 +1,240 @@
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Button type='reset'>Cancel</Button>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250228151450.jsx b/.history/src/pages/account/ResetPassword_20250228151450.jsx
new file mode 100644
index 00000000..29107ef5
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250228151450.jsx
@@ -0,0 +1,242 @@
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Button type='reset' style={{ backgroundColor: 'rgb(255, 74, 74)' }}>
+          Cancel
+        </Button>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250228152022.jsx b/.history/src/pages/account/ResetPassword_20250228152022.jsx
new file mode 100644
index 00000000..26fefa5e
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250228152022.jsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Button
+          type='reset'
+          style={{
+            backgroundColor: 'rgb(255, 74, 74)',
+            marginTop: '-10px',
+          }}
+        >
+          Cancel
+        </Button>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250228154422.jsx b/.history/src/pages/account/ResetPassword_20250228154422.jsx
new file mode 100644
index 00000000..9db16d4b
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250228154422.jsx
@@ -0,0 +1,278 @@
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
+
+// const TriggerButton = styled.button`
+//   padding: 10px 20px;
+//   font-size: 16px;
+//   color: white;
+//   background-color: var(--violet-4);
+//   border: none;
+//   border-radius: 4px;
+//   cursor: pointer;
+//   &:hover {
+//     background-color: var(--violet-6);
+//   }
+// `;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          onSubmit={handleSubmit}
+          maxWidth='50%'
+          defaultSubmit={true}
+        >
+          <Container>
+            <h2>Set New Password</h2>
+            <Form onSubmit={handleSubmit}>
+              <PasswordContainer>
+                <Input
+                  type='password'
+                  placeholder='New Password'
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+                <PasswordStrength strength={checkPasswordStrength(password)} />
+                {password && (
+                  <PasswordRequirements>
+                    {validatePassword(password).map((req, index) => (
+                      <li key={index}>{req}</li>
+                    ))}
+                  </PasswordRequirements>
+                )}
+              </PasswordContainer>
+              <Input
+                type='password'
+                placeholder='Confirm New Password'
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+              />
+              <Button type='submit' disabled={isLoading}>
+                {isLoading ? 'Updating...' : 'Update Password'}
+              </Button>
+              <Button
+                type='reset'
+                style={{
+                  backgroundColor: 'rgb(255, 74, 74)',
+                  marginTop: '-10px',
+                }}
+              >
+                Cancel
+              </Button>
+              {error && <ErrorMessage>{error}</ErrorMessage>}
+            </Form>
+          </Container>
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250228154557.jsx b/.history/src/pages/account/ResetPassword_20250228154557.jsx
new file mode 100644
index 00000000..26fefa5e
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250228154557.jsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Button
+          type='reset'
+          style={{
+            backgroundColor: 'rgb(255, 74, 74)',
+            marginTop: '-10px',
+          }}
+        >
+          Cancel
+        </Button>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250301222612.jsx b/.history/src/pages/account/ResetPassword_20250301222612.jsx
new file mode 100644
index 00000000..26fefa5e
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250301222612.jsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Button
+          type='reset'
+          style={{
+            backgroundColor: 'rgb(255, 74, 74)',
+            marginTop: '-10px',
+          }}
+        >
+          Cancel
+        </Button>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250301223010.jsx b/.history/src/pages/account/ResetPassword_20250301223010.jsx
new file mode 100644
index 00000000..aec5b1c5
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250301223010.jsx
@@ -0,0 +1,249 @@
+import React, { useEffect, useState } from 'react';
+
+import { Dialog } from 'radix-ui';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Dialog.Close asChild>
+          <Button
+            type='reset'
+            style={{
+              backgroundColor: 'rgb(255, 74, 74)',
+              marginTop: '-10px',
+            }}
+          >
+            Cancel
+          </Button>
+        </Dialog.Close>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250301223016.jsx b/.history/src/pages/account/ResetPassword_20250301223016.jsx
new file mode 100644
index 00000000..aec5b1c5
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250301223016.jsx
@@ -0,0 +1,249 @@
+import React, { useEffect, useState } from 'react';
+
+import { Dialog } from 'radix-ui';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Dialog.Close asChild>
+          <Button
+            type='reset'
+            style={{
+              backgroundColor: 'rgb(255, 74, 74)',
+              marginTop: '-10px',
+            }}
+          >
+            Cancel
+          </Button>
+        </Dialog.Close>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250301223019.jsx b/.history/src/pages/account/ResetPassword_20250301223019.jsx
new file mode 100644
index 00000000..26fefa5e
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250301223019.jsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Button
+          type='reset'
+          style={{
+            backgroundColor: 'rgb(255, 74, 74)',
+            marginTop: '-10px',
+          }}
+        >
+          Cancel
+        </Button>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250301224113.jsx b/.history/src/pages/account/ResetPassword_20250301224113.jsx
new file mode 100644
index 00000000..eb9ef489
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250301224113.jsx
@@ -0,0 +1,251 @@
+import React, { useEffect, useState } from 'react';
+
+import { Dialog } from 'radix-ui';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        <Dialog.Close asChild>
+          <Button
+            type='reset'
+            style={{
+              backgroundColor: 'rgb(255, 74, 74)',
+              marginTop: '-10px',
+            }}
+          >
+            Cancel
+          </Button>
+        </Dialog.Close>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250301224135.jsx b/.history/src/pages/account/ResetPassword_20250301224135.jsx
new file mode 100644
index 00000000..b9ab440e
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250301224135.jsx
@@ -0,0 +1,252 @@
+import React, { useEffect, useState } from 'react';
+
+import { Dialog } from 'radix-ui';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        {/* Makes it so form closes when we press 'Cancel' */}
+        <Dialog.Close asChild>
+          <Button
+            type='reset'
+            style={{
+              backgroundColor: 'rgb(255, 74, 74)',
+              marginTop: '-10px',
+            }}
+          >
+            Cancel
+          </Button>
+        </Dialog.Close>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250302134927.jsx b/.history/src/pages/account/ResetPassword_20250302134927.jsx
new file mode 100644
index 00000000..765fbb47
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250302134927.jsx
@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from 'react';
+
+import { Dialog } from 'radix-ui';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        {/* Makes it so form closes when we press 'Cancel' -- Brock added this, no functionality
+            behind button is needed */}
+        <Dialog.Close asChild>
+          <Button
+            type='reset'
+            style={{
+              backgroundColor: 'rgb(255, 74, 74)',
+              marginTop: '-10px',
+            }}
+          >
+            Cancel
+          </Button>
+        </Dialog.Close>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/account/ResetPassword_20250302134932.jsx b/.history/src/pages/account/ResetPassword_20250302134932.jsx
new file mode 100644
index 00000000..53de78d8
--- /dev/null
+++ b/.history/src/pages/account/ResetPassword_20250302134932.jsx
@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from 'react';
+
+import { Dialog } from 'radix-ui';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { useUser } from 'common/contexts/UserContext';
+
+const Container = styled.div`
+  max-width: 400px;
+  margin: 40px auto;
+  padding: 20px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const Input = styled.input`
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
+const Button = styled.button`
+  padding: 10px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:disabled {
+    background-color: #ccc;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-top: 10px;
+`;
+
+const PasswordStrength = styled.div`
+  height: 5px;
+  margin-top: 5px;
+  background-color: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '#ff4d4d';
+      case 'medium':
+        return '#ffd700';
+      case 'strong':
+        return '#32cd32';
+      default:
+        return '#ccc';
+    }
+  }};
+  width: ${({ strength }) => {
+    switch (strength) {
+      case 'weak':
+        return '33%';
+      case 'medium':
+        return '66%';
+      case 'strong':
+        return '100%';
+      default:
+        return '0%';
+    }
+  }};
+  transition: all 0.3s ease;
+`;
+
+const PasswordRequirements = styled.ul`
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 5px;
+  padding-left: 20px;
+`;
+
+const PasswordContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const { updatePassword } = useUser();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash.substring(1);
+
+    const hashParams = new URLSearchParams(hash);
+
+    const access_token = hashParams.get('access_token');
+    const type = hashParams.get('type');
+
+    console.log('Hash parameters:', {
+      hasAccessToken: !!access_token,
+      type,
+    });
+
+    if (!access_token) {
+      setError(
+        'No reset token found. Please request a new password reset link.'
+      );
+    } else if (type !== 'recovery') {
+      setError(
+        'Invalid reset link type. Please request a new password reset link.'
+      );
+    }
+  }, []);
+
+  const checkPasswordStrength = (password) => {
+    const hasUpperCase = /[A-Z]/.test(password);
+    const hasLowerCase = /[a-z]/.test(password);
+    const hasNumbers = /\d/.test(password);
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+
+    const strength =
+      (hasUpperCase ? 1 : 0) +
+      (hasLowerCase ? 1 : 0) +
+      (hasNumbers ? 1 : 0) +
+      (hasSpecialChar ? 1 : 0) +
+      (password.length >= 8 ? 1 : 0);
+
+    if (strength >= 4) return 'strong';
+    if (strength >= 2) return 'medium';
+    return 'weak';
+  };
+
+  const validatePassword = (password) => {
+    const requirements = [];
+
+    if (password.length < 8) {
+      requirements.push('Password must be at least 8 characters long');
+    }
+    if (!/[A-Z]/.test(password)) {
+      requirements.push('Include at least one uppercase letter');
+    }
+    if (!/[a-z]/.test(password)) {
+      requirements.push('Include at least one lowercase letter');
+    }
+    if (!/\d/.test(password)) {
+      requirements.push('Include at least one number');
+    }
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      requirements.push('Include at least one special character');
+    }
+
+    return requirements;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    const hash = window.location.hash.substring(1);
+    const hashParams = new URLSearchParams(hash);
+    const access_token = hashParams.get('access_token');
+
+    if (!access_token) {
+      setError(
+        'Reset token not found. Please request a new password reset link.'
+      );
+      return;
+    }
+
+    const requirements = validatePassword(password);
+    if (requirements.length > 0) {
+      setError(requirements.join(', '));
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      console.log('Attempting password reset with token');
+      await updatePassword(password, access_token);
+
+      navigate('/login', {
+        state: {
+          message:
+            'Password has been reset successfully. Please login with your new password.',
+        },
+        replace: true,
+      });
+    } catch (err) {
+      console.error('Password reset error:', err);
+      setError(err.message || 'Failed to reset password. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <h2>Set New Password</h2>
+      <Form onSubmit={handleSubmit}>
+        <PasswordContainer>
+          <Input
+            type='password'
+            placeholder='New Password'
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <PasswordStrength strength={checkPasswordStrength(password)} />
+          {password && (
+            <PasswordRequirements>
+              {validatePassword(password).map((req, index) => (
+                <li key={index}>{req}</li>
+              ))}
+            </PasswordRequirements>
+          )}
+        </PasswordContainer>
+        <Input
+          type='password'
+          placeholder='Confirm New Password'
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          required
+        />
+        <Button type='submit' disabled={isLoading}>
+          {isLoading ? 'Updating...' : 'Update Password'}
+        </Button>
+        {/* Makes it so form closes when we press 'Cancel' -- Brock added this, no functionality
+            behind button is needed (For now...?) */}
+        <Dialog.Close asChild>
+          <Button
+            type='reset'
+            style={{
+              backgroundColor: 'rgb(255, 74, 74)',
+              marginTop: '-10px',
+            }}
+          >
+            Cancel
+          </Button>
+        </Dialog.Close>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </Form>
+    </Container>
+  );
+}
diff --git a/.history/src/pages/home/Home_20250219202759.jsx b/.history/src/pages/home/Home_20250219202759.jsx
new file mode 100644
index 00000000..827c148f
--- /dev/null
+++ b/.history/src/pages/home/Home_20250219202759.jsx
@@ -0,0 +1,36 @@
+import React, { useContext } from 'react';
+
+import styled from 'styled-components';
+
+import { Subtitle, Title } from 'common/components/Text';
+import UsersList from 'common/components/Users/UsersList';
+import { UserContext } from 'common/contexts/UserContext';
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const HomePage = styled.div`
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+`;
+
+export default function Home() {
+  const { user } = useContext(UserContext);
+
+  return (
+    <HomePage>
+      <TextContainer>
+        <Title>Home Page</Title>
+        <Subtitle>Welcome, {user?.firstname || 'User'}!</Subtitle>
+      </TextContainer>
+      <UsersList />
+    </HomePage>
+  );
+}
diff --git a/.history/src/pages/home/Home_20250226194908.jsx b/.history/src/pages/home/Home_20250226194908.jsx
new file mode 100644
index 00000000..ee9df569
--- /dev/null
+++ b/.history/src/pages/home/Home_20250226194908.jsx
@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import { Subtitle, Title } from 'common/components/Text';
+import UsersList from 'common/components/Users/UsersList';
+import { UserContext } from 'common/contexts/UserContext';
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const HomePage = styled.div`
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+`;
+
+export default function Home() {
+  const { user } = useContext(UserContext);
+
+  return (
+    <HomePage>
+      <TextContainer>
+        <Title>Home Page</Title>
+        <Subtitle>Welcome, {user?.firstname || 'User'}!</Subtitle>
+      </TextContainer>
+      <UsersList />
+      <FormPopup />
+    </HomePage>
+  );
+}
diff --git a/.history/src/pages/home/Home_20250226195859.jsx b/.history/src/pages/home/Home_20250226195859.jsx
new file mode 100644
index 00000000..ee9df569
--- /dev/null
+++ b/.history/src/pages/home/Home_20250226195859.jsx
@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import { Subtitle, Title } from 'common/components/Text';
+import UsersList from 'common/components/Users/UsersList';
+import { UserContext } from 'common/contexts/UserContext';
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const HomePage = styled.div`
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+`;
+
+export default function Home() {
+  const { user } = useContext(UserContext);
+
+  return (
+    <HomePage>
+      <TextContainer>
+        <Title>Home Page</Title>
+        <Subtitle>Welcome, {user?.firstname || 'User'}!</Subtitle>
+      </TextContainer>
+      <UsersList />
+      <FormPopup />
+    </HomePage>
+  );
+}
diff --git a/.history/src/pages/home/Home_20250226195905.jsx b/.history/src/pages/home/Home_20250226195905.jsx
new file mode 100644
index 00000000..e7d40c25
--- /dev/null
+++ b/.history/src/pages/home/Home_20250226195905.jsx
@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+
+import styled from 'styled-components';
+
+import FormPopup from 'common/components/FormPopup';
+import OrederTable from 'common/components/OrderTable';
+import { Subtitle, Title } from 'common/components/Text';
+import UsersList from 'common/components/Users/UsersList';
+import { UserContext } from 'common/contexts/UserContext';
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const HomePage = styled.div`
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+`;
+
+export default function Home() {
+  const { user } = useContext(UserContext);
+
+  return (
+    <HomePage>
+      <TextContainer>
+        <Title>Home Page</Title>
+        <Subtitle>Welcome, {user?.firstname || 'User'}!</Subtitle>
+      </TextContainer>
+      <UsersList />
+      <FormPopup />
+      <OrederTable />
+    </HomePage>
+  );
+}
diff --git a/.prettierrc.js b/.prettierrc.js
index ce8623ca..d118dd69 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -6,7 +6,6 @@ module.exports = {
   printWidth: 80,
   jsxSingleQuote: true,
   proseWrap: 'always',
-  plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
   importOrder: [
     '^react$',
     '<THIRD_PARTY_MODULES>',
diff --git a/.vscode/settings.json b/.vscode/settings.json
index c58f9c05..c08a66ba 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,11 @@
   },
   "editor.formatOnSaveMode": "file",
   "vs-code-prettier-eslint.prettierLast": false,
-  "editor.tabSize": 2
+  "editor.tabSize": 4,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+},
+"editor.detectIndentation": true,
+"prettier.tabWidth": 4,
+"prettier.useTabs": true
 }
diff --git a/jsconfig.json b/jsconfig.json
index ef66e1dc..7eab209e 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,7 +1,10 @@
 {
   "compilerOptions": {
     "baseUrl": "src",
-    "jsx": "react"
+    "jsx": "react",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/package-lock.json b/package-lock.json
index d130e671..9ee8f01e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,19 +8,38 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/colors": "^3.0.0",
+        "@radix-ui/react-alert-dialog": "^1.1.6",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@tailwindcss/cli": "^4.0.9",
+        "ag-grid-enterprise": "^33.2.4",
+        "ag-grid-react": "^33.1.1",
+        "class-variance-authority": "^0.7.1",
+        "classnames": "^2.5.1",
+        "clsx": "^2.1.1",
         "cra-template": "1.2.0",
+        "date-fns": "^4.1.0",
+        "lucide-react": "^0.476.0",
+        "primeicons": "^7.0.0",
+        "primereact": "^10.9.2",
         "prop-types": "^15.8.1",
+        "radix-ui": "^1.1.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.0.2",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "styled-components": "^6.1.13",
-        "web-vitals": "^4.2.4"
+        "tailwind-merge": "^3.0.2",
+        "tailwindcss-animate": "^1.0.7",
+        "web-vitals": "^4.2.4",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@babel/plugin-transform-private-property-in-object": "^7.25.9",
         "@eslint/js": "^9.16.0",
         "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+        "autoprefixer": "^10.4.20",
         "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.31.0",
@@ -28,14 +47,14 @@
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.37.2",
         "globals": "^15.13.0",
+        "postcss": "^8.5.3",
         "prettier": "^3.4.2",
-        "prettier-eslint": "^16.3.0"
+        "prettier-eslint": "^16.3.0",
+        "tailwindcss": "^4.0.9"
       }
     },
     "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==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -46,8 +65,6 @@
     },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -59,8 +76,6 @@
     },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -73,8 +88,6 @@
     },
     "node_modules/@babel/compat-data": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz",
-      "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -82,8 +95,6 @@
     },
     "node_modules/@babel/core": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
-      "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -112,8 +123,6 @@
     },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -121,8 +130,6 @@
     },
     "node_modules/@babel/eslint-parser": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.9.tgz",
-      "integrity": "sha512-5UXfgpK0j0Xr/xIdgdLEhOFxaDZ0bRPWJJchRpqOSur/3rZoPbqqki5mm0p4NE2cs28krBEiSM2MB7//afRSQQ==",
       "license": "MIT",
       "dependencies": {
         "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
@@ -139,8 +146,6 @@
     },
     "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=10"
@@ -148,8 +153,6 @@
     },
     "node_modules/@babel/eslint-parser/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -157,8 +160,6 @@
     },
     "node_modules/@babel/generator": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz",
-      "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.26.3",
@@ -173,8 +174,6 @@
     },
     "node_modules/@babel/helper-annotate-as-pure": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz",
-      "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.25.9"
@@ -185,8 +184,6 @@
     },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
-      "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.25.9",
@@ -201,8 +198,6 @@
     },
     "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -210,8 +205,6 @@
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz",
-      "integrity": "sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -231,8 +224,6 @@
     },
     "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -240,8 +231,6 @@
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz",
-      "integrity": "sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -257,8 +246,6 @@
     },
     "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -266,8 +253,6 @@
     },
     "node_modules/@babel/helper-define-polyfill-provider": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz",
-      "integrity": "sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.22.6",
@@ -282,8 +267,6 @@
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz",
-      "integrity": "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
@@ -295,8 +278,6 @@
     },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
-      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
@@ -308,8 +289,6 @@
     },
     "node_modules/@babel/helper-module-transforms": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
-      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
@@ -325,8 +304,6 @@
     },
     "node_modules/@babel/helper-optimise-call-expression": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz",
-      "integrity": "sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.25.9"
@@ -337,8 +314,6 @@
     },
     "node_modules/@babel/helper-plugin-utils": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
-      "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -346,8 +321,6 @@
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz",
-      "integrity": "sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -363,8 +336,6 @@
     },
     "node_modules/@babel/helper-replace-supers": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz",
-      "integrity": "sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-member-expression-to-functions": "^7.25.9",
@@ -380,8 +351,6 @@
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz",
-      "integrity": "sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==",
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.25.9",
@@ -393,8 +362,6 @@
     },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -402,8 +369,6 @@
     },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -411,8 +376,6 @@
     },
     "node_modules/@babel/helper-validator-option": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
-      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -420,8 +383,6 @@
     },
     "node_modules/@babel/helper-wrap-function": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz",
-      "integrity": "sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==",
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.9",
@@ -434,8 +395,6 @@
     },
     "node_modules/@babel/helpers": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
-      "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.9",
@@ -447,8 +406,6 @@
     },
     "node_modules/@babel/parser": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
-      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.26.3"
@@ -462,8 +419,6 @@
     },
     "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz",
-      "integrity": "sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -478,8 +433,6 @@
     },
     "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz",
-      "integrity": "sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -493,8 +446,6 @@
     },
     "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz",
-      "integrity": "sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -508,8 +459,6 @@
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz",
-      "integrity": "sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -525,8 +474,6 @@
     },
     "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz",
-      "integrity": "sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -541,9 +488,6 @@
     },
     "node_modules/@babel/plugin-proposal-class-properties": {
       "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
-      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.18.6",
@@ -558,8 +502,6 @@
     },
     "node_modules/@babel/plugin-proposal-decorators": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.25.9.tgz",
-      "integrity": "sha512-smkNLL/O1ezy9Nhy4CNosc4Va+1wo5w4gzSZeLe6y6dM4mmHfYOCPolXQPHQxonZCF+ZyebxN9vqOolkYrSn5g==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -575,9 +517,6 @@
     },
     "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
       "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
-      "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.18.6",
@@ -592,9 +531,6 @@
     },
     "node_modules/@babel/plugin-proposal-numeric-separator": {
       "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
-      "integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.18.6",
@@ -609,9 +545,6 @@
     },
     "node_modules/@babel/plugin-proposal-optional-chaining": {
       "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
-      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.20.2",
@@ -627,9 +560,6 @@
     },
     "node_modules/@babel/plugin-proposal-private-methods": {
       "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
-      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.18.6",
@@ -644,8 +574,6 @@
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
       "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -656,8 +584,6 @@
     },
     "node_modules/@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -668,8 +594,6 @@
     },
     "node_modules/@babel/plugin-syntax-bigint": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -680,8 +604,6 @@
     },
     "node_modules/@babel/plugin-syntax-class-properties": {
       "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.12.13"
@@ -692,8 +614,6 @@
     },
     "node_modules/@babel/plugin-syntax-class-static-block": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -707,8 +627,6 @@
     },
     "node_modules/@babel/plugin-syntax-decorators": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.25.9.tgz",
-      "integrity": "sha512-ryzI0McXUPJnRCvMo4lumIKZUzhYUO/ScI+Mz4YVaTLt04DHNSjEUjKVvbzQjZFLuod/cYEc07mJWhzl6v4DPg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -722,8 +640,6 @@
     },
     "node_modules/@babel/plugin-syntax-flow": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.26.0.tgz",
-      "integrity": "sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -737,8 +653,6 @@
     },
     "node_modules/@babel/plugin-syntax-import-assertions": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz",
-      "integrity": "sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -752,8 +666,6 @@
     },
     "node_modules/@babel/plugin-syntax-import-attributes": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz",
-      "integrity": "sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -767,8 +679,6 @@
     },
     "node_modules/@babel/plugin-syntax-import-meta": {
       "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
@@ -779,8 +689,6 @@
     },
     "node_modules/@babel/plugin-syntax-json-strings": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -791,8 +699,6 @@
     },
     "node_modules/@babel/plugin-syntax-jsx": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz",
-      "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -806,8 +712,6 @@
     },
     "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
@@ -818,8 +722,6 @@
     },
     "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -830,8 +732,6 @@
     },
     "node_modules/@babel/plugin-syntax-numeric-separator": {
       "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
@@ -842,8 +742,6 @@
     },
     "node_modules/@babel/plugin-syntax-object-rest-spread": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -854,8 +752,6 @@
     },
     "node_modules/@babel/plugin-syntax-optional-catch-binding": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -866,8 +762,6 @@
     },
     "node_modules/@babel/plugin-syntax-optional-chaining": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.8.0"
@@ -878,8 +772,6 @@
     },
     "node_modules/@babel/plugin-syntax-private-property-in-object": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -893,8 +785,6 @@
     },
     "node_modules/@babel/plugin-syntax-top-level-await": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.14.5"
@@ -908,8 +798,6 @@
     },
     "node_modules/@babel/plugin-syntax-typescript": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz",
-      "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -923,8 +811,6 @@
     },
     "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
       "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
-      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.18.6",
@@ -939,8 +825,6 @@
     },
     "node_modules/@babel/plugin-transform-arrow-functions": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz",
-      "integrity": "sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -954,8 +838,6 @@
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz",
-      "integrity": "sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -971,8 +853,6 @@
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz",
-      "integrity": "sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
@@ -988,8 +868,6 @@
     },
     "node_modules/@babel/plugin-transform-block-scoped-functions": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz",
-      "integrity": "sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1003,8 +881,6 @@
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz",
-      "integrity": "sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1018,8 +894,6 @@
     },
     "node_modules/@babel/plugin-transform-class-properties": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz",
-      "integrity": "sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -1034,8 +908,6 @@
     },
     "node_modules/@babel/plugin-transform-class-static-block": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz",
-      "integrity": "sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -1050,8 +922,6 @@
     },
     "node_modules/@babel/plugin-transform-classes": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz",
-      "integrity": "sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1070,8 +940,6 @@
     },
     "node_modules/@babel/plugin-transform-classes/node_modules/globals": {
       "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -1079,8 +947,6 @@
     },
     "node_modules/@babel/plugin-transform-computed-properties": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz",
-      "integrity": "sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1095,8 +961,6 @@
     },
     "node_modules/@babel/plugin-transform-destructuring": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz",
-      "integrity": "sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1110,8 +974,6 @@
     },
     "node_modules/@babel/plugin-transform-dotall-regex": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz",
-      "integrity": "sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -1126,8 +988,6 @@
     },
     "node_modules/@babel/plugin-transform-duplicate-keys": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz",
-      "integrity": "sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1141,8 +1001,6 @@
     },
     "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz",
-      "integrity": "sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -1157,8 +1015,6 @@
     },
     "node_modules/@babel/plugin-transform-dynamic-import": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz",
-      "integrity": "sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1172,8 +1028,6 @@
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz",
-      "integrity": "sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1187,8 +1041,6 @@
     },
     "node_modules/@babel/plugin-transform-export-namespace-from": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz",
-      "integrity": "sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1202,8 +1054,6 @@
     },
     "node_modules/@babel/plugin-transform-flow-strip-types": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.25.9.tgz",
-      "integrity": "sha512-/VVukELzPDdci7UUsWQaSkhgnjIWXnIyRpM02ldxaVoFK96c41So8JcKT3m0gYjyv7j5FNPGS5vfELrWalkbDA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1218,8 +1068,6 @@
     },
     "node_modules/@babel/plugin-transform-for-of": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz",
-      "integrity": "sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1234,8 +1082,6 @@
     },
     "node_modules/@babel/plugin-transform-function-name": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz",
-      "integrity": "sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.25.9",
@@ -1251,8 +1097,6 @@
     },
     "node_modules/@babel/plugin-transform-json-strings": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz",
-      "integrity": "sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1266,8 +1110,6 @@
     },
     "node_modules/@babel/plugin-transform-literals": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz",
-      "integrity": "sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1281,8 +1123,6 @@
     },
     "node_modules/@babel/plugin-transform-logical-assignment-operators": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz",
-      "integrity": "sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1296,8 +1136,6 @@
     },
     "node_modules/@babel/plugin-transform-member-expression-literals": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz",
-      "integrity": "sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1311,8 +1149,6 @@
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz",
-      "integrity": "sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
@@ -1327,8 +1163,6 @@
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz",
-      "integrity": "sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.26.0",
@@ -1343,8 +1177,6 @@
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz",
-      "integrity": "sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
@@ -1361,8 +1193,6 @@
     },
     "node_modules/@babel/plugin-transform-modules-umd": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz",
-      "integrity": "sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-transforms": "^7.25.9",
@@ -1377,8 +1207,6 @@
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz",
-      "integrity": "sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -1393,8 +1221,6 @@
     },
     "node_modules/@babel/plugin-transform-new-target": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz",
-      "integrity": "sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1408,8 +1234,6 @@
     },
     "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.9.tgz",
-      "integrity": "sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1423,8 +1247,6 @@
     },
     "node_modules/@babel/plugin-transform-numeric-separator": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz",
-      "integrity": "sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1438,8 +1260,6 @@
     },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz",
-      "integrity": "sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.25.9",
@@ -1455,8 +1275,6 @@
     },
     "node_modules/@babel/plugin-transform-object-super": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz",
-      "integrity": "sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1471,8 +1289,6 @@
     },
     "node_modules/@babel/plugin-transform-optional-catch-binding": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz",
-      "integrity": "sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1486,8 +1302,6 @@
     },
     "node_modules/@babel/plugin-transform-optional-chaining": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz",
-      "integrity": "sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1502,8 +1316,6 @@
     },
     "node_modules/@babel/plugin-transform-parameters": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz",
-      "integrity": "sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1517,8 +1329,6 @@
     },
     "node_modules/@babel/plugin-transform-private-methods": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz",
-      "integrity": "sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-class-features-plugin": "^7.25.9",
@@ -1533,8 +1343,6 @@
     },
     "node_modules/@babel/plugin-transform-private-property-in-object": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz",
-      "integrity": "sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1550,8 +1358,6 @@
     },
     "node_modules/@babel/plugin-transform-property-literals": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz",
-      "integrity": "sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1565,8 +1371,6 @@
     },
     "node_modules/@babel/plugin-transform-react-constant-elements": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.9.tgz",
-      "integrity": "sha512-Ncw2JFsJVuvfRsa2lSHiC55kETQVLSnsYGQ1JDDwkUeWGTL/8Tom8aLTnlqgoeuopWrbbGndrc9AlLYrIosrow==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1580,8 +1384,6 @@
     },
     "node_modules/@babel/plugin-transform-react-display-name": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz",
-      "integrity": "sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1595,8 +1397,6 @@
     },
     "node_modules/@babel/plugin-transform-react-jsx": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz",
-      "integrity": "sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1614,8 +1414,6 @@
     },
     "node_modules/@babel/plugin-transform-react-jsx-development": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.25.9.tgz",
-      "integrity": "sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==",
       "license": "MIT",
       "dependencies": {
         "@babel/plugin-transform-react-jsx": "^7.25.9"
@@ -1629,8 +1427,6 @@
     },
     "node_modules/@babel/plugin-transform-react-pure-annotations": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.25.9.tgz",
-      "integrity": "sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1645,8 +1441,6 @@
     },
     "node_modules/@babel/plugin-transform-regenerator": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz",
-      "integrity": "sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1661,8 +1455,6 @@
     },
     "node_modules/@babel/plugin-transform-regexp-modifiers": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz",
-      "integrity": "sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -1677,8 +1469,6 @@
     },
     "node_modules/@babel/plugin-transform-reserved-words": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz",
-      "integrity": "sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1692,8 +1482,6 @@
     },
     "node_modules/@babel/plugin-transform-runtime": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.9.tgz",
-      "integrity": "sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.25.9",
@@ -1712,8 +1500,6 @@
     },
     "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -1721,8 +1507,6 @@
     },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz",
-      "integrity": "sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1736,8 +1520,6 @@
     },
     "node_modules/@babel/plugin-transform-spread": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz",
-      "integrity": "sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -1752,8 +1534,6 @@
     },
     "node_modules/@babel/plugin-transform-sticky-regex": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz",
-      "integrity": "sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1767,8 +1547,6 @@
     },
     "node_modules/@babel/plugin-transform-template-literals": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz",
-      "integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1782,8 +1560,6 @@
     },
     "node_modules/@babel/plugin-transform-typeof-symbol": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz",
-      "integrity": "sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1797,8 +1573,6 @@
     },
     "node_modules/@babel/plugin-transform-typescript": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.3.tgz",
-      "integrity": "sha512-6+5hpdr6mETwSKjmJUdYw0EIkATiQhnELWlE3kJFBwSg/BGIVwVaVbX+gOXBCdc7Ln1RXZxyWGecIXhUfnl7oA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.25.9",
@@ -1816,8 +1590,6 @@
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz",
-      "integrity": "sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9"
@@ -1831,8 +1603,6 @@
     },
     "node_modules/@babel/plugin-transform-unicode-property-regex": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz",
-      "integrity": "sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -1847,8 +1617,6 @@
     },
     "node_modules/@babel/plugin-transform-unicode-regex": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz",
-      "integrity": "sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -1863,8 +1631,6 @@
     },
     "node_modules/@babel/plugin-transform-unicode-sets-regex": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz",
-      "integrity": "sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.25.9",
@@ -1879,8 +1645,6 @@
     },
     "node_modules/@babel/preset-env": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.0.tgz",
-      "integrity": "sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==",
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.26.0",
@@ -1962,8 +1726,6 @@
     },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -1971,8 +1733,6 @@
     },
     "node_modules/@babel/preset-modules": {
       "version": "0.1.6-no-external-plugins",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
-      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.0.0",
@@ -1985,8 +1745,6 @@
     },
     "node_modules/@babel/preset-react": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.26.3.tgz",
-      "integrity": "sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -2005,8 +1763,6 @@
     },
     "node_modules/@babel/preset-typescript": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz",
-      "integrity": "sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.25.9",
@@ -2024,8 +1780,6 @@
     },
     "node_modules/@babel/runtime": {
       "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -2036,8 +1790,6 @@
     },
     "node_modules/@babel/template": {
       "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
-      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
@@ -2050,8 +1802,6 @@
     },
     "node_modules/@babel/traverse": {
       "version": "7.26.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
-      "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.26.2",
@@ -2068,8 +1818,6 @@
     },
     "node_modules/@babel/traverse/node_modules/globals": {
       "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -2077,8 +1825,6 @@
     },
     "node_modules/@babel/types": {
       "version": "7.26.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
-      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -2090,20 +1836,14 @@
     },
     "node_modules/@bcoe/v8-coverage": {
       "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "license": "MIT"
     },
     "node_modules/@csstools/normalize.css": {
       "version": "12.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz",
-      "integrity": "sha512-YAYeJ+Xqh7fUou1d1j9XHl44BmsuThiTr4iNrgCQ3J27IbhXsxXDGZ1cXv8Qvs99d4rBbLiSKy3+WZiet32PcQ==",
       "license": "CC0-1.0"
     },
     "node_modules/@csstools/postcss-cascade-layers": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz",
-      "integrity": "sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/selector-specificity": "^2.0.2",
@@ -2122,8 +1862,6 @@
     },
     "node_modules/@csstools/postcss-color-function": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz",
-      "integrity": "sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/postcss-progressive-custom-properties": "^1.1.0",
@@ -2142,8 +1880,6 @@
     },
     "node_modules/@csstools/postcss-font-format-keywords": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz",
-      "integrity": "sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -2161,8 +1897,6 @@
     },
     "node_modules/@csstools/postcss-hwb-function": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz",
-      "integrity": "sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -2180,8 +1914,6 @@
     },
     "node_modules/@csstools/postcss-ic-unit": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz",
-      "integrity": "sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/postcss-progressive-custom-properties": "^1.1.0",
@@ -2200,8 +1932,6 @@
     },
     "node_modules/@csstools/postcss-is-pseudo-class": {
       "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz",
-      "integrity": "sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/selector-specificity": "^2.0.0",
@@ -2220,8 +1950,6 @@
     },
     "node_modules/@csstools/postcss-nested-calc": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz",
-      "integrity": "sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -2239,8 +1967,6 @@
     },
     "node_modules/@csstools/postcss-normalize-display-values": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz",
-      "integrity": "sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -2258,8 +1984,6 @@
     },
     "node_modules/@csstools/postcss-oklab-function": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz",
-      "integrity": "sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/postcss-progressive-custom-properties": "^1.1.0",
@@ -2278,8 +2002,6 @@
     },
     "node_modules/@csstools/postcss-progressive-custom-properties": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz",
-      "integrity": "sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -2293,8 +2015,6 @@
     },
     "node_modules/@csstools/postcss-stepped-value-functions": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz",
-      "integrity": "sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -2312,8 +2032,6 @@
     },
     "node_modules/@csstools/postcss-text-decoration-shorthand": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz",
-      "integrity": "sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -2331,8 +2049,6 @@
     },
     "node_modules/@csstools/postcss-trigonometric-functions": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz",
-      "integrity": "sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -2350,8 +2066,6 @@
     },
     "node_modules/@csstools/postcss-unset-value": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
-      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
       "license": "CC0-1.0",
       "engines": {
         "node": "^12 || ^14 || >=16"
@@ -2366,8 +2080,6 @@
     },
     "node_modules/@csstools/selector-specificity": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz",
-      "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
       "license": "CC0-1.0",
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -2382,8 +2094,6 @@
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.8.1"
@@ -2391,20 +2101,14 @@
     },
     "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==",
       "license": "MIT"
     },
     "node_modules/@emotion/unitless": {
       "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
-      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
       "license": "MIT"
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
-      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
       "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
@@ -2421,8 +2125,6 @@
     },
     "node_modules/@eslint-community/regexpp": {
       "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
       "license": "MIT",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -2430,8 +2132,6 @@
     },
     "node_modules/@eslint/eslintrc": {
       "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
@@ -2453,14 +2153,10 @@
     },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "license": "Python-2.0"
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
       "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "license": "MIT",
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -2474,8 +2170,6 @@
     },
     "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -2486,8 +2180,6 @@
     },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
@@ -2498,19 +2190,44 @@
     },
     "node_modules/@eslint/js": {
       "version": "9.16.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.16.0.tgz",
-      "integrity": "sha512-tw2HxzQkrbeuvyj1tG2Yqq+0H9wGoI2IMk4EOsQeX+vmd75FtJAzf+gTA69WF+baUKRYQ3x2kbLE08js5OsTVg==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "license": "MIT",
+      "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.9",
+      "license": "MIT"
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-      "deprecated": "Use @eslint/config-array instead",
       "license": "Apache-2.0",
       "dependencies": {
         "@humanwhocodes/object-schema": "^2.0.3",
@@ -2523,8 +2240,6 @@
     },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=12.22"
@@ -2536,15 +2251,10 @@
     },
     "node_modules/@humanwhocodes/object-schema": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead",
       "license": "BSD-3-Clause"
     },
     "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==",
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -2560,8 +2270,6 @@
     },
     "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -2572,8 +2280,6 @@
     },
     "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==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -2584,8 +2290,6 @@
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -2601,8 +2305,6 @@
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -2616,8 +2318,6 @@
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -2633,8 +2333,6 @@
     },
     "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",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
       "license": "ISC",
       "dependencies": {
         "camelcase": "^5.3.1",
@@ -2649,8 +2347,6 @@
     },
     "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
       "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -2658,8 +2354,6 @@
     },
     "node_modules/@istanbuljs/schema": {
       "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -2667,8 +2361,6 @@
     },
     "node_modules/@jest/console": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-27.5.1.tgz",
-      "integrity": "sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -2684,8 +2376,6 @@
     },
     "node_modules/@jest/core": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-27.5.1.tgz",
-      "integrity": "sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/console": "^27.5.1",
@@ -2731,8 +2421,6 @@
     },
     "node_modules/@jest/environment": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz",
-      "integrity": "sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==",
       "license": "MIT",
       "dependencies": {
         "@jest/fake-timers": "^27.5.1",
@@ -2746,8 +2434,6 @@
     },
     "node_modules/@jest/fake-timers": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
-      "integrity": "sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -2763,8 +2449,6 @@
     },
     "node_modules/@jest/globals": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.5.1.tgz",
-      "integrity": "sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==",
       "license": "MIT",
       "dependencies": {
         "@jest/environment": "^27.5.1",
@@ -2777,8 +2461,6 @@
     },
     "node_modules/@jest/reporters": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.5.1.tgz",
-      "integrity": "sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==",
       "license": "MIT",
       "dependencies": {
         "@bcoe/v8-coverage": "^0.2.3",
@@ -2821,8 +2503,6 @@
     },
     "node_modules/@jest/reporters/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2830,8 +2510,6 @@
     },
     "node_modules/@jest/schemas": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
-      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
       "license": "MIT",
       "dependencies": {
         "@sinclair/typebox": "^0.24.1"
@@ -2842,8 +2520,6 @@
     },
     "node_modules/@jest/source-map": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-27.5.1.tgz",
-      "integrity": "sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==",
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0",
@@ -2856,8 +2532,6 @@
     },
     "node_modules/@jest/source-map/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2865,8 +2539,6 @@
     },
     "node_modules/@jest/test-result": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-27.5.1.tgz",
-      "integrity": "sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==",
       "license": "MIT",
       "dependencies": {
         "@jest/console": "^27.5.1",
@@ -2880,8 +2552,6 @@
     },
     "node_modules/@jest/test-sequencer": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz",
-      "integrity": "sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/test-result": "^27.5.1",
@@ -2895,8 +2565,6 @@
     },
     "node_modules/@jest/transform": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
-      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.1.0",
@@ -2921,14 +2589,10 @@
     },
     "node_modules/@jest/transform/node_modules/convert-source-map": {
       "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
     "node_modules/@jest/transform/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2936,8 +2600,6 @@
     },
     "node_modules/@jest/types": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
-      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
       "license": "MIT",
       "dependencies": {
         "@types/istanbul-lib-coverage": "^2.0.0",
@@ -2952,8 +2614,6 @@
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -2966,8 +2626,6 @@
     },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -2975,8 +2633,6 @@
     },
     "node_modules/@jridgewell/set-array": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -2984,8 +2640,6 @@
     },
     "node_modules/@jridgewell/source-map": {
       "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
-      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -2994,14 +2648,10 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -3010,14 +2660,10 @@
     },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
-      "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "license": "MIT"
     },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
-      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
-      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
       "license": "MIT",
       "dependencies": {
         "eslint-scope": "5.1.1"
@@ -3025,8 +2671,6 @@
     },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/eslint-scope": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -3038,8 +2682,6 @@
     },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/estraverse": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -3047,8 +2689,6 @@
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -3060,101 +2700,1435 @@
     },
     "node_modules/@nodelib/fs.stat": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
       "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
     },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
+    "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.5.15",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-html": "^0.0.9",
+        "core-js-pure": "^3.23.3",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^2.1.0",
+        "loader-utils": "^2.0.4",
+        "schema-utils": "^4.2.0",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "@types/webpack": "4.x || 5.x",
+        "react-refresh": ">=0.10.0 <1.0.0",
+        "sockjs-client": "^1.4.0",
+        "type-fest": ">=0.17.0 <5.0.0",
+        "webpack": ">=4.43.0 <6.0.0",
+        "webpack-dev-server": "3.x || 4.x || 5.x",
+        "webpack-hot-middleware": "2.x",
+        "webpack-plugin-serve": "0.x || 1.x"
+      },
+      "peerDependenciesMeta": {
+        "@types/webpack": {
+          "optional": true
+        },
+        "sockjs-client": {
+          "optional": true
+        },
+        "type-fest": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        },
+        "webpack-hot-middleware": {
+          "optional": true
+        },
+        "webpack-plugin-serve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/colors": {
+      "version": "3.0.0",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collapsible": "1.1.3",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dialog": "1.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.4",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.5",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-label": "2.1.2",
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.5",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.2",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.4",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.2.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.6",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-toggle": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-separator": "1.1.2",
+        "@radix-ui/react-toggle-group": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.8",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
       "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
-      "engines": {
-        "node": ">= 8"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "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==",
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
       "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
-      "dev": true,
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
       "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
       },
-      "funding": {
-        "url": "https://opencollective.com/unts"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz",
-      "integrity": "sha512-LFWllMA55pzB9D34w/wXUCf8+c+IYKuJDgxiZ3qMhl64KRMBHYM1I3VdGaD2BV5FNPV2/S2596bppxHbv2ZydQ==",
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.2",
       "license": "MIT",
       "dependencies": {
-        "ansi-html": "^0.0.9",
-        "core-js-pure": "^3.23.3",
-        "error-stack-parser": "^2.0.6",
-        "html-entities": "^2.1.0",
-        "loader-utils": "^2.0.4",
-        "schema-utils": "^4.2.0",
-        "source-map": "^0.7.3"
-      },
-      "engines": {
-        "node": ">= 10.13"
+        "@radix-ui/react-primitive": "2.0.2"
       },
       "peerDependencies": {
-        "@types/webpack": "4.x || 5.x",
-        "react-refresh": ">=0.10.0 <1.0.0",
-        "sockjs-client": "^1.4.0",
-        "type-fest": ">=0.17.0 <5.0.0",
-        "webpack": ">=4.43.0 <6.0.0",
-        "webpack-dev-server": "3.x || 4.x || 5.x",
-        "webpack-hot-middleware": "2.x",
-        "webpack-plugin-serve": "0.x || 1.x"
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
-        "@types/webpack": {
-          "optional": true
-        },
-        "sockjs-client": {
-          "optional": true
-        },
-        "type-fest": {
-          "optional": true
-        },
-        "webpack-dev-server": {
+        "@types/react": {
           "optional": true
         },
-        "webpack-hot-middleware": {
-          "optional": true
-        },
-        "webpack-plugin-serve": {
+        "@types/react-dom": {
           "optional": true
         }
       }
     },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "license": "MIT"
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
-      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.10.4",
@@ -3176,8 +4150,6 @@
     },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "11.2.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
-      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
       "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^3.1.0",
@@ -3196,8 +4168,6 @@
     },
     "node_modules/@rollup/plugin-replace": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
-      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
       "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^3.1.0",
@@ -3209,8 +4179,6 @@
     },
     "node_modules/@rollup/pluginutils": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
-      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "0.0.39",
@@ -3226,32 +4194,22 @@
     },
     "node_modules/@rollup/pluginutils/node_modules/@types/estree": {
       "version": "0.0.39",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
-      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "license": "MIT"
     },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
-      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
       "license": "MIT"
     },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
-      "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
       "license": "MIT"
     },
     "node_modules/@sinclair/typebox": {
       "version": "0.24.51",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
-      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==",
       "license": "MIT"
     },
     "node_modules/@sinonjs/commons": {
       "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
-      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "type-detect": "4.0.8"
@@ -3259,8 +4217,6 @@
     },
     "node_modules/@sinonjs/fake-timers": {
       "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz",
-      "integrity": "sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@sinonjs/commons": "^1.7.0"
@@ -3268,8 +4224,6 @@
     },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
-      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "ejs": "^3.1.6",
@@ -3280,8 +4234,6 @@
     },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3293,8 +4245,6 @@
     },
     "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
       "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3306,8 +4256,6 @@
     },
     "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
-      "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3319,8 +4267,6 @@
     },
     "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
-      "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3332,8 +4278,6 @@
     },
     "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
       "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
-      "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3345,8 +4289,6 @@
     },
     "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
       "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
-      "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3358,8 +4300,6 @@
     },
     "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
       "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
-      "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3371,8 +4311,6 @@
     },
     "node_modules/@svgr/babel-plugin-transform-svg-component": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
-      "integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3384,8 +4322,6 @@
     },
     "node_modules/@svgr/babel-preset": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
-      "integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
       "license": "MIT",
       "dependencies": {
         "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
@@ -3407,8 +4343,6 @@
     },
     "node_modules/@svgr/core": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
-      "integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
       "license": "MIT",
       "dependencies": {
         "@svgr/plugin-jsx": "^5.5.0",
@@ -3425,8 +4359,6 @@
     },
     "node_modules/@svgr/hast-util-to-babel-ast": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
-      "integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.12.6"
@@ -3441,8 +4373,6 @@
     },
     "node_modules/@svgr/plugin-jsx": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
-      "integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.12.3",
@@ -3460,8 +4390,6 @@
     },
     "node_modules/@svgr/plugin-svgo": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz",
-      "integrity": "sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==",
       "license": "MIT",
       "dependencies": {
         "cosmiconfig": "^7.0.0",
@@ -3478,8 +4406,6 @@
     },
     "node_modules/@svgr/webpack": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.5.0.tgz",
-      "integrity": "sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.12.3",
@@ -3499,10 +4425,68 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@tailwindcss/cli": {
+      "version": "4.0.9",
+      "license": "MIT",
+      "dependencies": {
+        "@parcel/watcher": "^2.5.1",
+        "@tailwindcss/node": "4.0.9",
+        "@tailwindcss/oxide": "4.0.9",
+        "enhanced-resolve": "^5.18.1",
+        "lightningcss": "^1.29.1",
+        "mri": "^1.2.0",
+        "picocolors": "^1.1.1",
+        "tailwindcss": "4.0.9"
+      },
+      "bin": {
+        "tailwindcss": "dist/index.mjs"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.0.9",
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "tailwindcss": "4.0.9"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.0.9",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.0.9",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.9",
+        "@tailwindcss/oxide-darwin-x64": "4.0.9",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.9",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.9",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.9",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.9",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.9",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.9",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.9",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.9"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.0.9",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -3510,8 +4494,6 @@
     },
     "node_modules/@trivago/prettier-plugin-sort-imports": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.0.tgz",
-      "integrity": "sha512-yEIJ7xMKYQwyNRjxSdi4Gs37iszikAjxfky+3hu9bn24u8eHLJNDMAoOTyowp8p6EpSl8IQMdkfBx+WnJTttsw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -3545,8 +4527,6 @@
     },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
       "license": "ISC",
       "engines": {
         "node": ">=10.13.0"
@@ -3554,8 +4534,6 @@
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.20.7",
@@ -3567,8 +4545,6 @@
     },
     "node_modules/@types/babel__generator": {
       "version": "7.6.8",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
-      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.0.0"
@@ -3576,8 +4552,6 @@
     },
     "node_modules/@types/babel__template": {
       "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.1.0",
@@ -3586,8 +4560,6 @@
     },
     "node_modules/@types/babel__traverse": {
       "version": "7.20.6",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
-      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.20.7"
@@ -3595,8 +4567,6 @@
     },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
-      "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
       "license": "MIT",
       "dependencies": {
         "@types/connect": "*",
@@ -3605,8 +4575,6 @@
     },
     "node_modules/@types/bonjour": {
       "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz",
-      "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -3614,8 +4582,6 @@
     },
     "node_modules/@types/connect": {
       "version": "3.4.38",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
-      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -3623,8 +4589,6 @@
     },
     "node_modules/@types/connect-history-api-fallback": {
       "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
-      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
       "license": "MIT",
       "dependencies": {
         "@types/express-serve-static-core": "*",
@@ -3633,14 +4597,10 @@
     },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
       "license": "MIT"
     },
     "node_modules/@types/eslint": {
       "version": "8.56.12",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
-      "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "*",
@@ -3649,8 +4609,6 @@
     },
     "node_modules/@types/eslint-scope": {
       "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "license": "MIT",
       "dependencies": {
         "@types/eslint": "*",
@@ -3659,14 +4617,10 @@
     },
     "node_modules/@types/estree": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "license": "MIT"
     },
     "node_modules/@types/express": {
       "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
       "license": "MIT",
       "dependencies": {
         "@types/body-parser": "*",
@@ -3677,8 +4631,6 @@
     },
     "node_modules/@types/express-serve-static-core": {
       "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz",
-      "integrity": "sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -3689,8 +4641,6 @@
     },
     "node_modules/@types/express/node_modules/@types/express-serve-static-core": {
       "version": "4.19.6",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
-      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -3701,8 +4651,6 @@
     },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
-      "integrity": "sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -3710,20 +4658,14 @@
     },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
       "license": "MIT"
     },
     "node_modules/@types/http-errors": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
-      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
       "license": "MIT"
     },
     "node_modules/@types/http-proxy": {
       "version": "1.17.15",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz",
-      "integrity": "sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -3731,14 +4673,10 @@
     },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
-      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
       "license": "MIT"
     },
     "node_modules/@types/istanbul-lib-report": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
-      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
       "license": "MIT",
       "dependencies": {
         "@types/istanbul-lib-coverage": "*"
@@ -3746,8 +4684,6 @@
     },
     "node_modules/@types/istanbul-reports": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
-      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
       "license": "MIT",
       "dependencies": {
         "@types/istanbul-lib-report": "*"
@@ -3755,26 +4691,18 @@
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "license": "MIT"
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "license": "MIT"
     },
     "node_modules/@types/mime": {
       "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
-      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
       "license": "MIT"
     },
     "node_modules/@types/node": {
       "version": "22.10.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
-      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.20.0"
@@ -3782,8 +4710,6 @@
     },
     "node_modules/@types/node-forge": {
       "version": "1.3.11",
-      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
-      "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -3791,38 +4717,41 @@
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
       "license": "MIT"
     },
     "node_modules/@types/prettier": {
       "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
-      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
       "license": "MIT"
     },
     "node_modules/@types/q": {
       "version": "1.5.8",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.8.tgz",
-      "integrity": "sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw==",
       "license": "MIT"
     },
     "node_modules/@types/qs": {
       "version": "6.9.17",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.17.tgz",
-      "integrity": "sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==",
       "license": "MIT"
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
-      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.0.10",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
-      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -3830,20 +4759,14 @@
     },
     "node_modules/@types/retry": {
       "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "license": "MIT"
     },
     "node_modules/@types/semver": {
       "version": "7.5.8",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
-      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "license": "MIT"
     },
     "node_modules/@types/send": {
       "version": "0.17.4",
-      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
-      "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
       "license": "MIT",
       "dependencies": {
         "@types/mime": "^1",
@@ -3852,8 +4775,6 @@
     },
     "node_modules/@types/serve-index": {
       "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz",
-      "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
       "license": "MIT",
       "dependencies": {
         "@types/express": "*"
@@ -3861,8 +4782,6 @@
     },
     "node_modules/@types/serve-static": {
       "version": "1.15.7",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
-      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
       "license": "MIT",
       "dependencies": {
         "@types/http-errors": "*",
@@ -3872,8 +4791,6 @@
     },
     "node_modules/@types/sockjs": {
       "version": "0.3.36",
-      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
-      "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -3881,26 +4798,18 @@
     },
     "node_modules/@types/stack-utils": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
-      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "license": "MIT"
     },
     "node_modules/@types/stylis": {
       "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
-      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
       "license": "MIT"
     },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT"
     },
     "node_modules/@types/ws": {
       "version": "8.5.13",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz",
-      "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*"
@@ -3908,8 +4817,6 @@
     },
     "node_modules/@types/yargs": {
       "version": "16.0.9",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.9.tgz",
-      "integrity": "sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==",
       "license": "MIT",
       "dependencies": {
         "@types/yargs-parser": "*"
@@ -3917,14 +4824,10 @@
     },
     "node_modules/@types/yargs-parser": {
       "version": "21.0.3",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
-      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
-      "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
@@ -3957,8 +4860,6 @@
     },
     "node_modules/@typescript-eslint/experimental-utils": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.62.0.tgz",
-      "integrity": "sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==",
       "license": "MIT",
       "dependencies": {
         "@typescript-eslint/utils": "5.62.0"
@@ -3976,8 +4877,6 @@
     },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
-      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.62.0",
@@ -4003,8 +4902,6 @@
     },
     "node_modules/@typescript-eslint/scope-manager": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
-      "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
       "license": "MIT",
       "dependencies": {
         "@typescript-eslint/types": "5.62.0",
@@ -4020,8 +4917,6 @@
     },
     "node_modules/@typescript-eslint/type-utils": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
-      "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
       "license": "MIT",
       "dependencies": {
         "@typescript-eslint/typescript-estree": "5.62.0",
@@ -4047,8 +4942,6 @@
     },
     "node_modules/@typescript-eslint/types": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
-      "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
       "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -4060,8 +4953,6 @@
     },
     "node_modules/@typescript-eslint/typescript-estree": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
-      "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@typescript-eslint/types": "5.62.0",
@@ -4087,8 +4978,6 @@
     },
     "node_modules/@typescript-eslint/utils": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
-      "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
@@ -4113,8 +5002,6 @@
     },
     "node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -4126,8 +5013,6 @@
     },
     "node_modules/@typescript-eslint/utils/node_modules/estraverse": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -4135,8 +5020,6 @@
     },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
-      "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
       "license": "MIT",
       "dependencies": {
         "@typescript-eslint/types": "5.62.0",
@@ -4152,14 +5035,10 @@
     },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz",
-      "integrity": "sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==",
       "license": "ISC"
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
-      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
@@ -4168,26 +5047,18 @@
     },
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
       "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
-      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
-      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
-      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
-      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
@@ -4197,14 +5068,10 @@
     },
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
-      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
-      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
@@ -4215,8 +5082,6 @@
     },
     "node_modules/@webassemblyjs/ieee754": {
       "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
-      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "license": "MIT",
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
@@ -4224,8 +5089,6 @@
     },
     "node_modules/@webassemblyjs/leb128": {
       "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
-      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@xtuc/long": "4.2.2"
@@ -4233,14 +5096,10 @@
     },
     "node_modules/@webassemblyjs/utf8": {
       "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
-      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
       "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
-      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
@@ -4255,8 +5114,6 @@
     },
     "node_modules/@webassemblyjs/wasm-gen": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
-      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
@@ -4268,8 +5125,6 @@
     },
     "node_modules/@webassemblyjs/wasm-opt": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
-      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
@@ -4280,8 +5135,6 @@
     },
     "node_modules/@webassemblyjs/wasm-parser": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
-      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
@@ -4294,8 +5147,6 @@
     },
     "node_modules/@webassemblyjs/wast-printer": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
-      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
@@ -4304,27 +5155,18 @@
     },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "license": "Apache-2.0"
     },
     "node_modules/abab": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "deprecated": "Use your platform's native atob() and btoa() methods instead",
       "license": "BSD-3-Clause"
     },
     "node_modules/accepts": {
       "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "license": "MIT",
       "dependencies": {
         "mime-types": "~2.1.34",
@@ -4336,8 +5178,6 @@
     },
     "node_modules/accepts/node_modules/negotiator": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -4345,8 +5185,6 @@
     },
     "node_modules/acorn": {
       "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -4357,8 +5195,6 @@
     },
     "node_modules/acorn-globals": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
       "license": "MIT",
       "dependencies": {
         "acorn": "^7.1.1",
@@ -4367,8 +5203,6 @@
     },
     "node_modules/acorn-globals/node_modules/acorn": {
       "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -4379,8 +5213,6 @@
     },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -4388,8 +5220,6 @@
     },
     "node_modules/acorn-walk": {
       "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
@@ -4397,8 +5227,6 @@
     },
     "node_modules/address": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
-      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
       "license": "MIT",
       "engines": {
         "node": ">= 10.0.0"
@@ -4406,8 +5234,6 @@
     },
     "node_modules/adjust-sourcemap-loader": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
-      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
       "license": "MIT",
       "dependencies": {
         "loader-utils": "^2.0.0",
@@ -4417,10 +5243,122 @@
         "node": ">=8.9"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/ag-charts-community": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-11.2.4.tgz",
+      "integrity": "sha512-L4DDGpCP1IVjjgacADRMPSucUiH7CU4nLJFFI/eWkv+ee0WOte7XIgIiwzUci+UD4IhLHu5zwbOoHdZ9LX/E5w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ag-charts-core": "11.2.4",
+        "ag-charts-locale": "11.2.4",
+        "ag-charts-types": "11.2.4"
+      }
+    },
+    "node_modules/ag-charts-community/node_modules/ag-charts-types": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.2.4.tgz",
+      "integrity": "sha512-a1aQjtQ9ZH+J8BF3YcWAIHUt9ZLiL9IVZ8R5h7z2CkTNu2TPq5UlsCcF0/YZKc1M8CM0CdSNLSGQuWUwDNxAcA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/ag-charts-core": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/ag-charts-core/-/ag-charts-core-11.2.4.tgz",
+      "integrity": "sha512-RiN2GXSBuYBAGhbfxiQjhM+pDnJ+2iT/W0r/2KHBHXI8Bv89l+jYKBunb/4SqcP6/DBaxhh+yESk25dYj391Bg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ag-charts-types": "11.2.4"
+      }
+    },
+    "node_modules/ag-charts-core/node_modules/ag-charts-types": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.2.4.tgz",
+      "integrity": "sha512-a1aQjtQ9ZH+J8BF3YcWAIHUt9ZLiL9IVZ8R5h7z2CkTNu2TPq5UlsCcF0/YZKc1M8CM0CdSNLSGQuWUwDNxAcA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/ag-charts-enterprise": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/ag-charts-enterprise/-/ag-charts-enterprise-11.2.4.tgz",
+      "integrity": "sha512-4msY1swe0GwEytQI9H3ANM+pMWVeAa8u8yGcZJ8kMzTFB3urNjXXGmYLZ7rQCiPfzLUuY25iGKf36ToUMHrrNA==",
+      "license": "Commercial",
+      "optional": true,
+      "dependencies": {
+        "ag-charts-community": "11.2.4",
+        "ag-charts-core": "11.2.4"
+      }
+    },
+    "node_modules/ag-charts-locale": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-11.2.4.tgz",
+      "integrity": "sha512-hArufzKISb/5UJtIPfTKu3TvSQ3ZAuwMrOsn8F6I4rOwJnNxbZYeQvm2yiKXx9D7hMhr3d1lNZxNIlKOrMZY/w==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/ag-charts-types": {
+      "version": "11.1.1",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-community": {
+      "version": "33.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "11.1.1"
+      }
+    },
+    "node_modules/ag-grid-enterprise": {
+      "version": "33.2.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-33.2.4.tgz",
+      "integrity": "sha512-JFFm0d/7+cdTR/J0oMRwwKfFHII5xsYCw3t6ef1iQHjhpIR9H3vv6XVGL41aYvwuaQcZM4kDWZnwlVfjGFC47w==",
+      "license": "Commercial",
+      "dependencies": {
+        "ag-grid-community": "33.2.4"
+      },
+      "optionalDependencies": {
+        "ag-charts-community": "11.2.4",
+        "ag-charts-enterprise": "11.2.4"
+      }
+    },
+    "node_modules/ag-grid-enterprise/node_modules/ag-charts-types": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.2.4.tgz",
+      "integrity": "sha512-a1aQjtQ9ZH+J8BF3YcWAIHUt9ZLiL9IVZ8R5h7z2CkTNu2TPq5UlsCcF0/YZKc1M8CM0CdSNLSGQuWUwDNxAcA==",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-enterprise/node_modules/ag-grid-community": {
+      "version": "33.2.4",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.2.4.tgz",
+      "integrity": "sha512-7XT1+wxmMlMVXB27BJOzlft9ATB0C5HOJcCGMc8dCO2W17JXbNknVEEDGTBKoSvA4Cei8sARrRDxmPgY8mWopQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "11.2.4"
+      }
+    },
+    "node_modules/ag-grid-react": {
+      "version": "33.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "ag-grid-community": "33.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
       "license": "MIT",
       "dependencies": {
         "debug": "4"
@@ -4431,8 +5369,6 @@
     },
     "node_modules/ajv": {
       "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -4447,8 +5383,6 @@
     },
     "node_modules/ajv-formats": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "license": "MIT",
       "dependencies": {
         "ajv": "^8.0.0"
@@ -4464,8 +5398,6 @@
     },
     "node_modules/ajv-formats/node_modules/ajv": {
       "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
@@ -4480,14 +5412,10 @@
     },
     "node_modules/ajv-formats/node_modules/json-schema-traverse": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "license": "MIT"
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "license": "MIT",
       "peerDependencies": {
         "ajv": "^6.9.1"
@@ -4495,8 +5423,6 @@
     },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
       "license": "MIT",
       "dependencies": {
         "type-fest": "^0.21.3"
@@ -4510,8 +5436,6 @@
     },
     "node_modules/ansi-html": {
       "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.9.tgz",
-      "integrity": "sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg==",
       "engines": [
         "node >= 0.8.0"
       ],
@@ -4522,8 +5446,6 @@
     },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
       "engines": [
         "node >= 0.8.0"
       ],
@@ -4534,8 +5456,6 @@
     },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4543,8 +5463,6 @@
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -4558,14 +5476,10 @@
     },
     "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==",
       "license": "MIT"
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -4577,23 +5491,27 @@
     },
     "node_modules/arg": {
       "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "license": "MIT"
     },
     "node_modules/argparse": {
       "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
       "license": "MIT",
       "dependencies": {
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
-      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 0.4"
@@ -4601,8 +5519,6 @@
     },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
-      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.5",
@@ -4617,14 +5533,10 @@
     },
     "node_modules/array-flatten": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
     "node_modules/array-includes": {
       "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
-      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -4643,8 +5555,6 @@
     },
     "node_modules/array-union": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -4652,8 +5562,6 @@
     },
     "node_modules/array.prototype.findlast": {
       "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
-      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -4672,8 +5580,6 @@
     },
     "node_modules/array.prototype.findlastindex": {
       "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
-      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -4692,8 +5598,6 @@
     },
     "node_modules/array.prototype.flat": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
-      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -4710,8 +5614,6 @@
     },
     "node_modules/array.prototype.flatmap": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
-      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -4728,8 +5630,6 @@
     },
     "node_modules/array.prototype.reduce": {
       "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.7.tgz",
-      "integrity": "sha512-mzmiUCVwtiD4lgxYP8g7IYy8El8p2CSMePvIbTS7gchKir/L1fgJrk0yDKmAX6mnRQFKNADYIk8nNlTris5H1Q==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -4749,8 +5649,6 @@
     },
     "node_modules/array.prototype.tosorted": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
-      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -4765,8 +5663,6 @@
     },
     "node_modules/arraybuffer.prototype.slice": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
-      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
       "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
@@ -4787,32 +5683,22 @@
     },
     "node_modules/asap": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
       "license": "MIT"
     },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
-      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "license": "MIT"
     },
     "node_modules/async": {
       "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
-      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
       "license": "MIT"
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "license": "ISC",
       "engines": {
         "node": ">= 4.0.0"
@@ -4820,8 +5706,6 @@
     },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
       "funding": [
         {
           "type": "opencollective",
@@ -4857,8 +5741,6 @@
     },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "license": "MIT",
       "dependencies": {
         "possible-typed-array-names": "^1.0.0"
@@ -4872,8 +5754,6 @@
     },
     "node_modules/axe-core": {
       "version": "4.10.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz",
-      "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==",
       "license": "MPL-2.0",
       "engines": {
         "node": ">=4"
@@ -4881,8 +5761,6 @@
     },
     "node_modules/axobject-query": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
-      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 0.4"
@@ -4890,8 +5768,6 @@
     },
     "node_modules/babel-jest": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
-      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
       "license": "MIT",
       "dependencies": {
         "@jest/transform": "^27.5.1",
@@ -4912,8 +5788,6 @@
     },
     "node_modules/babel-loader": {
       "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.4.1.tgz",
-      "integrity": "sha512-nXzRChX+Z1GoE6yWavBQg6jDslyFF3SDjl2paADuoQtQW10JqShJt62R6eJQ5m/pjJFDT8xgKIWSP85OY8eXeA==",
       "license": "MIT",
       "dependencies": {
         "find-cache-dir": "^3.3.1",
@@ -4931,8 +5805,6 @@
     },
     "node_modules/babel-loader/node_modules/schema-utils": {
       "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.5",
@@ -4949,8 +5821,6 @@
     },
     "node_modules/babel-plugin-istanbul": {
       "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
-      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.0.0",
@@ -4965,8 +5835,6 @@
     },
     "node_modules/babel-plugin-jest-hoist": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
-      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.3.3",
@@ -4980,8 +5848,6 @@
     },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
-      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -4995,8 +5861,6 @@
     },
     "node_modules/babel-plugin-named-asset-import": {
       "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
-      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
       "license": "MIT",
       "peerDependencies": {
         "@babel/core": "^7.1.0"
@@ -5004,8 +5868,6 @@
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.12",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz",
-      "integrity": "sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==",
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.22.6",
@@ -5018,8 +5880,6 @@
     },
     "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -5027,8 +5887,6 @@
     },
     "node_modules/babel-plugin-polyfill-corejs3": {
       "version": "0.10.6",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
-      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.6.2",
@@ -5040,8 +5898,6 @@
     },
     "node_modules/babel-plugin-polyfill-regenerator": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz",
-      "integrity": "sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-define-polyfill-provider": "^0.6.3"
@@ -5052,14 +5908,10 @@
     },
     "node_modules/babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
-      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==",
       "license": "MIT"
     },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz",
-      "integrity": "sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==",
       "license": "MIT",
       "dependencies": {
         "@babel/plugin-syntax-async-generators": "^7.8.4",
@@ -5084,8 +5936,6 @@
     },
     "node_modules/babel-preset-jest": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
-      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
       "license": "MIT",
       "dependencies": {
         "babel-plugin-jest-hoist": "^27.5.1",
@@ -5100,8 +5950,6 @@
     },
     "node_modules/babel-preset-react-app": {
       "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.0.1.tgz",
-      "integrity": "sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
@@ -5124,20 +5972,14 @@
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
     "node_modules/batch": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "license": "MIT"
     },
     "node_modules/bfj": {
       "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz",
-      "integrity": "sha512-I6MMLkn+anzNdCUp9hMRyui1HaNEUCco50lxbvNS4+EyXg8lN3nJ48PjPWtbH8UVS9CuMoaKE9U2V3l29DaRQw==",
       "license": "MIT",
       "dependencies": {
         "bluebird": "^3.7.2",
@@ -5152,8 +5994,6 @@
     },
     "node_modules/big.js": {
       "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -5161,8 +6001,6 @@
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5173,14 +6011,10 @@
     },
     "node_modules/bluebird": {
       "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
       "license": "MIT"
     },
     "node_modules/body-parser": {
       "version": "1.20.3",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
-      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "license": "MIT",
       "dependencies": {
         "bytes": "3.1.2",
@@ -5203,8 +6037,6 @@
     },
     "node_modules/body-parser/node_modules/debug": {
       "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -5212,8 +6044,6 @@
     },
     "node_modules/body-parser/node_modules/iconv-lite": {
       "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
@@ -5224,14 +6054,10 @@
     },
     "node_modules/body-parser/node_modules/ms": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/bonjour-service": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz",
-      "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==",
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
@@ -5240,14 +6066,10 @@
     },
     "node_modules/boolbase": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "license": "ISC"
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -5256,8 +6078,6 @@
     },
     "node_modules/braces": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -5268,14 +6088,10 @@
     },
     "node_modules/browser-process-hrtime": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "license": "BSD-2-Clause"
     },
     "node_modules/browserslist": {
       "version": "4.24.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
-      "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
       "funding": [
         {
           "type": "opencollective",
@@ -5306,8 +6122,6 @@
     },
     "node_modules/bser": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
-      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "node-int64": "^0.4.0"
@@ -5315,14 +6129,10 @@
     },
     "node_modules/buffer-from": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "license": "MIT"
     },
     "node_modules/builtin-modules": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5333,8 +6143,6 @@
     },
     "node_modules/bytes": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -5342,8 +6150,6 @@
     },
     "node_modules/call-bind": {
       "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
@@ -5360,8 +6166,6 @@
     },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
-      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -5373,8 +6177,6 @@
     },
     "node_modules/callsites": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -5382,8 +6184,6 @@
     },
     "node_modules/camel-case": {
       "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
       "license": "MIT",
       "dependencies": {
         "pascal-case": "^3.1.2",
@@ -5392,8 +6192,6 @@
     },
     "node_modules/camelcase": {
       "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -5404,8 +6202,6 @@
     },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -5413,8 +6209,6 @@
     },
     "node_modules/camelize": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5422,8 +6216,6 @@
     },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.0.0",
@@ -5434,8 +6226,6 @@
     },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001687",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz",
-      "integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -5454,17 +6244,26 @@
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
-      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -5479,8 +6278,6 @@
     },
     "node_modules/char-regex": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -5488,14 +6285,10 @@
     },
     "node_modules/check-types": {
       "version": "11.2.3",
-      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.3.tgz",
-      "integrity": "sha512-+67P1GkJRaxQD6PKK0Et9DhwQB+vGg3PM5+aavopCpZT1lj9jeqfvpgTLAWErNj8qApkkmXlu/Ug74kmhagkXg==",
       "license": "MIT"
     },
     "node_modules/chokidar": {
       "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
@@ -5518,8 +6311,6 @@
     },
     "node_modules/chokidar/node_modules/glob-parent": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -5530,8 +6321,6 @@
     },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
-      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6.0"
@@ -5539,8 +6328,6 @@
     },
     "node_modules/ci-info": {
       "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
-      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
       "funding": [
         {
           "type": "github",
@@ -5554,14 +6341,24 @@
     },
     "node_modules/cjs-module-lexer": {
       "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz",
-      "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==",
+      "license": "MIT"
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
       "license": "MIT"
     },
     "node_modules/clean-css": {
       "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
-      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
       "license": "MIT",
       "dependencies": {
         "source-map": "~0.6.0"
@@ -5572,8 +6369,6 @@
     },
     "node_modules/clean-css/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -5581,8 +6376,6 @@
     },
     "node_modules/cliui": {
       "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
       "license": "ISC",
       "dependencies": {
         "string-width": "^4.2.0",
@@ -5590,10 +6383,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
       "license": "MIT",
       "engines": {
         "iojs": ">= 1.0.0",
@@ -5602,8 +6400,6 @@
     },
     "node_modules/coa": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
-      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
       "license": "MIT",
       "dependencies": {
         "@types/q": "^1.5.1",
@@ -5616,8 +6412,6 @@
     },
     "node_modules/coa/node_modules/ansi-styles": {
       "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
       "license": "MIT",
       "dependencies": {
         "color-convert": "^1.9.0"
@@ -5628,8 +6422,6 @@
     },
     "node_modules/coa/node_modules/chalk": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^3.2.1",
@@ -5642,8 +6434,6 @@
     },
     "node_modules/coa/node_modules/color-convert": {
       "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
       "license": "MIT",
       "dependencies": {
         "color-name": "1.1.3"
@@ -5651,14 +6441,10 @@
     },
     "node_modules/coa/node_modules/color-name": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "license": "MIT"
     },
     "node_modules/coa/node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -5666,8 +6452,6 @@
     },
     "node_modules/coa/node_modules/has-flag": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -5675,8 +6459,6 @@
     },
     "node_modules/coa/node_modules/supports-color": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "license": "MIT",
       "dependencies": {
         "has-flag": "^3.0.0"
@@ -5685,16 +6467,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
-      "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==",
       "license": "MIT"
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -5705,26 +6492,18 @@
     },
     "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==",
       "license": "MIT"
     },
     "node_modules/colord": {
       "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
       "license": "MIT"
     },
     "node_modules/colorette": {
       "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "license": "MIT"
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
@@ -5735,8 +6514,6 @@
     },
     "node_modules/commander": {
       "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
       "license": "MIT",
       "engines": {
         "node": ">= 12"
@@ -5744,8 +6521,6 @@
     },
     "node_modules/common-tags": {
       "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
-      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
       "license": "MIT",
       "engines": {
         "node": ">=4.0.0"
@@ -5753,14 +6528,10 @@
     },
     "node_modules/commondir": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
       "license": "MIT"
     },
     "node_modules/compressible": {
       "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
       "license": "MIT",
       "dependencies": {
         "mime-db": ">= 1.43.0 < 2"
@@ -5771,8 +6542,6 @@
     },
     "node_modules/compression": {
       "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.5.tgz",
-      "integrity": "sha512-bQJ0YRck5ak3LgtnpKkiabX5pNF7tMUh1BSy2ZBOTh0Dim0BUu6aPPwByIns6/A5Prh8PufSPerMDUklpzes2Q==",
       "license": "MIT",
       "dependencies": {
         "bytes": "3.1.2",
@@ -5789,8 +6558,6 @@
     },
     "node_modules/compression/node_modules/debug": {
       "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -5798,26 +6565,18 @@
     },
     "node_modules/compression/node_modules/ms": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "license": "MIT"
     },
     "node_modules/confusing-browser-globals": {
       "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
-      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==",
       "license": "MIT"
     },
     "node_modules/connect-history-api-fallback": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
-      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.8"
@@ -5825,8 +6584,6 @@
     },
     "node_modules/content-disposition": {
       "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "5.2.1"
@@ -5837,8 +6594,6 @@
     },
     "node_modules/content-type": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -5846,14 +6601,10 @@
     },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "license": "MIT"
     },
     "node_modules/cookie": {
       "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -5861,14 +6612,10 @@
     },
     "node_modules/cookie-signature": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "license": "MIT"
     },
     "node_modules/core-js": {
       "version": "3.39.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
-      "integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -5878,8 +6625,6 @@
     },
     "node_modules/core-js-compat": {
       "version": "3.39.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.39.0.tgz",
-      "integrity": "sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.24.2"
@@ -5891,8 +6636,6 @@
     },
     "node_modules/core-js-pure": {
       "version": "3.39.0",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.39.0.tgz",
-      "integrity": "sha512-7fEcWwKI4rJinnK+wLTezeg2smbFFdSBP6E2kQZNbnzM2s1rpKQ6aaRteZSSg7FLU3P0HGGVo/gbpfanU36urg==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
@@ -5902,14 +6645,10 @@
     },
     "node_modules/core-util-is": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
@@ -5924,17 +6663,25 @@
     },
     "node_modules/cra-template": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/cra-template/-/cra-template-1.2.0.tgz",
-      "integrity": "sha512-06WBUmTq79NvqU91Y9OPCXv/ENy/UkUmQS0lBrOYCl/4f4l67idnGbBARDGLopCHfff6pf6UftcFRWHg+CVfRw==",
       "license": "MIT",
       "engines": {
         "node": ">=14"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -5947,8 +6694,6 @@
     },
     "node_modules/crypto-random-string": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
-      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -5956,8 +6701,6 @@
     },
     "node_modules/css-blank-pseudo": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz",
-      "integrity": "sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-selector-parser": "^6.0.9"
@@ -5974,8 +6717,6 @@
     },
     "node_modules/css-color-keywords": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
       "license": "ISC",
       "engines": {
         "node": ">=4"
@@ -5983,8 +6724,6 @@
     },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
-      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
       "license": "ISC",
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -5995,8 +6734,6 @@
     },
     "node_modules/css-has-pseudo": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz",
-      "integrity": "sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-selector-parser": "^6.0.9"
@@ -6013,8 +6750,6 @@
     },
     "node_modules/css-loader": {
       "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
-      "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
       "license": "MIT",
       "dependencies": {
         "icss-utils": "^5.1.0",
@@ -6048,8 +6783,6 @@
     },
     "node_modules/css-minimizer-webpack-plugin": {
       "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
-      "integrity": "sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==",
       "license": "MIT",
       "dependencies": {
         "cssnano": "^5.0.6",
@@ -6086,8 +6819,6 @@
     },
     "node_modules/css-minimizer-webpack-plugin/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -6095,8 +6826,6 @@
     },
     "node_modules/css-prefers-color-scheme": {
       "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
-      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
       "license": "CC0-1.0",
       "bin": {
         "css-prefers-color-scheme": "dist/cli.cjs"
@@ -6110,8 +6839,6 @@
     },
     "node_modules/css-select": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0",
@@ -6126,14 +6853,10 @@
     },
     "node_modules/css-select-base-adapter": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
       "license": "MIT"
     },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
-      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
       "license": "MIT",
       "dependencies": {
         "camelize": "^1.0.0",
@@ -6143,8 +6866,6 @@
     },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
-      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
       "license": "MIT",
       "dependencies": {
         "mdn-data": "2.0.4",
@@ -6156,8 +6877,6 @@
     },
     "node_modules/css-tree/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -6165,8 +6884,6 @@
     },
     "node_modules/css-what": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">= 6"
@@ -6177,8 +6894,6 @@
     },
     "node_modules/cssdb": {
       "version": "7.11.2",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.11.2.tgz",
-      "integrity": "sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A==",
       "funding": [
         {
           "type": "opencollective",
@@ -6193,8 +6908,6 @@
     },
     "node_modules/cssesc": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -6205,8 +6918,6 @@
     },
     "node_modules/cssnano": {
       "version": "5.1.15",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
-      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
       "license": "MIT",
       "dependencies": {
         "cssnano-preset-default": "^5.2.14",
@@ -6226,8 +6937,6 @@
     },
     "node_modules/cssnano-preset-default": {
       "version": "5.2.14",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
-      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
       "license": "MIT",
       "dependencies": {
         "css-declaration-sorter": "^6.3.1",
@@ -6269,8 +6978,6 @@
     },
     "node_modules/cssnano-utils": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
-      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
       "license": "MIT",
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -6281,8 +6988,6 @@
     },
     "node_modules/csso": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
       "license": "MIT",
       "dependencies": {
         "css-tree": "^1.1.2"
@@ -6293,8 +6998,6 @@
     },
     "node_modules/csso/node_modules/css-tree": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
       "license": "MIT",
       "dependencies": {
         "mdn-data": "2.0.14",
@@ -6306,14 +7009,10 @@
     },
     "node_modules/csso/node_modules/mdn-data": {
       "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
       "license": "CC0-1.0"
     },
     "node_modules/csso/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -6321,14 +7020,10 @@
     },
     "node_modules/cssom": {
       "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
       "license": "MIT"
     },
     "node_modules/cssstyle": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
       "license": "MIT",
       "dependencies": {
         "cssom": "~0.3.6"
@@ -6339,26 +7034,18 @@
     },
     "node_modules/cssstyle/node_modules/cssom": {
       "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "license": "MIT"
     },
     "node_modules/csstype": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
-      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "license": "BSD-2-Clause"
     },
     "node_modules/data-urls": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
       "license": "MIT",
       "dependencies": {
         "abab": "^2.0.3",
@@ -6371,8 +7058,6 @@
     },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
-      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.6",
@@ -6388,8 +7073,6 @@
     },
     "node_modules/data-view-byte-length": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
-      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -6405,8 +7088,6 @@
     },
     "node_modules/data-view-byte-offset": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.6",
@@ -6420,10 +7101,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -6439,26 +7128,18 @@
     },
     "node_modules/decimal.js": {
       "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
       "license": "MIT"
     },
     "node_modules/dedent": {
       "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
       "license": "MIT"
     },
     "node_modules/deep-is": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "license": "MIT"
     },
     "node_modules/deepmerge": {
       "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6466,8 +7147,6 @@
     },
     "node_modules/default-gateway": {
       "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "execa": "^5.0.0"
@@ -6478,8 +7157,6 @@
     },
     "node_modules/define-data-property": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0",
@@ -6495,8 +7172,6 @@
     },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6504,8 +7179,6 @@
     },
     "node_modules/define-properties": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.0.1",
@@ -6521,8 +7194,6 @@
     },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
@@ -6530,8 +7201,6 @@
     },
     "node_modules/depd": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -6539,18 +7208,24 @@
     },
     "node_modules/destroy": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8",
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "license": "Apache-2.0",
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6558,14 +7233,14 @@
     },
     "node_modules/detect-node": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "license": "MIT"
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
       "license": "MIT"
     },
     "node_modules/detect-port-alt": {
       "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
-      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
       "license": "MIT",
       "dependencies": {
         "address": "^1.0.1",
@@ -6581,8 +7256,6 @@
     },
     "node_modules/detect-port-alt/node_modules/debug": {
       "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -6590,20 +7263,14 @@
     },
     "node_modules/detect-port-alt/node_modules/ms": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/didyoumean": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "license": "Apache-2.0"
     },
     "node_modules/diff-sequences": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
-      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==",
       "license": "MIT",
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -6611,8 +7278,6 @@
     },
     "node_modules/dir-glob": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
       "license": "MIT",
       "dependencies": {
         "path-type": "^4.0.0"
@@ -6623,14 +7288,10 @@
     },
     "node_modules/dlv": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
       "license": "MIT"
     },
     "node_modules/dns-packet": {
       "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
-      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
       "license": "MIT",
       "dependencies": {
         "@leichtgewicht/ip-codec": "^2.0.1"
@@ -6641,8 +7302,6 @@
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
@@ -6653,17 +7312,21 @@
     },
     "node_modules/dom-converter": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
       "license": "MIT",
       "dependencies": {
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "license": "MIT",
+      "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",
-      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
       "license": "MIT",
       "dependencies": {
         "domelementtype": "^2.0.1",
@@ -6676,8 +7339,6 @@
     },
     "node_modules/domelementtype": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
       "funding": [
         {
           "type": "github",
@@ -6688,9 +7349,6 @@
     },
     "node_modules/domexception": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
-      "deprecated": "Use your platform's native DOMException instead",
       "license": "MIT",
       "dependencies": {
         "webidl-conversions": "^5.0.0"
@@ -6701,8 +7359,6 @@
     },
     "node_modules/domexception/node_modules/webidl-conversions": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-      "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=8"
@@ -6710,8 +7366,6 @@
     },
     "node_modules/domhandler": {
       "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "domelementtype": "^2.2.0"
@@ -6725,8 +7379,6 @@
     },
     "node_modules/domutils": {
       "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "^1.0.1",
@@ -6739,8 +7391,6 @@
     },
     "node_modules/dot-case": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
       "license": "MIT",
       "dependencies": {
         "no-case": "^3.0.4",
@@ -6749,8 +7399,6 @@
     },
     "node_modules/dotenv": {
       "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=10"
@@ -6758,14 +7406,10 @@
     },
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "license": "BSD-2-Clause"
     },
     "node_modules/dunder-proto": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.0.tgz",
-      "integrity": "sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==",
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
@@ -6778,26 +7422,18 @@
     },
     "node_modules/duplexer": {
       "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "license": "MIT"
     },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
     "node_modules/ee-first": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
     "node_modules/ejs": {
       "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
-      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
       "license": "Apache-2.0",
       "dependencies": {
         "jake": "^10.8.5"
@@ -6811,14 +7447,10 @@
     },
     "node_modules/electron-to-chromium": {
       "version": "1.5.72",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.72.tgz",
-      "integrity": "sha512-ZpSAUOZ2Izby7qnZluSrAlGgGQzucmFbN0n64dYzocYxnxV5ufurpj3VgEe4cUp7ir9LmeLxNYo8bVnlM8bQHw==",
       "license": "ISC"
     },
     "node_modules/emittery": {
       "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
-      "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -6829,14 +7461,10 @@
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
       "license": "MIT",
       "engines": {
         "node": ">= 4"
@@ -6844,17 +7472,13 @@
     },
     "node_modules/encodeurl": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.17.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
-      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "version": "5.18.1",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -6866,8 +7490,6 @@
     },
     "node_modules/entities": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "license": "BSD-2-Clause",
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
@@ -6875,8 +7497,6 @@
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
       "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
@@ -6884,8 +7504,6 @@
     },
     "node_modules/error-stack-parser": {
       "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
-      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
       "license": "MIT",
       "dependencies": {
         "stackframe": "^1.3.4"
@@ -6893,8 +7511,6 @@
     },
     "node_modules/es-abstract": {
       "version": "1.23.5",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.5.tgz",
-      "integrity": "sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==",
       "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
@@ -6953,14 +7569,10 @@
     },
     "node_modules/es-array-method-boxes-properly": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==",
       "license": "MIT"
     },
     "node_modules/es-define-property": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6968,8 +7580,6 @@
     },
     "node_modules/es-errors": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6977,8 +7587,6 @@
     },
     "node_modules/es-iterator-helpers": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz",
-      "integrity": "sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -7003,14 +7611,10 @@
     },
     "node_modules/es-module-lexer": {
       "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
-      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
       "license": "MIT"
     },
     "node_modules/es-object-atoms": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -7021,8 +7625,6 @@
     },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
-      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
       "license": "MIT",
       "dependencies": {
         "get-intrinsic": "^1.2.4",
@@ -7035,8 +7637,6 @@
     },
     "node_modules/es-shim-unscopables": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
-      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.0"
@@ -7044,8 +7644,6 @@
     },
     "node_modules/es-to-primitive": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
-      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
       "license": "MIT",
       "dependencies": {
         "is-callable": "^1.2.7",
@@ -7061,8 +7659,6 @@
     },
     "node_modules/escalade": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -7070,14 +7666,10 @@
     },
     "node_modules/escape-html": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
       "license": "MIT"
     },
     "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==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -7088,8 +7680,6 @@
     },
     "node_modules/escodegen": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
-      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "esprima": "^4.0.1",
@@ -7109,8 +7699,6 @@
     },
     "node_modules/escodegen/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "optional": true,
       "engines": {
@@ -7119,9 +7707,6 @@
     },
     "node_modules/eslint": {
       "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
-      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
@@ -7175,8 +7760,6 @@
     },
     "node_modules/eslint-config-prettier": {
       "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
-      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -7188,8 +7771,6 @@
     },
     "node_modules/eslint-config-react-app": {
       "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
-      "integrity": "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
@@ -7216,8 +7797,6 @@
     },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
-      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
       "license": "MIT",
       "dependencies": {
         "debug": "^3.2.7",
@@ -7227,8 +7806,6 @@
     },
     "node_modules/eslint-import-resolver-node/node_modules/debug": {
       "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
@@ -7236,8 +7813,6 @@
     },
     "node_modules/eslint-module-utils": {
       "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
-      "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==",
       "license": "MIT",
       "dependencies": {
         "debug": "^3.2.7"
@@ -7253,8 +7828,6 @@
     },
     "node_modules/eslint-module-utils/node_modules/debug": {
       "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
@@ -7262,8 +7835,6 @@
     },
     "node_modules/eslint-plugin-flowtype": {
       "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz",
-      "integrity": "sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "lodash": "^4.17.21",
@@ -7280,8 +7851,6 @@
     },
     "node_modules/eslint-plugin-import": {
       "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
-      "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
       "license": "MIT",
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
@@ -7313,8 +7882,6 @@
     },
     "node_modules/eslint-plugin-import/node_modules/debug": {
       "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
@@ -7322,8 +7889,6 @@
     },
     "node_modules/eslint-plugin-import/node_modules/doctrine": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
@@ -7334,8 +7899,6 @@
     },
     "node_modules/eslint-plugin-import/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -7343,8 +7906,6 @@
     },
     "node_modules/eslint-plugin-jest": {
       "version": "25.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
-      "integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==",
       "license": "MIT",
       "dependencies": {
         "@typescript-eslint/experimental-utils": "^5.0.0"
@@ -7367,8 +7928,6 @@
     },
     "node_modules/eslint-plugin-jsx-a11y": {
       "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
-      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
       "license": "MIT",
       "dependencies": {
         "aria-query": "^5.3.2",
@@ -7395,16 +7954,12 @@
       }
     },
     "node_modules/eslint-plugin-no-relative-import-paths": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-no-relative-import-paths/-/eslint-plugin-no-relative-import-paths-1.5.5.tgz",
-      "integrity": "sha512-UjudFFdBbv93v0CsVdEKcMLbBzRIjeK2PubTctX57tgnHxZcMj1Jm8lDBWoETnPxk0S5g5QLSltEM+511yL4+w==",
+      "version": "v1.5.5",
       "dev": true,
       "license": "ISC"
     },
     "node_modules/eslint-plugin-prettier": {
       "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
-      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7434,8 +7989,6 @@
     },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
-      "integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==",
       "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.8",
@@ -7466,8 +8019,6 @@
     },
     "node_modules/eslint-plugin-react-hooks": {
       "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -7478,8 +8029,6 @@
     },
     "node_modules/eslint-plugin-react/node_modules/doctrine": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
@@ -7490,8 +8039,6 @@
     },
     "node_modules/eslint-plugin-react/node_modules/resolve": {
       "version": "2.0.0-next.5",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
-      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -7507,8 +8054,6 @@
     },
     "node_modules/eslint-plugin-react/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -7516,8 +8061,6 @@
     },
     "node_modules/eslint-plugin-testing-library": {
       "version": "5.11.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz",
-      "integrity": "sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==",
       "license": "MIT",
       "dependencies": {
         "@typescript-eslint/utils": "^5.58.0"
@@ -7532,8 +8075,6 @@
     },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -7548,8 +8089,6 @@
     },
     "node_modules/eslint-visitor-keys": {
       "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -7560,8 +8099,6 @@
     },
     "node_modules/eslint-webpack-plugin": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz",
-      "integrity": "sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==",
       "license": "MIT",
       "dependencies": {
         "@types/eslint": "^7.29.0 || ^8.4.1",
@@ -7584,8 +8121,6 @@
     },
     "node_modules/eslint-webpack-plugin/node_modules/jest-worker": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
-      "integrity": "sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -7598,8 +8133,6 @@
     },
     "node_modules/eslint-webpack-plugin/node_modules/supports-color": {
       "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -7613,8 +8146,6 @@
     },
     "node_modules/eslint/node_modules/@eslint/js": {
       "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
       "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -7622,14 +8153,10 @@
     },
     "node_modules/eslint/node_modules/argparse": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "license": "Python-2.0"
     },
     "node_modules/eslint/node_modules/find-up": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "license": "MIT",
       "dependencies": {
         "locate-path": "^6.0.0",
@@ -7644,8 +8171,6 @@
     },
     "node_modules/eslint/node_modules/globals": {
       "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "license": "MIT",
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -7659,8 +8184,6 @@
     },
     "node_modules/eslint/node_modules/js-yaml": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
@@ -7671,8 +8194,6 @@
     },
     "node_modules/eslint/node_modules/locate-path": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "license": "MIT",
       "dependencies": {
         "p-locate": "^5.0.0"
@@ -7686,8 +8207,6 @@
     },
     "node_modules/eslint/node_modules/p-limit": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "license": "MIT",
       "dependencies": {
         "yocto-queue": "^0.1.0"
@@ -7701,8 +8220,6 @@
     },
     "node_modules/eslint/node_modules/p-locate": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "license": "MIT",
       "dependencies": {
         "p-limit": "^3.0.2"
@@ -7716,8 +8233,6 @@
     },
     "node_modules/eslint/node_modules/type-fest": {
       "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
@@ -7728,8 +8243,6 @@
     },
     "node_modules/espree": {
       "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.9.0",
@@ -7745,8 +8258,6 @@
     },
     "node_modules/esprima": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "license": "BSD-2-Clause",
       "bin": {
         "esparse": "bin/esparse.js",
@@ -7758,8 +8269,6 @@
     },
     "node_modules/esquery": {
       "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "estraverse": "^5.1.0"
@@ -7770,8 +8279,6 @@
     },
     "node_modules/esrecurse": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -7782,8 +8289,6 @@
     },
     "node_modules/estraverse": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -7791,14 +8296,10 @@
     },
     "node_modules/estree-walker": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
-      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
       "license": "MIT"
     },
     "node_modules/esutils": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -7806,8 +8307,6 @@
     },
     "node_modules/etag": {
       "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -7815,14 +8314,10 @@
     },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
     "node_modules/events": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "license": "MIT",
       "engines": {
         "node": ">=0.8.x"
@@ -7830,8 +8325,6 @@
     },
     "node_modules/execa": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
       "license": "MIT",
       "dependencies": {
         "cross-spawn": "^7.0.3",
@@ -7853,16 +8346,12 @@
     },
     "node_modules/exit": {
       "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
       "engines": {
         "node": ">= 0.8.0"
       }
     },
     "node_modules/expect": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-27.5.1.tgz",
-      "integrity": "sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -7876,8 +8365,6 @@
     },
     "node_modules/express": {
       "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
-      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
@@ -7922,8 +8409,6 @@
     },
     "node_modules/express/node_modules/debug": {
       "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -7931,27 +8416,19 @@
     },
     "node_modules/express/node_modules/ms": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
       "dev": true,
       "license": "Apache-2.0"
     },
     "node_modules/fast-glob": {
       "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -7966,8 +8443,6 @@
     },
     "node_modules/fast-glob/node_modules/glob-parent": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -7978,26 +8453,18 @@
     },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "license": "MIT"
     },
     "node_modules/fast-uri": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.3.tgz",
-      "integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==",
       "license": "BSD-3-Clause"
     },
     "node_modules/fastq": {
       "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -8005,8 +8472,6 @@
     },
     "node_modules/faye-websocket": {
       "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
       "license": "Apache-2.0",
       "dependencies": {
         "websocket-driver": ">=0.5.1"
@@ -8017,8 +8482,6 @@
     },
     "node_modules/fb-watchman": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
-      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
       "license": "Apache-2.0",
       "dependencies": {
         "bser": "2.1.1"
@@ -8026,8 +8489,6 @@
     },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
       "license": "MIT",
       "dependencies": {
         "flat-cache": "^3.0.4"
@@ -8038,8 +8499,6 @@
     },
     "node_modules/file-loader": {
       "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
-      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
       "license": "MIT",
       "dependencies": {
         "loader-utils": "^2.0.0",
@@ -8058,8 +8517,6 @@
     },
     "node_modules/file-loader/node_modules/schema-utils": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -8076,8 +8533,6 @@
     },
     "node_modules/filelist": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
       "license": "Apache-2.0",
       "dependencies": {
         "minimatch": "^5.0.1"
@@ -8085,8 +8540,6 @@
     },
     "node_modules/filelist/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==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -8094,8 +8547,6 @@
     },
     "node_modules/filelist/node_modules/minimatch": {
       "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -8106,8 +8557,6 @@
     },
     "node_modules/filesize": {
       "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
-      "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">= 0.4.0"
@@ -8115,8 +8564,6 @@
     },
     "node_modules/fill-range": {
       "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -8127,8 +8574,6 @@
     },
     "node_modules/finalhandler": {
       "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
-      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
@@ -8145,8 +8590,6 @@
     },
     "node_modules/finalhandler/node_modules/debug": {
       "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -8154,14 +8597,10 @@
     },
     "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/find-cache-dir": {
       "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
       "license": "MIT",
       "dependencies": {
         "commondir": "^1.0.1",
@@ -8177,8 +8616,6 @@
     },
     "node_modules/find-up": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
       "license": "MIT",
       "dependencies": {
         "locate-path": "^5.0.0",
@@ -8190,8 +8627,6 @@
     },
     "node_modules/flat-cache": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
       "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
@@ -8204,14 +8639,10 @@
     },
     "node_modules/flatted": {
       "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
-      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
       "license": "ISC"
     },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
       "funding": [
         {
           "type": "individual",
@@ -8230,20 +8661,16 @@
     },
     "node_modules/for-each": {
       "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
       "license": "MIT",
       "dependencies": {
         "is-callable": "^1.1.3"
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "version": "3.3.1",
       "license": "ISC",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
+        "cross-spawn": "^7.0.6",
         "signal-exit": "^4.0.1"
       },
       "engines": {
@@ -8255,8 +8682,6 @@
     },
     "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==",
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -8267,8 +8692,6 @@
     },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
-      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.8.3",
@@ -8306,8 +8729,6 @@
     },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
       "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
@@ -8322,8 +8743,6 @@
     },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
       "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "license": "MIT",
       "dependencies": {
         "at-least-node": "^1.0.0",
@@ -8337,8 +8756,6 @@
     },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
       "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.4",
@@ -8355,8 +8772,6 @@
     },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -8364,8 +8779,6 @@
     },
     "node_modules/form-data": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.2.tgz",
-      "integrity": "sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
@@ -8378,17 +8791,22 @@
     },
     "node_modules/forwarded": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -8400,8 +8818,6 @@
     },
     "node_modules/fresh": {
       "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -8409,8 +8825,6 @@
     },
     "node_modules/fs-extra": {
       "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.0",
@@ -8423,21 +8837,14 @@
     },
     "node_modules/fs-monkey": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz",
-      "integrity": "sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==",
       "license": "Unlicense"
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "license": "ISC"
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8449,8 +8856,6 @@
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8458,8 +8863,6 @@
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
-      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -8476,8 +8879,6 @@
     },
     "node_modules/functions-have-names": {
       "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8485,8 +8886,6 @@
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -8494,8 +8893,6 @@
     },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "license": "ISC",
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
@@ -8503,8 +8900,6 @@
     },
     "node_modules/get-intrinsic": {
       "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.5.tgz",
-      "integrity": "sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==",
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
@@ -8523,16 +8918,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-own-enumerable-property-symbols": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
       "license": "ISC"
     },
     "node_modules/get-package-type": {
       "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
       "license": "MIT",
       "engines": {
         "node": ">=8.0.0"
@@ -8540,8 +8938,6 @@
     },
     "node_modules/get-stream": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -8552,8 +8948,6 @@
     },
     "node_modules/get-symbol-description": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
-      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.5",
@@ -8569,9 +8963,6 @@
     },
     "node_modules/glob": {
       "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
       "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -8590,8 +8981,6 @@
     },
     "node_modules/glob-parent": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
@@ -8602,14 +8991,10 @@
     },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "license": "BSD-2-Clause"
     },
     "node_modules/global-modules": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
       "license": "MIT",
       "dependencies": {
         "global-prefix": "^3.0.0"
@@ -8620,8 +9005,6 @@
     },
     "node_modules/global-prefix": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
       "license": "MIT",
       "dependencies": {
         "ini": "^1.3.5",
@@ -8634,8 +9017,6 @@
     },
     "node_modules/global-prefix/node_modules/which": {
       "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -8646,8 +9027,6 @@
     },
     "node_modules/globals": {
       "version": "15.13.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.13.0.tgz",
-      "integrity": "sha512-49TewVEz0UxZjr1WYYsWpPrhyC/B/pA8Bq0fUmet2n+eR7yn0IvNzNaoBwnK6mdkzcN+se7Ez9zUgULTz2QH4g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8659,8 +9038,6 @@
     },
     "node_modules/globalthis": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
-      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
       "license": "MIT",
       "dependencies": {
         "define-properties": "^1.2.1",
@@ -8675,8 +9052,6 @@
     },
     "node_modules/globby": {
       "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "license": "MIT",
       "dependencies": {
         "array-union": "^2.1.0",
@@ -8695,8 +9070,6 @@
     },
     "node_modules/gopd": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -8707,20 +9080,14 @@
     },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "license": "MIT"
     },
     "node_modules/gzip-size": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
       "license": "MIT",
       "dependencies": {
         "duplexer": "^0.1.2"
@@ -8734,20 +9101,14 @@
     },
     "node_modules/handle-thing": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "license": "MIT"
     },
     "node_modules/harmony-reflect": {
       "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
-      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
       "license": "(Apache-2.0 OR MPL-1.1)"
     },
     "node_modules/has-ansi": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8759,8 +9120,6 @@
     },
     "node_modules/has-ansi/node_modules/ansi-regex": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8769,8 +9128,6 @@
     },
     "node_modules/has-bigints": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8778,8 +9135,6 @@
     },
     "node_modules/has-flag": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8787,8 +9142,6 @@
     },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0"
@@ -8799,8 +9152,6 @@
     },
     "node_modules/has-proto": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
-      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.0"
@@ -8814,8 +9165,6 @@
     },
     "node_modules/has-symbols": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -8826,8 +9175,6 @@
     },
     "node_modules/has-tostringtag": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -8841,8 +9188,6 @@
     },
     "node_modules/hasown": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -8853,8 +9198,6 @@
     },
     "node_modules/he": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "license": "MIT",
       "bin": {
         "he": "bin/he"
@@ -8862,8 +9205,6 @@
     },
     "node_modules/hoopy": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
-      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 6.0.0"
@@ -8871,8 +9212,6 @@
     },
     "node_modules/hpack.js": {
       "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
       "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.1",
@@ -8883,14 +9222,10 @@
     },
     "node_modules/hpack.js/node_modules/isarray": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
       "license": "MIT"
     },
     "node_modules/hpack.js/node_modules/readable-stream": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "license": "MIT",
       "dependencies": {
         "core-util-is": "~1.0.0",
@@ -8904,14 +9239,10 @@
     },
     "node_modules/hpack.js/node_modules/safe-buffer": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "license": "MIT"
     },
     "node_modules/hpack.js/node_modules/string_decoder": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "~5.1.0"
@@ -8919,8 +9250,6 @@
     },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
       "license": "MIT",
       "dependencies": {
         "whatwg-encoding": "^1.0.5"
@@ -8931,8 +9260,6 @@
     },
     "node_modules/html-entities": {
       "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
-      "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==",
       "funding": [
         {
           "type": "github",
@@ -8947,14 +9274,10 @@
     },
     "node_modules/html-escaper": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "license": "MIT"
     },
     "node_modules/html-minifier-terser": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
       "license": "MIT",
       "dependencies": {
         "camel-case": "^4.1.2",
@@ -8974,8 +9297,6 @@
     },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
-      "integrity": "sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==",
       "license": "MIT",
       "dependencies": {
         "@types/html-minifier-terser": "^6.0.0",
@@ -9006,8 +9327,6 @@
     },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
       "funding": [
         "https://github.com/fb55/htmlparser2?sponsor=1",
         {
@@ -9025,14 +9344,10 @@
     },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
       "license": "MIT"
     },
     "node_modules/http-errors": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "license": "MIT",
       "dependencies": {
         "depd": "2.0.0",
@@ -9047,14 +9362,10 @@
     },
     "node_modules/http-parser-js": {
       "version": "0.5.8",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
-      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==",
       "license": "MIT"
     },
     "node_modules/http-proxy": {
       "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "license": "MIT",
       "dependencies": {
         "eventemitter3": "^4.0.0",
@@ -9067,8 +9378,6 @@
     },
     "node_modules/http-proxy-agent": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
       "license": "MIT",
       "dependencies": {
         "@tootallnate/once": "1",
@@ -9081,8 +9390,6 @@
     },
     "node_modules/http-proxy-middleware": {
       "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
-      "integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
       "license": "MIT",
       "dependencies": {
         "@types/http-proxy": "^1.17.8",
@@ -9105,8 +9412,6 @@
     },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
       "license": "MIT",
       "dependencies": {
         "agent-base": "6",
@@ -9118,8 +9423,6 @@
     },
     "node_modules/human-signals": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=10.17.0"
@@ -9127,8 +9430,6 @@
     },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -9139,8 +9440,6 @@
     },
     "node_modules/icss-utils": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
       "license": "ISC",
       "engines": {
         "node": "^10 || ^12 || >= 14"
@@ -9151,14 +9450,10 @@
     },
     "node_modules/idb": {
       "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
       "license": "ISC"
     },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
-      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
       "license": "MIT",
       "dependencies": {
         "harmony-reflect": "^1.4.6"
@@ -9169,8 +9464,6 @@
     },
     "node_modules/ignore": {
       "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "license": "MIT",
       "engines": {
         "node": ">= 4"
@@ -9178,8 +9471,6 @@
     },
     "node_modules/immer": {
       "version": "9.0.21",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
-      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -9188,8 +9479,6 @@
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -9204,8 +9493,6 @@
     },
     "node_modules/import-fresh/node_modules/resolve-from": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -9213,8 +9500,6 @@
     },
     "node_modules/import-local": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
-      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
       "license": "MIT",
       "dependencies": {
         "pkg-dir": "^4.2.0",
@@ -9232,8 +9517,6 @@
     },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.8.19"
@@ -9241,8 +9524,6 @@
     },
     "node_modules/indent-string": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -9251,9 +9532,6 @@
     },
     "node_modules/inflight": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
       "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
@@ -9262,20 +9540,14 @@
     },
     "node_modules/inherits": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
     "node_modules/ini": {
       "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "license": "ISC"
     },
     "node_modules/internal-slot": {
       "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
-      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -9288,8 +9560,6 @@
     },
     "node_modules/ipaddr.js": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
-      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
       "license": "MIT",
       "engines": {
         "node": ">= 10"
@@ -9297,8 +9567,6 @@
     },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
-      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -9313,14 +9581,10 @@
     },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "license": "MIT"
     },
     "node_modules/is-async-function": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
-      "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -9334,8 +9598,6 @@
     },
     "node_modules/is-bigint": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
-      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
       "license": "MIT",
       "dependencies": {
         "has-bigints": "^1.0.2"
@@ -9349,8 +9611,6 @@
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -9361,8 +9621,6 @@
     },
     "node_modules/is-boolean-object": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.0.tgz",
-      "integrity": "sha512-kR5g0+dXf/+kXnqI+lu0URKYPKgICtHGGNCDSB10AaUFj3o/HkB3u7WfpRBJGFopxxY0oH3ux7ZsDjLtK7xqvw==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -9377,8 +9635,6 @@
     },
     "node_modules/is-callable": {
       "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9389,8 +9645,6 @@
     },
     "node_modules/is-core-module": {
       "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
-      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -9404,8 +9658,6 @@
     },
     "node_modules/is-data-view": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
-      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
       "license": "MIT",
       "dependencies": {
         "is-typed-array": "^1.1.13"
@@ -9419,8 +9671,6 @@
     },
     "node_modules/is-date-object": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -9434,8 +9684,6 @@
     },
     "node_modules/is-docker": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
       "license": "MIT",
       "bin": {
         "is-docker": "cli.js"
@@ -9449,8 +9697,6 @@
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9458,8 +9704,6 @@
     },
     "node_modules/is-finalizationregistry": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.0.tgz",
-      "integrity": "sha512-qfMdqbAQEwBw78ZyReKnlA8ezmPdb9BemzIIip/JkjaZUhitfXDkkr+3QTboW0JrSXT1QWyYShpvnNHGZ4c4yA==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7"
@@ -9473,8 +9717,6 @@
     },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9482,8 +9724,6 @@
     },
     "node_modules/is-generator-fn": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -9491,8 +9731,6 @@
     },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
-      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
       "license": "MIT",
       "dependencies": {
         "has-tostringtag": "^1.0.0"
@@ -9506,8 +9744,6 @@
     },
     "node_modules/is-glob": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -9518,8 +9754,6 @@
     },
     "node_modules/is-map": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
-      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9530,14 +9764,10 @@
     },
     "node_modules/is-module": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
-      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
       "license": "MIT"
     },
     "node_modules/is-negative-zero": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
-      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9548,8 +9778,6 @@
     },
     "node_modules/is-number": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -9557,8 +9785,6 @@
     },
     "node_modules/is-number-object": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.0.tgz",
-      "integrity": "sha512-KVSZV0Dunv9DTPkhXwcZ3Q+tUc9TsaE1ZwX5J2WMvsSGS6Md8TFPun5uwh0yRdrNerI6vf/tbJxqSx4c1ZI1Lw==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -9573,8 +9799,6 @@
     },
     "node_modules/is-obj": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9582,8 +9806,6 @@
     },
     "node_modules/is-path-inside": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9591,8 +9813,6 @@
     },
     "node_modules/is-plain-obj": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -9603,14 +9823,10 @@
     },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "license": "MIT"
     },
     "node_modules/is-regex": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.0.tgz",
-      "integrity": "sha512-B6ohK4ZmoftlUe+uvenXSbPJFo6U37BH7oO1B3nQH8f/7h27N56s85MhUtbFJAziz5dcmuR3i8ovUl35zp8pFA==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -9627,8 +9843,6 @@
     },
     "node_modules/is-regexp": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9636,8 +9850,6 @@
     },
     "node_modules/is-root": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
-      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -9645,8 +9857,6 @@
     },
     "node_modules/is-set": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
-      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9657,8 +9867,6 @@
     },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7"
@@ -9672,8 +9880,6 @@
     },
     "node_modules/is-stream": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9684,8 +9890,6 @@
     },
     "node_modules/is-string": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.0.tgz",
-      "integrity": "sha512-PlfzajuF9vSo5wErv3MJAKD/nqf9ngAs1NFQYm16nUYFO2IzxJ2hcm+IOCg+EEopdykNNUhVq5cz35cAUxU8+g==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -9700,8 +9904,6 @@
     },
     "node_modules/is-symbol": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.0.tgz",
-      "integrity": "sha512-qS8KkNNXUZ/I+nX6QT8ZS1/Yx0A444yhzdTKxCzKkNjQ9sHErBxJnJAgh+f5YhusYECEcjo4XcyH87hn6+ks0A==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -9717,8 +9919,6 @@
     },
     "node_modules/is-typed-array": {
       "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
-      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "license": "MIT",
       "dependencies": {
         "which-typed-array": "^1.1.14"
@@ -9732,14 +9932,10 @@
     },
     "node_modules/is-typedarray": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
       "license": "MIT"
     },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
-      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9750,8 +9946,6 @@
     },
     "node_modules/is-weakref": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2"
@@ -9762,8 +9956,6 @@
     },
     "node_modules/is-weakset": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
-      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -9778,8 +9970,6 @@
     },
     "node_modules/is-wsl": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
       "license": "MIT",
       "dependencies": {
         "is-docker": "^2.0.0"
@@ -9790,20 +9980,14 @@
     },
     "node_modules/isarray": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
       "license": "MIT"
     },
     "node_modules/isexe": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
-      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=8"
@@ -9811,8 +9995,6 @@
     },
     "node_modules/istanbul-lib-instrument": {
       "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
-      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/core": "^7.12.3",
@@ -9827,8 +10009,6 @@
     },
     "node_modules/istanbul-lib-instrument/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -9836,8 +10016,6 @@
     },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
-      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "istanbul-lib-coverage": "^3.0.0",
@@ -9850,8 +10028,6 @@
     },
     "node_modules/istanbul-lib-report/node_modules/make-dir": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
       "license": "MIT",
       "dependencies": {
         "semver": "^7.5.3"
@@ -9865,8 +10041,6 @@
     },
     "node_modules/istanbul-lib-source-maps": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
-      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "debug": "^4.1.1",
@@ -9879,8 +10053,6 @@
     },
     "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -9888,8 +10060,6 @@
     },
     "node_modules/istanbul-reports": {
       "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
-      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "html-escaper": "^2.0.0",
@@ -9901,8 +10071,6 @@
     },
     "node_modules/iterator.prototype": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz",
-      "integrity": "sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==",
       "license": "MIT",
       "dependencies": {
         "define-properties": "^1.2.1",
@@ -9917,8 +10085,6 @@
     },
     "node_modules/jackspeak": {
       "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -9932,8 +10098,6 @@
     },
     "node_modules/jake": {
       "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
-      "integrity": "sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==",
       "license": "Apache-2.0",
       "dependencies": {
         "async": "^3.2.3",
@@ -9950,15 +10114,11 @@
     },
     "node_modules/javascript-natural-sort": {
       "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
-      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/jest": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
-      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/core": "^27.5.1",
@@ -9982,8 +10142,6 @@
     },
     "node_modules/jest-changed-files": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
-      "integrity": "sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -9996,8 +10154,6 @@
     },
     "node_modules/jest-circus": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",
-      "integrity": "sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==",
       "license": "MIT",
       "dependencies": {
         "@jest/environment": "^27.5.1",
@@ -10026,8 +10182,6 @@
     },
     "node_modules/jest-cli": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-27.5.1.tgz",
-      "integrity": "sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==",
       "license": "MIT",
       "dependencies": {
         "@jest/core": "^27.5.1",
@@ -10060,8 +10214,6 @@
     },
     "node_modules/jest-config": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-27.5.1.tgz",
-      "integrity": "sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.8.0",
@@ -10103,8 +10255,6 @@
     },
     "node_modules/jest-diff": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
-      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
       "license": "MIT",
       "dependencies": {
         "chalk": "^4.0.0",
@@ -10118,8 +10268,6 @@
     },
     "node_modules/jest-docblock": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
-      "integrity": "sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==",
       "license": "MIT",
       "dependencies": {
         "detect-newline": "^3.0.0"
@@ -10130,8 +10278,6 @@
     },
     "node_modules/jest-each": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-27.5.1.tgz",
-      "integrity": "sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -10146,8 +10292,6 @@
     },
     "node_modules/jest-environment-jsdom": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
-      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
       "license": "MIT",
       "dependencies": {
         "@jest/environment": "^27.5.1",
@@ -10164,8 +10308,6 @@
     },
     "node_modules/jest-environment-node": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
-      "integrity": "sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==",
       "license": "MIT",
       "dependencies": {
         "@jest/environment": "^27.5.1",
@@ -10181,8 +10323,6 @@
     },
     "node_modules/jest-get-type": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
-      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==",
       "license": "MIT",
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -10190,8 +10330,6 @@
     },
     "node_modules/jest-haste-map": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
-      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -10216,8 +10354,6 @@
     },
     "node_modules/jest-jasmine2": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz",
-      "integrity": "sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/environment": "^27.5.1",
@@ -10244,8 +10380,6 @@
     },
     "node_modules/jest-leak-detector": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz",
-      "integrity": "sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==",
       "license": "MIT",
       "dependencies": {
         "jest-get-type": "^27.5.1",
@@ -10257,8 +10391,6 @@
     },
     "node_modules/jest-matcher-utils": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
-      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
       "license": "MIT",
       "dependencies": {
         "chalk": "^4.0.0",
@@ -10272,8 +10404,6 @@
     },
     "node_modules/jest-message-util": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.1.tgz",
-      "integrity": "sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
@@ -10292,8 +10422,6 @@
     },
     "node_modules/jest-mock": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
-      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -10305,8 +10433,6 @@
     },
     "node_modules/jest-pnp-resolver": {
       "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
-      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -10322,8 +10448,6 @@
     },
     "node_modules/jest-regex-util": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
-      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==",
       "license": "MIT",
       "engines": {
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
@@ -10331,8 +10455,6 @@
     },
     "node_modules/jest-resolve": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz",
-      "integrity": "sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -10352,8 +10474,6 @@
     },
     "node_modules/jest-resolve-dependencies": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz",
-      "integrity": "sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -10366,8 +10486,6 @@
     },
     "node_modules/jest-runner": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.5.1.tgz",
-      "integrity": "sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/console": "^27.5.1",
@@ -10398,8 +10516,6 @@
     },
     "node_modules/jest-runtime": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz",
-      "integrity": "sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==",
       "license": "MIT",
       "dependencies": {
         "@jest/environment": "^27.5.1",
@@ -10431,8 +10547,6 @@
     },
     "node_modules/jest-serializer": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
-      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -10444,8 +10558,6 @@
     },
     "node_modules/jest-snapshot": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.5.1.tgz",
-      "integrity": "sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.7.2",
@@ -10477,8 +10589,6 @@
     },
     "node_modules/jest-util": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
-      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -10494,8 +10604,6 @@
     },
     "node_modules/jest-validate": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz",
-      "integrity": "sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^27.5.1",
@@ -10511,8 +10619,6 @@
     },
     "node_modules/jest-watch-typeahead": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz",
-      "integrity": "sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==",
       "license": "MIT",
       "dependencies": {
         "ansi-escapes": "^4.3.1",
@@ -10532,8 +10638,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/@jest/console": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-28.1.3.tgz",
-      "integrity": "sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^28.1.3",
@@ -10549,8 +10653,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/@jest/console/node_modules/slash": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -10558,8 +10660,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/@jest/test-result": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-28.1.3.tgz",
-      "integrity": "sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==",
       "license": "MIT",
       "dependencies": {
         "@jest/console": "^28.1.3",
@@ -10573,8 +10673,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/@jest/types": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.3.tgz",
-      "integrity": "sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/schemas": "^28.1.3",
@@ -10590,8 +10688,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/@types/yargs": {
       "version": "17.0.33",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
-      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
       "license": "MIT",
       "dependencies": {
         "@types/yargs-parser": "*"
@@ -10599,8 +10695,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/ansi-styles": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -10611,8 +10705,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/emittery": {
       "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz",
-      "integrity": "sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10623,8 +10715,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/jest-message-util": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.1.3.tgz",
-      "integrity": "sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
@@ -10643,8 +10733,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/jest-message-util/node_modules/slash": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -10652,8 +10740,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/jest-regex-util": {
       "version": "28.0.2",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-28.0.2.tgz",
-      "integrity": "sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==",
       "license": "MIT",
       "engines": {
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
@@ -10661,8 +10747,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/jest-util": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.3.tgz",
-      "integrity": "sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==",
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^28.1.3",
@@ -10678,8 +10762,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/jest-watcher": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-28.1.3.tgz",
-      "integrity": "sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==",
       "license": "MIT",
       "dependencies": {
         "@jest/test-result": "^28.1.3",
@@ -10697,8 +10779,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/jest-watcher/node_modules/string-length": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
       "license": "MIT",
       "dependencies": {
         "char-regex": "^1.0.2",
@@ -10710,8 +10790,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/jest-watcher/node_modules/strip-ansi": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -10722,8 +10800,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/pretty-format": {
       "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
-      "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
       "license": "MIT",
       "dependencies": {
         "@jest/schemas": "^28.1.3",
@@ -10737,14 +10813,10 @@
     },
     "node_modules/jest-watch-typeahead/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==",
       "license": "MIT"
     },
     "node_modules/jest-watch-typeahead/node_modules/slash": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10755,8 +10827,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/string-length": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
-      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
       "license": "MIT",
       "dependencies": {
         "char-regex": "^2.0.0",
@@ -10771,8 +10841,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/string-length/node_modules/char-regex": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.2.tgz",
-      "integrity": "sha512-cbGOjAptfM2LVmWhwRFHEKTPkLwNddVmuqYZQt895yXwAsWsXObCG+YN4DGQ/JBtT4GP1a1lPPdio2z413LmTg==",
       "license": "MIT",
       "engines": {
         "node": ">=12.20"
@@ -10780,8 +10848,6 @@
     },
     "node_modules/jest-watch-typeahead/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==",
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -10795,8 +10861,6 @@
     },
     "node_modules/jest-watch-typeahead/node_modules/strip-ansi/node_modules/ansi-regex": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10807,8 +10871,6 @@
     },
     "node_modules/jest-watcher": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.5.1.tgz",
-      "integrity": "sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==",
       "license": "MIT",
       "dependencies": {
         "@jest/test-result": "^27.5.1",
@@ -10825,8 +10887,6 @@
     },
     "node_modules/jest-worker": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -10839,8 +10899,6 @@
     },
     "node_modules/jest-worker/node_modules/supports-color": {
       "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -10853,24 +10911,18 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "version": "2.4.2",
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
     "node_modules/js-yaml": {
       "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
       "license": "MIT",
       "dependencies": {
         "argparse": "^1.0.7",
@@ -10882,8 +10934,6 @@
     },
     "node_modules/jsdom": {
       "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
-      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
       "license": "MIT",
       "dependencies": {
         "abab": "^2.0.5",
@@ -10928,8 +10978,6 @@
     },
     "node_modules/jsesc": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
-      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -10940,38 +10988,26 @@
     },
     "node_modules/json-buffer": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "license": "MIT"
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "license": "MIT"
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
       "license": "(AFL-2.1 OR BSD-3-Clause)"
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "license": "MIT"
     },
     "node_modules/json5": {
       "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -10982,8 +11018,6 @@
     },
     "node_modules/jsonfile": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "license": "MIT",
       "dependencies": {
         "universalify": "^2.0.0"
@@ -10994,8 +11028,6 @@
     },
     "node_modules/jsonpath": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz",
-      "integrity": "sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==",
       "license": "MIT",
       "dependencies": {
         "esprima": "1.2.2",
@@ -11005,8 +11037,6 @@
     },
     "node_modules/jsonpath/node_modules/esprima": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
-      "integrity": "sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==",
       "bin": {
         "esparse": "bin/esparse.js",
         "esvalidate": "bin/esvalidate.js"
@@ -11017,8 +11047,6 @@
     },
     "node_modules/jsonpointer": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
-      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11026,8 +11054,6 @@
     },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
-      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
       "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.6",
@@ -11041,8 +11067,6 @@
     },
     "node_modules/keyv": {
       "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "license": "MIT",
       "dependencies": {
         "json-buffer": "3.0.1"
@@ -11050,8 +11074,6 @@
     },
     "node_modules/kind-of": {
       "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11059,8 +11081,6 @@
     },
     "node_modules/kleur": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -11068,8 +11088,6 @@
     },
     "node_modules/klona": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -11077,14 +11095,10 @@
     },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
-      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
-      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
       "license": "CC0-1.0"
     },
     "node_modules/language-tags": {
       "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
-      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
       "license": "MIT",
       "dependencies": {
         "language-subtag-registry": "^0.3.20"
@@ -11095,8 +11109,6 @@
     },
     "node_modules/launch-editor": {
       "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.9.1.tgz",
-      "integrity": "sha512-Gcnl4Bd+hRO9P9icCP/RVVT2o8SFlPXofuCxvA2SaZuH45whSvf5p8x5oih5ftLiVhEI4sp5xDY+R+b3zJBh5w==",
       "license": "MIT",
       "dependencies": {
         "picocolors": "^1.0.0",
@@ -11105,8 +11117,6 @@
     },
     "node_modules/leven": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -11114,21 +11124,61 @@
     },
     "node_modules/levn": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "license": "MIT",
       "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.29.1",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^1.0.3"
       },
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.1",
+        "lightningcss-darwin-x64": "1.29.1",
+        "lightningcss-freebsd-x64": "1.29.1",
+        "lightningcss-linux-arm-gnueabihf": "1.29.1",
+        "lightningcss-linux-arm64-gnu": "1.29.1",
+        "lightningcss-linux-arm64-musl": "1.29.1",
+        "lightningcss-linux-x64-gnu": "1.29.1",
+        "lightningcss-linux-x64-musl": "1.29.1",
+        "lightningcss-win32-arm64-msvc": "1.29.1",
+        "lightningcss-win32-x64-msvc": "1.29.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.1",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lilconfig": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -11136,14 +11186,10 @@
     },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
     "node_modules/loader-runner": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
-      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
       "license": "MIT",
       "engines": {
         "node": ">=6.11.5"
@@ -11151,8 +11197,6 @@
     },
     "node_modules/loader-utils": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "license": "MIT",
       "dependencies": {
         "big.js": "^5.2.2",
@@ -11165,8 +11209,6 @@
     },
     "node_modules/locate-path": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
       "license": "MIT",
       "dependencies": {
         "p-locate": "^4.1.0"
@@ -11177,44 +11219,30 @@
     },
     "node_modules/lodash": {
       "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "license": "MIT"
     },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
       "license": "MIT"
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "license": "MIT"
     },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
       "license": "MIT"
     },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "license": "MIT"
     },
     "node_modules/loglevel": {
       "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
-      "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -11227,8 +11255,6 @@
     },
     "node_modules/loglevel-colored-level-prefix": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz",
-      "integrity": "sha512-u45Wcxxc+SdAlh4yeF/uKlC1SPUPCy0gullSNKXod5I4bmifzk+Q4lSLExNEVn19tGaJipbZ4V4jbFn79/6mVA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11238,8 +11264,6 @@
     },
     "node_modules/loglevel-colored-level-prefix/node_modules/ansi-regex": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -11248,8 +11272,6 @@
     },
     "node_modules/loglevel-colored-level-prefix/node_modules/ansi-styles": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -11258,8 +11280,6 @@
     },
     "node_modules/loglevel-colored-level-prefix/node_modules/chalk": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11275,8 +11295,6 @@
     },
     "node_modules/loglevel-colored-level-prefix/node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -11285,8 +11303,6 @@
     },
     "node_modules/loglevel-colored-level-prefix/node_modules/strip-ansi": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11298,8 +11314,6 @@
     },
     "node_modules/loglevel-colored-level-prefix/node_modules/supports-color": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -11308,8 +11322,6 @@
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -11320,8 +11332,6 @@
     },
     "node_modules/lower-case": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.3"
@@ -11329,17 +11339,20 @@
     },
     "node_modules/lru-cache": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "license": "ISC",
       "dependencies": {
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.476.0",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
       "license": "MIT",
       "dependencies": {
         "sourcemap-codec": "^1.4.8"
@@ -11347,8 +11360,6 @@
     },
     "node_modules/make-dir": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
       "license": "MIT",
       "dependencies": {
         "semver": "^6.0.0"
@@ -11362,8 +11373,6 @@
     },
     "node_modules/make-dir/node_modules/semver": {
       "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -11371,8 +11380,6 @@
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "tmpl": "1.0.5"
@@ -11380,14 +11387,10 @@
     },
     "node_modules/mdn-data": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
       "license": "CC0-1.0"
     },
     "node_modules/media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -11395,8 +11398,6 @@
     },
     "node_modules/memfs": {
       "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
-      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
       "license": "Unlicense",
       "dependencies": {
         "fs-monkey": "^1.0.4"
@@ -11407,8 +11408,6 @@
     },
     "node_modules/merge-descriptors": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
-      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -11416,14 +11415,10 @@
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "license": "MIT"
     },
     "node_modules/merge2": {
       "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -11431,8 +11426,6 @@
     },
     "node_modules/methods": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -11440,8 +11433,6 @@
     },
     "node_modules/micromatch": {
       "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -11453,8 +11444,6 @@
     },
     "node_modules/mime": {
       "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
       "license": "MIT",
       "bin": {
         "mime": "cli.js"
@@ -11465,8 +11454,6 @@
     },
     "node_modules/mime-db": {
       "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -11474,8 +11461,6 @@
     },
     "node_modules/mime-types": {
       "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
@@ -11486,8 +11471,6 @@
     },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -11495,8 +11478,6 @@
     },
     "node_modules/mini-css-extract-plugin": {
       "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz",
-      "integrity": "sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==",
       "license": "MIT",
       "dependencies": {
         "schema-utils": "^4.0.0",
@@ -11515,14 +11496,10 @@
     },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
       "license": "ISC"
     },
     "node_modules/minimatch": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -11533,8 +11510,6 @@
     },
     "node_modules/minimist": {
       "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -11542,8 +11517,6 @@
     },
     "node_modules/minipass": {
       "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -11551,8 +11524,6 @@
     },
     "node_modules/mkdirp": {
       "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
       "license": "MIT",
       "dependencies": {
         "minimist": "^1.2.6"
@@ -11561,16 +11532,19 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
     "node_modules/multicast-dns": {
       "version": "7.2.5",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
-      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
       "license": "MIT",
       "dependencies": {
         "dns-packet": "^5.2.2",
@@ -11582,8 +11556,6 @@
     },
     "node_modules/mz": {
       "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0",
@@ -11593,8 +11565,6 @@
     },
     "node_modules/nanoid": {
       "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
@@ -11611,20 +11581,14 @@
     },
     "node_modules/natural-compare": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "license": "MIT"
     },
     "node_modules/natural-compare-lite": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
       "license": "MIT"
     },
     "node_modules/negotiator": {
       "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
-      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -11632,24 +11596,22 @@
     },
     "node_modules/neo-async": {
       "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "license": "MIT"
     },
     "node_modules/no-case": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
       "license": "MIT",
       "dependencies": {
         "lower-case": "^2.0.2",
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "license": "MIT"
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
-      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
       "license": "(BSD-3-Clause OR GPL-2.0)",
       "engines": {
         "node": ">= 6.13.0"
@@ -11657,20 +11619,14 @@
     },
     "node_modules/node-int64": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
       "license": "MIT"
     },
     "node_modules/node-releases": {
       "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "license": "MIT"
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11678,8 +11634,6 @@
     },
     "node_modules/normalize-range": {
       "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11687,8 +11641,6 @@
     },
     "node_modules/normalize-url": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -11699,8 +11651,6 @@
     },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.0.0"
@@ -11711,8 +11661,6 @@
     },
     "node_modules/nth-check": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0"
@@ -11723,14 +11671,10 @@
     },
     "node_modules/nwsapi": {
       "version": "2.2.16",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.16.tgz",
-      "integrity": "sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==",
       "license": "MIT"
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -11738,8 +11682,6 @@
     },
     "node_modules/object-hash": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -11747,8 +11689,6 @@
     },
     "node_modules/object-inspect": {
       "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
-      "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -11759,8 +11699,6 @@
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -11768,8 +11706,6 @@
     },
     "node_modules/object.assign": {
       "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
-      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.5",
@@ -11786,8 +11722,6 @@
     },
     "node_modules/object.entries": {
       "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
-      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -11800,8 +11734,6 @@
     },
     "node_modules/object.fromentries": {
       "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
-      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -11818,8 +11750,6 @@
     },
     "node_modules/object.getownpropertydescriptors": {
       "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.8.tgz",
-      "integrity": "sha512-qkHIGe4q0lSYMv0XI4SsBTJz3WaURhLvd0lKSgtVuOsJ2krg4SgMw3PIRQFMp07yi++UR3se2mkcLqsBNpBb/A==",
       "license": "MIT",
       "dependencies": {
         "array.prototype.reduce": "^1.0.6",
@@ -11839,8 +11769,6 @@
     },
     "node_modules/object.groupby": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
-      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -11853,8 +11781,6 @@
     },
     "node_modules/object.values": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
-      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -11870,14 +11796,10 @@
     },
     "node_modules/obuf": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "license": "MIT"
     },
     "node_modules/on-finished": {
       "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "license": "MIT",
       "dependencies": {
         "ee-first": "1.1.1"
@@ -11888,8 +11810,6 @@
     },
     "node_modules/on-headers": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -11897,8 +11817,6 @@
     },
     "node_modules/once": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
       "license": "ISC",
       "dependencies": {
         "wrappy": "1"
@@ -11906,8 +11824,6 @@
     },
     "node_modules/onetime": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "license": "MIT",
       "dependencies": {
         "mimic-fn": "^2.1.0"
@@ -11921,8 +11837,6 @@
     },
     "node_modules/open": {
       "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
       "license": "MIT",
       "dependencies": {
         "define-lazy-prop": "^2.0.0",
@@ -11938,8 +11852,6 @@
     },
     "node_modules/optionator": {
       "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
-      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "license": "MIT",
       "dependencies": {
         "deep-is": "^0.1.3",
@@ -11955,8 +11867,6 @@
     },
     "node_modules/p-limit": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "license": "MIT",
       "dependencies": {
         "p-try": "^2.0.0"
@@ -11970,8 +11880,6 @@
     },
     "node_modules/p-locate": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
       "license": "MIT",
       "dependencies": {
         "p-limit": "^2.2.0"
@@ -11982,8 +11890,6 @@
     },
     "node_modules/p-retry": {
       "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
-      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
       "license": "MIT",
       "dependencies": {
         "@types/retry": "0.12.0",
@@ -11995,8 +11901,6 @@
     },
     "node_modules/p-try": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -12004,14 +11908,10 @@
     },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
       "license": "BlueOak-1.0.0"
     },
     "node_modules/param-case": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
       "license": "MIT",
       "dependencies": {
         "dot-case": "^3.0.4",
@@ -12020,8 +11920,6 @@
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -12032,8 +11930,6 @@
     },
     "node_modules/parse-json": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
@@ -12050,14 +11946,10 @@
     },
     "node_modules/parse5": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
       "license": "MIT"
     },
     "node_modules/parseurl": {
       "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -12065,8 +11957,6 @@
     },
     "node_modules/pascal-case": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
       "license": "MIT",
       "dependencies": {
         "no-case": "^3.0.4",
@@ -12075,8 +11965,6 @@
     },
     "node_modules/path-exists": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -12084,8 +11972,6 @@
     },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -12093,8 +11979,6 @@
     },
     "node_modules/path-key": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -12102,14 +11986,10 @@
     },
     "node_modules/path-parse": {
       "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
     "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==",
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
@@ -12124,20 +12004,14 @@
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
       "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
     "node_modules/path-to-regexp": {
       "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
-      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "license": "MIT"
     },
     "node_modules/path-type": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -12145,20 +12019,14 @@
     },
     "node_modules/performance-now": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
       "license": "MIT"
     },
     "node_modules/picocolors": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -12169,8 +12037,6 @@
     },
     "node_modules/pify": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -12178,8 +12044,6 @@
     },
     "node_modules/pirates": {
       "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -12187,8 +12051,6 @@
     },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
       "license": "MIT",
       "dependencies": {
         "find-up": "^4.0.0"
@@ -12199,8 +12061,6 @@
     },
     "node_modules/pkg-up": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
       "license": "MIT",
       "dependencies": {
         "find-up": "^3.0.0"
@@ -12211,8 +12071,6 @@
     },
     "node_modules/pkg-up/node_modules/find-up": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
       "license": "MIT",
       "dependencies": {
         "locate-path": "^3.0.0"
@@ -12223,8 +12081,6 @@
     },
     "node_modules/pkg-up/node_modules/locate-path": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
       "license": "MIT",
       "dependencies": {
         "p-locate": "^3.0.0",
@@ -12236,8 +12092,6 @@
     },
     "node_modules/pkg-up/node_modules/p-locate": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
       "license": "MIT",
       "dependencies": {
         "p-limit": "^2.0.0"
@@ -12248,8 +12102,6 @@
     },
     "node_modules/pkg-up/node_modules/path-exists": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -12257,17 +12109,13 @@
     },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
-      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.49",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
-      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "version": "8.5.3",
       "funding": [
         {
           "type": "opencollective",
@@ -12284,7 +12132,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.7",
+        "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -12294,8 +12142,6 @@
     },
     "node_modules/postcss-attribute-case-insensitive": {
       "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz",
-      "integrity": "sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==",
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.0.10"
@@ -12313,8 +12159,6 @@
     },
     "node_modules/postcss-browser-comments": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
-      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
       "license": "CC0-1.0",
       "engines": {
         "node": ">=8"
@@ -12326,8 +12170,6 @@
     },
     "node_modules/postcss-calc": {
       "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.0.9",
@@ -12339,8 +12181,6 @@
     },
     "node_modules/postcss-clamp": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
-      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12354,8 +12194,6 @@
     },
     "node_modules/postcss-color-functional-notation": {
       "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz",
-      "integrity": "sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12373,8 +12211,6 @@
     },
     "node_modules/postcss-color-hex-alpha": {
       "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz",
-      "integrity": "sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12392,8 +12228,6 @@
     },
     "node_modules/postcss-color-rebeccapurple": {
       "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz",
-      "integrity": "sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12411,8 +12245,6 @@
     },
     "node_modules/postcss-colormin": {
       "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
-      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.21.4",
@@ -12429,8 +12261,6 @@
     },
     "node_modules/postcss-convert-values": {
       "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
-      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.21.4",
@@ -12445,8 +12275,6 @@
     },
     "node_modules/postcss-custom-media": {
       "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz",
-      "integrity": "sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12464,8 +12292,6 @@
     },
     "node_modules/postcss-custom-properties": {
       "version": "12.1.11",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz",
-      "integrity": "sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12483,8 +12309,6 @@
     },
     "node_modules/postcss-custom-selectors": {
       "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz",
-      "integrity": "sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==",
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.0.4"
@@ -12502,8 +12326,6 @@
     },
     "node_modules/postcss-dir-pseudo-class": {
       "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz",
-      "integrity": "sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-selector-parser": "^6.0.10"
@@ -12521,8 +12343,6 @@
     },
     "node_modules/postcss-discard-comments": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
-      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
       "license": "MIT",
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -12533,8 +12353,6 @@
     },
     "node_modules/postcss-discard-duplicates": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
-      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
       "license": "MIT",
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -12545,8 +12363,6 @@
     },
     "node_modules/postcss-discard-empty": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
-      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
       "license": "MIT",
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -12557,8 +12373,6 @@
     },
     "node_modules/postcss-discard-overridden": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
-      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
       "license": "MIT",
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -12569,8 +12383,6 @@
     },
     "node_modules/postcss-double-position-gradients": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz",
-      "integrity": "sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/postcss-progressive-custom-properties": "^1.1.0",
@@ -12589,8 +12401,6 @@
     },
     "node_modules/postcss-env-function": {
       "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz",
-      "integrity": "sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12604,8 +12414,6 @@
     },
     "node_modules/postcss-flexbugs-fixes": {
       "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
       "license": "MIT",
       "peerDependencies": {
         "postcss": "^8.1.4"
@@ -12613,8 +12421,6 @@
     },
     "node_modules/postcss-focus-visible": {
       "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz",
-      "integrity": "sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-selector-parser": "^6.0.9"
@@ -12628,8 +12434,6 @@
     },
     "node_modules/postcss-focus-within": {
       "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz",
-      "integrity": "sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-selector-parser": "^6.0.9"
@@ -12643,8 +12447,6 @@
     },
     "node_modules/postcss-font-variant": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
-      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
       "license": "MIT",
       "peerDependencies": {
         "postcss": "^8.1.0"
@@ -12652,8 +12454,6 @@
     },
     "node_modules/postcss-gap-properties": {
       "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz",
-      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
       "license": "CC0-1.0",
       "engines": {
         "node": "^12 || ^14 || >=16"
@@ -12668,8 +12468,6 @@
     },
     "node_modules/postcss-image-set-function": {
       "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz",
-      "integrity": "sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12687,8 +12485,6 @@
     },
     "node_modules/postcss-import": {
       "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
@@ -12704,8 +12500,6 @@
     },
     "node_modules/postcss-initial": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
-      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
       "license": "MIT",
       "peerDependencies": {
         "postcss": "^8.0.0"
@@ -12713,8 +12507,6 @@
     },
     "node_modules/postcss-js": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
       "license": "MIT",
       "dependencies": {
         "camelcase-css": "^2.0.1"
@@ -12732,8 +12524,6 @@
     },
     "node_modules/postcss-lab-function": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz",
-      "integrity": "sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/postcss-progressive-custom-properties": "^1.1.0",
@@ -12752,8 +12542,6 @@
     },
     "node_modules/postcss-load-config": {
       "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",
@@ -12787,8 +12575,6 @@
     },
     "node_modules/postcss-load-config/node_modules/lilconfig": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -12798,9 +12584,7 @@
       }
     },
     "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.1.tgz",
-      "integrity": "sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==",
+      "version": "2.7.0",
       "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
@@ -12811,8 +12595,6 @@
     },
     "node_modules/postcss-loader": {
       "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
-      "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
       "license": "MIT",
       "dependencies": {
         "cosmiconfig": "^7.0.0",
@@ -12833,8 +12615,6 @@
     },
     "node_modules/postcss-logical": {
       "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
-      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
       "license": "CC0-1.0",
       "engines": {
         "node": "^12 || ^14 || >=16"
@@ -12845,8 +12625,6 @@
     },
     "node_modules/postcss-media-minmax": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
-      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -12857,8 +12635,6 @@
     },
     "node_modules/postcss-merge-longhand": {
       "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
-      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
@@ -12873,8 +12649,6 @@
     },
     "node_modules/postcss-merge-rules": {
       "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
-      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.21.4",
@@ -12891,8 +12665,6 @@
     },
     "node_modules/postcss-minify-font-values": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
-      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -12906,8 +12678,6 @@
     },
     "node_modules/postcss-minify-gradients": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
-      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
       "license": "MIT",
       "dependencies": {
         "colord": "^2.9.1",
@@ -12923,8 +12693,6 @@
     },
     "node_modules/postcss-minify-params": {
       "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
-      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.21.4",
@@ -12940,8 +12708,6 @@
     },
     "node_modules/postcss-minify-selectors": {
       "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
-      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.0.5"
@@ -12955,8 +12721,6 @@
     },
     "node_modules/postcss-modules-extract-imports": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
-      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
       "license": "ISC",
       "engines": {
         "node": "^10 || ^12 || >= 14"
@@ -12967,8 +12731,6 @@
     },
     "node_modules/postcss-modules-local-by-default": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.1.0.tgz",
-      "integrity": "sha512-rm0bdSv4jC3BDma3s9H19ZddW0aHX6EoqwDYU2IfZhRN+53QrufTRo2IdkAbRqLx4R2IYbZnbjKKxg4VN5oU9Q==",
       "license": "MIT",
       "dependencies": {
         "icss-utils": "^5.0.0",
@@ -12984,8 +12746,6 @@
     },
     "node_modules/postcss-modules-local-by-default/node_modules/postcss-selector-parser": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
-      "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -12997,8 +12757,6 @@
     },
     "node_modules/postcss-modules-scope": {
       "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
-      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
       "license": "ISC",
       "dependencies": {
         "postcss-selector-parser": "^7.0.0"
@@ -13012,8 +12770,6 @@
     },
     "node_modules/postcss-modules-scope/node_modules/postcss-selector-parser": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz",
-      "integrity": "sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==",
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -13025,8 +12781,6 @@
     },
     "node_modules/postcss-modules-values": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
       "license": "ISC",
       "dependencies": {
         "icss-utils": "^5.0.0"
@@ -13040,8 +12794,6 @@
     },
     "node_modules/postcss-nested": {
       "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -13065,8 +12817,6 @@
     },
     "node_modules/postcss-nesting": {
       "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
-      "integrity": "sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/selector-specificity": "^2.0.0",
@@ -13085,8 +12835,6 @@
     },
     "node_modules/postcss-normalize": {
       "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize/-/postcss-normalize-10.0.1.tgz",
-      "integrity": "sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/normalize.css": "*",
@@ -13103,8 +12851,6 @@
     },
     "node_modules/postcss-normalize-charset": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
-      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
       "license": "MIT",
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -13115,8 +12861,6 @@
     },
     "node_modules/postcss-normalize-display-values": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
-      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13130,8 +12874,6 @@
     },
     "node_modules/postcss-normalize-positions": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
-      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13145,8 +12887,6 @@
     },
     "node_modules/postcss-normalize-repeat-style": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
-      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13160,8 +12900,6 @@
     },
     "node_modules/postcss-normalize-string": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
-      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13175,8 +12913,6 @@
     },
     "node_modules/postcss-normalize-timing-functions": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
-      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13190,8 +12926,6 @@
     },
     "node_modules/postcss-normalize-unicode": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
-      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.21.4",
@@ -13206,8 +12940,6 @@
     },
     "node_modules/postcss-normalize-url": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
-      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
       "license": "MIT",
       "dependencies": {
         "normalize-url": "^6.0.1",
@@ -13222,8 +12954,6 @@
     },
     "node_modules/postcss-normalize-whitespace": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
-      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13237,8 +12967,6 @@
     },
     "node_modules/postcss-opacity-percentage": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz",
-      "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==",
       "funding": [
         {
           "type": "kofi",
@@ -13259,8 +12987,6 @@
     },
     "node_modules/postcss-ordered-values": {
       "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
-      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
       "license": "MIT",
       "dependencies": {
         "cssnano-utils": "^3.1.0",
@@ -13275,8 +13001,6 @@
     },
     "node_modules/postcss-overflow-shorthand": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz",
-      "integrity": "sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13294,8 +13018,6 @@
     },
     "node_modules/postcss-page-break": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
-      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
       "license": "MIT",
       "peerDependencies": {
         "postcss": "^8"
@@ -13303,8 +13025,6 @@
     },
     "node_modules/postcss-place": {
       "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-7.0.5.tgz",
-      "integrity": "sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13322,8 +13042,6 @@
     },
     "node_modules/postcss-preset-env": {
       "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz",
-      "integrity": "sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==",
       "license": "CC0-1.0",
       "dependencies": {
         "@csstools/postcss-cascade-layers": "^1.1.1",
@@ -13389,8 +13107,6 @@
     },
     "node_modules/postcss-pseudo-class-any-link": {
       "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz",
-      "integrity": "sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==",
       "license": "CC0-1.0",
       "dependencies": {
         "postcss-selector-parser": "^6.0.10"
@@ -13408,8 +13124,6 @@
     },
     "node_modules/postcss-reduce-initial": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
-      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.21.4",
@@ -13424,8 +13138,6 @@
     },
     "node_modules/postcss-reduce-transforms": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
-      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
@@ -13439,8 +13151,6 @@
     },
     "node_modules/postcss-replace-overflow-wrap": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
-      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
       "license": "MIT",
       "peerDependencies": {
         "postcss": "^8.0.3"
@@ -13448,8 +13158,6 @@
     },
     "node_modules/postcss-selector-not": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
-      "integrity": "sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==",
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.0.10"
@@ -13467,8 +13175,6 @@
     },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -13480,8 +13186,6 @@
     },
     "node_modules/postcss-svgo": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
-      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
       "license": "MIT",
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
@@ -13496,8 +13200,6 @@
     },
     "node_modules/postcss-svgo/node_modules/commander": {
       "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
       "license": "MIT",
       "engines": {
         "node": ">= 10"
@@ -13505,8 +13207,6 @@
     },
     "node_modules/postcss-svgo/node_modules/css-tree": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
       "license": "MIT",
       "dependencies": {
         "mdn-data": "2.0.14",
@@ -13518,14 +13218,10 @@
     },
     "node_modules/postcss-svgo/node_modules/mdn-data": {
       "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
       "license": "CC0-1.0"
     },
     "node_modules/postcss-svgo/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -13533,8 +13229,6 @@
     },
     "node_modules/postcss-svgo/node_modules/svgo": {
       "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
       "license": "MIT",
       "dependencies": {
         "@trysound/sax": "0.2.0",
@@ -13554,8 +13248,6 @@
     },
     "node_modules/postcss-unique-selectors": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
-      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
       "license": "MIT",
       "dependencies": {
         "postcss-selector-parser": "^6.0.5"
@@ -13569,14 +13261,10 @@
     },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8.0"
@@ -13584,8 +13272,6 @@
     },
     "node_modules/prettier": {
       "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
-      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -13600,8 +13286,6 @@
     },
     "node_modules/prettier-eslint": {
       "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/prettier-eslint/-/prettier-eslint-16.3.0.tgz",
-      "integrity": "sha512-Lh102TIFCr11PJKUMQ2kwNmxGhTsv/KzUg9QYF2Gkw259g/kPgndZDWavk7/ycbRvj2oz4BPZ1gCU8bhfZH/Xg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13636,8 +13320,6 @@
     },
     "node_modules/prettier-eslint/node_modules/@jest/schemas": {
       "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13649,15 +13331,11 @@
     },
     "node_modules/prettier-eslint/node_modules/@sinclair/typebox": {
       "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/prettier-eslint/node_modules/@typescript-eslint/parser": {
       "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
-      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -13685,8 +13363,6 @@
     },
     "node_modules/prettier-eslint/node_modules/@typescript-eslint/scope-manager": {
       "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
-      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13703,8 +13379,6 @@
     },
     "node_modules/prettier-eslint/node_modules/@typescript-eslint/types": {
       "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
-      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -13717,8 +13391,6 @@
     },
     "node_modules/prettier-eslint/node_modules/@typescript-eslint/typescript-estree": {
       "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
-      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -13746,8 +13418,6 @@
     },
     "node_modules/prettier-eslint/node_modules/@typescript-eslint/visitor-keys": {
       "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
-      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13764,8 +13434,6 @@
     },
     "node_modules/prettier-eslint/node_modules/ansi-styles": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -13777,8 +13445,6 @@
     },
     "node_modules/prettier-eslint/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==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13787,8 +13453,6 @@
     },
     "node_modules/prettier-eslint/node_modules/minimatch": {
       "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -13803,8 +13467,6 @@
     },
     "node_modules/prettier-eslint/node_modules/pretty-format": {
       "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13818,15 +13480,11 @@
     },
     "node_modules/prettier-eslint/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==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/prettier-eslint/node_modules/typescript": {
       "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
-      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -13839,8 +13497,6 @@
     },
     "node_modules/prettier-linter-helpers": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13852,8 +13508,6 @@
     },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
-      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -13864,8 +13518,6 @@
     },
     "node_modules/pretty-error": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
-      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
       "license": "MIT",
       "dependencies": {
         "lodash": "^4.17.20",
@@ -13874,8 +13526,6 @@
     },
     "node_modules/pretty-format": {
       "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1",
@@ -13888,8 +13538,6 @@
     },
     "node_modules/pretty-format/node_modules/ansi-styles": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -13898,16 +13546,37 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "license": "MIT"
+    },
+    "node_modules/primereact": {
+      "version": "10.9.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-transition-group": "^4.4.1",
+        "react-transition-group": "^4.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "license": "MIT"
     },
     "node_modules/promise": {
       "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
-      "integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
       "license": "MIT",
       "dependencies": {
         "asap": "~2.0.6"
@@ -13915,8 +13584,6 @@
     },
     "node_modules/prompts": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
       "license": "MIT",
       "dependencies": {
         "kleur": "^3.0.3",
@@ -13928,8 +13595,6 @@
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -13939,14 +13604,10 @@
     },
     "node_modules/prop-types/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==",
       "license": "MIT"
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
       "license": "MIT",
       "dependencies": {
         "forwarded": "0.2.0",
@@ -13958,8 +13619,6 @@
     },
     "node_modules/proxy-addr/node_modules/ipaddr.js": {
       "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.10"
@@ -13967,8 +13626,6 @@
     },
     "node_modules/psl": {
       "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
-      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
       "license": "MIT",
       "dependencies": {
         "punycode": "^2.3.1"
@@ -13979,8 +13636,6 @@
     },
     "node_modules/punycode": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -13988,9 +13643,6 @@
     },
     "node_modules/q": {
       "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
-      "deprecated": "You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.\n\n(For a CapTP with native promises, see @endo/eventual-send and @endo/captp)",
       "license": "MIT",
       "engines": {
         "node": ">=0.6.0",
@@ -13999,8 +13651,6 @@
     },
     "node_modules/qs": {
       "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.0.6"
@@ -14014,14 +13664,10 @@
     },
     "node_modules/querystringify": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
       "license": "MIT"
     },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "funding": [
         {
           "type": "github",
@@ -14038,10 +13684,78 @@
       ],
       "license": "MIT"
     },
+    "node_modules/radix-ui": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-accessible-icon": "1.1.2",
+        "@radix-ui/react-accordion": "1.2.3",
+        "@radix-ui/react-alert-dialog": "1.1.6",
+        "@radix-ui/react-aspect-ratio": "1.1.2",
+        "@radix-ui/react-avatar": "1.1.3",
+        "@radix-ui/react-checkbox": "1.1.4",
+        "@radix-ui/react-collapsible": "1.1.3",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-context-menu": "2.2.6",
+        "@radix-ui/react-dialog": "1.1.6",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-dropdown-menu": "2.1.6",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-form": "0.1.2",
+        "@radix-ui/react-hover-card": "1.1.6",
+        "@radix-ui/react-label": "2.1.2",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-menubar": "1.1.6",
+        "@radix-ui/react-navigation-menu": "1.2.5",
+        "@radix-ui/react-popover": "1.1.6",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-progress": "1.1.2",
+        "@radix-ui/react-radio-group": "1.2.3",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-scroll-area": "1.2.3",
+        "@radix-ui/react-select": "2.1.6",
+        "@radix-ui/react-separator": "1.1.2",
+        "@radix-ui/react-slider": "1.2.3",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-switch": "1.1.3",
+        "@radix-ui/react-tabs": "1.1.3",
+        "@radix-ui/react-toast": "1.2.6",
+        "@radix-ui/react-toggle": "1.1.2",
+        "@radix-ui/react-toggle-group": "1.1.2",
+        "@radix-ui/react-toolbar": "1.1.2",
+        "@radix-ui/react-tooltip": "1.1.8",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/raf": {
       "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
       "license": "MIT",
       "dependencies": {
         "performance-now": "^2.1.0"
@@ -14049,8 +13763,6 @@
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "^5.1.0"
@@ -14058,8 +13770,6 @@
     },
     "node_modules/range-parser": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -14067,8 +13777,6 @@
     },
     "node_modules/raw-body": {
       "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "license": "MIT",
       "dependencies": {
         "bytes": "3.1.2",
@@ -14082,8 +13790,6 @@
     },
     "node_modules/raw-body/node_modules/iconv-lite": {
       "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
@@ -14094,8 +13800,6 @@
     },
     "node_modules/react": {
       "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
-      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -14103,8 +13807,6 @@
     },
     "node_modules/react-app-polyfill": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
-      "integrity": "sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w==",
       "license": "MIT",
       "dependencies": {
         "core-js": "^3.19.2",
@@ -14120,14 +13822,10 @@
     },
     "node_modules/react-app-polyfill/node_modules/regenerator-runtime": {
       "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
       "license": "MIT"
     },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
-      "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.16.0",
@@ -14161,8 +13859,6 @@
     },
     "node_modules/react-dev-utils/node_modules/find-up": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "license": "MIT",
       "dependencies": {
         "locate-path": "^6.0.0",
@@ -14177,8 +13873,6 @@
     },
     "node_modules/react-dev-utils/node_modules/loader-utils": {
       "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
-      "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
       "license": "MIT",
       "engines": {
         "node": ">= 12.13.0"
@@ -14186,8 +13880,6 @@
     },
     "node_modules/react-dev-utils/node_modules/locate-path": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "license": "MIT",
       "dependencies": {
         "p-locate": "^5.0.0"
@@ -14201,8 +13893,6 @@
     },
     "node_modules/react-dev-utils/node_modules/p-limit": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "license": "MIT",
       "dependencies": {
         "yocto-queue": "^0.1.0"
@@ -14216,8 +13906,6 @@
     },
     "node_modules/react-dev-utils/node_modules/p-locate": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "license": "MIT",
       "dependencies": {
         "p-limit": "^3.0.2"
@@ -14231,8 +13919,6 @@
     },
     "node_modules/react-dom": {
       "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
-      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
       "license": "MIT",
       "dependencies": {
         "scheduler": "^0.25.0"
@@ -14243,29 +13929,64 @@
     },
     "node_modules/react-error-overlay": {
       "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
-      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "license": "MIT"
     },
     "node_modules/react-is": {
       "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
     "node_modules/react-refresh": {
       "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
-      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.3",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",
-      "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==",
       "license": "MIT",
       "dependencies": {
         "@types/cookie": "^0.6.0",
@@ -14288,8 +14009,6 @@
     },
     "node_modules/react-router-dom": {
       "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz",
-      "integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==",
       "license": "MIT",
       "dependencies": {
         "react-router": "7.0.2"
@@ -14304,8 +14023,6 @@
     },
     "node_modules/react-router/node_modules/cookie": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -14313,8 +14030,6 @@
     },
     "node_modules/react-scripts": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
-      "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
@@ -14384,10 +14099,94 @@
         }
       }
     },
+    "node_modules/react-scripts/node_modules/jiti": {
+      "version": "1.21.7",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/react-scripts/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/react-scripts/node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "license": "BSD-3-Clause",
+      "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",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
@@ -14395,8 +14194,6 @@
     },
     "node_modules/readable-stream": {
       "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.3",
@@ -14409,8 +14206,6 @@
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -14421,8 +14216,6 @@
     },
     "node_modules/recursive-readdir": {
       "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
-      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
       "license": "MIT",
       "dependencies": {
         "minimatch": "^3.0.5"
@@ -14433,8 +14226,6 @@
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.8.tgz",
-      "integrity": "sha512-B5dj6usc5dkk8uFliwjwDHM8To5/QwdKz9JcBZ8Ic4G1f0YmeeJTtE/ZTdgRFPAfxZFiUaPhZ1Jcs4qeagItGQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.8",
@@ -14455,14 +14246,10 @@
     },
     "node_modules/regenerate": {
       "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
       "license": "MIT"
     },
     "node_modules/regenerate-unicode-properties": {
       "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
-      "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
       "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2"
@@ -14473,14 +14260,10 @@
     },
     "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==",
       "license": "MIT"
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
-      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
@@ -14488,14 +14271,10 @@
     },
     "node_modules/regex-parser": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.3.0.tgz",
-      "integrity": "sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==",
       "license": "MIT"
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
-      "integrity": "sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -14512,8 +14291,6 @@
     },
     "node_modules/regexpu-core": {
       "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
-      "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
       "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.2",
@@ -14529,14 +14306,10 @@
     },
     "node_modules/regjsgen": {
       "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
-      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
       "license": "MIT"
     },
     "node_modules/regjsparser": {
       "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
-      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "jsesc": "~3.0.2"
@@ -14547,8 +14320,6 @@
     },
     "node_modules/relateurl": {
       "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.10"
@@ -14556,8 +14327,6 @@
     },
     "node_modules/renderkid": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
-      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
       "license": "MIT",
       "dependencies": {
         "css-select": "^4.1.3",
@@ -14569,8 +14338,6 @@
     },
     "node_modules/require-directory": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -14578,8 +14345,6 @@
     },
     "node_modules/require-from-string": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -14587,21 +14352,15 @@
     },
     "node_modules/require-relative": {
       "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
-      "integrity": "sha512-AKGr4qvHiryxRb19m3PsLRGuKVAbJLUD7E6eOaHkfKhwc+vSgVOCY5xNvm9EkolBKTOf0GrQAZKLimOCz81Khg==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/requires-port": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
     "node_modules/resolve": {
       "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -14617,8 +14376,6 @@
     },
     "node_modules/resolve-cwd": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
       "license": "MIT",
       "dependencies": {
         "resolve-from": "^5.0.0"
@@ -14629,8 +14386,6 @@
     },
     "node_modules/resolve-from": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -14638,8 +14393,6 @@
     },
     "node_modules/resolve-url-loader": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
-      "integrity": "sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==",
       "license": "MIT",
       "dependencies": {
         "adjust-sourcemap-loader": "^4.0.0",
@@ -14666,20 +14419,14 @@
     },
     "node_modules/resolve-url-loader/node_modules/convert-source-map": {
       "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
     "node_modules/resolve-url-loader/node_modules/picocolors": {
       "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
       "license": "ISC"
     },
     "node_modules/resolve-url-loader/node_modules/postcss": {
       "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
       "license": "MIT",
       "dependencies": {
         "picocolors": "^0.2.1",
@@ -14695,8 +14442,6 @@
     },
     "node_modules/resolve-url-loader/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -14704,8 +14449,6 @@
     },
     "node_modules/resolve.exports": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz",
-      "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -14713,8 +14456,6 @@
     },
     "node_modules/retry": {
       "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
       "license": "MIT",
       "engines": {
         "node": ">= 4"
@@ -14722,8 +14463,6 @@
     },
     "node_modules/reusify": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -14732,9 +14471,6 @@
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
@@ -14748,8 +14484,6 @@
     },
     "node_modules/rollup": {
       "version": "2.79.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
-      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "license": "MIT",
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -14763,9 +14497,6 @@
     },
     "node_modules/rollup-plugin-terser": {
       "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
-      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
-      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -14779,8 +14510,6 @@
     },
     "node_modules/rollup-plugin-terser/node_modules/jest-worker": {
       "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -14793,8 +14522,6 @@
     },
     "node_modules/rollup-plugin-terser/node_modules/serialize-javascript": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -14802,8 +14529,6 @@
     },
     "node_modules/run-parallel": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
       "funding": [
         {
           "type": "github",
@@ -14825,8 +14550,6 @@
     },
     "node_modules/safe-array-concat": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
-      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -14843,8 +14566,6 @@
     },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "funding": [
         {
           "type": "github",
@@ -14863,8 +14584,6 @@
     },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
-      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.6",
@@ -14880,20 +14599,14 @@
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
     "node_modules/sanitize.css": {
       "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
-      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==",
       "license": "CC0-1.0"
     },
     "node_modules/sass-loader": {
       "version": "12.6.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
-      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
       "license": "MIT",
       "dependencies": {
         "klona": "^2.0.4",
@@ -14930,14 +14643,10 @@
     },
     "node_modules/sax": {
       "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "license": "ISC"
     },
     "node_modules/saxes": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
       "license": "ISC",
       "dependencies": {
         "xmlchars": "^2.2.0"
@@ -14948,14 +14657,10 @@
     },
     "node_modules/scheduler": {
       "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
-      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
       "license": "MIT"
     },
     "node_modules/schema-utils": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
-      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
@@ -14973,8 +14678,6 @@
     },
     "node_modules/schema-utils/node_modules/ajv": {
       "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
@@ -14989,8 +14692,6 @@
     },
     "node_modules/schema-utils/node_modules/ajv-keywords": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
@@ -15001,20 +14702,14 @@
     },
     "node_modules/schema-utils/node_modules/json-schema-traverse": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "license": "MIT"
     },
     "node_modules/select-hose": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
       "license": "MIT"
     },
     "node_modules/selfsigned": {
       "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
-      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
       "license": "MIT",
       "dependencies": {
         "@types/node-forge": "^1.3.0",
@@ -15026,8 +14721,6 @@
     },
     "node_modules/semver": {
       "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -15038,8 +14731,6 @@
     },
     "node_modules/send": {
       "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
-      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
@@ -15062,8 +14753,6 @@
     },
     "node_modules/send/node_modules/debug": {
       "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -15071,14 +14760,10 @@
     },
     "node_modules/send/node_modules/debug/node_modules/ms": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/send/node_modules/encodeurl": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -15086,8 +14771,6 @@
     },
     "node_modules/serialize-javascript": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
-      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -15095,8 +14778,6 @@
     },
     "node_modules/serve-index": {
       "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.4",
@@ -15113,8 +14794,6 @@
     },
     "node_modules/serve-index/node_modules/debug": {
       "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
@@ -15122,8 +14801,6 @@
     },
     "node_modules/serve-index/node_modules/depd": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -15131,8 +14808,6 @@
     },
     "node_modules/serve-index/node_modules/http-errors": {
       "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
       "license": "MIT",
       "dependencies": {
         "depd": "~1.1.2",
@@ -15146,26 +14821,18 @@
     },
     "node_modules/serve-index/node_modules/inherits": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
       "license": "ISC"
     },
     "node_modules/serve-index/node_modules/ms": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
     "node_modules/serve-index/node_modules/setprototypeof": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
       "license": "ISC"
     },
     "node_modules/serve-index/node_modules/statuses": {
       "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -15173,8 +14840,6 @@
     },
     "node_modules/serve-static": {
       "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
-      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "license": "MIT",
       "dependencies": {
         "encodeurl": "~2.0.0",
@@ -15188,14 +14853,10 @@
     },
     "node_modules/set-cookie-parser": {
       "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
-      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
       "license": "MIT"
     },
     "node_modules/set-function-length": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
@@ -15211,8 +14872,6 @@
     },
     "node_modules/set-function-name": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
@@ -15226,20 +14885,14 @@
     },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
     "node_modules/shallowequal": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
       "license": "MIT"
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -15250,8 +14903,6 @@
     },
     "node_modules/shebang-regex": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -15259,8 +14910,6 @@
     },
     "node_modules/shell-quote": {
       "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz",
-      "integrity": "sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -15271,8 +14920,6 @@
     },
     "node_modules/side-channel": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -15289,20 +14936,14 @@
     },
     "node_modules/signal-exit": {
       "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "license": "ISC"
     },
     "node_modules/sisteransi": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "license": "MIT"
     },
     "node_modules/slash": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -15310,8 +14951,6 @@
     },
     "node_modules/sockjs": {
       "version": "0.3.24",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
-      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
       "license": "MIT",
       "dependencies": {
         "faye-websocket": "^0.11.3",
@@ -15321,14 +14960,10 @@
     },
     "node_modules/source-list-map": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
       "license": "MIT"
     },
     "node_modules/source-map": {
       "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">= 8"
@@ -15336,8 +14971,6 @@
     },
     "node_modules/source-map-js": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -15345,8 +14978,6 @@
     },
     "node_modules/source-map-loader": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
-      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
       "license": "MIT",
       "dependencies": {
         "abab": "^2.0.5",
@@ -15366,8 +14997,6 @@
     },
     "node_modules/source-map-support": {
       "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -15376,8 +15005,6 @@
     },
     "node_modules/source-map-support/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -15385,15 +15012,10 @@
     },
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
       "license": "MIT"
     },
     "node_modules/spdy": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.1.0",
@@ -15408,8 +15030,6 @@
     },
     "node_modules/spdy-transport": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.1.0",
@@ -15422,21 +15042,26 @@
     },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stable": {
       "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
       "license": "MIT"
     },
     "node_modules/stack-utils": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
-      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
       "license": "MIT",
       "dependencies": {
         "escape-string-regexp": "^2.0.0"
@@ -15447,8 +15072,6 @@
     },
     "node_modules/stack-utils/node_modules/escape-string-regexp": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -15456,14 +15079,10 @@
     },
     "node_modules/stackframe": {
       "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
-      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
       "license": "MIT"
     },
     "node_modules/static-eval": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
-      "integrity": "sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==",
       "license": "MIT",
       "dependencies": {
         "escodegen": "^1.8.1"
@@ -15471,8 +15090,6 @@
     },
     "node_modules/static-eval/node_modules/escodegen": {
       "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
-      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "esprima": "^4.0.1",
@@ -15493,8 +15110,6 @@
     },
     "node_modules/static-eval/node_modules/estraverse": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -15502,8 +15117,6 @@
     },
     "node_modules/static-eval/node_modules/levn": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
       "license": "MIT",
       "dependencies": {
         "prelude-ls": "~1.1.2",
@@ -15515,8 +15128,6 @@
     },
     "node_modules/static-eval/node_modules/optionator": {
       "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
-      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
       "license": "MIT",
       "dependencies": {
         "deep-is": "~0.1.3",
@@ -15532,16 +15143,12 @@
     },
     "node_modules/static-eval/node_modules/prelude-ls": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
       "engines": {
         "node": ">= 0.8.0"
       }
     },
     "node_modules/static-eval/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "optional": true,
       "engines": {
@@ -15550,8 +15157,6 @@
     },
     "node_modules/static-eval/node_modules/type-check": {
       "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
       "license": "MIT",
       "dependencies": {
         "prelude-ls": "~1.1.2"
@@ -15562,8 +15167,6 @@
     },
     "node_modules/statuses": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -15571,8 +15174,6 @@
     },
     "node_modules/string_decoder": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "license": "MIT",
       "dependencies": {
         "safe-buffer": "~5.2.0"
@@ -15580,8 +15181,6 @@
     },
     "node_modules/string-length": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
       "license": "MIT",
       "dependencies": {
         "char-regex": "^1.0.2",
@@ -15593,14 +15192,10 @@
     },
     "node_modules/string-natural-compare": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-3.0.1.tgz",
-      "integrity": "sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==",
       "license": "MIT"
     },
     "node_modules/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==",
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -15614,8 +15209,6 @@
     "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==",
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -15628,20 +15221,14 @@
     },
     "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==",
       "license": "MIT"
     },
     "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==",
       "license": "MIT"
     },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
-      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -15654,8 +15241,6 @@
     },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
-      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -15680,8 +15265,6 @@
     },
     "node_modules/string.prototype.repeat": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
-      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
       "license": "MIT",
       "dependencies": {
         "define-properties": "^1.1.3",
@@ -15690,8 +15273,6 @@
     },
     "node_modules/string.prototype.trim": {
       "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
-      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -15708,8 +15289,6 @@
     },
     "node_modules/string.prototype.trimend": {
       "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
-      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -15722,8 +15301,6 @@
     },
     "node_modules/string.prototype.trimstart": {
       "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
-      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -15739,8 +15316,6 @@
     },
     "node_modules/stringify-object": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "get-own-enumerable-property-symbols": "^3.0.0",
@@ -15753,8 +15328,6 @@
     },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -15766,8 +15339,6 @@
     "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==",
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -15778,8 +15349,6 @@
     },
     "node_modules/strip-bom": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -15787,8 +15356,6 @@
     },
     "node_modules/strip-comments": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
-      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -15796,8 +15363,6 @@
     },
     "node_modules/strip-final-newline": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -15805,8 +15370,6 @@
     },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -15817,8 +15380,6 @@
     },
     "node_modules/style-loader": {
       "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
-      "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
       "license": "MIT",
       "engines": {
         "node": ">= 12.13.0"
@@ -15833,8 +15394,6 @@
     },
     "node_modules/styled-components": {
       "version": "6.1.13",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
-      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
       "license": "MIT",
       "dependencies": {
         "@emotion/is-prop-valid": "1.2.2",
@@ -15861,8 +15420,6 @@
     },
     "node_modules/styled-components/node_modules/postcss": {
       "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -15889,14 +15446,10 @@
     },
     "node_modules/styled-components/node_modules/tslib": {
       "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "license": "0BSD"
     },
     "node_modules/stylehacks": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
-      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
       "license": "MIT",
       "dependencies": {
         "browserslist": "^4.21.4",
@@ -15911,14 +15464,10 @@
     },
     "node_modules/stylis": {
       "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
-      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
       "license": "MIT"
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -15939,8 +15488,6 @@
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -15948,8 +15495,6 @@
     },
     "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==",
       "license": "MIT",
       "engines": {
         "node": ">= 6"
@@ -15957,8 +15502,6 @@
     },
     "node_modules/sucrase/node_modules/glob": {
       "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -15977,8 +15520,6 @@
     },
     "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==",
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -15992,8 +15533,6 @@
     },
     "node_modules/supports-color": {
       "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -16004,8 +15543,6 @@
     },
     "node_modules/supports-hyperlinks": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
-      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0",
@@ -16017,8 +15554,6 @@
     },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -16029,15 +15564,10 @@
     },
     "node_modules/svg-parser": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
-      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
       "license": "MIT"
     },
     "node_modules/svgo": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
-      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
-      "deprecated": "This SVGO version is no longer supported. Upgrade to v2.x.x.",
       "license": "MIT",
       "dependencies": {
         "chalk": "^2.4.1",
@@ -16063,8 +15593,6 @@
     },
     "node_modules/svgo/node_modules/ansi-styles": {
       "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
       "license": "MIT",
       "dependencies": {
         "color-convert": "^1.9.0"
@@ -16075,8 +15603,6 @@
     },
     "node_modules/svgo/node_modules/chalk": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^3.2.1",
@@ -16089,8 +15615,6 @@
     },
     "node_modules/svgo/node_modules/color-convert": {
       "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
       "license": "MIT",
       "dependencies": {
         "color-name": "1.1.3"
@@ -16098,14 +15622,10 @@
     },
     "node_modules/svgo/node_modules/color-name": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "license": "MIT"
     },
     "node_modules/svgo/node_modules/css-select": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
-      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0",
@@ -16116,8 +15636,6 @@
     },
     "node_modules/svgo/node_modules/css-what": {
       "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
-      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">= 6"
@@ -16128,8 +15646,6 @@
     },
     "node_modules/svgo/node_modules/dom-serializer": {
       "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
       "license": "MIT",
       "dependencies": {
         "domelementtype": "^2.0.1",
@@ -16138,8 +15654,6 @@
     },
     "node_modules/svgo/node_modules/domutils": {
       "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
-      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "0",
@@ -16148,14 +15662,10 @@
     },
     "node_modules/svgo/node_modules/domutils/node_modules/domelementtype": {
       "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
       "license": "BSD-2-Clause"
     },
     "node_modules/svgo/node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -16163,8 +15673,6 @@
     },
     "node_modules/svgo/node_modules/has-flag": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -16172,8 +15680,6 @@
     },
     "node_modules/svgo/node_modules/nth-check": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "~1.0.0"
@@ -16181,8 +15687,6 @@
     },
     "node_modules/svgo/node_modules/supports-color": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "license": "MIT",
       "dependencies": {
         "has-flag": "^3.0.0"
@@ -16193,14 +15697,10 @@
     },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "license": "MIT"
     },
     "node_modules/synckit": {
       "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
-      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -16214,59 +15714,27 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/tailwindcss": {
-      "version": "3.4.16",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz",
-      "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==",
+    "node_modules/tailwind-merge": {
+      "version": "3.0.2",
       "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
       }
     },
-    "node_modules/tailwindcss/node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/tailwindcss": {
+      "version": "4.0.9",
+      "license": "MIT"
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
       "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
       }
     },
     "node_modules/tapable": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -16274,8 +15742,6 @@
     },
     "node_modules/temp-dir": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
-      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -16283,8 +15749,6 @@
     },
     "node_modules/tempy": {
       "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
-      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
       "license": "MIT",
       "dependencies": {
         "is-stream": "^2.0.0",
@@ -16301,8 +15765,6 @@
     },
     "node_modules/tempy/node_modules/type-fest": {
       "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
-      "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
@@ -16313,8 +15775,6 @@
     },
     "node_modules/terminal-link": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
-      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
       "license": "MIT",
       "dependencies": {
         "ansi-escapes": "^4.2.1",
@@ -16329,8 +15789,6 @@
     },
     "node_modules/terser": {
       "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz",
-      "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -16347,8 +15805,6 @@
     },
     "node_modules/terser-webpack-plugin": {
       "version": "5.3.10",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
-      "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.20",
@@ -16381,8 +15837,6 @@
     },
     "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -16399,14 +15853,10 @@
     },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "license": "MIT"
     },
     "node_modules/test-exclude": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
       "license": "ISC",
       "dependencies": {
         "@istanbuljs/schema": "^0.1.2",
@@ -16419,14 +15869,10 @@
     },
     "node_modules/text-table": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "license": "MIT"
     },
     "node_modules/thenify": {
       "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
       "license": "MIT",
       "dependencies": {
         "any-promise": "^1.0.0"
@@ -16434,8 +15880,6 @@
     },
     "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==",
       "license": "MIT",
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
@@ -16446,26 +15890,18 @@
     },
     "node_modules/throat": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
-      "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==",
       "license": "MIT"
     },
     "node_modules/thunky": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "license": "MIT"
     },
     "node_modules/tmpl": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
       "license": "BSD-3-Clause"
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -16476,8 +15912,6 @@
     },
     "node_modules/toidentifier": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.6"
@@ -16485,8 +15919,6 @@
     },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "psl": "^1.1.33",
@@ -16500,8 +15932,6 @@
     },
     "node_modules/tough-cookie/node_modules/universalify": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
       "license": "MIT",
       "engines": {
         "node": ">= 4.0.0"
@@ -16509,8 +15939,6 @@
     },
     "node_modules/tr46": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
       "license": "MIT",
       "dependencies": {
         "punycode": "^2.1.1"
@@ -16521,14 +15949,10 @@
     },
     "node_modules/tryer": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
-      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
       "license": "MIT"
     },
     "node_modules/ts-api-utils": {
       "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
-      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -16540,14 +15964,10 @@
     },
     "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==",
       "license": "Apache-2.0"
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
-      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
       "license": "MIT",
       "dependencies": {
         "@types/json5": "^0.0.29",
@@ -16558,8 +15978,6 @@
     },
     "node_modules/tsconfig-paths/node_modules/json5": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "license": "MIT",
       "dependencies": {
         "minimist": "^1.2.0"
@@ -16570,8 +15988,6 @@
     },
     "node_modules/tsconfig-paths/node_modules/strip-bom": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -16579,14 +15995,10 @@
     },
     "node_modules/tslib": {
       "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^1.8.1"
@@ -16600,20 +16012,14 @@
     },
     "node_modules/tsutils/node_modules/tslib": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "license": "0BSD"
     },
     "node_modules/turbo-stream": {
       "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
-      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
       "license": "ISC"
     },
     "node_modules/type-check": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1"
@@ -16624,8 +16030,6 @@
     },
     "node_modules/type-detect": {
       "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -16633,8 +16037,6 @@
     },
     "node_modules/type-fest": {
       "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
       "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
@@ -16645,8 +16047,6 @@
     },
     "node_modules/type-is": {
       "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
       "license": "MIT",
       "dependencies": {
         "media-typer": "0.3.0",
@@ -16658,8 +16058,6 @@
     },
     "node_modules/typed-array-buffer": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -16672,8 +16070,6 @@
     },
     "node_modules/typed-array-byte-length": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
-      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -16691,8 +16087,6 @@
     },
     "node_modules/typed-array-byte-offset": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.3.tgz",
-      "integrity": "sha512-GsvTyUHTriq6o/bHcTd0vM7OQ9JEdlvluu9YISaA7+KzDzPaIzEeDFNkTfhdE3MYcNhNi0vq/LlegYgIs5yPAw==",
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
@@ -16712,8 +16106,6 @@
     },
     "node_modules/typed-array-length": {
       "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
-      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -16732,8 +16124,6 @@
     },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
       "license": "MIT",
       "dependencies": {
         "is-typedarray": "^1.0.0"
@@ -16741,8 +16131,6 @@
     },
     "node_modules/typescript": {
       "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -16755,8 +16143,6 @@
     },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
@@ -16770,20 +16156,14 @@
     },
     "node_modules/underscore": {
       "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
-      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==",
       "license": "MIT"
     },
     "node_modules/undici-types": {
       "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
-      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
-      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -16791,8 +16171,6 @@
     },
     "node_modules/unicode-match-property-ecmascript": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
-      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
       "license": "MIT",
       "dependencies": {
         "unicode-canonical-property-names-ecmascript": "^2.0.0",
@@ -16804,8 +16182,6 @@
     },
     "node_modules/unicode-match-property-value-ecmascript": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
-      "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -16813,8 +16189,6 @@
     },
     "node_modules/unicode-property-aliases-ecmascript": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -16822,8 +16196,6 @@
     },
     "node_modules/unique-string": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
-      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
       "license": "MIT",
       "dependencies": {
         "crypto-random-string": "^2.0.0"
@@ -16834,8 +16206,6 @@
     },
     "node_modules/universalify": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
       "license": "MIT",
       "engines": {
         "node": ">= 10.0.0"
@@ -16843,8 +16213,6 @@
     },
     "node_modules/unpipe": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -16852,14 +16220,10 @@
     },
     "node_modules/unquote": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg==",
       "license": "MIT"
     },
     "node_modules/upath": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
       "license": "MIT",
       "engines": {
         "node": ">=4",
@@ -16868,8 +16232,6 @@
     },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
-      "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
       "funding": [
         {
           "type": "opencollective",
@@ -16898,8 +16260,6 @@
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -16907,24 +16267,57 @@
     },
     "node_modules/url-parse": {
       "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
       "license": "MIT",
       "dependencies": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
     "node_modules/util.promisify": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
-      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
       "license": "MIT",
       "dependencies": {
         "define-properties": "^1.1.3",
@@ -16938,14 +16331,10 @@
     },
     "node_modules/utila": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
       "license": "MIT"
     },
     "node_modules/utils-merge": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.4.0"
@@ -16953,8 +16342,6 @@
     },
     "node_modules/uuid": {
       "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "license": "MIT",
       "bin": {
         "uuid": "dist/bin/uuid"
@@ -16962,8 +16349,6 @@
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
-      "integrity": "sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==",
       "license": "ISC",
       "dependencies": {
         "@types/istanbul-lib-coverage": "^2.0.1",
@@ -16976,14 +16361,10 @@
     },
     "node_modules/v8-to-istanbul/node_modules/convert-source-map": {
       "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
     "node_modules/vary": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.8"
@@ -16991,8 +16372,6 @@
     },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.3",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
-      "integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -17016,9 +16395,6 @@
     },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-      "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
       "license": "MIT",
       "dependencies": {
         "browser-process-hrtime": "^1.0.0"
@@ -17026,8 +16402,6 @@
     },
     "node_modules/w3c-xmlserializer": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
-      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
       "license": "MIT",
       "dependencies": {
         "xml-name-validator": "^3.0.0"
@@ -17038,8 +16412,6 @@
     },
     "node_modules/walker": {
       "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
-      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "makeerror": "1.0.12"
@@ -17047,8 +16419,6 @@
     },
     "node_modules/watchpack": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
-      "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
       "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
@@ -17060,8 +16430,6 @@
     },
     "node_modules/wbuf": {
       "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
       "license": "MIT",
       "dependencies": {
         "minimalistic-assert": "^1.0.0"
@@ -17069,14 +16437,10 @@
     },
     "node_modules/web-vitals": {
       "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
-      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
       "license": "Apache-2.0"
     },
     "node_modules/webidl-conversions": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=10.4"
@@ -17084,8 +16448,6 @@
     },
     "node_modules/webpack": {
       "version": "5.97.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.97.1.tgz",
-      "integrity": "sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==",
       "license": "MIT",
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
@@ -17130,8 +16492,6 @@
     },
     "node_modules/webpack-dev-middleware": {
       "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
-      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "license": "MIT",
       "dependencies": {
         "colorette": "^2.0.10",
@@ -17153,8 +16513,6 @@
     },
     "node_modules/webpack-dev-server": {
       "version": "4.15.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
-      "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
       "license": "MIT",
       "dependencies": {
         "@types/bonjour": "^3.5.9",
@@ -17212,8 +16570,6 @@
     },
     "node_modules/webpack-dev-server/node_modules/ws": {
       "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
-      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -17233,8 +16589,6 @@
     },
     "node_modules/webpack-manifest-plugin": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz",
-      "integrity": "sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==",
       "license": "MIT",
       "dependencies": {
         "tapable": "^2.0.0",
@@ -17249,8 +16603,6 @@
     },
     "node_modules/webpack-manifest-plugin/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -17258,8 +16610,6 @@
     },
     "node_modules/webpack-manifest-plugin/node_modules/webpack-sources": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
-      "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
       "license": "MIT",
       "dependencies": {
         "source-list-map": "^2.0.1",
@@ -17271,8 +16621,6 @@
     },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
       "license": "MIT",
       "engines": {
         "node": ">=10.13.0"
@@ -17280,8 +16628,6 @@
     },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -17293,8 +16639,6 @@
     },
     "node_modules/webpack/node_modules/estraverse": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -17302,8 +16646,6 @@
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
@@ -17320,8 +16662,6 @@
     },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
       "license": "Apache-2.0",
       "dependencies": {
         "http-parser-js": ">=0.5.1",
@@ -17334,8 +16674,6 @@
     },
     "node_modules/websocket-extensions": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=0.8.0"
@@ -17343,8 +16681,6 @@
     },
     "node_modules/whatwg-encoding": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
       "license": "MIT",
       "dependencies": {
         "iconv-lite": "0.4.24"
@@ -17352,8 +16688,6 @@
     },
     "node_modules/whatwg-encoding/node_modules/iconv-lite": {
       "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
@@ -17364,20 +16698,14 @@
     },
     "node_modules/whatwg-fetch": {
       "version": "3.6.20",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
-      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
       "license": "MIT"
     },
     "node_modules/whatwg-mimetype": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
       "license": "MIT"
     },
     "node_modules/whatwg-url": {
       "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
       "license": "MIT",
       "dependencies": {
         "lodash": "^4.7.0",
@@ -17390,8 +16718,6 @@
     },
     "node_modules/which": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -17405,8 +16731,6 @@
     },
     "node_modules/which-boxed-primitive": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.0.tgz",
-      "integrity": "sha512-Ei7Miu/AXe2JJ4iNF5j/UphAgRoma4trE6PtisM09bPygb3egMH3YLW/befsWb1A1AxvNSFidOFTB18XtnIIng==",
       "license": "MIT",
       "dependencies": {
         "is-bigint": "^1.1.0",
@@ -17424,8 +16748,6 @@
     },
     "node_modules/which-builtin-type": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.0.tgz",
-      "integrity": "sha512-I+qLGQ/vucCby4tf5HsLmGueEla4ZhwTBSqaooS+Y0BuxN4Cp+okmGuV+8mXZ84KDI9BA+oklo+RzKg0ONdSUA==",
       "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
@@ -17451,8 +16773,6 @@
     },
     "node_modules/which-collection": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
-      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "license": "MIT",
       "dependencies": {
         "is-map": "^2.0.3",
@@ -17469,8 +16789,6 @@
     },
     "node_modules/which-typed-array": {
       "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.16.tgz",
-      "integrity": "sha512-g+N+GAWiRj66DngFwHvISJd+ITsyphZvD1vChfVg6cEdnzy53GzB3oy0fUNlvhz7H7+MiqhYr26qxQShCpKTTQ==",
       "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
@@ -17486,10 +16804,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
-      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -17497,8 +16831,6 @@
     },
     "node_modules/workbox-background-sync": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.6.0.tgz",
-      "integrity": "sha512-jkf4ZdgOJxC9u2vztxLuPT/UjlH7m/nWRQ/MgGL0v8BJHoZdVGJd18Kck+a0e55wGXdqyHO+4IQTk0685g4MUw==",
       "license": "MIT",
       "dependencies": {
         "idb": "^7.0.1",
@@ -17507,8 +16839,6 @@
     },
     "node_modules/workbox-broadcast-update": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.6.0.tgz",
-      "integrity": "sha512-nm+v6QmrIFaB/yokJmQ/93qIJ7n72NICxIwQwe5xsZiV2aI93MGGyEyzOzDPVz5THEr5rC3FJSsO3346cId64Q==",
       "license": "MIT",
       "dependencies": {
         "workbox-core": "6.6.0"
@@ -17516,8 +16846,6 @@
     },
     "node_modules/workbox-build": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.6.0.tgz",
-      "integrity": "sha512-Tjf+gBwOTuGyZwMz2Nk/B13Fuyeo0Q84W++bebbVsfr9iLkDSo6j6PST8tET9HYA58mlRXwlMGpyWO8ETJiXdQ==",
       "license": "MIT",
       "dependencies": {
         "@apideck/better-ajv-errors": "^0.3.1",
@@ -17564,8 +16892,6 @@
     },
     "node_modules/workbox-build/node_modules/@apideck/better-ajv-errors": {
       "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
-      "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
       "license": "MIT",
       "dependencies": {
         "json-schema": "^0.4.0",
@@ -17581,8 +16907,6 @@
     },
     "node_modules/workbox-build/node_modules/ajv": {
       "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
@@ -17597,8 +16921,6 @@
     },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "license": "MIT",
       "dependencies": {
         "at-least-node": "^1.0.0",
@@ -17612,14 +16934,10 @@
     },
     "node_modules/workbox-build/node_modules/json-schema-traverse": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "license": "MIT"
     },
     "node_modules/workbox-build/node_modules/source-map": {
       "version": "0.8.0-beta.0",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
-      "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "whatwg-url": "^7.0.0"
@@ -17630,8 +16948,6 @@
     },
     "node_modules/workbox-build/node_modules/tr46": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
       "license": "MIT",
       "dependencies": {
         "punycode": "^2.1.0"
@@ -17639,14 +16955,10 @@
     },
     "node_modules/workbox-build/node_modules/webidl-conversions": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
       "license": "BSD-2-Clause"
     },
     "node_modules/workbox-build/node_modules/whatwg-url": {
       "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
-      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
       "license": "MIT",
       "dependencies": {
         "lodash.sortby": "^4.7.0",
@@ -17656,9 +16968,6 @@
     },
     "node_modules/workbox-cacheable-response": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.6.0.tgz",
-      "integrity": "sha512-JfhJUSQDwsF1Xv3EV1vWzSsCOZn4mQ38bWEBR3LdvOxSPgB65gAM6cS2CX8rkkKHRgiLrN7Wxoyu+TuH67kHrw==",
-      "deprecated": "workbox-background-sync@6.6.0",
       "license": "MIT",
       "dependencies": {
         "workbox-core": "6.6.0"
@@ -17666,14 +16975,10 @@
     },
     "node_modules/workbox-core": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.6.0.tgz",
-      "integrity": "sha512-GDtFRF7Yg3DD859PMbPAYPeJyg5gJYXuBQAC+wyrWuuXgpfoOrIQIvFRZnQ7+czTIQjIr1DhLEGFzZanAT/3bQ==",
       "license": "MIT"
     },
     "node_modules/workbox-expiration": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.6.0.tgz",
-      "integrity": "sha512-baplYXcDHbe8vAo7GYvyAmlS4f6998Jff513L4XvlzAOxcl8F620O91guoJ5EOf5qeXG4cGdNZHkkVAPouFCpw==",
       "license": "MIT",
       "dependencies": {
         "idb": "^7.0.1",
@@ -17682,9 +16987,6 @@
     },
     "node_modules/workbox-google-analytics": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.6.0.tgz",
-      "integrity": "sha512-p4DJa6OldXWd6M9zRl0H6vB9lkrmqYFkRQ2xEiNdBFp9U0LhsGO7hsBscVEyH9H2/3eZZt8c97NB2FD9U2NJ+Q==",
-      "deprecated": "It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained",
       "license": "MIT",
       "dependencies": {
         "workbox-background-sync": "6.6.0",
@@ -17695,8 +16997,6 @@
     },
     "node_modules/workbox-navigation-preload": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.6.0.tgz",
-      "integrity": "sha512-utNEWG+uOfXdaZmvhshrh7KzhDu/1iMHyQOV6Aqup8Mm78D286ugu5k9MFD9SzBT5TcwgwSORVvInaXWbvKz9Q==",
       "license": "MIT",
       "dependencies": {
         "workbox-core": "6.6.0"
@@ -17704,8 +17004,6 @@
     },
     "node_modules/workbox-precaching": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.6.0.tgz",
-      "integrity": "sha512-eYu/7MqtRZN1IDttl/UQcSZFkHP7dnvr/X3Vn6Iw6OsPMruQHiVjjomDFCNtd8k2RdjLs0xiz9nq+t3YVBcWPw==",
       "license": "MIT",
       "dependencies": {
         "workbox-core": "6.6.0",
@@ -17715,8 +17013,6 @@
     },
     "node_modules/workbox-range-requests": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.6.0.tgz",
-      "integrity": "sha512-V3aICz5fLGq5DpSYEU8LxeXvsT//mRWzKrfBOIxzIdQnV/Wj7R+LyJVTczi4CQ4NwKhAaBVaSujI1cEjXW+hTw==",
       "license": "MIT",
       "dependencies": {
         "workbox-core": "6.6.0"
@@ -17724,8 +17020,6 @@
     },
     "node_modules/workbox-recipes": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.6.0.tgz",
-      "integrity": "sha512-TFi3kTgYw73t5tg73yPVqQC8QQjxJSeqjXRO4ouE/CeypmP2O/xqmB/ZFBBQazLTPxILUQ0b8aeh0IuxVn9a6A==",
       "license": "MIT",
       "dependencies": {
         "workbox-cacheable-response": "6.6.0",
@@ -17738,8 +17032,6 @@
     },
     "node_modules/workbox-routing": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.6.0.tgz",
-      "integrity": "sha512-x8gdN7VDBiLC03izAZRfU+WKUXJnbqt6PG9Uh0XuPRzJPpZGLKce/FkOX95dWHRpOHWLEq8RXzjW0O+POSkKvw==",
       "license": "MIT",
       "dependencies": {
         "workbox-core": "6.6.0"
@@ -17747,8 +17039,6 @@
     },
     "node_modules/workbox-strategies": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.6.0.tgz",
-      "integrity": "sha512-eC07XGuINAKUWDnZeIPdRdVja4JQtTuc35TZ8SwMb1ztjp7Ddq2CJ4yqLvWzFWGlYI7CG/YGqaETntTxBGdKgQ==",
       "license": "MIT",
       "dependencies": {
         "workbox-core": "6.6.0"
@@ -17756,8 +17046,6 @@
     },
     "node_modules/workbox-streams": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.6.0.tgz",
-      "integrity": "sha512-rfMJLVvwuED09CnH1RnIep7L9+mj4ufkTyDPVaXPKlhi9+0czCu+SJggWCIFbPpJaAZmp2iyVGLqS3RUmY3fxg==",
       "license": "MIT",
       "dependencies": {
         "workbox-core": "6.6.0",
@@ -17766,14 +17054,10 @@
     },
     "node_modules/workbox-sw": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.6.0.tgz",
-      "integrity": "sha512-R2IkwDokbtHUE4Kus8pKO5+VkPHD2oqTgl+XJwh4zbF1HyjAbgNmK/FneZHVU7p03XUt9ICfuGDYISWG9qV/CQ==",
       "license": "MIT"
     },
     "node_modules/workbox-webpack-plugin": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.6.0.tgz",
-      "integrity": "sha512-xNZIZHalboZU66Wa7x1YkjIqEy1gTR+zPM+kjrYJzqN7iurYZBctBLISyScjhkJKYuRrZUP0iqViZTh8rS0+3A==",
       "license": "MIT",
       "dependencies": {
         "fast-json-stable-stringify": "^2.1.0",
@@ -17791,8 +17075,6 @@
     },
     "node_modules/workbox-webpack-plugin/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -17800,8 +17082,6 @@
     },
     "node_modules/workbox-webpack-plugin/node_modules/webpack-sources": {
       "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
       "license": "MIT",
       "dependencies": {
         "source-list-map": "^2.0.0",
@@ -17810,8 +17090,6 @@
     },
     "node_modules/workbox-window": {
       "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.6.0.tgz",
-      "integrity": "sha512-L4N9+vka17d16geaJXXRjENLFldvkWy7JyGxElRD0JvBxvFEd8LOhr+uXCcar/NzAmIBRv9EZ+M+Qr4mOoBITw==",
       "license": "MIT",
       "dependencies": {
         "@types/trusted-types": "^2.0.2",
@@ -17820,8 +17098,6 @@
     },
     "node_modules/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==",
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -17838,8 +17114,6 @@
     "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==",
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -17855,14 +17129,10 @@
     },
     "node_modules/wrappy": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
     "node_modules/write-file-atomic": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
       "license": "ISC",
       "dependencies": {
         "imurmurhash": "^0.1.4",
@@ -17873,8 +17143,6 @@
     },
     "node_modules/ws": {
       "version": "7.5.10",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
-      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "license": "MIT",
       "engines": {
         "node": ">=8.3.0"
@@ -17892,22 +17160,36 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
       "license": "Apache-2.0"
     },
     "node_modules/xmlchars": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "license": "MIT"
     },
     "node_modules/y18n": {
       "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
       "license": "ISC",
       "engines": {
         "node": ">=10"
@@ -17915,14 +17197,10 @@
     },
     "node_modules/yallist": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "license": "ISC"
     },
     "node_modules/yaml": {
       "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
       "license": "ISC",
       "engines": {
         "node": ">= 6"
@@ -17930,8 +17208,6 @@
     },
     "node_modules/yargs": {
       "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
       "license": "MIT",
       "dependencies": {
         "cliui": "^7.0.2",
@@ -17948,8 +17224,6 @@
     },
     "node_modules/yargs-parser": {
       "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "license": "ISC",
       "engines": {
         "node": ">=10"
@@ -17957,8 +17231,6 @@
     },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "license": "MIT",
       "engines": {
         "node": ">=10"
diff --git a/package.json b/package.json
index 1b4e33b9..969730d9 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,32 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@tailwindcss/cli": "^4.0.9",
+    "ag-grid-enterprise": "^33.2.4",
+    "ag-grid-react": "^33.1.1",
+    "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "cra-template": "1.2.0",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.476.0",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.2",
     "prop-types": "^15.8.1",
+    "radix-ui": "^1.1.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.2",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "styled-components": "^6.1.13",
-    "web-vitals": "^4.2.4"
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "web-vitals": "^4.2.4",
+    "xlsx": "^0.18.5"
   },
   "scripts": {
     "start": "PORT=3001 react-scripts start",
@@ -45,6 +63,7 @@
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@eslint/js": "^9.16.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
@@ -52,7 +71,9 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "globals": "^15.13.0",
+    "postcss": "^8.5.3",
     "prettier": "^3.4.2",
-    "prettier-eslint": "^16.3.0"
+    "prettier-eslint": "^16.3.0",
+    "tailwindcss": "^4.0.9"
   }
 }
diff --git a/public/ITAlogo.png b/public/ITAlogo.png
new file mode 100644
index 00000000..567e6942
Binary files /dev/null and b/public/ITAlogo.png differ
diff --git a/public/index.html b/public/index.html
index b9ee2d51..66a462ab 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,10 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+  
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -22,7 +26,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>DISC Project</title>
+  <title>ITA Order Portal</title>
 </head>
 
 <body>
diff --git a/public/manifest.json b/public/manifest.json
index ba2cf9db..c98d605c 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "DISC Project",
-  "name": "DISC Project Frontend Template",
+  "short_name": "ITA Inventory",
+  "name": "ITA Inventory Frontend",
   "icons": [
     {
       "src": "favicon.ico",
diff --git a/src/App.css b/src/App.css
index 161800f9..4fcf1e97 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,13 +1,65 @@
 /* global color presets */
+
+
+@import "@radix-ui/colors/black-alpha.css";
+@import "@radix-ui/colors/green.css";
+@import "@radix-ui/colors/mauve.css";
+@import "@radix-ui/colors/violet.css";
+
+
 :root {
-  --primary-green: #45bf84;
-  --secondary-lightgrey: #f3f3f3;
+  --primary-green: #1dF244;
+  --secondary-lightgrey: #d9d9d9;
   --darkgrey: #747474;
   --white: #fff;
   --text: #191a23;
+  --primary-orange: #F99C30;
+  --admin-enterbudget-gray: #c5bfbf;
+  --popup-approve-green: #8DFB91;
+  --popup-decline-logout-red: #F66E6F;
+  --exit-popup-red: #ff494a;
+  --newadmin-purple: #5245c8;
+  --changepassword-text: #0069FF;
+  --status-approved-green: #1dF244;
+  --status-pending-yellow:#FFD65A;
+  --status-arrived-blue:#329FF2;
+  --status-cancel-red: #ff494a;
+  
+
+
+
+
+
+}
+
+#ITAlogo{
+  height:60px;
+}
+
+#userName_display {
+  font-size: 16px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px; 
 }
 
 * {
-  font-family: Verdana, sans-serif;
+  font-family: 'Inter', sans-serif;
   color: var(--text);
 }
+
+.program-budget {
+  font-family: 'Inter', sans-serif !important;
+  color: var(--text);
+}
+
+.fbODAS > span {
+  font-size: 1rem;
+}
+
+/* makes column labels in center */
+.ag-header-cell-label {
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 9a6e3eff..66cc64d9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,8 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import {
   PrivateRoute,
   PublicOnlyRoute,
+  AdminRoute,
+  TherapistRoute,
 } from 'common/components/routes/ProtectedRoutes';
 import { UserProvider } from 'common/contexts/UserContext';
 import NavLayout from 'common/layouts/NavLayout';
@@ -13,8 +15,13 @@ import Login from 'pages/account/Login';
 import RequestPasswordReset from 'pages/account/RequestPasswordReset';
 import ResetPassword from 'pages/account/ResetPassword';
 import SignUp from 'pages/account/SignUp';
-import Home from 'pages/home/Home';
+import AdminHome from 'pages/admin/AdminHome/AdminHome';
+import SettingsPage from 'pages/settings/SettingsPage';
 import NotFound from 'pages/not-found/NotFound';
+import TherapistHome from 'pages/therapist/TherapistHome';
+// import TherapistSettings from 'pages/therapist/TherapistSettings';
+import RoleBasedRedirect from 'common/components/routes/RoleBasedRedirect';
+import PeopleManagement from 'pages/admin/PeopleManagement/PeopleManagement';
 
 import './App.css';
 
@@ -25,16 +32,22 @@ export default function App() {
         <Routes>
           <Route path='/' element={<NavLayout />}>
             <Route element={<PrivateRoute />}>
-              <Route index element={<Home />} />
+              <Route index element={<RoleBasedRedirect />} />
+              <Route path='/settings' element={<SettingsPage />} />
+              {/* Role-protected routes */}
+              <Route element={<AdminRoute />}>
+                <Route path='admin' element={<AdminHome />} />
+                <Route path='manageusers' element={<PeopleManagement />} />
+              </Route>
+              <Route element={<TherapistRoute />}>
+                <Route path='therapist' element={<TherapistHome />} />
+              </Route>
             </Route>
             <Route element={<PublicOnlyRoute />}>
               <Route path='login' element={<Login />} />
               <Route path='signup' element={<SignUp />} />
-              <Route
-                path='forgot-password'
-                element={<RequestPasswordReset />}
-              />
             </Route>
+            <Route path='forgot-password' element={<RequestPasswordReset />} />
             <Route path='auth/callback' element={<AuthCallback />} />
             <Route path='auth/reset-password' element={<ResetPassword />} />
             <Route path='*' element={<NotFound />} />
diff --git a/src/assets/icons/GoogleButton.jsx b/src/assets/icons/GoogleButton.jsx
new file mode 100644
index 00000000..c1758b7a
--- /dev/null
+++ b/src/assets/icons/GoogleButton.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  background-color: white;
+  border: 1px solid #e2e2e2;
+  border-radius: 4px;
+  padding: 8px 16px;
+  color: #5f6368;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f8f9fa;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #e8e8e8;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const Divider = styled.div`
+  position: relative;
+  margin: 24px 0;
+  text-align: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: #e2e2e2;
+  }
+
+  span {
+    position: relative;
+    background-color: white;
+    padding: 0 12px;
+    color: #666;
+    font-size: 14px;
+  }
+`;
+
+export default function GoogleButton({
+  isLoading,
+  onClick,
+  text = 'Sign in with Google',
+}) {
+  return (
+    <>
+      <Divider>
+        <span>Or continue with</span>
+      </Divider>
+      <StyledButton type='button' onClick={onClick} disabled={isLoading}>
+        <svg width='18' height='18' viewBox='0 0 24 24'>
+          <path
+            d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'
+            fill='#4285F4'
+          />
+          <path
+            d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'
+            fill='#34A853'
+          />
+          <path
+            d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'
+            fill='#FBBC05'
+          />
+          <path
+            d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'
+            fill='#EA4335'
+          />
+        </svg>
+        {text}
+      </StyledButton>
+    </>
+  );
+}
+
+GoogleButton.propTypes = {
+  isLoading: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  text: PropTypes.string,
+};
+
+GoogleButton.defaultProps = {
+  isLoading: false,
+  text: 'Sign in with Google',
+};
diff --git a/src/common/components/OrderTable.jsx b/src/common/components/OrderTable.jsx
new file mode 100644
index 00000000..920ac570
--- /dev/null
+++ b/src/common/components/OrderTable.jsx
@@ -0,0 +1,1014 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import StatusChangeToast from './therapist_modals/StatusChangeToast';
+import { useUser } from 'common/contexts/UserContext';
+import { OpenInNewWindowIcon } from '@radix-ui/react-icons';
+import CancelOrderButton from 'common/components/therapist_modals/CancelOrderButton';
+import CancelOrder from 'common/components/table_pop_ups/CancelOrder';
+import NewOrderForm from 'common/components/table_pop_ups/NewOrderForm';
+import {
+  AllCommunityModule,
+  ModuleRegistry,
+  provideGlobalGridOptions,
+} from 'ag-grid-community';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-quartz.css';
+import { AgGridReact } from 'ag-grid-react';
+import * as XLSX from 'xlsx';
+
+import ItemArrivedConfirm from 'common/components/admin_modals/ItemArrivedConfirm';
+import ItemPendingConfirm from './admin_modals/ItemPendingConfirm';
+import ItemReadyConfirm from 'common/components/admin_modals/ItemReadyConfirm';
+import OrderApprovalConfirm from 'common/components/admin_modals/OrderApprovalConfirm';
+import OrderDenyConfirm from 'common/components/admin_modals/OrderDenyConfirm';
+import ReasonForDenial from 'common/components/admin_modals/ReasonForDenial';
+
+import StatusDropdown from './table_pop_ups/StatusDropdown';
+import FormPopup from './templates/FormPopup/FormPopup';
+import {
+  ExportButton,
+  ExportDropdown,
+  DropdownContent,
+  DropdownItem,
+  StyledLink,
+} from './OrderTableStyles';
+import { fetchWithRetries } from './utils';
+
+// Mark grids as legacy theme to fix AG Grid bug
+provideGlobalGridOptions({ theme: 'legacy' });
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+const EditableCell = (props) => {
+  const [value, setValue] = useState(props.value);
+
+  const onChange = (event) => {
+    setValue(event.target.value);
+  };
+
+  const onBlur = async () => {
+    await fetchWithRetries(
+      `${process.env.REACT_APP_BACKEND_URL}/admin/tracking/${props.data.orderId}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ tracking_number: value }),
+      }
+    );
+    props.api.stopEditing();
+    props.updateTrackingNumber(props.data.orderId, value);
+    setValue(props.value);
+  };
+
+  return (
+    <input
+      type='text'
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      style={{ width: '100%' }}
+    />
+  );
+};
+
+// Responsible for formatting values under 'Order Name' column.
+const orderNameRenderer = (params) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        overflowX: 'scroll',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+        textOverflow: 'ellipsis',
+      }}
+    >
+      {/* Bolded item/product name */}
+      <span style={{ fontWeight: 'bold' }}>{params.data.orderName}</span>
+      <span
+        style={{
+          fontSize: '0.8em',
+          color: 'gray',
+          position: 'absolute',
+          top: '15px',
+        }}
+      >
+        {/* PPU and Quantity acting as 'subheaders' beneath item name */}
+        Price per unit: ${params.data.ppu} — Qty: {params.data.quantity}
+      </span>
+    </div>
+  );
+};
+
+// Responsible for formatting & styling the 'Priority' column
+const priorityRenderer = (params) => {
+  const priority = params.value;
+  const isUrgent = priority === 'regular' ? false : true;
+  // if priority is regular, then do not apply additional styles
+  return (
+    <div style={{ display: 'flex' }}>
+      <span
+        style={{
+          backgroundColor: isUrgent ? 'orange' : 'inherit',
+          width: '100px',
+          height: '35px',
+          borderRadius: isUrgent ? '4px' : 'inherit',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {
+          isUrgent
+            ? priority
+            : String(priority[0]).toUpperCase() +
+              String(priority).slice(1) /* first letter == uppercase */
+        }
+      </span>
+    </div>
+  );
+};
+
+// Responsible for formatting the 'Description' column
+// Regardless of text length, user is able to click on the description and
+// open a pop-up that shows the full description
+const descriptionRenderer = (params) => {
+  const desc = params.value;
+  if (desc.length < 9) {
+    return desc;
+  } else {
+    return (
+      <div style={{ position: 'relative', width: '120px', fontSize: '14px' }}>
+        <FormPopup
+          title={
+            params.data['therapistName'] +
+            "'s Reason for Buying " +
+            params.data['orderName']
+          }
+          description=''
+          defaultSubmit={false}
+          buttonText={desc.slice(0, 10) + '...'}
+          buttonColor='white'
+          styles={{ fontSize: '14px' }}
+        >
+          <div
+            style={{
+              padding: '10px',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              outline: 'none',
+              whiteSpace: 'normal',
+              overflowWrap: 'break-word',
+            }}
+          >
+            {desc}
+          </div>
+        </FormPopup>
+        <div
+          style={{
+            position: 'absolute',
+            top: '4px',
+            left: '100px',
+            pointerEvents: 'none',
+          }}
+        >
+          <OpenInNewWindowIcon style={{ width: '15px', height: '15px' }} />
+        </div>
+      </div>
+    );
+  }
+};
+
+// Responsible for formatting the 'Link' column
+const linkRenderer = (params) => {
+  let url = params.value;
+  // If the value does not start with http:// or https://, prepend https://
+  if (url && !/^https?:\/\//i.test(url)) {
+    url = 'https://' + url;
+  }
+  return (
+    <span>
+      {/* Use basic StyledLink component (defined at top of doc) for styling.
+      Link remains blue after visiting, subject to change in future. */}
+      <StyledLink href={url} target='_blank' rel='noreferrer'>
+        Link
+      </StyledLink>
+    </span>
+  );
+};
+
+// Responsible for formatting the 'price' column
+function currencyFormatter(params) {
+  // if price value is not null, return formatted price to column
+  return params.value == null ? '' : '$' + params.value.toLocaleString();
+}
+
+// Changes date format from YYYY-MM-DD to MM/DD/YYYY for easier readability
+function requestDateFormatter(params) {
+  const [year, month, day] = params.value.split('-');
+  return `${month}/${day}/${year}`;
+}
+
+// Formats specialization
+function specializationFormatter(params) {
+  if (params.value === 'super_admin') return 'Super Admin';
+  if (params.value === 'standard_admin') return 'Standard Admin';
+  const specialization = params.value;
+  return specialization
+    ? specialization.charAt(0).toUpperCase() + specialization.slice(1)
+    : ''; // prevents error when specialization is null
+}
+
+// Changes program name to its respective abbreviation
+function programToAbbrev(params) {
+  const program = params.value;
+  if (program === 'private') return 'PT';
+  if (program === 'community') return 'CP';
+  if (program === 'creative') return 'CKC';
+  if (program === 'school') return 'SP';
+}
+
+// Validates status change
+const checkValidStatusChange = (currStatus, newStatus) => {
+  const statusMap = {
+    denied: ['pending'],
+    approved: ['pending', 'arrived'],
+    pending: ['denied', 'approved'],
+    arrived: ['approved', 'ready'],
+    ready: ['arrived', 'pending', 'approved'],
+  };
+  const isValid = statusMap[currStatus].includes(newStatus);
+  return isValid;
+};
+
+export default function OrderTable() {
+  const { user } = useUser();
+  const [rowData, setRowData] = useState([]);
+  const [gridApi, setGridApi] = useState(null);
+  const [pendingRow, setPendingRow] = useState(null); // Store the pending row (row we are editing) with its previous status
+  // Below states control popups and toasts
+  const [showApprovalConfirm, setShowApprovalConfirm] = useState(false);
+  const [showDenyConfirm, setShowDenyConfirm] = useState(false);
+  const [showReasonForDenial, setShowReasonForDenial] = useState(false);
+  const [showItemArrived, setShowItemArrived] = useState(false);
+  const [showItemPickUp, setShowItemPickUp] = useState(false);
+  const [showItemPending, setShowItemPending] = useState(false);
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+  const [showToast, setShowToast] = useState(false);
+  const [toastMsg, setToastMsg] = useState('');
+  const [showExportDropdown, setShowExportDropdown] = useState(false);
+  const exportDropdownRef = useRef(null);
+
+  const CancelOrderRenderer = (params) => {
+    // Only show cancel button if the order belongs to the current user
+    if (params.data.requestor_id === user.id) {
+      return (
+        <CancelOrderButton
+          onClick={() => {
+            setPendingRow({
+              params,
+              prev: params.data.status,
+            });
+            setShowCancelConfirm(true);
+          }}
+        />
+      );
+    }
+    // Return empty div if the order doesn't belong to the user
+    return <div></div>;
+  };
+
+  // Renders the status cells (column)
+  const statusCellRenderer = (params) => {
+    const handleStatusChange = (newValue) => {
+      // Check if this status change is 'allowed'
+      const validChange = checkValidStatusChange(params.data.status, newValue);
+      // If not, show toast to notify user that they cannot do it
+      if (!validChange) {
+        const currStatus =
+          params.data.status.charAt(0).toUpperCase() +
+          params.data.status.slice(1);
+        const newStatus = newValue.charAt(0).toUpperCase() + newValue.slice(1);
+        const msg = `Cannot change status from "${currStatus}" to "${newStatus}". Please select a valid status.`;
+        setToastMsg(msg);
+        setShowToast(true);
+        return;
+      }
+      // If status change is allowed, show appropriate popup
+      if (newValue === 'approved') {
+        // Save reference to row along with the previous status in case
+        // user wants to undo their action
+        setPendingRow({ params, prev: params.value });
+        setShowApprovalConfirm(true);
+      } else if (newValue === 'denied') {
+        setPendingRow({ params, prev: params.value });
+        setShowDenyConfirm(true);
+      } else if (newValue === 'arrived') {
+        setPendingRow({ params, prev: params.value });
+        setShowItemArrived(true);
+      } else if (newValue === 'ready') {
+        setPendingRow({ params, prev: params.value });
+        setShowItemPickUp(true);
+      } else if (newValue === 'pending') {
+        setPendingRow({ params, prev: params.value });
+        setShowItemPending(true);
+      } else {
+        params.node.setDataValue('status', newValue);
+      }
+    };
+    return (
+      <StatusDropdown
+        value={params.value}
+        onStatusChange={handleStatusChange}
+      />
+    );
+  };
+
+  // Tracks row data during tracking # change
+  const updateTrackingNumber = (orderId, newTrackingNumber) => {
+    setRowData((prevRowData) =>
+      prevRowData.map((row) =>
+        row.orderId === orderId
+          ? { ...row, trackingNumber: newTrackingNumber }
+          : row
+      )
+    );
+  };
+
+  // All column names and respective settings
+  const [colDefs] = useState([
+    {
+      headerName: 'Order Name',
+      field: 'orderName',
+      cellRenderer: orderNameRenderer, // see comments before OrderTable() definition
+      filter: true, // 'filter: true' activates the filter option at top of specified column (3 dashed horizontal lines)
+      cellStyle: { justifyContent: 'flex-start', alignItems: 'flex-start' },
+    },
+    {
+      headerName: 'Status',
+      field: 'status',
+      cellRenderer: statusCellRenderer,
+      filter: true,
+    },
+    {
+      headerName: 'Priority',
+      field: 'priorityLevel',
+      width: 150,
+      cellRenderer: priorityRenderer,
+    },
+    {
+      headerName: 'Description',
+      field: 'description',
+      cellRenderer: descriptionRenderer,
+    },
+    {
+      headerName: 'Price',
+      field: 'price',
+      width: 140, // adjust width of price column
+      valueFormatter: currencyFormatter,
+      filter: true,
+    },
+    {
+      headerName: 'Link',
+      field: 'link',
+      width: 65,
+      cellRenderer: linkRenderer,
+    },
+    {
+      headerName: 'Tracking Number',
+      field: 'trackingNumber',
+      editable: (params) => {
+        // Status must be 'approved' to enter a tracking number
+        return params.data.status === 'approved';
+      },
+      cellEditor: EditableCell,
+      cellEditorParams: {
+        updateTrackingNumber,
+      },
+    },
+    {
+      headerName: 'Request Date',
+      field: 'requestDate',
+      valueFormatter: requestDateFormatter,
+      filter: true,
+    },
+    {
+      headerName: 'Specialization',
+      field: 'specialization',
+      filter: true,
+      valueFormatter: specializationFormatter,
+    },
+    {
+      headerName: 'Program',
+      field: 'program',
+      valueFormatter: programToAbbrev,
+      width: 110,
+    },
+    {
+      headerName: 'Therapist Name',
+      field: 'therapistName',
+    },
+    {
+      headerName: 'Status Tracker',
+      field: 'statusTracker',
+      hide: true,
+    },
+    {
+      field: 'button',
+      headerName: '',
+      cellRenderer: CancelOrderRenderer,
+    },
+  ]);
+
+  // Default column definitions for table; columns cannot be resized, instead they fit to width
+  const defaultColDef = useMemo(() => {
+    return {
+      resizable: false, // 'resizable: false' means user cannot resize columns, as cols are meant to fit to width
+      suppressMovable: true, // 'suppressMovable: true' means the user cannot move columns around
+      cellStyle: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+    };
+  }, []);
+
+  // On initial render, load all order data into the table
+  useEffect(() => {
+    fetchWithRetries(`${process.env.REACT_APP_BACKEND_URL}/orders/`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+      },
+      credentials: 'include',
+    })
+      .then((result) => result.json())
+      .then((data) => {
+        console.log(data);
+        // Check if data is an array
+        if (!Array.isArray(data)) {
+          console.error('Expected array but received:', typeof data);
+          setRowData([]);
+          return;
+        }
+        // Transform each order of JSON into flat object for table
+        const transformedData = data.map((order) => ({
+          orderId: order.order_id,
+          orderName: order.items.item_name,
+          status: order.status,
+          priorityLevel: order.priority_level,
+          description: order.order_description,
+          price: order.total_cost,
+          link: order.items.order_link,
+          trackingNumber: order.tracking_number,
+          requestDate: order.request_date,
+          specialization: order.users.specialization,
+          program: order.programs.program_title,
+          therapistName: `${order.users.firstname} ${order.users.lastname}`,
+          ppu: order.items.price_per_unit,
+          quantity: order.quantity,
+          statusHistory: ['pending'],
+          requestor_id: order.requestor_id,
+        }));
+        setRowData(transformedData);
+      })
+      .catch((error) => {
+        console.error('Error fetching orders:', error);
+        setRowData([]);
+      });
+  }, []);
+
+  // Make columns fit to width of the grid, no overflow/scrolling
+  const autoSizeStrategy = useMemo(() => {
+    return {
+      type: 'fitGridWidth',
+      defaultMinWidth: 65,
+      columnLimits: [
+        // can specify minimum widths for certain columns
+        {
+          colId: 'orderName',
+          minWidth: 185,
+        },
+      ],
+    };
+  }, []);
+
+  const onGridReady = (params) => {
+    setGridApi(params.api);
+  };
+
+  const handleExportCSV = () => {
+    if (gridApi) {
+      gridApi.exportDataAsCsv({
+        fileName: `orders-${new Date().toISOString().slice(0, 10)}.csv`,
+        processCellCallback: (params) => {
+          // Handle special formatting for certain columns
+          if (params.column.getColId() === 'price') {
+            return params.value ? `$${params.value.toLocaleString()}` : '';
+          }
+          if (params.column.getColId() === 'requestDate') {
+            const [year, month, day] = params.value.split('-');
+            return `${month}/${day}/${year}`;
+          }
+          return params.value;
+        },
+      });
+    }
+    setShowExportDropdown(false);
+  };
+
+  const handleExportExcel = () => {
+    if (gridApi) {
+      // First get the CSV data using AG Grid's built-in CSV export
+      const csvData = gridApi.getDataAsCsv({
+        processCellCallback: (params) => {
+          // Handle special formatting for certain columns
+          if (params.column.getColId() === 'price') {
+            return params.value ? `$${params.value.toLocaleString()}` : '';
+          }
+          if (params.column.getColId() === 'requestDate') {
+            const [year, month, day] = params.value.split('-');
+            return `${month}/${day}/${year}`;
+          }
+          return params.value;
+        },
+      });
+
+      // Convert CSV to worksheet
+      const worksheet = XLSX.read(csvData, { type: 'string' }).Sheets.Sheet1;
+
+      // Get the range of the worksheet
+      const range = XLSX.utils.decode_range(worksheet['!ref']);
+
+      // Find the requestDate column index
+      const headerRow = range.s.r;
+      let dateColIndex = -1;
+      for (let C = range.s.c; C <= range.e.c; ++C) {
+        const cell = worksheet[XLSX.utils.encode_cell({ r: headerRow, c: C })];
+        if (cell && cell.v === 'Request Date') {
+          dateColIndex = C;
+          break;
+        }
+      }
+
+      // Format date cells if we found the date column
+      if (dateColIndex !== -1) {
+        for (let R = range.s.r + 1; R <= range.e.r; ++R) {
+          const cell =
+            worksheet[XLSX.utils.encode_cell({ r: R, c: dateColIndex })];
+          if (cell && cell.v) {
+            try {
+              // Get the original date from the row data
+              const rowData = gridApi.getRowNode(R - 1)?.data;
+              if (rowData && rowData.requestDate) {
+                const [year, month, day] = rowData.requestDate.split('-');
+                // Keep it as a formatted string
+                cell.t = 's';
+                cell.v = `${month}/${day}/${year}`;
+              }
+            } catch (error) {
+              console.error('Error formatting date:', error);
+              // Keep the original value if there's an error
+              cell.t = 's';
+            }
+          }
+        }
+      }
+
+      // Create a new workbook and append the worksheet
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Orders');
+
+      // Generate XLSX file and trigger download
+      const timestamp = new Date().toISOString().slice(0, 10);
+      XLSX.writeFile(workbook, `orders-${timestamp}.xlsx`);
+    }
+    setShowExportDropdown(false);
+  };
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (
+        exportDropdownRef.current &&
+        !exportDropdownRef.current.contains(event.target)
+      ) {
+        setShowExportDropdown(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  // The actual component (order table) we are actually returning
+  return (
+    <div style={{ padding: '20px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-start',
+          gap: '10px',
+          marginBottom: '10px',
+        }}
+      >
+        <NewOrderForm />
+        <ExportDropdown ref={exportDropdownRef}>
+          <ExportButton
+            onClick={() => setShowExportDropdown(!showExportDropdown)}
+          >
+            Export Data
+          </ExportButton>
+          <DropdownContent isVisible={showExportDropdown}>
+            <DropdownItem onClick={handleExportCSV}>Export as CSV</DropdownItem>
+            <DropdownItem onClick={handleExportExcel}>
+              Export as Excel
+            </DropdownItem>
+          </DropdownContent>
+        </ExportDropdown>
+      </div>
+
+      <div
+        className='ag-theme-quartz'
+        style={{ height: 'calc(100vh - 300px)' }}
+      >
+        <AgGridReact
+          rowData={rowData}
+          defaultColDef={defaultColDef}
+          columnDefs={colDefs}
+          rowHeight={50}
+          autoSizeStrategy={autoSizeStrategy}
+          onGridReady={onGridReady}
+        />
+      </div>
+      {/* Toast for when user does invalid status transition */}
+      <StatusChangeToast
+        open={showToast}
+        setOpen={setShowToast}
+        title='Invalid Status Change'
+        description={toastMsg}
+      />
+      {/* Appears when user is changing the status from something else to 'Approved' */}
+      {showApprovalConfirm && (
+        <OrderApprovalConfirm
+          open={true}
+          // If user clicks 'Confirm' for switching status to 'Approved,' then the backend is updated
+          onApprove={async () => {
+            await fetchWithRetries(
+              `${process.env.REACT_APP_BACKEND_URL}/admin/approve/${pendingRow.params.data.orderId}`,
+              {
+                method: 'PUT',
+                headers: {
+                  authorization: `Bearer ${localStorage.getItem('authToken')}`,
+                  'Content-Type': 'application/json',
+                },
+                credentials: 'include',
+              }
+            );
+            // If row is currently being edited (always should), update row data
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: 'approved' }
+                  : row
+              );
+              setRowData(updatedData);
+              // Refresh row to update in real time
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowApprovalConfirm(false);
+            setPendingRow(null);
+          }}
+          // User decides to cancel the process of switching status to 'Approved,' revert to previous state
+          onCancel={() => {
+            // Revert row we are editing to previous state before edit
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: pendingRow.prev }
+                  : row
+              );
+              setRowData(updatedData);
+              // Refresh row to update in real time
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowApprovalConfirm(false);
+            setPendingRow(null);
+          }}
+        />
+      )}
+      {/* Appears when user is changing the status from something else to 'Denied' */}
+      {showDenyConfirm && (
+        <OrderDenyConfirm
+          open={true}
+          // If user clicks 'Deny' for switching status to 'Denied,' then the backend is updated
+          onDeny={() => {
+            // If row is currently being edited (always should), update row data
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: 'denied' }
+                  : row
+              );
+              setRowData(updatedData);
+              // Refresh in real time
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowDenyConfirm(false);
+            setShowReasonForDenial(true);
+          }}
+          onCancel={() => {
+            // Revert to previous row data if user decides to undo 'Deny'
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: pendingRow.prev }
+                  : row
+              );
+              setRowData(updatedData);
+              // Refresh in real time
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowDenyConfirm(false);
+            setPendingRow(null);
+          }}
+        />
+      )}
+      {/* Reason for denial popup */}
+      {showReasonForDenial && (
+        <ReasonForDenial
+          open={true}
+          // When user submits reason for denial, the backend is updated to reflect new 'Denied' order
+          onSubmit={async (reason) => {
+            await fetchWithRetries(
+              `${process.env.REACT_APP_BACKEND_URL}/admin/deny/${pendingRow.params.data.orderId}`,
+              {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                  authorization: `Bearer ${localStorage.getItem('authToken')}`,
+                },
+                // pass the denial reason from the popup if available:
+                body: JSON.stringify({
+                  reason_for_denial: `${reason}`,
+                }),
+                credentials: 'include',
+              }
+            );
+            // Update status to denied
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: 'denied' }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowReasonForDenial(false);
+            setPendingRow(null);
+          }}
+          // Backend not updated if user decides to cancel their denial process
+          onCancel={() => {
+            // Revert status to its previous value when user cancels
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: pendingRow.prev }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowReasonForDenial(false);
+            setPendingRow(null);
+          }}
+        />
+      )}
+      {/* Appears when user is switching status to 'Arrived' */}
+      {showItemArrived && (
+        <ItemArrivedConfirm
+          open={true}
+          // When user submits confirms that the order has arrived, update the backend
+          onConfirm={async () => {
+            await fetchWithRetries(
+              `${process.env.REACT_APP_BACKEND_URL}/admin/arrived/${pendingRow.params.data.orderId}`,
+              {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                  authorization: `Bearer ${localStorage.getItem('authToken')}`,
+                },
+                credentials: 'include',
+              }
+            );
+            // Update status to be arrived
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: 'arrived' }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowItemArrived(false);
+            setPendingRow(null);
+          }}
+          // If user decides to cancel process of 'Arrived' status, revert to previous data
+          onCancel={() => {
+            // Revert status to its previous value when user cancels
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: pendingRow.prev }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowItemArrived(false);
+            setPendingRow(null);
+          }}
+        />
+      )}
+      {/* Appears when user is switching status to 'Ready' */}
+      {showItemPickUp && (
+        <ItemReadyConfirm
+          open={true}
+          // When user submits confirms that the order has arrived, update the backend
+          onConfirm={async () => {
+            await fetchWithRetries(
+              `${process.env.REACT_APP_BACKEND_URL}/admin/ready/${pendingRow.params.data.orderId}`,
+              {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                  authorization: `Bearer ${localStorage.getItem('authToken')}`,
+                },
+                credentials: 'include',
+              }
+            );
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: 'ready' }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowItemPickUp(false);
+            setPendingRow(null);
+          }}
+          // If user decides to cancel process of switching status to 'Ready,' revert
+          onCancel={() => {
+            // Revert status to its previous value when user cancels
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: pendingRow.prev }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowItemPickUp(false);
+            setPendingRow(null);
+          }}
+        />
+      )}
+      {/* Appears when user is switching status to 'Review' */}
+      {showItemPending && (
+        <ItemPendingConfirm
+          open={true}
+          // When user submits confirms that the order has arrived, update the backend
+          onConfirm={async () => {
+            await fetchWithRetries(
+              `${process.env.REACT_APP_BACKEND_URL}/admin/revert/${pendingRow.params.data.orderId}`,
+              {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                  authorization: `Bearer ${localStorage.getItem('authToken')}`,
+                },
+                credentials: 'include',
+              }
+            );
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: 'pending' }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowItemPending(false);
+            setPendingRow(null);
+          }}
+          // If user decides to cancel process of switching status to 'Review,' then revert
+          onCancel={() => {
+            // Revert status to its previous value when user cancels
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: pendingRow.prev }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowItemPending(false);
+            setPendingRow(null);
+          }}
+        />
+      )}
+      {showCancelConfirm && (
+        <CancelOrder
+          open={true}
+          onConfirm={async () => {
+            // Fix 2: Add API call to backend
+            try {
+              await fetchWithRetries(
+                `${process.env.REACT_APP_BACKEND_URL}/therapist/order/${pendingRow.params.data.orderId}`,
+                {
+                  method: 'DELETE',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    authorization: `Bearer ${localStorage.getItem(
+                      'authToken'
+                    )}`,
+                  },
+                  credentials: 'include',
+                }
+              );
+
+              // Fix 3: Update row data with new 'cancel' status
+              if (pendingRow) {
+                const updatedData = rowData.map((row) =>
+                  row.orderId === pendingRow.params.data.orderId
+                    ? { ...row, status: 'cancel' }
+                    : row
+                );
+                setRowData(updatedData);
+                pendingRow.params.api.refreshCells({
+                  rowNodes: [pendingRow.params.node],
+                });
+              }
+            } catch (error) {
+              console.error('Error cancelling order:', error);
+            }
+            setShowCancelConfirm(false);
+            setPendingRow(null);
+          }}
+          onCancel={() => {
+            // Revert the status to its previous value
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: pendingRow.prev }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowCancelConfirm(false);
+            setPendingRow(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/common/components/OrderTableStyles.js b/src/common/components/OrderTableStyles.js
new file mode 100644
index 00000000..ad69d52c
--- /dev/null
+++ b/src/common/components/OrderTableStyles.js
@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+const ExportButton = styled.button`
+  background-color: #4caf50;
+  border: none;
+  color: white;
+  padding: 7px 14px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 4px;
+  &:hover {
+    background-color: #45a049;
+  }
+`;
+
+const ExportDropdown = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+
+const DropdownContent = styled.div`
+  display: ${(props) => (props.isVisible ? 'block' : 'none')};
+  position: absolute;
+  right: 0;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  border-radius: 4px;
+`;
+
+const DropdownItem = styled.a`
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+  &:hover {
+    background-color: #f1f1f1;
+  }
+`;
+
+const StyledLink = styled.a`
+  text-decoration: underline;
+  &:link {
+    color: blue;
+  }
+
+  &:visited {
+    color: blue;
+  }
+
+  &:hover {
+    color: darkblue;
+  }
+
+  &:active {
+    color: purple;
+  }
+`;
+
+export {
+  ExportButton,
+  ExportDropdown,
+  DropdownContent,
+  DropdownItem,
+  StyledLink
+};
\ No newline at end of file
diff --git a/src/common/components/OrderTableTherapist.jsx b/src/common/components/OrderTableTherapist.jsx
new file mode 100644
index 00000000..42d926f5
--- /dev/null
+++ b/src/common/components/OrderTableTherapist.jsx
@@ -0,0 +1,504 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useUser } from 'common/contexts/UserContext'; // Import the user context
+import { useOrders } from 'common/contexts/OrderContext'; // Import the order context
+import { OpenInNewWindowIcon } from '@radix-ui/react-icons';
+import {
+  AllCommunityModule,
+  ModuleRegistry,
+  provideGlobalGridOptions,
+} from 'ag-grid-community';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-quartz.css';
+import { AgGridReact } from 'ag-grid-react';
+import styled from 'styled-components';
+
+import FormPopup from './templates/FormPopup/FormPopup';
+import CancelOrder from './table_pop_ups/CancelOrder';
+import CancelOrderButton from './therapist_modals/CancelOrderButton';
+
+// Mark all grids as using legacy themes
+provideGlobalGridOptions({ theme: 'legacy' });
+
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+const StyledLink = styled.a`
+  text-decoration: underline;
+  &:link {
+    color: blue;
+  }
+
+  &:visited {
+    color: blue;
+  }
+
+  &:hover {
+    color: darkblue;
+  }
+
+  &:active {
+    color: purple;
+  }
+`;
+
+// Responsible for formatting values under 'Order Name' column.
+const orderNameRenderer = (params) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        overflowX: 'scroll',
+        scrollbarWidth: 'none',
+        msOverflowStyle: 'none',
+        textOverflow: 'ellipsis',
+      }}
+    >
+      {/* Bolded item/product name */}
+      <span style={{ fontWeight: 'bold' }}>{params.data.orderName}</span>
+      <span
+        style={{
+          fontSize: '0.8em',
+          color: 'gray',
+          position: 'absolute',
+          top: '15px',
+        }}
+      >
+        {/* PPU and Quantity acting as 'subheaders' beneath item name */}
+        Price per unit: ${params.data.ppu} — Qty: {params.data.quantity}
+      </span>
+    </div>
+  );
+};
+
+// Responsible for formatting the 'Status' column
+// See StatusDropdown.jsx to see how status to color relationships work
+// const statusRenderer = (params) => {
+//   // need to implement logic for if status is being changed to 'Deny' or 'Pick up' or 'Arrived', as
+//   // these should trigger a pop-up
+//   return (
+//     <StatusDropdown
+//       value={params.value}
+//       onStatusChange={(newValue) => {
+//         params.node.setDataValue('status', newValue);
+//       }}
+//     />
+//   );
+// };
+
+// Responsible for formatting & styling the 'Priority' column
+const priorityRenderer = (params) => {
+  const priority = params.value;
+  const isUrgent = priority === 'regular' ? false : true;
+  // if priority is regular, then do not apply additional styles
+  return (
+    <div style={{ display: 'flex' }}>
+      <span
+        style={{
+          backgroundColor: isUrgent ? 'orange' : 'inherit',
+          width: '100px',
+          height: '35px',
+          borderRadius: isUrgent ? '4px' : 'inherit',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {
+          isUrgent
+            ? priority
+            : String(priority[0]).toUpperCase() +
+              String(priority).slice(1) /* first letter == uppercase */
+        }
+      </span>
+    </div>
+  );
+};
+
+// Responsible for formatting the 'Description' column
+// Regardless of text length, user is able to click on the description and
+// open a pop-up that shows the full description
+const descriptionRenderer = (params) => {
+  const desc = params.value;
+  if (desc.length < 9) {
+    return desc;
+  } else {
+    return (
+      <div style={{ position: 'relative', width: '120px', fontSize: '14px' }}>
+        <FormPopup
+          title={
+            params.data['therapistName'] +
+            "'s Reason for Buying " +
+            params.data['orderName']
+          }
+          description=''
+          defaultSubmit={false}
+          buttonText={desc.slice(0, 10) + '...'}
+          buttonColor='white'
+          styles={{ fontSize: '14px' }}
+        >
+          <div
+            style={{
+              padding: '10px',
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              outline: 'none',
+              whiteSpace: 'normal',
+              overflowWrap: 'break-word',
+            }}
+          >
+            {desc}
+          </div>
+        </FormPopup>
+        <div
+          style={{
+            position: 'absolute',
+            top: '4px',
+            left: '100px',
+            pointerEvents: 'none',
+          }}
+        >
+          <OpenInNewWindowIcon style={{ width: '15px', height: '15px' }} />
+        </div>
+      </div>
+    );
+  }
+};
+
+// Responsible for formatting the 'Link' column
+const linkRenderer = (params) => {
+  let url = params.value;
+  // If the value does not start with http:// or https://, prepend https://
+  if (url && !/^https?:\/\//i.test(url)) {
+    url = 'https://' + url;
+  }
+  return (
+    <span>
+      {/* Use basic StyledLink component (defined at top of doc) for styling.
+      Link remains blue after visiting, subject to change in future. */}
+      <StyledLink href={url} target='_blank' rel='noreferrer'>
+        Link
+      </StyledLink>
+    </span>
+  );
+};
+
+// Responsible for formatting the 'Tracking Number' column
+// Tracking number should only show up if the status of respective row is NOT 'pending', or 'denied'
+
+// Responsible for formatting the 'price' column
+function currencyFormatter(params) {
+  // if price value is not null, return formatted price to column
+  return params.value == null ? '' : '$' + params.value.toLocaleString();
+}
+
+// Changes date format from YYYY-MM-DD to MM/DD/YYYY for easier readability
+function requestDateFormatter(params) {
+  const [year, month, day] = params.value.split('-');
+  return `${month}/${day}/${year}`;
+}
+
+// Formats specialization
+// params.value is type JSON with multiple specialties, so just returning first one
+// in JSON for now --> figure out solution later? display multiple?
+function specializationFormatter(params) {
+  const specialization = params.value;
+  return specialization
+    ? specialization.charAt(0).toUpperCase() + specialization.slice(1)
+    : ''; // prevents error when specialization is null
+}
+
+// Changes program name to its respective abbreviation
+function programToAbbrev(params) {
+  const program = params.value;
+  if (program === 'private') return 'PT';
+  if (program === 'community') return 'CP';
+  if (program === 'creative') return 'CKC';
+  if (program === 'school') return 'SP';
+}
+
+// Use a cellRenderer when we want to:
+//    • Render a clickable button or icon that performs an action
+//    • Display formatted HTML (such as embedding an image or hyperlink)
+//    • Introduce custom interactive components (like dropdowns or custom tooltips)
+export default function OrderTable() {
+  const [rowData, setRowData] = useState([]);
+  // Store the pending row with its previous status
+  const [pendingRow, setPendingRow] = useState(null);
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+  const { user } = useUser();
+  const { orderVersion } = useOrders(); // Get orderVersion from context
+
+  // const [showItemArrived, setShowItemArrived] = useState(false); // if true, then 'Item Arrived?' Popup
+  // const [showItemPickUp, setShowItemPickUp] = useState(false); // if true, then 'Item Ready for Pickup?' Popup
+  // const [showNewBudget, setShowNewBudget] = useState(false); // if true, then 'Enter new budget' Popup
+  // New separate status cell renderer function:
+  const statusCellRenderer = (params) => {
+    let status = params.value;
+    let backgroundColor = 'green'; // default background color
+    if (status === 'approved') {
+      backgroundColor = 'var(--status-approved-green)';
+    } else if (status === 'pending') {
+      backgroundColor = 'var(--status-pending-yellow)';
+    } else if (status === 'denied') {
+      backgroundColor = 'inherit';
+    } else if (status === 'cancelled') {
+      backgroundColor = 'var(--status-cancel-red)';
+    }
+
+    return (
+      <div
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: '4px',
+          padding: '0px 10px',
+          fontSize: '13px',
+          lineHeight: '1',
+          height: '35px',
+          width: '100px',
+          backgroundColor: backgroundColor,
+          color: 'black',
+          border: '1px #ccc solid',
+          textAlign: 'center',
+          fontWeight: '500',
+          textTransform: 'capitalize',
+        }}
+      >
+        {status}
+      </div>
+    );
+  };
+
+  const CancelOrderRenderer = (params) => {
+    // Only show cancel button if the order belongs to the current user
+    if (params.data.requestor_id === user.id) {
+      return (
+        <CancelOrderButton
+          onClick={() => {
+            setPendingRow({
+              params,
+              prev: params.data.status,
+            });
+            setShowCancelConfirm(true);
+          }}
+        />
+      );
+    }
+    // Return empty div if the order doesn't belong to the user
+    return <div></div>;
+  };
+
+  // all column names and respective settings
+  const [colDefs] = useState([
+    {
+      headerName: 'Order Name',
+      field: 'orderName',
+      cellRenderer: orderNameRenderer, // see comments before OrderTable() definition
+      filter: true, // 'filter: true' activates the filter option at top of specified column (3 dashed horizontal lines)
+      cellStyle: { justifyContent: 'flex-start', alignItems: 'flex-start' },
+    },
+    {
+      headerName: 'Status',
+      field: 'status',
+      cellRenderer: statusCellRenderer,
+      filter: true,
+    },
+    {
+      headerName: 'Priority',
+      field: 'priorityLevel',
+      width: 150,
+      cellRenderer: priorityRenderer,
+    },
+    {
+      headerName: 'Description',
+      field: 'description',
+      cellRenderer: descriptionRenderer,
+    },
+    {
+      headerName: 'Price',
+      field: 'price',
+      width: 140, // adjust width of price column
+      valueFormatter: currencyFormatter,
+      filter: true,
+    },
+    {
+      headerName: 'Link',
+      field: 'link',
+      width: 65,
+      cellRenderer: linkRenderer,
+    },
+    {
+      headerName: 'Tracking Number',
+      field: 'trackingNumber',
+      editable: false,
+    },
+    {
+      headerName: 'Request Date',
+      field: 'requestDate',
+      valueFormatter: requestDateFormatter,
+      filter: true,
+    },
+    {
+      headerName: 'Specialization',
+      field: 'specialization',
+      filter: true,
+      valueFormatter: specializationFormatter,
+    },
+    {
+      headerName: 'Program',
+      field: 'program',
+      valueFormatter: programToAbbrev,
+      width: 110,
+    },
+    {
+      headerName: 'Therapist Name',
+      field: 'therapistName',
+    },
+    {
+      field: 'button',
+      headerName: '',
+      cellRenderer: CancelOrderRenderer,
+    },
+  ]);
+  // Default column definitions for table; columns cannot be resized, instead they fit to width
+  const defaultColDef = useMemo(() => {
+    return {
+      resizable: false, // 'resizable: false' means user cannot resize columns, as cols are meant to fit to width
+      suppressMovable: true, // 'suppressMovable: true' means the user cannot move columns around
+      cellStyle: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+    };
+  }, []);
+  useEffect(() => {
+    // Fetch orders data whenever orderVersion changes
+    fetch(`${process.env.REACT_APP_BACKEND_URL}/orders/`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+      },
+      credentials: 'include',
+    })
+      .then((result) => result.json())
+      .then((data) => {
+        // Check if data is an array
+        if (!Array.isArray(data)) {
+          console.error('Expected array but received:', typeof data);
+          setRowData([]);
+          return;
+        }
+
+        // transform each order of JSON into flat object for table
+        const transformedData = data.map((order) => ({
+          orderId: order.order_id,
+          orderName: order.items.item_name,
+          status: order.status,
+          priorityLevel: order.priority_level,
+          description: order.order_description,
+          price: order.total_cost,
+          link: order.items.order_link,
+          trackingNumber: order.tracking_number,
+          requestDate: order.request_date,
+          specialization: order.users.specialization,
+          program: order.programs.program_title,
+          therapistName: `${order.users.firstname} ${order.users.lastname}`,
+          ppu: order.items.price_per_unit,
+          quantity: order.quantity,
+          requestor_id: order.requestor_id,
+        }));
+        setRowData(transformedData);
+      })
+      .catch((error) => {
+        console.error('Error fetching orders:', error);
+        setRowData([]);
+      });
+  }, [orderVersion]); // Add orderVersion as a dependency
+  // makes columns fit to width of the grid, no overflow/scrolling
+  const autoSizeStrategy = useMemo(() => {
+    return {
+      type: 'fitGridWidth',
+      defaultMinWidth: 65,
+      columnLimits: [
+        // can specify minimum widths for certain columns
+        {
+          colId: 'orderName',
+          minWidth: 185,
+        },
+      ],
+    };
+  }, []);
+  // the component we are actually returning
+  return (
+    <div style={{ padding: '20px' }}>
+      {/* The actual order table */}
+      <div className='ag-theme-quartz' style={{ height: '500px' }}>
+        <AgGridReact
+          rowData={rowData}
+          defaultColDef={defaultColDef}
+          columnDefs={colDefs}
+          rowHeight={50}
+          autoSizeStrategy={autoSizeStrategy}
+        />
+      </div>
+      {showCancelConfirm && (
+        <CancelOrder
+          open={true}
+          onConfirm={async () => {
+            // Fix 2: Add API call to backend
+            try {
+              await fetch(
+                `${process.env.REACT_APP_BACKEND_URL}/therapist/order/${pendingRow.params.data.orderId}`,
+                {
+                  method: 'DELETE',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+                  },
+                  credentials: 'include',
+                }
+              );
+
+              // Fix 3: Update row data with new 'cancel' status
+              if (pendingRow) {
+                const updatedData = rowData.map((row) =>
+                  row.orderId === pendingRow.params.data.orderId
+                    ? { ...row, status: 'cancel' }
+                    : row
+                );
+                setRowData(updatedData);
+                pendingRow.params.api.refreshCells({
+                  rowNodes: [pendingRow.params.node],
+                });
+              }
+            } catch (error) {
+              console.error('Error cancelling order:', error);
+            }
+            setShowCancelConfirm(false);
+            setPendingRow(null);
+          }}
+          onCancel={() => {
+            // Revert the status to its previous value
+            if (pendingRow) {
+              const updatedData = rowData.map((row) =>
+                row.orderId === pendingRow.params.data.orderId
+                  ? { ...row, status: pendingRow.prev }
+                  : row
+              );
+              setRowData(updatedData);
+              pendingRow.params.api.refreshCells({
+                rowNodes: [pendingRow.params.node],
+              });
+            }
+            setShowCancelConfirm(false);
+            setPendingRow(null);
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/common/components/ProgramBudgetList.jsx b/src/common/components/ProgramBudgetList.jsx
new file mode 100644
index 00000000..bd33ecd4
--- /dev/null
+++ b/src/common/components/ProgramBudgetList.jsx
@@ -0,0 +1,168 @@
+import { useUser } from 'common/contexts/UserContext';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+const BudgetListContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin: 1rem auto;
+  width: 100%;
+  max-width: 1000px;
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  padding: 1rem;
+  justify-content: space-evenly;
+`;
+
+const BudgetHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  h2 {
+    color: #333;
+    font-weight: 700;
+    text-align: left;
+  }
+`;
+
+const BudgetButton = styled.button`
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+  background-color: var(--green-9);
+  border-radius: 6px;
+  border: none;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  margin-top: 0.5rem;
+  align-self: flex-start;
+`;
+
+const BudgetGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+`;
+
+const BudgetCard = styled.div`
+  padding: 0.75rem;
+  background-color: #f9fafb;
+  border-radius: 8px;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .program-title {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    color: #555;
+    text-align: center;
+  }
+
+  .budget-amount {
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: var(--green-9, #2e7d32);
+  }
+`;
+
+const StatusMessage = styled.div`
+  margin-top: 0.75rem;
+  color: ${(props) => (props.error ? 'red' : '#666')};
+  font-style: italic;
+`;
+
+export default function ProgramBudgetList({ onSetBudgetClick }) {
+  const { user } = useUser();
+  const [programBudgets, setProgramBudgets] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchProgramBudgets = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await fetch(
+          `${process.env.REACT_APP_BACKEND_URL}/budget`,
+          {
+            method: 'GET',
+            credentials: 'include',
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+            },
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error(`Could not get budgets! Status: ${response.status}`);
+        }
+
+        const programs = await response.json();
+        setProgramBudgets(programs);
+      } catch (err) {
+        setError(`Error fetching budgets: ${err.message}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProgramBudgets();
+  }, []);
+
+  if (loading) {
+    return <StatusMessage>Loading program budgets...</StatusMessage>;
+  }
+
+  if (error) {
+    return <StatusMessage error>{error}</StatusMessage>;
+  }
+
+  if (programBudgets.length === 0) {
+    return <StatusMessage>No program budgets available</StatusMessage>;
+  }
+
+  // Check if user is admin to determine whether to show the button
+  const isAdmin = user && user.position_title === 'admin';
+
+  return (
+    <BudgetListContainer>
+      <BudgetHeader>
+        <h2>Budget</h2>
+        {isAdmin && onSetBudgetClick && (
+          <BudgetButton onClick={onSetBudgetClick}>Set Budget</BudgetButton>
+        )}
+      </BudgetHeader>
+      <BudgetGrid>
+        {programBudgets.map((program) => {
+          // Helper function to capitalize first letter
+          const capitalizeFirstLetter = (string) => {
+            if (!string) return 'Unknown Program';
+            return string.charAt(0).toUpperCase() + string.slice(1);
+          };
+          return (
+            <BudgetCard key={program.program_id}>
+              <div className='program-title'>
+                {capitalizeFirstLetter(program.program_title)}
+              </div>
+              <div className='budget-amount'>
+                ${parseFloat(program.program_budget).toFixed(2)}
+              </div>
+            </BudgetCard>
+          );
+        })}
+      </BudgetGrid>
+    </BudgetListContainer>
+  );
+}
diff --git a/src/common/components/Users/UsersList.jsx b/src/common/components/Users/UsersList.jsx
deleted file mode 100644
index d4b330dd..00000000
--- a/src/common/components/Users/UsersList.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import styled from 'styled-components';
-
-const UsersContainer = styled.div`
-  margin-top: 2rem;
-  width: 100%;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-`;
-
-const UserCard = styled.div`
-  padding: 1rem;
-  margin-bottom: 1rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-`;
-
-const UserInfo = styled.div`
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-`;
-
-const UserName = styled.h3`
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-`;
-
-const UserEmail = styled.p`
-  margin: 0;
-  color: #666;
-`;
-
-const ErrorMessage = styled.div`
-  color: #e53e3e;
-  padding: 1rem;
-  text-align: center;
-`;
-
-const LoadingMessage = styled.div`
-  text-align: center;
-  padding: 1rem;
-`;
-
-export default function UsersList() {
-  const [users, setUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const fetchUsers = async () => {
-      try {
-        const token = localStorage.getItem('authToken');
-        const response = await fetch(
-          `${process.env.REACT_APP_BACKEND_URL}/auth/users`,
-          {
-            credentials: 'include',
-            headers: {
-              Authorization: `Bearer ${token}`,
-            },
-          }
-        );
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch users');
-        }
-
-        const data = await response.json();
-        setUsers(data);
-      } catch (err) {
-        setError(err.message);
-        console.error('Error fetching users:', err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchUsers();
-  }, []);
-
-  if (loading) {
-    return <LoadingMessage>Loading users...</LoadingMessage>;
-  }
-
-  if (error) {
-    return <ErrorMessage>Error: {error}</ErrorMessage>;
-  }
-
-  return (
-    <UsersContainer>
-      {users.map((user) => (
-        <UserCard key={user.email}>
-          <UserInfo>
-            <div>
-              <UserName>
-                {user.firstname} {user.lastname} (
-                {user.username || 'No username'})
-              </UserName>
-              <UserEmail>{user.email}</UserEmail>
-            </div>
-          </UserInfo>
-        </UserCard>
-      ))}
-    </UsersContainer>
-  );
-}
diff --git a/src/common/components/Users/UsersList/UsersList.jsx b/src/common/components/Users/UsersList/UsersList.jsx
new file mode 100644
index 00000000..0adfb7da
--- /dev/null
+++ b/src/common/components/Users/UsersList/UsersList.jsx
@@ -0,0 +1,244 @@
+import React, { useEffect, useState } from 'react';
+import { format } from 'date-fns';
+import { useUser } from 'common/contexts/UserContext';
+import {
+  UsersContainer,
+  Table,
+  Th,
+  Td,
+  Select,
+  ActionButton,
+  ModalOverlay,
+  ModalContent,
+  ModalButtons,
+  ModalButton,
+  ErrorMessage,
+  LoadingMessage,
+  StatusBadge,
+} from './UsersListStyles';
+const SPECIALIZATION_OPTIONS = {
+  admin: ['standard_admin', 'super_admin'],
+  therapist: ['art', 'music', 'dance', 'drama'],
+};
+
+export default function UsersList() {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [userToDelete, setUserToDelete] = useState(null);
+  const { user: currentUser } = useUser();
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const fetchUsers = async () => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await fetch(
+        `${process.env.REACT_APP_BACKEND_URL}/admin/users`,
+        {
+          credentials: 'include',
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch users');
+      }
+
+      const data = await response.json();
+      setUsers(data);
+    } catch (err) {
+      setError(err.message);
+      console.error('Error fetching users:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSpecializationChange = async (userId, newSpecialization) => {
+    try {
+      const token = localStorage.getItem('authToken');
+      const response = await fetch(
+        `${process.env.REACT_APP_BACKEND_URL}/admin/users/${userId}`,
+        {
+          method: 'PUT',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ specialization: newSpecialization }),
+        }
+      );
+      console.log('Response:', response);
+
+      if (!response.ok) {
+        throw new Error('Failed to update specialization');
+      }
+
+      setUsers(
+        users.map((user) =>
+          user.id === userId
+            ? { ...user, specialization: newSpecialization }
+            : user
+        )
+      );
+    } catch (err) {
+      console.error('Error updating specialization:', err);
+      setError(err.message);
+    }
+  };
+
+  const handleStatusChange = async (userId, newStatus) => {
+    try {
+      const token = localStorage.getItem('authToken');
+
+      const response = await fetch(
+        `${process.env.REACT_APP_BACKEND_URL}/admin/users/${userId}`,
+        {
+          method: 'PUT',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ approved: newStatus }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to update user status');
+      }
+
+      setUsers(
+        users.map((user) =>
+          user.id === userId ? { ...user, approved: newStatus } : user
+        )
+      );
+      setDeleteModalOpen(false);
+      setUserToDelete(null);
+    } catch (err) {
+      console.error('Error updating user status:', err);
+      setError(err.message);
+    }
+  };
+
+  const handleDeleteClick = (user) => {
+    setUserToDelete(user);
+    setDeleteModalOpen(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    await handleStatusChange(userToDelete.id, false);
+  };
+
+  const handleReactivateClick = async (user) => {
+    await handleStatusChange(user.id, true);
+  };
+
+  if (loading) {
+    return <LoadingMessage>Loading users...</LoadingMessage>;
+  }
+
+  if (error) {
+    return <ErrorMessage>Error: {error}</ErrorMessage>;
+  }
+
+  return (
+    <UsersContainer>
+      <Table>
+        <thead>
+          <tr>
+            <Th>Username</Th>
+            <Th>Name</Th>
+            <Th>Position</Th>
+            <Th>Specialization</Th>
+            <Th>Status</Th>
+            <Th>Created At</Th>
+            <Th>Actions</Th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user) => (
+            <tr key={user.id}>
+              <Td>{user.username || 'No username'}</Td>
+              <Td>{`${user.firstname} ${user.lastname}`}</Td>
+              <Td>{user.position_title}</Td>
+              <Td>
+                <Select
+                  value={user.specialization}
+                  onChange={(e) =>
+                    handleSpecializationChange(user.id, e.target.value)
+                  }
+                >
+                  {SPECIALIZATION_OPTIONS[user.position_title]?.map(
+                    (option) => (
+                      <option key={option} value={option}>
+                        {option}
+                      </option>
+                    )
+                  )}
+                </Select>
+              </Td>
+              <Td>
+                <StatusBadge $approved={user.approved}>
+                  {user.approved ? 'Approved' : 'Not Approved'}
+                </StatusBadge>
+              </Td>
+              <Td>{format(new Date(user.created_at), 'MMM d, yyyy HH:mm')}</Td>
+              <Td>
+                {user.approved ? (
+                  <ActionButton
+                    onClick={() => handleDeleteClick(user)}
+                    $disabled={user.id === currentUser.id}
+                    title={
+                      user.id === currentUser.id
+                        ? 'You cannot deactivate your own account'
+                        : 'Deactivate user'
+                    }
+                  >
+                    Deactivate
+                  </ActionButton>
+                ) : (
+                  <ActionButton
+                    onClick={() => handleReactivateClick(user)}
+                    $reactivate
+                    title='Reactivate user'
+                  >
+                    Reactivate
+                  </ActionButton>
+                )}
+              </Td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+
+      {deleteModalOpen && (
+        <ModalOverlay>
+          <ModalContent>
+            <h3>Confirm Deactivation</h3>
+            <p>
+              Are you sure you want to deactivate {userToDelete?.username}? The
+              user`s approved status will be set to false, and the user will no
+              longer be able to place orders.
+            </p>
+            <ModalButtons>
+              <ModalButton onClick={() => setDeleteModalOpen(false)}>
+                Cancel
+              </ModalButton>
+              <ModalButton $primary onClick={handleDeleteConfirm}>
+                Deactivate
+              </ModalButton>
+            </ModalButtons>
+          </ModalContent>
+        </ModalOverlay>
+      )}
+    </UsersContainer>
+  );
+}
diff --git a/src/common/components/Users/UsersList/UsersListStyles.js b/src/common/components/Users/UsersList/UsersListStyles.js
new file mode 100644
index 00000000..75ada03f
--- /dev/null
+++ b/src/common/components/Users/UsersList/UsersListStyles.js
@@ -0,0 +1,137 @@
+import styled from 'styled-components';
+
+const UsersContainer = styled.div`
+  margin-top: 2rem;
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+const Table = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+`;
+
+const Th = styled.th`
+  padding: 1rem;
+  text-align: left;
+  border-bottom: 2px solid #e2e8f0;
+  background-color: #f8fafc;
+`;
+
+const Td = styled.td`
+  padding: 1rem;
+  border-bottom: 1px solid #e2e8f0;
+`;
+
+const Select = styled.select`
+  padding: 0.5rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+`;
+
+const ActionButton = styled.button`
+  padding: 0.5rem 1rem;
+  background-color: ${props => {
+    if (props.$disabled) return '#cbd5e1';
+    return props.$reactivate ? '#059669' : '#ef4444';
+  }};
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
+  opacity: ${props => props.$disabled ? '0.7' : '1'};
+  &:hover {
+    background-color: ${props => {
+      if (props.$disabled) return '#cbd5e1';
+      return props.$reactivate ? '#047857' : '#dc2626';
+    }};
+  }
+`;
+
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+
+const ModalContent = styled.div`
+  background-color: white;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  max-width: 400px;
+  width: 100%;
+`;
+
+const ModalButtons = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  margin-top: 1rem;
+`;
+
+const ModalButton = styled.button`
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  border: none;
+  ${props => props.$primary ? `
+    background-color: #ef4444;
+    color: white;
+    &:hover {
+      background-color: #dc2626;
+    }
+  ` : `
+    background-color: #e2e8f0;
+    &:hover {
+      background-color: #cbd5e1;
+    }
+  `}
+`;
+
+const ErrorMessage = styled.div`
+  color: #e53e3e;
+  padding: 1rem;
+  text-align: center;
+`;
+
+const LoadingMessage = styled.div`
+  text-align: center;
+  padding: 1rem;
+`;
+
+const StatusBadge = styled.span`
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: ${props => props.$approved ? '#dcfce7' : '#fee2e2'};
+  color: ${props => props.$approved ? '#166534' : '#991b1b'};
+`;
+
+export {
+  UsersContainer,
+  Table,
+  Th,
+  Td,
+  Select,
+  ActionButton,
+  ModalOverlay,
+  ModalContent,
+  ModalButtons,
+  ModalButton,
+  ErrorMessage,
+  LoadingMessage,
+  StatusBadge
+};
\ No newline at end of file
diff --git a/src/common/components/admin_modals/ItemArrivedConfirm.jsx b/src/common/components/admin_modals/ItemArrivedConfirm.jsx
new file mode 100644
index 00000000..1e608e79
--- /dev/null
+++ b/src/common/components/admin_modals/ItemArrivedConfirm.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import YNPopup from 'common/components/templates/YNPopup/YNPopup';
+
+export default function ItemArrivedConfirm({ open, onCancel, onConfirm }) {
+  return (
+    <YNPopup
+      open={open}
+      title='Item Arrived Confirmation'
+      description='Item Arrived?'
+      buttonText='Item Arrived Confirmation'
+      yesText='Confirm'
+      noText='Cancel'
+      yesOnClick={() => {
+        if (onConfirm) onConfirm();
+      }}
+      noOnClick={() => {
+        if (onCancel) onCancel();
+      }}
+    />
+  );
+}
+
+ItemArrivedConfirm.propTypes = {
+  open: PropTypes.bool,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+ItemArrivedConfirm.defaultProps = {
+  open: false,
+  onConfirm: () => {},
+  onCancel: () => {},
+};
diff --git a/src/common/components/admin_modals/ItemPendingConfirm.jsx b/src/common/components/admin_modals/ItemPendingConfirm.jsx
new file mode 100644
index 00000000..2084158c
--- /dev/null
+++ b/src/common/components/admin_modals/ItemPendingConfirm.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import YNPopup from 'common/components/templates/YNPopup/YNPopup';
+
+export default function ItemPendingConfirm({ open, onCancel, onConfirm }) {
+  return (
+    <YNPopup
+      open={open}
+      title='Item Review Confirmation'
+      description="Change item's status to pending?"
+      buttonText='Item Review Confirmation'
+      yesText='Confirm'
+      noText='Cancel'
+      yesOnClick={() => {
+        if (onConfirm) onConfirm();
+      }}
+      noOnClick={() => {
+        if (onCancel) onCancel();
+      }}
+    />
+  );
+}
+
+ItemPendingConfirm.propTypes = {
+  open: PropTypes.bool,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+ItemPendingConfirm.defaultProps = {
+  open: false,
+  onConfirm: () => {},
+  onCancel: () => {},
+};
diff --git a/src/common/components/admin_modals/ItemReadyConfirm.jsx b/src/common/components/admin_modals/ItemReadyConfirm.jsx
new file mode 100644
index 00000000..fbcab0ee
--- /dev/null
+++ b/src/common/components/admin_modals/ItemReadyConfirm.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import YNPopup from 'common/components/templates/YNPopup/YNPopup';
+
+export default function ItemReadyConfirm({ open, onCancel, onConfirm }) {
+  return (
+    <YNPopup
+      open={open}
+      title='Item Ready Confirmation'
+      description='Item ready for pick up?'
+      buttonText='Item Ready Confirmation'
+      yesText='Confirm'
+      noText='Cancel'
+      yesOnClick={() => {
+        if (onConfirm) onConfirm();
+      }}
+      noOnClick={() => {
+        if (onCancel) onCancel();
+      }}
+    />
+  );
+}
+
+ItemReadyConfirm.propTypes = {
+  open: PropTypes.bool,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+ItemReadyConfirm.defaultProps = {
+  open: false,
+  onConfirm: () => {},
+  onCancel: () => {},
+};
diff --git a/src/common/components/admin_modals/NewAdmin.jsx b/src/common/components/admin_modals/NewAdmin.jsx
new file mode 100644
index 00000000..a478efc6
--- /dev/null
+++ b/src/common/components/admin_modals/NewAdmin.jsx
@@ -0,0 +1,112 @@
+import FormPopup from 'common/components/templates/FormPopup/FormPopup';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import React, { useState } from 'react';
+import {
+  ButtonContainer,
+  CancelButton,
+  InputField,
+  Label,
+  StyledButton,
+} from './NewAdminStyles';
+
+export default function NewAdmin({ open, onCancel, onConfirm }) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState('');
+  const [firstname, setFirstname] = useState('');
+  const [lastname, setLastname] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const specialization = 'standard_admin';
+    const position = 'admin';
+    onConfirm({
+      email,
+      password,
+      username,
+      firstname,
+      lastname,
+      specialization,
+      position,
+    });
+  };
+
+  return (
+    <FormPopup
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onCancel();
+      }}
+      title='Add New Admin'
+      description='Please choose a role and provide your credentials'
+      customForm={true}
+    >
+      <Label>
+        First Name:
+        <span style={{ color: 'red' }}>*</span>
+      </Label>
+      <InputField
+        type='text'
+        value={firstname}
+        onChange={(e) => setFirstname(e.target.value)}
+        placeholder='Enter first name'
+        required
+      />
+
+      <Label>
+        Last Name:
+        <span style={{ color: 'red' }}>*</span>
+      </Label>
+      <InputField
+        type='text'
+        value={lastname}
+        onChange={(e) => setLastname(e.target.value)}
+        placeholder='Enter last name'
+        required
+      />
+
+      <Label>
+        Email:
+        <span style={{ color: 'red' }}>*</span>
+      </Label>
+      <InputField
+        type='email'
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder='admin@example.com'
+        required
+      />
+
+      <Label>
+        Password:
+        <span style={{ color: 'red' }}>*</span>
+      </Label>
+      <InputField
+        type='password'
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder='Enter secure password'
+        required
+      />
+
+      <ButtonContainer>
+        <CancelButton type='button' onClick={onCancel}>
+          Cancel
+        </CancelButton>
+
+        <Dialog.Close asChild>
+          <StyledButton type='submit' onClick={handleSubmit}>
+            Create Admin
+          </StyledButton>
+        </Dialog.Close>
+      </ButtonContainer>
+    </FormPopup>
+  );
+}
+
+NewAdmin.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};
diff --git a/src/common/components/admin_modals/NewAdminConfirm.jsx b/src/common/components/admin_modals/NewAdminConfirm.jsx
new file mode 100644
index 00000000..d1ee43a5
--- /dev/null
+++ b/src/common/components/admin_modals/NewAdminConfirm.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import YNPopup from 'common/components/templates/YNPopup/YNPopup';
+
+export default function NewAdminConfirm() {
+  return (
+    <YNPopup
+      title='New Admin Confirmation'
+      description='Are you sure you want to make [Admin User] a new Admin?'
+      buttonText='New Admin Confirmation'
+      yesText='Confirm'
+    />
+  );
+}
diff --git a/src/common/components/admin_modals/NewAdminStyles.js b/src/common/components/admin_modals/NewAdminStyles.js
new file mode 100644
index 00000000..9b23c59a
--- /dev/null
+++ b/src/common/components/admin_modals/NewAdminStyles.js
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+  &:hover {
+    background-color: var(--green-5);
+  }
+`;
+
+const InputField = styled.input`
+  width: 100%;
+  border-radius: 4px;
+  padding: 10px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: black;
+  border: solid 2px var(--text);
+  height: 40px;
+  margin-bottom: 20px;
+`;
+
+const Label = styled.label`
+  display: block;
+  font-size: 15px;
+  color: black;
+  margin-bottom: 10px;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const CancelButton = styled(StyledButton)`
+  background-color: var(--red-4);
+  color: var(--red-11);
+`;
+
+export { ButtonContainer, CancelButton, InputField, Label, StyledButton };
diff --git a/src/common/components/admin_modals/NewMonthlyBudget.jsx b/src/common/components/admin_modals/NewMonthlyBudget.jsx
new file mode 100644
index 00000000..cbf76ff1
--- /dev/null
+++ b/src/common/components/admin_modals/NewMonthlyBudget.jsx
@@ -0,0 +1,132 @@
+import * as Select from '@radix-ui/react-select';
+import Dropdown, {
+  StyledLabel,
+  StyledSelectItem,
+} from 'common/components/templates/Dropdown/Dropdown';
+import FormPopup from 'common/components/templates/FormPopup/FormPopup';
+import { Dialog } from 'radix-ui';
+import React, { useEffect, useState } from 'react';
+import { StyledButton } from './NewMonthlyBudgetStyles';
+
+const Programs = [
+  {
+    label: 'programs',
+    items: [
+      { label: 'Community', value: '0d3605b4-cb25-4874-ad4b-e6041aabe5f1' },
+      { label: 'Private', value: '0d5c4507-ddbb-4011-a8a5-5d51279d8edb' },
+      {
+        label: 'Creative Knowledge Center',
+        value: '4a7f12b8-c64d-4138-93ad-92f853f03fb7',
+      },
+      { label: 'School', value: '87f6bdcb-8c62-4f34-9455-eda35a28990e' },
+    ],
+  },
+];
+
+export default function NewMonthlyBudget({ onCancel, onConfirm }) {
+  const [budget, setBudget] = useState('$');
+  const [programID, setProgramID] = useState('');
+
+  useEffect(() => {
+    console.log('Selected Program (updated):', programID);
+  }, [programID]);
+
+  const handleBudgetChange = (e) => {
+    let value = e.target.value;
+
+    if (!value.startsWith('$')) {
+      value = '$' + value;
+    }
+    if (/^\$\d*\.?\d{0,2}$/.test(value) || value === '$') {
+      setBudget(value);
+    }
+  };
+
+  const handleProgramChange = (newValue) => {
+    setProgramID(newValue);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (budget === '$' || programID === '') {
+      alert('Please enter a valid budget and select a program.');
+      return;
+    }
+    const numericBudget = parseFloat(budget.replace(/[$,]/g, ''));
+    console.log('New Monthly Budget:', numericBudget);
+    console.log('Selected Program:', programID);
+
+    setBudget('$');
+    setProgramID('');
+    onConfirm({ budget: numericBudget, programID });
+  };
+
+  return (
+    <FormPopup
+      open={true}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onCancel();
+      }}
+      title='New Monthly Budget'
+      customForm={true}
+      description={null}
+      noDesc={true}
+    >
+      <label
+        style={{
+          display: 'block',
+          fontSize: '15px',
+          color: 'black',
+          marginBottom: '10px',
+        }}
+      >
+        Please enter new monthly budget:
+        <span style={{ color: 'red' }}>*</span>
+      </label>
+      <input
+        type='text'
+        value={budget}
+        onChange={handleBudgetChange}
+        placeholder='$0.00'
+        style={{
+          width: '100%',
+          borderRadius: '4px',
+          padding: '10px',
+          fontSize: '15px',
+          lineHeight: '1.5',
+          color: 'black',
+          border: 'solid 2px var(--text)',
+          height: '40px',
+          marginBottom: '20px',
+        }}
+      />
+      <Dropdown
+        styles={{ border: '1px solid black' }}
+        placeholder='Program'
+        onValueChange={handleProgramChange}
+        value={programID}
+      >
+        {Programs.map((group, i) => {
+          return (
+            <Select.Group key={`group-${i}`}>
+              <StyledLabel>{group.label}</StyledLabel>
+              {group.items.map((item) => (
+                <StyledSelectItem value={item.value} key={item.value}>
+                  {item.label}
+                </StyledSelectItem>
+              ))}
+            </Select.Group>
+          );
+        })}
+      </Dropdown>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Dialog.Close asChild>
+          <StyledButton type='submit' onClick={handleSubmit}>
+            Submit
+          </StyledButton>
+        </Dialog.Close>
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/src/common/components/admin_modals/NewMonthlyBudgetStyles.js b/src/common/components/admin_modals/NewMonthlyBudgetStyles.js
new file mode 100644
index 00000000..ef5c9aa8
--- /dev/null
+++ b/src/common/components/admin_modals/NewMonthlyBudgetStyles.js
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+  &:hover {
+    background-color: var(--green-5);
+  }
+`;
diff --git a/src/common/components/admin_modals/OrderApprovalConfirm.jsx b/src/common/components/admin_modals/OrderApprovalConfirm.jsx
new file mode 100644
index 00000000..b183877a
--- /dev/null
+++ b/src/common/components/admin_modals/OrderApprovalConfirm.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import YNPopup from 'common/components/templates/YNPopup/YNPopup';
+
+export default function OrderApprovalConfirm({ open, onApprove, onCancel }) {
+  return (
+    <YNPopup
+      open={open} // controlled open prop
+      title='Order Approval Confirmation'
+      description='Approve this order?'
+      yesText='Approve'
+      noText='Cancel'
+      no
+      yesOnClick={() => {
+        if (onApprove) onApprove();
+      }}
+      noOnClick={() => {
+        if (onCancel) onCancel();
+      }}
+    />
+  );
+}
+
+OrderApprovalConfirm.propTypes = {
+  open: PropTypes.bool,
+  onApprove: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+OrderApprovalConfirm.defaultProps = {
+  open: false,
+  onApprove: () => {},
+  onCancel: () => {},
+};
diff --git a/src/common/components/admin_modals/OrderDenyConfirm.jsx b/src/common/components/admin_modals/OrderDenyConfirm.jsx
new file mode 100644
index 00000000..87f5d3db
--- /dev/null
+++ b/src/common/components/admin_modals/OrderDenyConfirm.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import YNPopup from 'common/components/templates/YNPopup/YNPopup';
+
+export default function OrderApprovalConfirm({ open, onDeny, onCancel }) {
+  return (
+    <YNPopup
+      open={open} // controlled open prop
+      title='Deny Approval Confirmation'
+      description='Deny this order?'
+      yesText='Deny'
+      yesColor='red'
+      noColor='blue'
+      noText='Cancel'
+      yesOnClick={() => {
+        if (onDeny) onDeny();
+      }}
+      noOnClick={() => {
+        if (onCancel) onCancel();
+      }}
+    />
+  );
+}
+
+OrderApprovalConfirm.propTypes = {
+  open: PropTypes.bool,
+  onDeny: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+OrderApprovalConfirm.defaultProps = {
+  open: false,
+  onDeny: () => {},
+  onCancel: () => {},
+};
diff --git a/src/common/components/admin_modals/OrderTrackingNumber.jsx b/src/common/components/admin_modals/OrderTrackingNumber.jsx
new file mode 100644
index 00000000..f326c092
--- /dev/null
+++ b/src/common/components/admin_modals/OrderTrackingNumber.jsx
@@ -0,0 +1,59 @@
+import { Dialog } from 'radix-ui';
+import React, { useState } from 'react';
+
+import FormPopup from 'common/components/templates/FormPopup/FormPopup';
+import { StyledButton } from './OrderTrackingNumberStyles';
+
+export default function OrderTrackingNumber() {
+  const [trackingNumber, setTrackingNumber] = useState('');
+
+  const handleTrackingNumberChange = (e) => {
+    let value = e.target.value;
+
+    if (/^[a-zA-Z0-9]*$/.test(value) || value === '') {
+      setTrackingNumber(value);
+    }
+  };
+
+  return (
+    <FormPopup
+      title='Order Tracking Number'
+      buttonText='Order Tracking Number'
+      customForm={true}
+    >
+      <label
+        style={{
+          display: 'block',
+          fontSize: '15px',
+          color: 'black',
+          marginBottom: '10px',
+        }}
+      >
+        Please enter your tracking number:
+        <span style={{ color: 'red' }}>*</span>
+      </label>
+      <input
+        type='text'
+        value={trackingNumber}
+        onChange={handleTrackingNumberChange}
+        placeholder='xxx-xxx-xxx'
+        style={{
+          width: '100%',
+          borderRadius: '4px',
+          padding: '10px',
+          fontSize: '15px',
+          lineHeight: '1.5',
+          color: 'black',
+          border: 'solid 2px var(--text)',
+          height: '40px',
+          marginBottom: '20px',
+        }}
+      />
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Dialog.Close asChild>
+          <StyledButton type='submit'>Submit</StyledButton>
+        </Dialog.Close>
+      </div>
+    </FormPopup>
+  );
+}
diff --git a/src/common/components/admin_modals/OrderTrackingNumberStyles.js b/src/common/components/admin_modals/OrderTrackingNumberStyles.js
new file mode 100644
index 00000000..ef5c9aa8
--- /dev/null
+++ b/src/common/components/admin_modals/OrderTrackingNumberStyles.js
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+  background-color: var(--green-4);
+  color: var(--green-11);
+  outline-color: var(--green-7);
+  &:hover {
+    background-color: var(--green-5);
+  }
+`;
diff --git a/src/common/components/admin_modals/ReasonForDenial.jsx b/src/common/components/admin_modals/ReasonForDenial.jsx
new file mode 100644
index 00000000..5a75ea56
--- /dev/null
+++ b/src/common/components/admin_modals/ReasonForDenial.jsx
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+import FormPopup from 'common/components/templates/FormPopup/FormPopup';
+import { TextAreaContainer } from './ReasonForDenialStyles';
+
+export default function ReasonForDenial({
+  open,
+  onSubmit,
+  onCancel,
+  textAreaPlaceholder = 'This order is being denied because...',
+}) {
+  const [reasonForDenial, setReasonForDenial] = useState('');
+  const handleReasonForDenialChange = (e) => setReasonForDenial(e.target.value);
+
+  return (
+    <FormPopup
+      open={open}
+      title='Reason for Denial'
+      description='Please enter the reason for denial'
+      buttonText='Submit Reason'
+      onSubmit={() => {
+        if (onSubmit) onSubmit(reasonForDenial);
+      }}
+      cancelOnClick={() => {
+        if (onCancel) onCancel();
+      }}
+    >
+      <TextAreaContainer>
+        <textarea
+          id='reasonForDenial'
+          value={reasonForDenial}
+          onChange={handleReasonForDenialChange}
+          placeholder={textAreaPlaceholder}
+        />
+      </TextAreaContainer>
+    </FormPopup>
+  );
+}
+
+ReasonForDenial.propTypes = {
+  textAreaPlaceholder: PropTypes.string,
+  open: PropTypes.bool,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+ReasonForDenial.defaultProps = {
+  textAreaPlaceholder: 'This order is being denied because...',
+  open: false,
+  onCancel: () => {},
+};
diff --git a/src/common/components/admin_modals/ReasonForDenialStyles.js b/src/common/components/admin_modals/ReasonForDenialStyles.js
new file mode 100644
index 00000000..0cf2ccbe
--- /dev/null
+++ b/src/common/components/admin_modals/ReasonForDenialStyles.js
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+    background-color: white;
+  }
+`;
diff --git a/src/common/components/form/Button.js b/src/common/components/form/Button.js
new file mode 100644
index 00000000..a14a6bbf
--- /dev/null
+++ b/src/common/components/form/Button.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+const ButtonBase = styled.button`
+  font-size: 0.8em;
+  padding: 8px 20px;
+  border-radius: 5px;
+  border: solid 1px var(--text);
+  color: var(--text);
+  cursor: pointer;
+`;
+
+const ButtonPrimary = styled(ButtonBase)`
+  background-color: var(--primary-green);
+  border-color: var(--primary-green);
+  color: var(--white);
+`;
+
+const ButtonSecondary = styled(ButtonBase)`
+  background-color: var(--secondary-lightgrey);
+  border-color: var(--text);
+`;
+
+const ButtonTransparent = styled(ButtonBase)`
+  background-color: transparent;
+`;
+
+const ButtonInvisible = styled(ButtonBase)`
+  background-color: transparent;
+  border-color: transparent;
+`;
+
+export const Button = {
+  Primary: ButtonPrimary,
+  Secondary: ButtonSecondary,
+  Transparent: ButtonTransparent,
+  Invisible: ButtonInvisible,
+};
diff --git a/src/common/components/form/CustomInput.jsx b/src/common/components/form/CustomInput.jsx
new file mode 100644
index 00000000..4192d374
--- /dev/null
+++ b/src/common/components/form/CustomInput.jsx
@@ -0,0 +1,127 @@
+// Created this component that is basically same as Input.jsx but we can edit width
+import React, { useState } from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const CustomInputContainer = styled.div`
+  margin-bottom: 25px;
+`;
+
+const CustomInputName = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+
+const CustomInputTitle = styled.span`
+  margin-right: 2px;
+`;
+
+const CustomRedSpan = styled.span`
+  color: red;
+`;
+
+const CustomStyledInput = styled.input`
+  font-size: 1rem;
+  padding: 8px;
+  border: solid 2px var(--text);
+  border-radius: 8px;
+  width: 100%;
+`;
+
+const CustomPasswordContainer = styled.div`
+  position: relative;
+  width: fit-content;
+`;
+
+const CustomIconContainer = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background-color: var(--white);
+  cursor: pointer;
+`;
+
+function CustomTitledInput({ title, required, children }) {
+  return (
+    <CustomInputContainer>
+      <CustomInputName>
+        <CustomInputTitle>{title}</CustomInputTitle>
+        {required && <CustomRedSpan>*</CustomRedSpan>}
+      </CustomInputName>
+      {children}
+    </CustomInputContainer>
+  );
+}
+
+CustomTitledInput.propTypes = {
+  title: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};
+
+const CustomInputPropTypes = {
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+function CustomTextField(props) {
+  props.placeholder ??= 'Text Here';
+  return <CustomStyledInput type='text' {...props} />;
+}
+
+CustomTextField.propTypes = CustomInputPropTypes;
+
+function CustomInputText({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomTextField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputText.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+function CustomPasswordField(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const toggleShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <CustomPasswordContainer>
+      <CustomStyledInput type={showPassword ? 'text' : 'password'} {...props} />
+      <CustomIconContainer onClick={toggleShowPassword}>
+        {showPassword ? '🙈' : '👁️'}
+      </CustomIconContainer>
+    </CustomPasswordContainer>
+  );
+}
+
+CustomPasswordField.propTypes = CustomInputPropTypes;
+
+function CustomInputPassword({ title, ...rest }) {
+  return (
+    <CustomTitledInput title={title} required={rest.required}>
+      <CustomPasswordField {...rest} />
+    </CustomTitledInput>
+  );
+}
+
+CustomInputPassword.propTypes = {
+  title: PropTypes.string.isRequired,
+  ...CustomInputPropTypes,
+};
+
+export const CustomInput = {
+  Text: CustomInputText,
+  Password: CustomInputPassword,
+};
diff --git a/src/common/components/form/Text.js b/src/common/components/form/Text.js
new file mode 100644
index 00000000..ab6dbe82
--- /dev/null
+++ b/src/common/components/form/Text.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Title = styled.h1`
+  font-size: 2.25em;
+  font-weight: bold;
+  margin: 0;
+`;
+
+export const Subtitle = styled.h2`
+  font-size: 1.5em;
+  margin: 0;
+  font-weight: normal;
+`;
diff --git a/src/common/components/form/styles.js b/src/common/components/form/styles.js
index cf88c1e5..c0d2a4ce 100644
--- a/src/common/components/form/styles.js
+++ b/src/common/components/form/styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Button } from 'common/components/Button';
+import { Button } from 'common/components/form/Button';
 
 export const InputContainer = styled.div``;
 
diff --git a/src/common/components/navigation/LogoutModal/LogoutModal.jsx b/src/common/components/navigation/LogoutModal/LogoutModal.jsx
new file mode 100644
index 00000000..794efda5
--- /dev/null
+++ b/src/common/components/navigation/LogoutModal/LogoutModal.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import {
+  ModalOverlay,
+  ModalContent,
+  Title,
+  Message,
+  ButtonContainer,
+  CancelButton,
+  LogoutButton,
+} from './LogoutModalStyles';
+
+const LogoutModal = ({ isOpen, onClose, onLogout }) => {
+  if (!isOpen) return null;
+
+  return (
+    <ModalOverlay onClick={onClose}>
+      <ModalContent onClick={(e) => e.stopPropagation()}>
+        <Title>Confirm Logout</Title>
+        <Message>Are you sure you want to log out?</Message>
+        <ButtonContainer>
+          <CancelButton onClick={onClose}>Cancel</CancelButton>
+          <LogoutButton onClick={onLogout}>Logout</LogoutButton>
+        </ButtonContainer>
+      </ModalContent>
+    </ModalOverlay>
+  );
+};
+
+LogoutModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+};
+
+export default LogoutModal;
diff --git a/src/common/components/navigation/LogoutModal.jsx b/src/common/components/navigation/LogoutModal/LogoutModalStyles.js
similarity index 58%
rename from src/common/components/navigation/LogoutModal.jsx
rename to src/common/components/navigation/LogoutModal/LogoutModalStyles.js
index b629d4eb..af438416 100644
--- a/src/common/components/navigation/LogoutModal.jsx
+++ b/src/common/components/navigation/LogoutModal/LogoutModalStyles.js
@@ -1,6 +1,3 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const ModalOverlay = styled.div`
@@ -65,27 +62,12 @@ const LogoutButton = styled(Button)`
   color: white;
 `;
 
-const LogoutModal = ({ isOpen, onClose, onLogout }) => {
-  if (!isOpen) return null;
-
-  return (
-    <ModalOverlay onClick={onClose}>
-      <ModalContent onClick={(e) => e.stopPropagation()}>
-        <Title>Confirm Logout</Title>
-        <Message>Are you sure you want to log out?</Message>
-        <ButtonContainer>
-          <CancelButton onClick={onClose}>Cancel</CancelButton>
-          <LogoutButton onClick={onLogout}>Logout</LogoutButton>
-        </ButtonContainer>
-      </ModalContent>
-    </ModalOverlay>
-  );
+export {
+  ModalOverlay,
+  ModalContent,
+  Title,
+  Message,
+  ButtonContainer,
+  CancelButton,
+  LogoutButton,
 };
-
-LogoutModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onLogout: PropTypes.func.isRequired,
-};
-
-export default LogoutModal;
diff --git a/src/common/components/navigation/NavBar.jsx b/src/common/components/navigation/NavBar.jsx
deleted file mode 100644
index e918e8ee..00000000
--- a/src/common/components/navigation/NavBar.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-
-import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { Button } from 'common/components/Button';
-import { useUser } from 'common/contexts/UserContext';
-
-import LogoutModal from './LogoutModal';
-
-const StyledNav = styled.nav`
-  display: flex;
-  gap: 10px;
-  padding: 10px 20px;
-  font-size: 20px;
-`;
-
-const LeftAligned = styled.div`
-  flex: 1;
-  display: flex;
-  gap: 10px;
-`;
-
-const LogoPlaceholder = styled(Button.Invisible)`
-  padding: 0;
-  font-size: 1.7rem;
-  font-weight: bold;
-  font-family: monospace;
-`;
-
-export default function NavBar() {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const navigate = useNavigate();
-  const { user, logout } = useUser();
-
-  const handleLogoutClick = () => {
-    setIsModalOpen(true);
-  };
-
-  const handleModalClose = () => {
-    setIsModalOpen(false);
-  };
-
-  const handleLogoutConfirm = async () => {
-    try {
-      await logout();
-      setIsModalOpen(false);
-      navigate('/', { replace: true });
-    } catch (error) {
-      console.error('Logout error:', error);
-    }
-  };
-
-  return (
-    <StyledNav>
-      <LeftAligned>
-        <LogoPlaceholder onClick={() => navigate('/')}>[LOGO]</LogoPlaceholder>
-      </LeftAligned>
-      {user ? (
-        <Button.Secondary onClick={handleLogoutClick}>Log Out</Button.Secondary>
-      ) : (
-        <>
-          <Button.Primary onClick={() => navigate('/signup')}>
-            Sign Up
-          </Button.Primary>
-          <Button.Secondary onClick={() => navigate('/login')}>
-            Login
-          </Button.Secondary>
-        </>
-      )}
-      <LogoutModal
-        isOpen={isModalOpen}
-        onClose={handleModalClose}
-        onLogout={handleLogoutConfirm}
-      />
-    </StyledNav>
-  );
-}
diff --git a/src/common/components/navigation/Navbar/NavBar.jsx b/src/common/components/navigation/Navbar/NavBar.jsx
new file mode 100644
index 00000000..0056dac9
--- /dev/null
+++ b/src/common/components/navigation/Navbar/NavBar.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+import 'App.css';
+import { useNavigate } from 'react-router-dom';
+import { useUser } from 'common/contexts/UserContext';
+import {
+  StyledNav,
+  LeftAligned,
+  RightAligned,
+  LogoPlaceholder,
+  NavLink,
+} from './NavbarStyles';
+
+export default function NavBar() {
+  const navigate = useNavigate();
+  const { user } = useUser();
+
+  //if log in, show account seeting, if not, show log in. no setup.
+  const handleNavigation = () => {
+    navigate('/settings');
+  };
+
+  return (
+    <StyledNav>
+      <LeftAligned>
+        <LogoPlaceholder onClick={() => navigate('/')}>
+          <img
+            id='ITAlogo'
+            src={`${process.env.PUBLIC_URL}/ITAlogo.png`}
+            alt='ITA Logo'
+          />
+        </LogoPlaceholder>
+      </LeftAligned>
+      <>
+        {user && ( // If user is logged in, show their name and settings icon
+          <RightAligned>
+            {user.position_title === 'admin' &&
+              user.specialization === 'super_admin' && (
+                <NavLink onClick={() => navigate('/manageusers')}>
+                  Manage Users
+                </NavLink>
+              )}
+            <span id='userName_display'>
+              {user.firstname} {user.lastname}
+            </span>
+            <span style={{ cursor: 'pointer' }} onClick={handleNavigation}>
+              <svg
+                width='16'
+                height='16'
+                viewBox='0 0 24 24'
+                fill='none'
+                xmlns='http://www.w3.org/2000/svg'
+              >
+                <path
+                  d='M19.4 15.1C19.6 14.4 19.7 13.7 19.7 13C19.7 12.3 19.6 11.6 19.4 10.9L21.5 9.2C21.7 9 21.8 8.7 21.7 8.4L20.1 5.6C20 5.4 19.7 5.3 19.5 5.4L17 6.3C16.2 5.7 15.3 5.2 14.3 4.9L13.9 2.3C13.9 2.1 13.7 2 13.5 2H10.5C10.3 2 10.1 2.1 10.1 2.3L9.7 4.9C8.7 5.2 7.8 5.7 7 6.3L4.5 5.4C4.3 5.3 4 5.4 3.9 5.6L2.3 8.4C2.2 8.7 2.3 9 2.5 9.2L4.6 10.9C4.4 11.6 4.3 12.3 4.3 13C4.3 13.7 4.4 14.4 4.6 15.1L2.5 16.8C2.3 17 2.2 17.3 2.3 17.6L3.9 20.4C4 20.6 4.3 20.7 4.5 20.6L7 19.7C7.8 20.3 8.7 20.8 9.7 21.1L10.1 23.7C10.1 23.9 10.3 24 10.5 24H13.5C13.7 24 13.9 23.9 13.9 23.7L14.3 21.1C15.3 20.8 16.2 20.3 17 19.7L19.5 20.6C19.7 20.7 20 20.6 20.1 20.4L21.7 17.6C21.8 17.3 21.7 17 21.5 16.8L19.4 15.1Z'
+                  stroke='currentColor'
+                  strokeWidth='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                />
+                <circle
+                  cx='12'
+                  cy='13'
+                  r='4'
+                  stroke='currentColor'
+                  strokeWidth='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                />
+              </svg>
+            </span>
+          </RightAligned>
+        )}
+      </>
+    </StyledNav>
+  );
+}
+//user.position === 'admin'
+//user.position == 'therapist'
diff --git a/src/common/components/navigation/Navbar/NavbarStyles.js b/src/common/components/navigation/Navbar/NavbarStyles.js
new file mode 100644
index 00000000..23b17b91
--- /dev/null
+++ b/src/common/components/navigation/Navbar/NavbarStyles.js
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { Button } from 'common/components/form/Button';
+
+const StyledNav = styled.nav`
+  display: flex;
+  background-color: #d9d9d920;
+  height: 60px;
+  width: 100%;
+  font-size: 20px;
+`;
+
+const LeftAligned = styled.div`
+  flex: 1;
+  display: flex;
+  gap: 10px;
+`;
+const RightAligned = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+  gap: 20px;
+`;
+
+const LogoPlaceholder = styled(Button.Invisible)`
+  padding: 0;
+  font-size: 1.7rem;
+  font-weight: bold;
+  font-family: monospace;
+`;
+
+const NavLink = styled.button`
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`;
+
+export { StyledNav, LeftAligned, RightAligned, LogoPlaceholder, NavLink };
diff --git a/src/common/components/routes/ProtectedRoutes.jsx b/src/common/components/routes/ProtectedRoutes.jsx
index 9309e6a5..8dc61d51 100644
--- a/src/common/components/routes/ProtectedRoutes.jsx
+++ b/src/common/components/routes/ProtectedRoutes.jsx
@@ -1,7 +1,5 @@
 import React from 'react';
-
-import { Navigate, Outlet } from 'react-router-dom';
-
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
 import { useUser } from 'common/contexts/UserContext';
 
 export function PrivateRoute() {
@@ -14,6 +12,62 @@ export function PrivateRoute() {
   return user ? <Outlet /> : <Navigate to='/login' replace />;
 }
 
+export function AdminRoute() {
+  const { user, isLoading } = useUser();
+  const location = useLocation();
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  // Check if user exists and has admin role
+  if (!user) {
+    return <Navigate to='/login' replace />;
+  }
+
+  // Special handling for /manageusers route
+  if (location.pathname === '/manageusers') {
+    if (user.position_title !== 'admin' || user.specialization !== 'super_admin') {
+      return <Navigate to='/admin' replace />;
+    }
+  }
+
+  // Redirect non-admin users to their appropriate page
+  if (user.position_title !== 'admin') {
+    if (user.position_title === 'therapist') {
+      return <Navigate to='/therapist' replace />;
+    }
+    // For any other role, redirect to home or another appropriate page
+    return <Navigate to='/' replace />;
+  }
+
+  return <Outlet />;
+}
+
+export function TherapistRoute() {
+  const { user, isLoading } = useUser();
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  // Check if user exists and has therapist role
+  if (!user) {
+    return <Navigate to='/login' replace />;
+  }
+
+  // Redirect non-therapist users to their appropriate page
+  if (user.position_title !== 'therapist') {
+    if (user.position_title === 'admin') {
+      return <Navigate to='/admin' replace />;
+    }
+    // For any other role, redirect to home or another appropriate page
+    return <Navigate to='/' replace />;
+  }
+
+  return <Outlet />;
+}
+
 export function PublicOnlyRoute() {
   const { user, isLoading } = useUser();
 
diff --git a/src/common/components/routes/RoleBasedRedirect.jsx b/src/common/components/routes/RoleBasedRedirect.jsx
new file mode 100644
index 00000000..9fb74b46
--- /dev/null
+++ b/src/common/components/routes/RoleBasedRedirect.jsx
@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useUser } from 'common/contexts/UserContext';
+
+const RoleBasedRedirect = () => {
+  const { user, loading } = useUser();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!loading && user) {
+      // Handle /manageusers route specifically
+      if (location.pathname === '/manageusers') {
+        if (user.position_title !== 'admin' || user.specialization !== 'super_admin') {
+          // Redirect non-super admins to their respective dashboards
+          if (user.position_title === 'admin') {
+            navigate('/admin', { replace: true });
+          } else if (user.position_title === 'therapist') {
+            navigate('/therapist', { replace: true });
+          } else {
+            navigate('/', { replace: true });
+          }
+        }
+        return;
+      }
+
+      // Handle other routes as before
+      if (user.position_title === 'admin') {
+        navigate('/admin', { replace: true });
+      } else if (user.position_title === 'therapist') {
+        navigate('/therapist', { replace: true });
+      } else {
+        // Optional: Handle unexpected roles or redirect to a default/error page
+        console.warn('Unknown user role:', user.position_title);
+        // navigate('/some-default-page', { replace: true });
+      }
+    }
+  }, [user, loading, navigate, location]);
+
+  // Render nothing or a loading indicator while checking the role
+  return null; // Or <Spinner /> if you have one
+};
+
+export default RoleBasedRedirect;
diff --git a/src/common/components/table_pop_ups/BudgetDropdown.jsx b/src/common/components/table_pop_ups/BudgetDropdown.jsx
new file mode 100644
index 00000000..0e775c32
--- /dev/null
+++ b/src/common/components/table_pop_ups/BudgetDropdown.jsx
@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react';
+
+import * as Select from '@radix-ui/react-select';
+import PropTypes from 'prop-types';
+
+import Dropdown, {
+  StyledLabel,
+  StyledSelectItem,
+  StyledSeparator,
+} from 'common/components/templates/Dropdown/Dropdown';
+import { ProgramOptions } from 'common/utils/ProgramOptions';
+import {
+  BudgetText,
+  DropdownContainer,
+  InputLabel,
+  LabelText,
+  RequiredIndicator,
+} from './BudgetDropdownStyles';
+
+export default function BudgetDropdown({ value, onProgramChange, required }) {
+  const [program, setProgram] = useState(value || '');
+  const [budget, setBudget] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [userSelected, setUserSelected] = useState(false);
+
+  // Keep internal state in sync with passed value only when value changes and user hasn't manually selected
+  useEffect(() => {
+    if (!userSelected && value !== program) {
+      setProgram(value || '');
+    }
+  }, [value, program, userSelected]);
+
+  // Fetch budget when program changes
+  useEffect(() => {
+    const fetchBudget = async () => {
+      if (!program) {
+        setBudget(null);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+
+        const response = await fetch(
+          `${process.env.REACT_APP_BACKEND_URL}/budget`, {
+            method: 'GET',
+            credentials: 'include',
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+            },
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error(`Could not get budgets! Status: ${response.status}`);
+        }
+
+        const programs = await response.json();
+        const selectedProgram = programs.find((p) => p.program_id === program);
+
+        if (selectedProgram) {
+          setBudget(selectedProgram.program_budget);
+        } else {
+          setBudget(null);
+        }
+      } catch (err) {
+        setError(`Error fetching budget: ${err.message}`);
+        setBudget(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchBudget();
+  }, [program]);
+
+  const handleProgramChange = (newValue) => {
+    setProgram(newValue);
+    setUserSelected(true);
+    if (onProgramChange) onProgramChange(newValue);
+  };
+
+  return (
+    <DropdownContainer>
+      <InputLabel>
+        <LabelText>Program</LabelText>
+        {required && <RequiredIndicator>*</RequiredIndicator>}
+      </InputLabel>
+      <Dropdown
+        styles={{
+          width: '100%',
+          border: 'solid 2px var(--text)',
+          borderRadius: '8px',
+          height: '44px',
+          padding: '0px 15px 0px 10px',
+        }}
+        placeholder='Select Program...'
+        onValueChange={handleProgramChange}
+        value={program}
+        required={required}
+      >
+        {ProgramOptions.map((groupOrSeparator, i) => {
+          if (groupOrSeparator.separator) {
+            return <StyledSeparator key={`sep-${i}`} />;
+          }
+          return (
+            <Select.Group key={`group-${i}`}>
+              <StyledLabel>{groupOrSeparator.label}</StyledLabel>
+              {groupOrSeparator.items.map((item) => (
+                <StyledSelectItem
+                  value={item.value}
+                  key={item.value}
+                  className='program-budget'
+                >
+                  {item.label}
+                </StyledSelectItem>
+              ))}
+            </Select.Group>
+          );
+        })}
+      </Dropdown>
+
+      {/* Display budget information using the styled BudgetText component */}
+      {program &&
+        (loading ? (
+          <BudgetText>Loading budget information...</BudgetText>
+        ) : error ? (
+          <BudgetText style={{ color: 'red' }}>{error}</BudgetText>
+        ) : budget !== null ? (
+          <BudgetText>Budget: ${Math.ceil(budget * 100) / 100}</BudgetText>
+        ) : (
+          <BudgetText>No budget information available</BudgetText>
+        ))}
+    </DropdownContainer>
+  );
+}
+
+BudgetDropdown.propTypes = {
+  value: PropTypes.string,
+  onProgramChange: PropTypes.func,
+  required: PropTypes.bool,
+};
+
+BudgetDropdown.defaultProps = {
+  value: '',
+  required: false,
+};
diff --git a/src/common/components/table_pop_ups/BudgetDropdownStyles.js b/src/common/components/table_pop_ups/BudgetDropdownStyles.js
new file mode 100644
index 00000000..17e27683
--- /dev/null
+++ b/src/common/components/table_pop_ups/BudgetDropdownStyles.js
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+export const DropdownContainer = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const InputLabel = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+
+export const LabelText = styled.span`
+  margin-right: 2px;
+`;
+
+export const RequiredIndicator = styled.span`
+  color: red;
+`;
+
+export const BudgetText = styled.h6`
+  position: absolute;
+  left: 35px;
+  padding: 0;
+  color: blue;
+  font-size: 14px;
+  font-weight: normal;
+`;
diff --git a/src/common/components/table_pop_ups/CancelOrder.jsx b/src/common/components/table_pop_ups/CancelOrder.jsx
new file mode 100644
index 00000000..75c277d4
--- /dev/null
+++ b/src/common/components/table_pop_ups/CancelOrder.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import YNPopup from 'common/components/templates/YNPopup/YNPopup';
+
+export default function CancelOrder({ open, onConfirm, onCancel }) {
+  return (
+    <YNPopup
+      open={open}
+      title='Cancel Order Confirmation'
+      description='Are you sure you want to cancel this order?'
+      yesText='Yes, Cancel Order'
+      noText='No, Keep Order'
+      yesOnClick={onConfirm}
+      noOnClick={onCancel}
+      yesColor='red'
+      noColor='blue'
+    />
+  );
+}
diff --git a/src/common/components/table_pop_ups/CancelOrderDropdown.jsx b/src/common/components/table_pop_ups/CancelOrderDropdown.jsx
new file mode 100644
index 00000000..57408dde
--- /dev/null
+++ b/src/common/components/table_pop_ups/CancelOrderDropdown.jsx
@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+
+import * as Select from '@radix-ui/react-select';
+import PropTypes from 'prop-types';
+
+import Dropdown, {
+  StyledLabel,
+  StyledSelectItem,
+  StyledSeparator,
+} from 'common/components/templates/Dropdown/Dropdown';
+
+export default function StatusDropdown({ value, onStatusChange }) {
+  const [status, setStatus] = useState(value || '');
+
+  // Keep internal state in sync with passed value
+  useEffect(() => {
+    setStatus(value || '');
+  }, [value]);
+
+  const handleStatusChange = (newValue) => {
+    setStatus(newValue);
+    if (onStatusChange) onStatusChange(newValue);
+  };
+
+  function determineBackgroundColor(status) {
+    if (status === 'approved') {
+      backgroundColor = 'var(--status-approved-green)';
+    } else if (status === 'pending') {
+      backgroundColor = 'var(--status-pending-yellow)';
+    } else if (status === 'denied') {
+      backgroundColor = 'inherit';
+    } else if (status === 'cancel') {
+      backgroundColor = 'var(--status-cancel-red)';
+    }
+  }
+
+  // Determine background color based on status
+  let backgroundColor = 'green';
+  // re-render occurs when user changes value, so we need to determine
+  // the new background color
+  determineBackgroundColor(status);
+
+  return (
+    <Dropdown
+      styles={{ backgroundColor: backgroundColor, border: '1px solid black' }} // pass an object not a string
+      placeholder='Status...'
+      onValueChange={handleStatusChange}
+      value={status} // changed from defaultValue to value
+      $forstatus={true}
+    >
+      <Select.Group>
+        <StyledLabel>Status Option</StyledLabel>
+        <StyledSelectItem value={value}>{value}</StyledSelectItem>
+        <StyledSeparator />
+        <StyledSelectItem value='cancel'>Cancel</StyledSelectItem>
+      </Select.Group>
+    </Dropdown>
+  );
+}
+
+StatusDropdown.propTypes = {
+  value: PropTypes.string.isRequired,
+  onStatusChange: PropTypes.func.isRequired,
+};
+
+StatusDropdown.defaultProps = {
+  value: '',
+};
diff --git a/src/common/components/table_pop_ups/FilterDropdown.jsx b/src/common/components/table_pop_ups/FilterDropdown.jsx
new file mode 100644
index 00000000..01146ad3
--- /dev/null
+++ b/src/common/components/table_pop_ups/FilterDropdown.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+
+import * as Select from '@radix-ui/react-select';
+
+import Dropdown, {
+  StyledLabel,
+  StyledSelectItem,
+  StyledSeparator,
+} from 'common/components/templates/Dropdown/Dropdown';
+import { Filters } from 'common/utils/Filters';
+
+export default function FilterDropdown() {
+  const [filterValue, setFilter] = useState('');
+  // each time filter is changed, update the value of the filter
+  const handleFilterChange = (value) => {
+    setFilter(value);
+  };
+
+  return (
+    <Dropdown
+      placeholder='Choose a filter...' // Placeholder text
+      onValueChange={handleFilterChange} // Radix listener for changes
+      defaultValue='' // No default selection
+    >
+      {Filters.map((groupOrSeparator, i) => {
+        // If "separator" is true, render the StyledSeparator
+        if (groupOrSeparator.separator) {
+          return <StyledSeparator key={`sep-${i}`} />;
+        }
+
+        // Otherwise, render a category group
+        return (
+          <Select.Group key={`group-${i}`}>
+            <StyledLabel>{groupOrSeparator.label}</StyledLabel>
+            {groupOrSeparator.items.map((item) => (
+              <StyledSelectItem value={item.value} key={item.value}>
+                {item.label}
+              </StyledSelectItem>
+            ))}
+          </Select.Group>
+        );
+      })}
+    </Dropdown>
+  );
+}
diff --git a/src/common/components/table_pop_ups/LogoutConfirm.jsx b/src/common/components/table_pop_ups/LogoutConfirm.jsx
new file mode 100644
index 00000000..3bccbd15
--- /dev/null
+++ b/src/common/components/table_pop_ups/LogoutConfirm.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import YNPopup from 'common/components/templates/YNPopup/YNPopup';
+
+export default function LogoutConfirm() {
+  return (
+    <YNPopup
+      title='Logout Confirmation'
+      description='Are you sure you want to logout?'
+      buttonText='Logout Confirmation'
+      yesText='Logout'
+    />
+  );
+}
diff --git a/src/common/components/table_pop_ups/NewOrderForm.jsx b/src/common/components/table_pop_ups/NewOrderForm.jsx
new file mode 100644
index 00000000..0abd7cd8
--- /dev/null
+++ b/src/common/components/table_pop_ups/NewOrderForm.jsx
@@ -0,0 +1,325 @@
+import React, { useState } from 'react';
+
+import { CustomInput } from 'common/components/form/CustomInput';
+import FormPopup from 'common/components/templates/FormPopup/FormPopup';
+import { useOrders } from 'common/contexts/OrderContext';
+import { useUser } from 'common/contexts/UserContext';
+import {
+  getProgramIdByName,
+  getProgramNameById,
+} from 'common/utils/ProgramMapping';
+import BudgetDropdown from './BudgetDropdown';
+import {
+  Column,
+  ErrorMessage,
+  FormContainer,
+  TextAreaContainer,
+} from './NewOrderFormStyles';
+import PriorityDropdown from './PriorityDropdown';
+
+export default function NewOrderForm() {
+  const [program, setProgram] = useState('');
+  const [itemName, setItemName] = useState('');
+  const [quantity, setQuantity] = useState('');
+  const [link, setLink] = useState('');
+  const [priorityLevel, setPriorityLevel] = useState('');
+  const [PPU, setPPU] = useState('');
+  const [reasonForBuying, setReasonForBuying] = useState('');
+  const [formErrors, setFormErrors] = useState({});
+  const { user } = useUser();
+  const { refreshOrders } = useOrders();
+
+  const handleProgramChange = (selectedProgram) => {
+    if (selectedProgram) {
+      const programName = getProgramNameById(selectedProgram);
+      setProgram(programName);
+      setFormErrors((prev) => ({ ...prev, program: '' }));
+    }
+  };
+
+  const handleItemNameChange = (e) => {
+    setItemName(e.target.value);
+    if (e.target.value) {
+      setFormErrors((prev) => ({ ...prev, itemName: '' }));
+    }
+  };
+
+  const handleQuantityChange = (e) => {
+    setQuantity(e.target.value);
+    if (e.target.value) {
+      setFormErrors((prev) => ({ ...prev, quantity: '' }));
+    }
+  };
+
+  const handleLinkChange = (e) => {
+    setLink(e.target.value);
+    if (e.target.value) {
+      setFormErrors((prev) => ({ ...prev, link: '' }));
+    }
+  };
+
+  const handlePriorityLevelChange = (e) => {
+    setPriorityLevel(e.target.value);
+    if (e.target.value) {
+      setFormErrors((prev) => ({ ...prev, priorityLevel: '' }));
+    }
+  };
+
+  const handlePPUChange = (e) => {
+    setPPU(e.target.value);
+    if (e.target.value) {
+      setFormErrors((prev) => ({ ...prev, PPU: '' }));
+    }
+  };
+
+  const handleReasonForBuyingChange = (e) => {
+    setReasonForBuying(e.target.value);
+    if (e.target.value) {
+      setFormErrors((prev) => ({ ...prev, reasonForBuying: '' }));
+    }
+  };
+
+  const validateForm = () => {
+    const errors = {};
+
+    if (!program) {
+      errors.program = 'Please select a program';
+    }
+
+    if (!itemName.trim()) {
+      errors.itemName = 'Item name is required';
+    }
+
+    if (!quantity.trim()) {
+      errors.quantity = 'Quantity is required';
+    }
+
+    if (!link.trim()) {
+      errors.link = 'Link is required';
+    }
+
+    if (!priorityLevel.trim()) {
+      errors.priorityLevel = 'Priority level is required';
+    }
+
+    if (!PPU.trim()) {
+      errors.PPU = 'Price per unit is required';
+    }
+
+    if (!reasonForBuying.trim()) {
+      errors.reasonForBuying = 'Reason for buying is required';
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const resetForm = () => {
+    setProgram('');
+    setItemName('');
+    setQuantity('');
+    setLink('');
+    setPriorityLevel('');
+    setPPU('');
+    setReasonForBuying('');
+    setFormErrors({});
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      console.log('Form validation failed', formErrors);
+      return false;
+    }
+
+    const reqDate = new Date().toISOString().split('T')[0].replace(/-/g, '-');
+    const total = Math.round(quantity * PPU * 100) / 100;
+    const progId = getProgramIdByName(program);
+    const userId = user.id;
+
+    const budgetResponse = await fetch(
+      `${process.env.REACT_APP_BACKEND_URL}/budget`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+        },
+        credentials: 'include',
+      }
+    );
+    if (!budgetResponse.ok) {
+      throw new Error(
+        `Could not get budgets! Status: ${budgetResponse.status}`
+      );
+    }
+    const programs = await budgetResponse.json();
+    const selectedProgram = programs.find((p) => p.program_id === progId);
+    if (selectedProgram.program_budget < total) {
+      console.log('Cannot submit order! Insufficient budget.');
+      setFormErrors((prev) => ({
+        ...prev,
+        budget: `Insufficient budget. The order total ($${total}) exceeds the available budget for ${program} ($${selectedProgram.program_budget}).`,
+      }));
+      return false;
+    }
+
+    const response = await fetch(
+      `${process.env.REACT_APP_BACKEND_URL}/therapist/order`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          order_link: link,
+          price_per_unit: PPU,
+          item_name: itemName,
+          request_date: reqDate,
+          priority_level: priorityLevel,
+          quantity: quantity,
+          total_cost: total,
+          program_id: progId,
+          requestor_id: userId,
+          order_description: reasonForBuying,
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      console.error('Error with form submission.');
+      return false;
+    }
+
+    refreshOrders();
+    document.querySelector('button[aria-label="Close"]')?.click();
+    resetForm();
+    window.location.reload();
+    return true;
+  };
+
+  return (
+    <FormPopup
+      title='New Order Form'
+      description='Please fill out all fields of the form below for your requested
+                item and read the Order Guidelines.'
+      onSubmit={handleSubmit}
+      onClose={resetForm}
+      maxWidth='50%'
+      defaultSubmit={true}
+      buttonText='Place New Order'
+      styles={{
+        fontSize: '14px',
+        backgroundColor: 'var(--primary-green)',
+        color: 'var(--white)',
+        fontWeight: '500',
+        borderRadius: '5px',
+        transition: 'background-color 0.2s ease',
+        border: 'none',
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+        '&:hover': {
+          backgroundColor: '#19d93d',
+          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.15)',
+        },
+        '&:focus': {
+          outline: '2px solidrgb(11, 154, 37)',
+          outlineOffset: '2px',
+        },
+      }}
+    >
+      {formErrors.budget && (
+        <ErrorMessage style={{ marginBottom: '15px' }}>
+          {formErrors.budget}
+        </ErrorMessage>
+      )}
+      <FormContainer>
+        <Column>
+          <BudgetDropdown
+            value={program}
+            onProgramChange={handleProgramChange}
+            required={true}
+          />
+          {formErrors.program && (
+            <ErrorMessage>{formErrors.program}</ErrorMessage>
+          )}
+
+          <CustomInput.Text
+            title='Item Name'
+            value={itemName}
+            onChange={handleItemNameChange}
+            placeholder='Markers'
+            required
+          />
+          {formErrors.itemName && (
+            <ErrorMessage>{formErrors.itemName}</ErrorMessage>
+          )}
+
+          <CustomInput.Text
+            title='Link to Purchase Item'
+            value={link}
+            onChange={handleLinkChange}
+            placeholder='https://ExampleSite.com'
+            required
+          />
+          {formErrors.link && <ErrorMessage>{formErrors.link}</ErrorMessage>}
+
+          <CustomInput.Text
+            title='Price Per Unit'
+            value={PPU}
+            onChange={handlePPUChange}
+            placeholder='x.xx'
+            required
+          />
+          {formErrors.PPU && <ErrorMessage>{formErrors.PPU}</ErrorMessage>}
+        </Column>
+        <Column>
+          <CustomInput.Text
+            title='Quantity'
+            value={quantity}
+            onChange={handleQuantityChange}
+            placeholder='Enter Quantity'
+            required
+          />
+          {formErrors.quantity && (
+            <ErrorMessage>{formErrors.quantity}</ErrorMessage>
+          )}
+
+          <PriorityDropdown
+            value={priorityLevel}
+            onPriorityChange={handlePriorityLevelChange}
+            required={true}
+          />
+          {formErrors.priorityLevel && (
+            <ErrorMessage>{formErrors.priorityLevel}</ErrorMessage>
+          )}
+
+          <TextAreaContainer>
+            <label
+              htmlFor='reasonForBuying'
+              style={{
+                display: 'block',
+                fontSize: '15px',
+                color: 'black',
+              }}
+            >
+              Reason for buying (150 characters max)
+              <span style={{ color: 'red' }}>*</span>
+            </label>
+            <textarea
+              id='reasonForBuying'
+              value={reasonForBuying}
+              onChange={handleReasonForBuyingChange}
+              placeholder='Enter reason for buying'
+              required
+            />
+            {formErrors.reasonForBuying && (
+              <ErrorMessage>{formErrors.reasonForBuying}</ErrorMessage>
+            )}
+          </TextAreaContainer>
+        </Column>
+      </FormContainer>
+    </FormPopup>
+  );
+}
diff --git a/src/common/components/table_pop_ups/NewOrderFormStyles.js b/src/common/components/table_pop_ups/NewOrderFormStyles.js
new file mode 100644
index 00000000..7b383961
--- /dev/null
+++ b/src/common/components/table_pop_ups/NewOrderFormStyles.js
@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const FormContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  @media (max-width: 1400px) {
+    flex-direction: column;
+    gap: 0px;
+  }
+`;
+
+export const Column = styled.div`
+  flex: 1 1 45%;
+
+  @media (max-width: 1400px) {
+    flex: 1 1 100%;
+  }
+`;
+
+export const TextAreaContainer = styled.div`
+  margin-bottom: 15px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    color: black;
+  }
+
+  textarea {
+    width: 100%;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 15px;
+    line-height: 1.5;
+    color: black;
+    border: solid 2px var(--text);
+    height: 100px;
+    resize: none;
+  }
+`;
+
+export const ErrorMessage = styled.div`
+  color: red;
+  margin-top: -10px;
+  margin-bottom: 10px;
+  font-size: 14px;
+`;
diff --git a/src/common/components/table_pop_ups/PasswordChangeForm.jsx b/src/common/components/table_pop_ups/PasswordChangeForm.jsx
new file mode 100644
index 00000000..b3cd7381
--- /dev/null
+++ b/src/common/components/table_pop_ups/PasswordChangeForm.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import FormPopup from 'common/components/templates/FormPopup/FormPopup';
+import ResetPassword from 'pages/account/ResetPassword';
+import { ButtonContainer } from './PasswordChangeFormStyles';
+
+export default function PasswordChangeForm() {
+  return (
+    <div>
+      <ButtonContainer>
+        <FormPopup
+          title='Reset Password'
+          description='Enter your current and new password'
+          maxWidth='40%'
+          defaultSubmit={false}
+          customForm={true}
+          buttonText='Change password?'
+        >
+          {/* ResetPassword component (from template) handles Logic for resetting password */}
+          <ResetPassword />
+        </FormPopup>
+      </ButtonContainer>
+    </div>
+  );
+}
diff --git a/src/common/components/table_pop_ups/PasswordChangeFormStyles.js b/src/common/components/table_pop_ups/PasswordChangeFormStyles.js
new file mode 100644
index 00000000..89a45318
--- /dev/null
+++ b/src/common/components/table_pop_ups/PasswordChangeFormStyles.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+`;
diff --git a/src/common/components/table_pop_ups/PriorityDropdown.jsx b/src/common/components/table_pop_ups/PriorityDropdown.jsx
new file mode 100644
index 00000000..1c2b9078
--- /dev/null
+++ b/src/common/components/table_pop_ups/PriorityDropdown.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+
+import * as Select from '@radix-ui/react-select';
+import PropTypes from 'prop-types';
+
+import Dropdown, {
+  StyledLabel,
+  StyledSelectItem,
+  StyledSeparator,
+} from 'common/components/templates/Dropdown/Dropdown';
+import {
+  DropdownContainer,
+  InputLabel,
+  LabelText,
+  RequiredIndicator,
+} from './PriorityDropdownStyles';
+
+// Priority options
+const PriorityOptions = [
+  {
+    label: 'Priority Level',
+    items: [
+      {
+        label: 'Regular',
+        value: 'regular',
+      },
+      {
+        label: '< 2 weeks',
+        value: '< 2 weeks',
+      },
+    ],
+  },
+];
+
+export default function PriorityDropdown({
+  value,
+  onPriorityChange,
+  required,
+}) {
+  const handlePriorityChange = (newValue) => {
+    if (onPriorityChange) onPriorityChange({ target: { value: newValue } });
+  };
+
+  return (
+    <DropdownContainer>
+      <InputLabel>
+        <LabelText>Priority Level</LabelText>
+        {required && <RequiredIndicator>*</RequiredIndicator>}
+      </InputLabel>
+      <Dropdown
+        styles={{
+          width: '100%',
+          border: 'solid 2px var(--text)',
+          borderRadius: '8px',
+          height: '44px',
+        }}
+        placeholder='Select Priority...'
+        onValueChange={handlePriorityChange}
+        value={value}
+        required={required}
+      >
+        {PriorityOptions.map((groupOrSeparator, i) => {
+          if (groupOrSeparator.separator) {
+            return <StyledSeparator key={`sep-${i}`} />;
+          }
+          return (
+            <Select.Group key={`group-${i}`}>
+              <StyledLabel>{groupOrSeparator.label}</StyledLabel>
+              {groupOrSeparator.items.map((item) => (
+                <StyledSelectItem value={item.value} key={item.value}>
+                  {item.label}
+                </StyledSelectItem>
+              ))}
+            </Select.Group>
+          );
+        })}
+      </Dropdown>
+    </DropdownContainer>
+  );
+}
+
+PriorityDropdown.propTypes = {
+  value: PropTypes.string,
+  onPriorityChange: PropTypes.func,
+  required: PropTypes.bool,
+};
+
+PriorityDropdown.defaultProps = {
+  value: '',
+  required: false,
+};
diff --git a/src/common/components/table_pop_ups/PriorityDropdownStyles.js b/src/common/components/table_pop_ups/PriorityDropdownStyles.js
new file mode 100644
index 00000000..7d099840
--- /dev/null
+++ b/src/common/components/table_pop_ups/PriorityDropdownStyles.js
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const DropdownContainer = styled.div`
+  margin-bottom: 15px;
+`;
+
+export const InputLabel = styled.h3`
+  margin: 0;
+  text-align: left;
+  font-weight: normal;
+  font-size: 1rem;
+  margin-bottom: 4px;
+`;
+
+export const LabelText = styled.span`
+  margin-right: 2px;
+`;
+
+export const RequiredIndicator = styled.span`
+  color: red;
+`;
diff --git a/src/common/components/table_pop_ups/StatusDropdown.jsx b/src/common/components/table_pop_ups/StatusDropdown.jsx
new file mode 100644
index 00000000..648735bb
--- /dev/null
+++ b/src/common/components/table_pop_ups/StatusDropdown.jsx
@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react';
+
+import * as Select from '@radix-ui/react-select';
+import PropTypes from 'prop-types';
+
+import Dropdown, {
+  StyledLabel,
+  StyledSelectItem,
+  StyledSeparator,
+} from 'common/components/templates/Dropdown/Dropdown';
+import { AdminStatuses } from 'common/utils/AdminStatuses';
+
+// Accept props for a controlled component
+// Order of function calls when user changes the value of the dropdown:
+//  1. onValueChange callback
+//  2. handleStatusChange()
+//  3. setStatus(newValue) ==> schedules a re-render (async operation)
+//  4. onStatusChange(newValue)
+//  5. on next render, useEffect() hook runs
+export default function StatusDropdown({ value, onStatusChange }) {
+  const [status, setStatus] = useState(value || '');
+
+  // Keep internal state in sync with passed value
+  useEffect(() => {
+    setStatus(value || '');
+  }, [value]);
+
+  const handleStatusChange = (newValue) => {
+    const validChange = checkValidStatusChange(newValue);
+    if (validChange) {
+      setStatus(newValue);
+    }
+    if (onStatusChange) onStatusChange(newValue);
+  };
+
+  const checkValidStatusChange = (newValue) => {
+    const currStatus = status;
+    if (currStatus === 'pending') {
+      if (newValue === 'approved' || newValue === 'denied') return true;
+    } else if (currStatus === 'approved') {
+      if (newValue === 'pending' || newValue === 'arrived') return true;
+    } else if (currStatus === 'denied') {
+      if (newValue === 'pending') return true;
+    } else if (currStatus === 'arrived') {
+      if (newValue === 'ready' || newValue === 'approved') return true;
+    }
+    return false;
+  };
+
+  function determineBackgroundColor(status) {
+    if (status === 'approved') {
+      backgroundColor = 'var(--status-approved-green)';
+    } else if (status === 'pending') {
+      backgroundColor = 'var(--status-pending-yellow)';
+    } else if (status === 'denied') {
+      backgroundColor = 'inherit';
+    } else if (status === 'cancel') {
+      backgroundColor = 'var(--status-cancel-red)';
+    } else if (status === 'arrived') {
+      // item arrived
+      backgroundColor = 'var(--status-arrived-blue)';
+    } else if (status === 'ready' || status === 'picked up') {
+      // read for pick up
+      backgroundColor = 'orange';
+    }
+  }
+
+  // Determine background color based on status
+  let backgroundColor = 'green';
+  // re-render occurs when user changes value, so we need to determine
+  // the new background color
+  determineBackgroundColor(status);
+
+  return (
+    <Dropdown
+      styles={{ backgroundColor: backgroundColor, border: '1px solid black' }} // pass an object not a string
+      placeholder='Status...'
+      onValueChange={handleStatusChange}
+      value={status} // changed from defaultValue to value
+      $forstatus={true}
+    >
+      {AdminStatuses.map((groupOrSeparator, i) => {
+        if (groupOrSeparator.separator) {
+          return <StyledSeparator key={`sep-${i}`} />;
+        }
+        return (
+          <Select.Group key={`group-${i}`}>
+            <StyledLabel>{groupOrSeparator.label}</StyledLabel>
+            {groupOrSeparator.items.map((item) => (
+              <StyledSelectItem value={item.value} key={item.value}>
+                {item.label}
+              </StyledSelectItem>
+            ))}
+          </Select.Group>
+        );
+      })}
+    </Dropdown>
+  );
+}
+
+StatusDropdown.propTypes = {
+  value: PropTypes.string.isRequired,
+  onStatusChange: PropTypes.func.isRequired,
+};
+
+StatusDropdown.defaultProps = {
+  value: '',
+};
diff --git a/src/common/components/templates/Dropdown/Dropdown.jsx b/src/common/components/templates/Dropdown/Dropdown.jsx
new file mode 100644
index 00000000..29c2c311
--- /dev/null
+++ b/src/common/components/templates/Dropdown/Dropdown.jsx
@@ -0,0 +1,136 @@
+import React from 'react';
+
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@radix-ui/react-icons';
+import * as Select from '@radix-ui/react-select';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {
+  StyledTrigger,
+  StyledIcon,
+  StyledContent,
+  StyledViewport,
+  StyledScrollButton,
+  StyledItemIndicator,
+} from './DropdownStyles';
+
+// separator between dropdown items
+export const StyledSeparator = styled(Select.Separator)`
+  height: 1px;
+  background-color: var(--violet-6);
+  margin: 5px;
+`;
+
+// label for each item
+export const StyledLabel = styled(Select.Label)`
+  padding: 0 25px;
+  font-size: 12px;
+  line-height: 25px;
+  color: var(--mauve-11);
+`;
+
+// basically a wrapper for Select.Item, extracts the children and className while
+// forwarding other props (...props)
+const SelectItemBase = React.forwardRef(
+  ({ children, className, ...props }, ref) => (
+    <Select.Item ref={ref} {...props} className={classnames(className)}>
+      <Select.ItemText>{children}</Select.ItemText>
+      <StyledItemIndicator>
+        <CheckIcon />
+      </StyledItemIndicator>
+    </Select.Item>
+  )
+);
+
+// allows us to refer it
+SelectItemBase.displayName = 'SelectItemBase';
+
+SelectItemBase.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+SelectItemBase.defaultProps = {
+  className: '',
+};
+
+// using wrapper we can customize
+export const StyledSelectItem = styled(SelectItemBase)`
+  font-size: 13px;
+  line-height: 1;
+  color: var(--violet-11);
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  height: 25px;
+  padding: 0 35px 0 25px;
+  position: relative;
+  user-select: none;
+
+  &[data-disabled] {
+    color: var(--mauve-8);
+    pointer-events: none;
+  }
+  &[data-highlighted] {
+    outline: none;
+    background-color: lightgray; // responsible for changing text color of selected value
+    color: var(--violet-1);
+  }
+`;
+
+export default function Dropdown({
+  placeholder,
+  children,
+  value, // renamed from defaultValue to value
+  $forstatus,
+  styles, // expecting an inline style object
+  ...props
+}) {
+  return (
+    <Select.Root value={value} onValueChange={props.onValueChange} {...props}>
+      <StyledTrigger
+        aria-label='Dropdown'
+        $forstatus={$forstatus}
+        style={styles} // updated: pass the styles object directly
+      >
+        <Select.Value placeholder={placeholder} />
+        <StyledIcon>
+          <ChevronDownIcon />
+        </StyledIcon>
+      </StyledTrigger>
+      <Select.Portal>
+        <StyledContent>
+          {/* Scroll up */}
+          <StyledScrollButton>
+            <ChevronUpIcon />
+          </StyledScrollButton>
+          <StyledViewport>{children}</StyledViewport>
+          <StyledScrollButton as={Select.ScrollDownButton}>
+            <ChevronDownIcon />
+          </StyledScrollButton>
+        </StyledContent>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+Dropdown.propTypes = {
+  placeholder: PropTypes.string,
+  /* the items/groups to appear in the dropdown, typically <Select.Group> or <StyledSelectItem> elements */
+  children: PropTypes.node.isRequired,
+  /* the default value if you want a pre-selected item */
+  value: PropTypes.string, // updated prop name
+  /* $forstatus = for status dropdown; if true, custom styling applied to fit */
+  $forstatus: PropTypes.bool,
+  onValueChange: PropTypes.func,
+  styles: PropTypes.object,
+};
+
+Dropdown.defaultProps = {
+  placeholder: 'Select an option...',
+  value: '', // updated default value
+  $forstatus: false,
+};
diff --git a/src/common/components/templates/Dropdown/DropdownStyles.js b/src/common/components/templates/Dropdown/DropdownStyles.js
new file mode 100644
index 00000000..e46cd8df
--- /dev/null
+++ b/src/common/components/templates/Dropdown/DropdownStyles.js
@@ -0,0 +1,97 @@
+// button that actually toggles the dropdown
+import styled from 'styled-components';
+import * as Select from '@radix-ui/react-select';
+
+const StyledTrigger = styled(Select.Trigger)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 4px;
+  padding: ${(props) => (props.$forstatus ? '0px 10px' : '0 15px')};
+  font-size: 13px;
+  line-height: 1;
+  height: 35px;
+  ${(props) => (props.$forstatus ? 'width: 100px;' : 'min-width: 150px;')}
+  background-color: white;
+  color: var(--violet-11);
+  border: 1px #ccc solid;
+  &:hover {
+    background-color: var(--mauve-3);
+  }
+  &[data-placeholder] {
+    color: var(--violet-9);
+  }
+  & > span {
+    color: black;
+  }
+`;
+
+// icons for closing/opening
+const StyledIcon = styled(Select.Icon)`
+  color: var(--violet-11);
+`;
+
+// the component the pops up/out when we open the dropdown
+const StyledContent = styled(Select.Content)`
+  overflow: hidden;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow:
+    0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+`;
+
+// viewport of dropdown
+const StyledViewport = styled(Select.Viewport)`
+  padding: 5px;
+`;
+
+// if many items, scroll button will appear
+const StyledScrollButton = styled(Select.ScrollUpButton)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 25px;
+  background-color: white;
+  color: var(--violet-11);
+  cursor: default;
+`;
+
+// separator between dropdown items
+const StyledSeparator = styled(Select.Separator)`
+  height: 1px;
+  background-color: var(--violet-6);
+  margin: 5px;
+`;
+
+// label for each item
+const StyledLabel = styled(Select.Label)`
+  padding: 0 25px;
+  font-size: 12px;
+  line-height: 25px;
+  color: var(--mauve-11);
+`;
+
+// render when the item is selected
+const StyledItemIndicator = styled(Select.ItemIndicator)`
+  position: absolute;
+  left: 0;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  & > span {
+    color: black;
+  }
+`;
+
+export {
+  StyledTrigger,
+  StyledIcon,
+  StyledContent,
+  StyledViewport,
+  StyledScrollButton,
+  StyledSeparator,
+  StyledLabel,
+  StyledItemIndicator,
+};
diff --git a/src/common/components/templates/FormPopup/FormPopup.jsx b/src/common/components/templates/FormPopup/FormPopup.jsx
new file mode 100644
index 00000000..7da36ebb
--- /dev/null
+++ b/src/common/components/templates/FormPopup/FormPopup.jsx
@@ -0,0 +1,217 @@
+// Used for New Order Form, Change Password Form
+import React from 'react';
+
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import {
+  StyledOverlay,
+  StyledContent,
+  StyledTitle,
+  StyledDescription,
+  StyledButton,
+  IconButton,
+} from './FormPopupStyles';
+
+export default function FormPopup({
+  open, // new controlled prop
+  onOpenChange, // required in controlled mode
+  title = 'Form Popup', // title of the form
+  noDesc = false, // if true, then no description
+  description = 'Form Desc.', // form desc.
+  children, // any additional DOM elts you would want to add to form
+  onSubmit, // what happens when form is submitted
+  onClose, // callback when form is closed
+  maxWidth = '500px', // allows us to define how wide this form is
+  defaultSubmit = true, // if true, then basic 'Submit' and 'Cancel' buttons. If false, then caller expected to provide buttons
+  submitText = 'Submit', // default 'Submit' text
+  cancelText = 'Cancel', // default 'Cancel' text
+  buttonText = 'Open Form', // text that appears over form button --> click --> opens form
+  submitColor = 'green',
+  cancelColor = 'red',
+  cancelOnClick = null,
+  buttonColor = 'blue',
+  customForm = false, // if false, then caller must provide input fields. If true, then caller must provide another form
+  styles = '', // styles for button that opens form
+}) {
+  // Controlled mode: if open is defined, do not render trigger button.
+  if (open !== undefined) {
+    return (
+      <Dialog.Root
+        open={open}
+        onOpenChange={(isOpen) => {
+          if (!isOpen && onClose) onClose();
+          if (onOpenChange) onOpenChange(isOpen);
+        }}
+      >
+        <Dialog.Portal>
+          <StyledOverlay /> {/* allows for 'dimmed' background */}
+          <StyledContent maxWidth={maxWidth}>
+            <StyledTitle>{title}</StyledTitle>
+            <StyledDescription>{description}</StyledDescription>
+            {/* if custom form is true, then caller must be providing their own form (since form nested in a form is NOT allowed) */}
+            {customForm && <div>{children}</div>}
+            {/* if custom form is false, then caller is expecting to use supplied form (not providing their own) */}
+            {!customForm && (
+              <form onSubmit={onSubmit}>
+                {children} {/* what will go in the form */}
+                {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+                {defaultSubmit && (
+                  <div
+                    style={{
+                      display: 'flex',
+                      marginTop: 25,
+                      justifyContent: 'flex-end',
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: 'flex',
+                        flexDirection: 'row-reverse',
+                        gap: '10px',
+                      }}
+                    >
+                      <StyledButton className={submitColor} type='submit'>
+                        {submitText}
+                      </StyledButton>
+                      <Dialog.Close asChild>
+                        <StyledButton
+                          className={cancelColor}
+                          onClick={(e) => {
+                            if (cancelOnClick) cancelOnClick(e);
+                            if (onClose) onClose();
+                          }}
+                          type='button'
+                        >
+                          {cancelText}
+                        </StyledButton>
+                      </Dialog.Close>
+                    </div>
+                  </div>
+                )}
+              </form>
+            )}
+          </StyledContent>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+  // Uncontrolled mode: render trigger button.
+  return (
+    <Dialog.Root
+      onOpenChange={(isOpen) => {
+        if (!isOpen && onClose) onClose();
+      }}
+    >
+      <Dialog.Trigger asChild>
+        {/* specify the button color here as a prop */}
+        <StyledButton className={buttonColor} style={styles}>
+          {buttonText}
+        </StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay /> {/* allows for 'dimmed' background */}
+        <StyledContent maxWidth={maxWidth}>
+          <StyledTitle>{title}</StyledTitle>
+          {!noDesc && <StyledDescription>{description}</StyledDescription>}
+          {/* if custom form is true, then caller must be providing their own form (since form nested in a form is NOT allowed) */}
+          {customForm && <div>{children}</div>}
+          {/* if custom form is false, then caller is expecting to use supplied form (not providing their own) */}
+          {!customForm && (
+            <form onSubmit={onSubmit}>
+              {children} {/* what will go in the form */}
+              {/* if defaultSubmit is NOT true, caller is expected to have another button to submit form */}
+              {defaultSubmit && (
+                <div
+                  style={{
+                    display: 'flex',
+                    marginTop: 25,
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className={submitColor} type='submit'>
+                      {submitText}
+                    </StyledButton>
+                    <Dialog.Close asChild>
+                      <StyledButton
+                        className={cancelColor}
+                        type='button'
+                        onClick={() => {
+                          if (onClose) onClose();
+                        }}
+                      >
+                        {cancelText}
+                      </StyledButton>
+                    </Dialog.Close>
+                  </div>
+                </div>
+              )}
+            </form>
+          )}
+          {/* The 'X' close button that allows us to close the form */}
+          <Dialog.Close asChild>
+            <IconButton
+              aria-label='Close'
+              onClick={() => {
+                if (onClose) onClose();
+              }}
+            >
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+// Form title, children nodes, and onSubmit functionality are required. Title because
+// the user must know that the form does, children because the form must include some content, and
+// onSubmit because the form must do something when it is completed
+FormPopup.propTypes = {
+  open: PropTypes.bool, // controlled mode open flag
+  onOpenChange: PropTypes.func, // controlled mode handler
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onClose: PropTypes.func, // callback when form is closed
+  maxWidth: PropTypes.string,
+  defaultSubmit: PropTypes.bool,
+  submitText: PropTypes.string,
+  cancelText: PropTypes.string,
+  cancelOnClick: PropTypes.func,
+  buttonText: PropTypes.string,
+  submitColor: PropTypes.string,
+  cancelColor: PropTypes.string,
+  buttonColor: PropTypes.string,
+  customForm: PropTypes.bool,
+  styles: PropTypes.string,
+  noDesc: PropTypes.bool,
+};
+
+FormPopup.defaultProps = {
+  open: undefined,
+  onOpenChange: () => {},
+  description: '',
+  maxWidth: '500px',
+  defaultSubmit: true,
+  submitText: 'Submit',
+  cancelText: 'Cancel',
+  cancelOnClick: null,
+  buttonText: 'Open Form',
+  submitColor: 'green',
+  cancelColor: 'red',
+  buttonColor: 'blue',
+  customForm: false,
+  styles: '',
+  noDesc: false,
+  onClose: () => {},
+};
diff --git a/src/common/components/templates/FormPopup/FormPopupStyles.js b/src/common/components/templates/FormPopup/FormPopupStyles.js
new file mode 100644
index 00000000..23cd014b
--- /dev/null
+++ b/src/common/components/templates/FormPopup/FormPopupStyles.js
@@ -0,0 +1,197 @@
+import styled from 'styled-components';
+import { Dialog } from 'radix-ui';
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/blue.css';
+import '@radix-ui/colors/gray.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/orange.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import '@radix-ui/colors/white-alpha.css';
+import '@radix-ui/colors/yellow.css';
+
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  max-width: ${(props) => props.maxWidth || '500px'};
+  max-height: 85vh;
+  padding: 25px;
+  overflow-y: auto; /* changed from scroll to auto to remove persistent scrollbar space */
+  overflow-x: hidden;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes overlayShow {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  font-weight: 500;
+  color: var(--mauve-12);
+  font-size: 17px;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var (--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.blue {
+    background-color: var(--blue-4);
+    color: var(--blue-11);
+    outline-color: var(--blue-7);
+    &:hover {
+      background-color: var(--blue-5);
+    }
+  }
+
+  &.yellow {
+    background-color: var(--yellow-4);
+    color: var(--yellow-11);
+    outline-color: var(--yellow-7);
+    &:hover {
+      background-color: var(--yellow-5);
+    }
+  }
+
+  &.gray {
+    background-color: var(--gray-4);
+    color: var(--gray-12);
+    outline-color: var(--gray-7);
+    box-shadow: 0 5px 5px -4px var(--gray-9);
+    &:hover {
+      background-color: var(--gray-6);
+    }
+  }
+
+  &.white {
+    background-color: var(--white-a4);
+    color: black;
+    outline-color: var(--white-a7);
+    box-shadow: 0 5px 5px -4px var(--gray-9);
+    &:hover {
+      background-color: var(--gray-4);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:active {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export {
+  StyledOverlay,
+  StyledContent,
+  StyledTitle,
+  StyledDescription,
+  StyledButton,
+  IconButton,
+};
diff --git a/src/common/components/templates/YNPopup/YNPopup.jsx b/src/common/components/templates/YNPopup/YNPopup.jsx
new file mode 100644
index 00000000..275e1aff
--- /dev/null
+++ b/src/common/components/templates/YNPopup/YNPopup.jsx
@@ -0,0 +1,152 @@
+// YNPopup === Yes/No Popup -- used for simple Confirm/Deny actions
+import React from 'react';
+
+// CSS files used below for coloring
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/blue.css';
+import '@radix-ui/colors/gray.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/orange.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import '@radix-ui/colors/yellow.css';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+import { Dialog } from 'radix-ui';
+import {
+  StyledOverlay,
+  StyledContent,
+  StyledTitle,
+  StyledDescription,
+  StyledButton,
+  IconButton,
+} from './YNPopupStyles';
+
+export default function YNPopup({
+  open, // new controlled prop
+  onOpenChange, // required when in controlled mode
+  yesText = 'Yes', // default text for the 'Yes/Confirm' button
+  noText = 'No', // default text for the 'No/Deny' button
+  noOnClick, // functionality for what happens when user clicks 'No'
+  yesOnClick, // functionality for what happens when user clicks 'Yes'
+  yesColor = 'green', // default color styling for 'Yes' button
+  noColor = 'red', // default color styling for 'No' button
+  buttonColor = 'blue', // default color for button that opens popup
+  title = 'Popup Title', // default Title text for YNPopup
+  description = 'Popup Desc.', // default description for YNPopup
+  buttonText = 'Open YNPopup', // text that appears over form button --> click --> opens form
+}) {
+  // Controlled mode: if open is defined, do not render trigger.
+  if (open !== undefined) {
+    return (
+      <Dialog.Root open={open} onOpenChange={onOpenChange}>
+        <Dialog.Portal>
+          <StyledOverlay />
+          <StyledContent>
+            <StyledTitle>{title}</StyledTitle>
+            <StyledDescription>{description}</StyledDescription>
+            <form>
+              <div
+                style={{
+                  display: 'flex',
+                  marginTop: 25,
+                  justifyContent: 'flex-end',
+                }}
+              >
+                <Dialog.Close asChild>
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'row-reverse',
+                      gap: '10px',
+                    }}
+                  >
+                    <StyledButton className={yesColor} onClick={yesOnClick}>
+                      {yesText}
+                    </StyledButton>
+                    <StyledButton className={noColor} onClick={noOnClick}>
+                      {noText}
+                    </StyledButton>
+                  </div>
+                </Dialog.Close>
+              </div>
+            </form>
+          </StyledContent>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+  // Uncontrolled mode: render trigger button.
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <StyledButton className={buttonColor}>{buttonText}</StyledButton>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <StyledOverlay />
+        <StyledContent>
+          <StyledTitle>{title}</StyledTitle>
+          <StyledDescription>{description}</StyledDescription>
+          <form>
+            <div
+              style={{
+                display: 'flex',
+                marginTop: 25,
+                justifyContent: 'flex-end',
+              }}
+            >
+              <Dialog.Close asChild>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row-reverse',
+                    gap: '10px',
+                  }}
+                >
+                  <StyledButton className={yesColor} onClick={yesOnClick}>
+                    {yesText}
+                  </StyledButton>
+                  <StyledButton className={noColor} onClick={noOnClick}>
+                    {noText}
+                  </StyledButton>
+                </div>
+              </Dialog.Close>
+            </div>
+          </form>
+          <Dialog.Close asChild>
+            <IconButton aria-label='Close'>
+              <Cross2Icon />
+            </IconButton>
+          </Dialog.Close>
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+YNPopup.propTypes = {
+  open: PropTypes.bool, // added for controlled mode
+  onOpenChange: PropTypes.func, // added for controlled mode
+  yesText: PropTypes.string,
+  noText: PropTypes.string,
+  noOnClick: PropTypes.func,
+  yesOnClick: PropTypes.func,
+  yesColor: PropTypes.string,
+  noColor: PropTypes.string,
+  buttonColor: PropTypes.string,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  buttonText: PropTypes.string,
+};
+
+YNPopup.defaultProps = {
+  yesText: 'Yes',
+  noText: 'No',
+  yesColor: 'green',
+  noColor: 'red',
+  buttonColor: 'blue',
+  title: 'Popup Title',
+  description: 'Popup Desc.',
+  buttonText: 'Open YNPopup',
+};
diff --git a/src/common/components/templates/YNPopup/YNPopupStyles.js b/src/common/components/templates/YNPopup/YNPopupStyles.js
new file mode 100644
index 00000000..c2ade8f2
--- /dev/null
+++ b/src/common/components/templates/YNPopup/YNPopupStyles.js
@@ -0,0 +1,186 @@
+import styled, { keyframes } from 'styled-components';
+import '@radix-ui/colors/black-alpha.css';
+import '@radix-ui/colors/blue.css';
+import '@radix-ui/colors/gray.css';
+import '@radix-ui/colors/green.css';
+import '@radix-ui/colors/mauve.css';
+import '@radix-ui/colors/orange.css';
+import '@radix-ui/colors/red.css';
+import '@radix-ui/colors/violet.css';
+import '@radix-ui/colors/yellow.css';
+import { Dialog } from 'radix-ui';
+
+// Keyframes for open/close animations
+const overlayShow = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const contentShow = keyframes`
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+`;
+
+// Converted CSS styles --> styled components
+const StyledOverlay = styled(Dialog.Overlay)`
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: var(--shadow-6);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledTitle = styled(Dialog.Title)`
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+`;
+
+const StyledDescription = styled(Dialog.Description)`
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+`;
+
+const StyledButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+  user-select: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &.red {
+    background-color: var(--red-4);
+    color: var(--red-11);
+    outline-color: var(--red-7);
+    &:hover {
+      background-color: var(--red-5);
+    }
+  }
+
+  &.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+    outline-color: var(--green-7);
+    &:hover {
+      background-color: var(--green-5);
+    }
+  }
+
+  &.blue {
+    background-color: var(--blue-4);
+    color: var(--blue-11);
+    outline-color: var(--blue-7);
+    &:hover {
+      background-color: var(--blue-5);
+    }
+  }
+
+  &.yellow {
+    background-color: var(--yellow-4);
+    color: var (--yellow-11);
+    outline-color: var(--yellow-7);
+    &:hover {
+      background-color: var(--yellow-5);
+    }
+  }
+
+  &.gray {
+    background-color: var(--gray-4);
+    color: var(--gray-11);
+    outline-color: var(--gray-7);
+    &:hover {
+      background-color: var(--gray-5);
+    }
+  }
+`;
+
+const IconButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  border-radius: 100%;
+  height: 40px;
+  width: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: inherit;
+  transition: all 0.3s ease;
+
+  svg {
+    height: 20px; // Set the height of the SVG
+    width: 20px; // Set the width of the SVG
+  }
+
+  svg > path {
+    fill: red;
+  }
+
+  &:hover {
+    background-color: #ededed; // button gets darker when they hover
+  }
+
+  &:focus {
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`;
+
+export {
+  overlayShow,
+  contentShow,
+  StyledOverlay,
+  StyledContent,
+  StyledTitle,
+  StyledDescription,
+  StyledButton,
+  IconButton,
+};
diff --git a/src/common/components/therapist_modals/CancelOrderButton.jsx b/src/common/components/therapist_modals/CancelOrderButton.jsx
new file mode 100644
index 00000000..ba2c4adb
--- /dev/null
+++ b/src/common/components/therapist_modals/CancelOrderButton.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyledCancelButton } from './CancelOrderButtonStyles';
+
+export default function CancelOrderButton({ onClick }) {
+  return <StyledCancelButton onClick={onClick}>Cancel</StyledCancelButton>;
+}
+
+CancelOrderButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
diff --git a/src/common/components/therapist_modals/CancelOrderButtonStyles.js b/src/common/components/therapist_modals/CancelOrderButtonStyles.js
new file mode 100644
index 00000000..f8517ba3
--- /dev/null
+++ b/src/common/components/therapist_modals/CancelOrderButtonStyles.js
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const StyledCancelButton = styled.button`
+  font-size: 14px;
+  background-color:rgb(235, 33, 53);
+  color: var(--white);
+  font-weight: 500;
+  border-radius: 10px;
+  transition: background-color 0.2s ease;
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 10px 20px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #c82333;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  }
+
+  &:focus {
+    outline: 2px solid rgb(220, 53, 69);
+    outline-offset: 2px;
+  }
+`;
diff --git a/src/common/components/therapist_modals/StatusChangeToast.jsx b/src/common/components/therapist_modals/StatusChangeToast.jsx
new file mode 100644
index 00000000..8dafbf7d
--- /dev/null
+++ b/src/common/components/therapist_modals/StatusChangeToast.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import * as Toast from '@radix-ui/react-toast';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import PropTypes from 'prop-types';
+
+import {
+  ToastViewport,
+  ToastRoot,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  CloseButton,
+} from './StatusChangeToastStyles';
+
+const StatusChangeToast = ({ open, setOpen, title, description }) => {
+  return (
+    <Toast.Provider swipeDirection='right' duration={4000}>
+      <ToastRoot open={open} onOpenChange={setOpen}>
+        <ToastTitle>{title}</ToastTitle>
+        <ToastDescription>{description}</ToastDescription>
+        <ToastAction asChild altText='Dismiss'>
+          <CloseButton onClick={() => setOpen(false)}>
+            <Cross2Icon />
+          </CloseButton>
+        </ToastAction>
+      </ToastRoot>
+      <ToastViewport />
+    </Toast.Provider>
+  );
+};
+
+StatusChangeToast.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+  title: PropTypes.string,
+  description: PropTypes.string,
+};
+
+StatusChangeToast.defaultProps = {
+  title: 'Invalid Status Change',
+  description:
+    'This status change is not allowed. Please select a valid status.',
+};
+
+export default StatusChangeToast;
diff --git a/src/common/components/therapist_modals/StatusChangeToastStyles.js b/src/common/components/therapist_modals/StatusChangeToastStyles.js
new file mode 100644
index 00000000..bc7c18fc
--- /dev/null
+++ b/src/common/components/therapist_modals/StatusChangeToastStyles.js
@@ -0,0 +1,127 @@
+import styled, { keyframes } from 'styled-components';
+import * as Toast from '@radix-ui/react-toast';
+
+// Animation keyframes
+export const hide = keyframes`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`;
+
+export const slideIn = keyframes`
+  from {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+  to {
+    transform: translateX(0);
+  }
+`;
+
+export const swipeOut = keyframes`
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+`;
+
+// Styled components
+export const ToastViewport = styled(Toast.Viewport)`
+  --viewport-padding: 25px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--viewport-padding);
+  gap: 10px;
+  width: 390px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 2147483647;
+  outline: none;
+`;
+
+export const ToastRoot = styled(Toast.Root)`
+  background-color: white;
+  border-radius: 6px;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  padding: 15px;
+  display: grid;
+  grid-template-areas: 'title action' 'description action';
+  grid-template-columns: auto max-content;
+  column-gap: 15px;
+  align-items: center;
+  border-left: 4px solid #dc3545;
+
+  &[data-state='open'] {
+    animation: ${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state='closed'] {
+    animation: ${hide} 100ms ease-in;
+  }
+
+  &[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe='end'] {
+    animation: ${swipeOut} 100ms ease-out;
+  }
+`;
+
+export const ToastTitle = styled(Toast.Title)`
+  grid-area: title;
+  margin-bottom: 5px;
+  font-weight: 500;
+  color: #dc3545;
+  font-size: 15px;
+`;
+
+export const ToastDescription = styled(Toast.Description)`
+  grid-area: description;
+  margin: 0;
+  color: #333;
+  font-size: 13px;
+  line-height: 1.3;
+`;
+
+export const ToastAction = styled(Toast.Action)`
+  grid-area: action;
+`;
+
+export const CloseButton = styled.button`
+  all: unset;
+  font-family: inherit;
+  height: 25px;
+  width: 25px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #777;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+  }
+`;
\ No newline at end of file
diff --git a/src/common/components/utils.js b/src/common/components/utils.js
new file mode 100644
index 00000000..713e1dfe
--- /dev/null
+++ b/src/common/components/utils.js
@@ -0,0 +1,20 @@
+export async function fetchWithRetries(url, options = {}, retries = 3, delay = 500) {
+    for (let attempt = 1; attempt <= retries; attempt++) {
+        try {
+            const response = await fetch(url, options);
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            else if (response.status === 204) {
+                // retry
+                if (attempt < retries) {
+                    await new Promise(res => setTimeout(res, delay));
+                    continue;
+                }
+                
+            }
+            return response;
+        } catch (err) {
+            if (attempt === retries) throw err;
+            await new Promise(res => setTimeout(res, delay));
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/common/contexts/OrderContext.jsx b/src/common/contexts/OrderContext.jsx
new file mode 100644
index 00000000..eef826e9
--- /dev/null
+++ b/src/common/contexts/OrderContext.jsx
@@ -0,0 +1,38 @@
+import React, { createContext, useContext, useState } from 'react';
+
+import PropTypes from 'prop-types';
+
+// Create a context for order operations
+const OrderContext = createContext({
+  orderVersion: 0,
+  refreshOrders: () => {},
+});
+
+// Create a provider component
+export function OrderProvider({ children }) {
+  const [orderVersion, setOrderVersion] = useState(0);
+
+  // Function to increment the version to trigger re-renders
+  const refreshOrders = () => {
+    setOrderVersion((prev) => prev + 1);
+  };
+
+  return (
+    <OrderContext.Provider value={{ orderVersion, refreshOrders }}>
+      {children}
+    </OrderContext.Provider>
+  );
+}
+
+OrderProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+// Custom hook to use the order context
+export function useOrders() {
+  const context = useContext(OrderContext);
+  if (context === undefined) {
+    throw new Error('useOrders must be used within an OrderProvider');
+  }
+  return context;
+}
diff --git a/src/common/contexts/UserContext.jsx b/src/common/contexts/UserContext.jsx
index 8d5a1418..9cf83ff0 100644
--- a/src/common/contexts/UserContext.jsx
+++ b/src/common/contexts/UserContext.jsx
@@ -23,7 +23,6 @@ export function UserProvider({ children }) {
 
   const checkAuth = async () => {
     const token = localStorage.getItem('authToken');
-    console.log('Token from localStorage:', token);
 
     try {
       const response = await fetch(buildUrl('/auth/me'), {
@@ -38,7 +37,6 @@ export function UserProvider({ children }) {
       }
 
       const userData = await response.json();
-      console.log('User data:', userData);
       setUser(userData);
       return true;
     } catch (error) {
@@ -88,6 +86,7 @@ export function UserProvider({ children }) {
         throw new Error('Logout failed');
       }
 
+      localStorage.removeItem('authToken');
       setUser(null);
       return true;
     } catch (error) {
@@ -115,11 +114,14 @@ export function UserProvider({ children }) {
 
   const requestPasswordReset = async (email) => {
     try {
+      const access_token = localStorage.getItem('authToken');
       const response = await fetch(buildUrl('/auth/reset-password'), {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
+          Authorization: `Bearer ${access_token}`,
         },
+        credentials: 'include',
         body: JSON.stringify({ email }),
       });
 
diff --git a/src/common/layouts/NavLayout.jsx b/src/common/layouts/NavLayout.jsx
index ae73210c..d2211a84 100644
--- a/src/common/layouts/NavLayout.jsx
+++ b/src/common/layouts/NavLayout.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
 
-import NavBar from 'common/components/navigation/NavBar';
+import NavBar from 'common/components/navigation/Navbar/NavBar';
 
 const Layout = styled.div`
   height: 100vh;
diff --git a/src/common/utils/AdminStatuses.js b/src/common/utils/AdminStatuses.js
new file mode 100644
index 00000000..f57a9a80
--- /dev/null
+++ b/src/common/utils/AdminStatuses.js
@@ -0,0 +1,12 @@
+export const AdminStatuses = [
+  {
+    label: 'Status',
+    items: [
+      { label: 'Approved', value: 'approved' },
+      { label: 'Review', value: 'pending' },
+      { label: 'Denied', value: 'denied' },
+      { label: 'Arrived', value: 'arrived' },
+      { label: 'Ready', value: 'ready' },
+    ],
+  },
+];
diff --git a/src/common/utils/Filters.js b/src/common/utils/Filters.js
new file mode 100644
index 00000000..13e391fe
--- /dev/null
+++ b/src/common/utils/Filters.js
@@ -0,0 +1,25 @@
+export const Filters = [
+  {
+    label: 'Order Priority',
+    items: [
+      { label: 'Normal', value: 'priority-normal' },
+      { label: '< 2 weeks', value: 'priority-2-weeks' },
+    ],
+  },
+  { separator: true }, // separator for UI visibility
+  {
+    label: 'Price',
+    items: [
+      { label: 'Low to High', value: 'price-low' },
+      { label: 'High to Low', value: 'price-high' },
+    ],
+  },
+  { separator: true },
+  {
+    label: 'Date',
+    items: [
+      { label: 'Most Recent', value: 'date-recent' },
+      { label: 'Oldest', value: 'date-oldest' },
+    ],
+  },
+];
diff --git a/src/common/utils/ProgramMapping.js b/src/common/utils/ProgramMapping.js
new file mode 100644
index 00000000..661a9411
--- /dev/null
+++ b/src/common/utils/ProgramMapping.js
@@ -0,0 +1,58 @@
+// Program ID constants from environment variables or fallbacks
+const CREATIVE_ID =
+  process.env.REACT_APP_CREATIVE_KNOWLEDGE_CENTER_ID ||
+  '4a7f12b8-c64d-4138-93ad-92f853f03fb7';
+
+const SCHOOL_ID =
+  process.env.REACT_APP_SCHOOL_ID || '87f6bdcb-8c62-4f34-9455-eda35a28990e';
+
+const PRIVATE_ID =
+  process.env.REACT_APP_PRIVATE_ID || '0d5c4507-ddbb-4011-a8a5-5d51279d8edb';
+
+const COMMUNITY_ID =
+  process.env.REACT_APP_COMMUNITY_ID || '0d3605b4-cb25-4874-ad4b-e6041aabe5f1';
+
+// Program ID to name mapping
+export const programIdToName = {
+  [CREATIVE_ID]: 'Creative Knowledge Center',
+  [SCHOOL_ID]: 'School',
+  [PRIVATE_ID]: 'Private',
+  [COMMUNITY_ID]: 'Community',
+};
+
+// Program name to ID mapping (reverse of the above)
+export const programNameToId = {
+  'Creative Knowledge Center': CREATIVE_ID,
+  School: SCHOOL_ID,
+  Private: PRIVATE_ID,
+  Community: COMMUNITY_ID,
+};
+
+// Helper function to get program name from ID
+export function getProgramNameById(programId) {
+  return programIdToName[programId] || 'Unknown Program';
+}
+
+// Helper function to get program ID from name
+export function getProgramIdByName(programName) {
+  return programNameToId[programName] || null;
+}
+
+// Program abbreviations (as used in OrderTable)
+export const programAbbreviations = {
+  'Creative Knowledge Center': 'CKC',
+  School: 'SP',
+  Private: 'PT',
+  Community: 'CP',
+};
+
+// Helper function to get abbreviation from program name
+export function getProgramAbbreviation(programName) {
+  return programAbbreviations[programName] || '';
+}
+
+// Helper function to get abbreviation from program ID
+export function getProgramAbbreviationById(programId) {
+  const programName = getProgramNameById(programId);
+  return getProgramAbbreviation(programName);
+}
diff --git a/src/common/utils/ProgramOptions.js b/src/common/utils/ProgramOptions.js
new file mode 100644
index 00000000..9564d852
--- /dev/null
+++ b/src/common/utils/ProgramOptions.js
@@ -0,0 +1,31 @@
+export const ProgramOptions = [
+  {
+    label: 'Programs',
+    items: [
+      {
+        label: 'Creative Knowledge Center',
+        value:
+          process.env.REACT_APP_CREATIVE_KNOWLEDGE_CENTER_ID ||
+          '4a7f12b8-c64d-4138-93ad-92f853f03fb7',
+      },
+      {
+        label: 'School',
+        value:
+          process.env.REACT_APP_SCHOOL_ID ||
+          '87f6bdcb-8c62-4f34-9455-eda35a28990e',
+      },
+      {
+        label: 'Private',
+        value:
+          process.env.REACT_APP_PRIVATE_ID ||
+          '0d5c4507-ddbb-4011-a8a5-5d51279d8edb',
+      },
+      {
+        label: 'Community',
+        value:
+          process.env.REACT_APP_COMMUNITY_ID ||
+          '0d3605b4-cb25-4874-ad4b-e6041aabe5f1',
+      },
+    ],
+  },
+];
diff --git a/src/index.css b/src/index.css
index 85e778f4..b5132c0d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,6 @@
+@import "tailwindcss";
+
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
diff --git a/src/index.jsx b/src/index.jsx
index a29b8bfa..59f4f9a1 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,5 +1,10 @@
 import React from 'react';
 
+// CSS for order table
+import 'primeicons/primeicons.css';
+// Theme for order table
+import 'primereact/resources/primereact.min.css';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
 import ReactDOM from 'react-dom/client';
 
 import App from './App';
diff --git a/src/output.css b/src/output.css
new file mode 100644
index 00000000..1df3d01a
--- /dev/null
+++ b/src/output.css
@@ -0,0 +1,392 @@
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-red-500: oklch(0.637 0.237 25.331);
+    --spacing: 0.25rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --default-font-variation-settings: var(
+      --font-sans--font-variation-settings
+    );
+    --default-mono-font-family: var(--font-mono);
+    --default-mono-font-feature-settings: var(
+      --font-mono--font-feature-settings
+    );
+    --default-mono-font-variation-settings: var(
+      --font-mono--font-variation-settings
+    );
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var( --default-font-variation-settings, normal );
+    -webkit-tap-highlight-color: transparent;
+  }
+  body {
+    line-height: inherit;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );
+    font-feature-settings: var( --default-mono-font-feature-settings, normal );
+    font-variation-settings: var( --default-mono-font-variation-settings, normal );
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+    color: color-mix(in oklab, currentColor 50%, transparent);
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+  .resize {
+    resize: both;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+  .capitalize {
+    text-transform: capitalize;
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .grayscale {
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+}
+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;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateX(0);
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateY(0);
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: rotateZ(0);
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewX(0);
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: skewY(0);
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
diff --git a/src/pages/account/EmailVerification.jsx b/src/pages/account/EmailVerification.jsx
index 61369348..22cfe7e4 100644
--- a/src/pages/account/EmailVerification.jsx
+++ b/src/pages/account/EmailVerification.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Subtitle, Title } from 'common/components/Text';
+import { Subtitle, Title } from 'common/components/form/Text';
 
 const VerificationPage = styled.div`
   flex: 1 0 0;
diff --git a/src/pages/account/Login.jsx b/src/pages/account/Login.jsx
index f7d06554..49e37bfe 100644
--- a/src/pages/account/Login.jsx
+++ b/src/pages/account/Login.jsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import GoogleButton from 'common/components/GoogleButton';
+import GoogleButton from 'assets/icons/GoogleButton';
 import { Form, FormTitle } from 'common/components/form/Form';
 import { Input } from 'common/components/form/Input';
 import SubmitButton from 'common/components/form/SubmitButton';
@@ -16,9 +16,8 @@ const StyledLink = styled(Link)`
   color: #007bff;
   text-decoration: none;
   font-size: 0.9rem;
-  margin-top: -10px;
-  align-self: flex-end;
-
+  align-self: center;
+  margin-top: 10px;
   &:hover {
     text-decoration: underline;
   }
@@ -83,10 +82,13 @@ export default function Login() {
           onChange={handleChange}
           required
         />
-        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
         <SubmitButton disabled={isLoading}>
           {isLoading ? 'Logging in...' : 'Log In'}
         </SubmitButton>
+        <StyledLink to='/forgot-password'>Forgot Password?</StyledLink>
+        <StyledLink to='/signup'>
+          Don't have an account? Sign up here!
+        </StyledLink>
         <GoogleButton
           onClick={handleGoogleLogin}
           isLoading={isLoading}
diff --git a/src/pages/account/ResetPassword.jsx b/src/pages/account/ResetPassword.jsx
index 890c4e8e..5b7e9de7 100644
--- a/src/pages/account/ResetPassword.jsx
+++ b/src/pages/account/ResetPassword.jsx
@@ -89,6 +89,7 @@ export default function ResetPassword() {
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const { updatePassword } = useUser();
+  const { setUser } = useUser();
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -185,6 +186,8 @@ export default function ResetPassword() {
     try {
       console.log('Attempting password reset with token');
       await updatePassword(password, access_token);
+      setUser(null);
+      localStorage.removeItem('authToken');
 
       navigate('/login', {
         state: {
@@ -232,6 +235,16 @@ export default function ResetPassword() {
         <Button type='submit' disabled={isLoading}>
           {isLoading ? 'Updating...' : 'Update Password'}
         </Button>
+        <Button
+          type='reset'
+          style={{
+            backgroundColor: 'rgb(255, 74, 74)',
+            marginTop: '-10px',
+          }}
+        >
+          Cancel
+        </Button>
+
         {error && <ErrorMessage>{error}</ErrorMessage>}
       </Form>
     </Container>
diff --git a/src/pages/account/SignUp.jsx b/src/pages/account/SignUp.jsx
index 78502820..6c1199cd 100644
--- a/src/pages/account/SignUp.jsx
+++ b/src/pages/account/SignUp.jsx
@@ -1,14 +1,68 @@
 import React, { useState } from 'react';
 
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
 
-import GoogleButton from 'common/components/GoogleButton';
+import GoogleButton from 'assets/icons/GoogleButton';
 import { Form, FormTitle } from 'common/components/form/Form';
 import { Input } from 'common/components/form/Input';
 import SubmitButton from 'common/components/form/SubmitButton';
 import { useUser } from 'common/contexts/UserContext';
-
-import { StyledPage } from './styles';
+import PropTypes from 'prop-types';
+
+import { StyledPage, InputTitle } from './styles';
+
+const StyledLink = styled(Link)`
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.9rem;
+  align-self: center;
+  margin-top: 10px;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const FieldDropdown = styled.select`
+  font-size: 16px;
+  padding: 0.5rem;
+  border: 1px solid #000000;
+  margin-bottom: 0.5rem;
+  text-align: center;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+const SingleSelectDropdown = ({
+  options,
+  selectedOption,
+  onChange,
+  required,
+}) => {
+  return (
+    <FieldDropdown
+      value={selectedOption}
+      onChange={onChange}
+      required={required}
+    >
+      <option value='' disabled>
+        Select an option
+      </option>
+      {Object.keys(options).map((option) => (
+        <option key={option} value={option}>
+          {options[option]}
+        </option>
+      ))}
+    </FieldDropdown>
+  );
+};
+SingleSelectDropdown.propTypes = {
+  options: PropTypes.objectOf(PropTypes.string).isRequired,
+  selectedOption: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  required: PropTypes.bool,
+};
 
 export default function SignUp() {
   const navigate = useNavigate();
@@ -22,8 +76,16 @@ export default function SignUp() {
     email: '',
     password: '',
     username: '',
+    specialization: '',
   });
 
+  const therapistMap = {
+    art: 'Art Therapy',
+    dance: 'Dance / Movement Therapy',
+    drama: 'Drama Therapy',
+    music: 'Music Therapy',
+  };
+
   const handleChangeFirstname = (e) => {
     setFormState({ ...formState, firstname: e.target.value });
     setError('');
@@ -49,6 +111,11 @@ export default function SignUp() {
     setError('');
   };
 
+  const handleChangeSpecialization = (e) => {
+    setFormState({ ...formState, specialization: e.target.value });
+    setError('');
+  };
+
   const handleGoogleSignup = async () => {
     try {
       await googleAuth();
@@ -76,6 +143,7 @@ export default function SignUp() {
             username: formState.username || undefined,
             firstname: formState.firstname || undefined,
             lastname: formState.lastname || undefined,
+            specialization: formState.specialization || undefined,
           }),
         }
       );
@@ -138,9 +206,20 @@ export default function SignUp() {
           onChange={handleChangePassword}
           required
         />
+
+        <InputTitle>Specialization</InputTitle>
+        <SingleSelectDropdown
+          options={therapistMap}
+          selectedOption={formState.specialization}
+          onChange={handleChangeSpecialization}
+          required
+        />
         <SubmitButton onClick={() => {}} disabled={isLoading}>
           {isLoading ? 'Creating account...' : 'Sign Up'}
         </SubmitButton>
+        <StyledLink to='/login'>
+          Already have an account? Log in here!
+        </StyledLink>
         <GoogleButton
           onClick={handleGoogleSignup}
           isLoading={isLoading}
diff --git a/src/pages/account/styles.js b/src/pages/account/styles.js
index 0c2bdb12..272d3e1b 100644
--- a/src/pages/account/styles.js
+++ b/src/pages/account/styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Button } from 'common/components/Button';
+import { Button } from 'common/components/form/Button';
 
 export const StyledForm = styled.form`
   display: flex;
@@ -12,6 +12,10 @@ export const StyledForm = styled.form`
   margin-top: 40px;
 `;
 
+export const InputTitle = styled.span`
+  margin-right: 2px;
+  text-align: left;
+`;
 export const StyledInput = styled.input`
   font-size: 1rem;
   padding: 8px;
diff --git a/src/pages/admin/AdminHome/AdminHome.jsx b/src/pages/admin/AdminHome/AdminHome.jsx
new file mode 100644
index 00000000..f31457f4
--- /dev/null
+++ b/src/pages/admin/AdminHome/AdminHome.jsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import {
+  AdminHomePage,
+  ContentContainer,
+  LeftAlignedTitle,
+} from './AdminHomeStyles';
+import NewMonthlyBudget from 'common/components/admin_modals/NewMonthlyBudget';
+import OrderTable from 'common/components/OrderTable';
+import ProgramBudgetList from 'common/components/ProgramBudgetList';
+
+export default function AdminHome() {
+  const [showBudgetPopup, setShowBudgetPopup] = useState(false);
+  const handleBudgetUpdate = async (data) => {
+    let budget = data.budget;
+    let programID = data.programID;
+    try {
+      const response = await fetch(
+        `${process.env.REACT_APP_BACKEND_URL}/admin/budget/${programID}`,
+        {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+          },
+          body: JSON.stringify({
+            budget: budget,
+          }),
+          credentials: 'include',
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`Failed to update budget: ${response.status}`);
+      }
+      const updatedBudget = await response.json();
+      console.log('Budget updated successfully:', updatedBudget);
+      // Increment the refresh trigger to force re-render and data refresh
+      window.location.reload();
+    } catch (error) {
+      console.error('Error updating budget:', error);
+    } finally {
+      setShowBudgetPopup(false);
+    }
+  };
+  return (
+    <AdminHomePage>
+      <ContentContainer>
+        <LeftAlignedTitle>Admin Homepage</LeftAlignedTitle>
+        <ProgramBudgetList
+          onSetBudgetClick={() => {
+            setShowBudgetPopup(true);
+            console.log('Set Budget button clicked');
+          }}
+        />
+        {showBudgetPopup && (
+          <NewMonthlyBudget
+            onCancel={() => setShowBudgetPopup(false)}
+            onConfirm={handleBudgetUpdate}
+          />
+        )}
+      </ContentContainer>
+      <OrderTable />
+    </AdminHomePage>
+  );
+}
diff --git a/src/pages/admin/AdminHome/AdminHomeStyles.js b/src/pages/admin/AdminHome/AdminHomeStyles.js
new file mode 100644
index 00000000..87236a56
--- /dev/null
+++ b/src/pages/admin/AdminHome/AdminHomeStyles.js
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { Title as BaseTitle } from 'common/components/form/Text';
+
+const AdminHomePage = styled.div`
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+`;
+
+const ContentContainer = styled.div`
+  margin-left: 2vw;
+  margin-right: 2vw;
+  text-align: left;
+`;
+
+const LeftAlignedTitle = styled(BaseTitle)`
+  text-align: center;
+  font-size: 2rem;
+  font-weight: 700;
+  color: #333;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
+  position: relative;
+`;
+
+// Export all styled components
+export { AdminHomePage, ContentContainer, LeftAlignedTitle };
diff --git a/src/pages/admin/PeopleManagement/PeopleManagement.jsx b/src/pages/admin/PeopleManagement/PeopleManagement.jsx
new file mode 100644
index 00000000..c68511d6
--- /dev/null
+++ b/src/pages/admin/PeopleManagement/PeopleManagement.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import UsersList from 'common/components/Users/UsersList/UsersList';
+import { Container, ContentBox, Title } from './PeopleManagementStyles';
+
+const PeopleManagement = () => {
+  return (
+    <Container>
+      <ContentBox>
+        <Title>User Management</Title>
+        <UsersList />
+      </ContentBox>
+    </Container>
+  );
+};
+
+export default PeopleManagement;
diff --git a/src/pages/admin/PeopleManagement/PeopleManagementStyles.js b/src/pages/admin/PeopleManagement/PeopleManagementStyles.js
new file mode 100644
index 00000000..1f1c12f6
--- /dev/null
+++ b/src/pages/admin/PeopleManagement/PeopleManagementStyles.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+`;
+
+const ContentBox = styled.div`
+  margin: 2rem 0;
+`;
+
+const Title = styled.h1`
+  font-size: 2rem;
+  margin-bottom: 1rem;
+`;
+
+export { Container, ContentBox, Title };
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
index 827c148f..4d47b7c2 100644
--- a/src/pages/home/Home.jsx
+++ b/src/pages/home/Home.jsx
@@ -1,15 +1,18 @@
 import React, { useContext } from 'react';
 
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Subtitle, Title } from 'common/components/Text';
-import UsersList from 'common/components/Users/UsersList';
+import { Button } from 'common/components/form/Button';
+import { Subtitle, Title } from 'common/components/form/Text';
+import UsersList from 'common/components/Users/UsersList/UsersList'
 import { UserContext } from 'common/contexts/UserContext';
 
 const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 20px;
+  margin-bottom: 2rem;
 `;
 
 const HomePage = styled.div`
@@ -21,8 +24,16 @@ const HomePage = styled.div`
   padding: 2rem;
 `;
 
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+`;
+
 export default function Home() {
   const { user } = useContext(UserContext);
+  const navigate = useNavigate();
 
   return (
     <HomePage>
@@ -30,6 +41,15 @@ export default function Home() {
         <Title>Home Page</Title>
         <Subtitle>Welcome, {user?.firstname || 'User'}!</Subtitle>
       </TextContainer>
+
+      <ButtonContainer>
+        <Button.Primary onClick={() => navigate('/admin')}>
+          Admin
+        </Button.Primary>
+        <Button.Primary onClick={() => navigate('/therapist')}>
+          Therapist
+        </Button.Primary>
+      </ButtonContainer>
       <UsersList />
     </HomePage>
   );
diff --git a/src/pages/settings/SettingsPage.jsx b/src/pages/settings/SettingsPage.jsx
new file mode 100644
index 00000000..8dc07e1e
--- /dev/null
+++ b/src/pages/settings/SettingsPage.jsx
@@ -0,0 +1,200 @@
+import React, { useEffect, useState } from 'react';
+
+import { Title } from 'common/components/form/Text';
+import { useUser } from 'common/contexts/UserContext';
+import { useNavigate } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import NewAdmin from 'common/components/admin_modals/NewAdmin';
+import {
+  SettingsPage,
+  AddAdminButton,
+  TextContainer,
+  FieldLabel,
+  FieldValue,
+  FieldDropdown,
+  ChangePasswordButton,
+  LogoutButton,
+  UpdateButton,
+} from './SettingsPageStyles';
+import LogoutModal from 'common/components/navigation/LogoutModal/LogoutModal';
+
+export const SingleSelectDropdown = ({ options, selectedOption, onChange }) => {
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <FieldDropdown value={selectedOption} onChange={handleChange}>
+      <option value='' disabled>
+        Select an option
+      </option>
+      {Object.keys(options).map((option) => (
+        <option key={option} value={option}>
+          {options[option]}
+        </option>
+      ))}
+    </FieldDropdown>
+  );
+};
+SingleSelectDropdown.propTypes = {
+  options: PropTypes.objectOf(PropTypes.string).isRequired,
+  selectedOption: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default function AdminSettings() {
+  const [isLogoutOpen, setIsLogoutOpen] = useState(false);
+  const { user, setUser, logout } = useUser();
+  const [specialization, setSpecialization] = useState('');
+  const [showNewAdminPopup, setshowNewAdminPopup] = useState(false);
+  const therapistMap = {
+    art: 'Art Therapy',
+    dance: 'Dance / Movement Therapy',
+    drama: 'Drama Therapy',
+    music: 'Music Therapy',
+  };
+  useEffect(() => {
+    if (user && user.specialization) {
+      setSpecialization(user.specialization);
+    }
+  }, [user]);
+
+  const navigate = useNavigate();
+  const handlePasswordChange = () => {
+    navigate('/forgot-password');
+  };
+  const handleAddAdminClick = () => {
+    setshowNewAdminPopup(true);
+  };
+  const handleCloseNewAdminPopup = () => {
+    setshowNewAdminPopup(false);
+  };
+
+  const handleUpdate = async () => {
+    try {
+      const response = await fetch(
+        `${process.env.REACT_APP_BACKEND_URL}/therapist/${user.id}/specialization`,
+        {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${localStorage.getItem('authToken')}`,
+          },
+          body: JSON.stringify({ specialization: specialization }),
+          credentials: 'include',
+        }
+      );
+      console.log(response);
+      if (response.ok) {
+        alert('Settings updated successfully');
+      } else {
+        alert('Failed to update settings');
+        return;
+      }
+      const updatedUser = { ...user, specialization: specialization };
+      setUser(updatedUser); // Assuming `setUser` is available from `useUser()`
+
+      setSpecialization('');
+
+      navigate(`/${user.position_title}`); // Redirect to the admin page after successful update
+    } catch (error) {
+      console.error('Error updating settings:', error);
+    }
+  };
+
+  const handleLogout = async () => {
+    await logout();
+    setIsLogoutOpen(false);
+  };
+
+  return (
+    <SettingsPage>
+      <TextContainer>
+        <Title>Account Settings</Title>
+        <FieldLabel>Full Name</FieldLabel>
+        <FieldValue>
+          {user.firstname} {user.lastname}
+        </FieldValue>
+        <FieldLabel>Email</FieldLabel>
+        <FieldValue>{user.email}</FieldValue>
+        <FieldLabel>Role</FieldLabel>
+        {user.position_title === 'therapist' ? (
+          <FieldValue>Therapist</FieldValue>
+        ) : (
+          <FieldValue>Admin</FieldValue>
+        )}
+        <FieldLabel>Specialization</FieldLabel>
+
+        {user.position_title === 'therapist' ? (
+          <SingleSelectDropdown
+            options={therapistMap}
+            selectedOption={specialization}
+            onChange={setSpecialization}
+          />
+        ) : user.specialization === 'standard_admin' ? (
+          <FieldValue>Standard Admin</FieldValue>
+        ) : user.specialization === 'super_admin' ? (
+          <FieldValue>Super Admin</FieldValue>
+        ) : (
+          <FieldValue>{''}</FieldValue>
+        )}
+        {user.specialization === 'super_admin' && (
+          <AddAdminButton onClick={handleAddAdminClick}>
+            Add Admin
+          </AddAdminButton>
+        )}
+        <ChangePasswordButton onClick={handlePasswordChange}>
+          Change Password
+        </ChangePasswordButton>
+        {user.position_title === 'therapist' && (
+          <UpdateButton onClick={handleUpdate}>Update Settings</UpdateButton>
+        )}
+        <LogoutButton onClick={() => setIsLogoutOpen(true)}>
+          Logout
+        </LogoutButton>
+        <LogoutModal
+          isOpen={isLogoutOpen}
+          onClose={() => setIsLogoutOpen(false)}
+          onLogout={handleLogout}
+        />
+      </TextContainer>
+      {/* Render the NewAdminConfirm popup */}
+      {showNewAdminPopup && (
+        <NewAdmin
+          open={true}
+          onCancel={handleCloseNewAdminPopup} // Close the popup when the user clicks "Close"
+          onConfirm={async (adminData) => {
+            try {
+              const response = await fetch(
+                `${process.env.REACT_APP_BACKEND_URL}/auth/signup`,
+                {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    authorization: `Bearer ${localStorage.getItem('authToken')}`,
+                  },
+                  credentials: 'include',
+                  body: JSON.stringify(adminData),
+                }
+              );
+
+              if (response.ok) {
+                alert('Admin created successfully');
+              } else {
+                const errorData = await response.json();
+                alert(
+                  `Failed to create admin: ${errorData.error || 'Unknown error'}`
+                );
+              }
+            } catch (error) {
+              console.error('Error creating admin:', error);
+            } finally {
+              // Close the popup after the operation
+              handleCloseNewAdminPopup();
+            }
+          }}
+        />
+      )}
+    </SettingsPage>
+  );
+}
diff --git a/src/pages/settings/SettingsPageStyles.js b/src/pages/settings/SettingsPageStyles.js
new file mode 100644
index 00000000..a366a74a
--- /dev/null
+++ b/src/pages/settings/SettingsPageStyles.js
@@ -0,0 +1,93 @@
+import styled from 'styled-components';
+
+export const SettingsPage = styled.div`
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+`;
+
+export const AddAdminButton = styled.button`
+  background-color: var(--newadmin-purple);
+  color: white;
+  border-radius: 25px;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  font-size: 1.25rem;
+  margin-top: 1rem;
+  align-self: center;
+`;
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export const FieldLabel = styled.h1`
+  font-size: 14px;
+  color: #555;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+`;
+
+export const FieldValue = styled.div`
+  font-size: 16px;
+  padding: 0.5rem;
+  border: 1px solid #e0e0e0;
+  margin-bottom: 0.5rem;
+  text-align: center;
+  width: 40%;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+export const FieldDropdown = styled.select`
+  font-size: 16px;
+  padding: 0.5rem;
+  border: 1px solid #000000;
+  margin-bottom: 0.5rem;
+  text-align: center;
+  width: 40%;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+export const ChangePasswordButton = styled.button`
+  color: #0069ff;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  margin-top: 1rem;
+  align-self: center;
+`;
+
+export const LogoutButton = styled.button`
+  background-color: #f66e6f;
+  color: white;
+  border-radius: 25px;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  font-size: 1.25rem;
+  margin-top: 1rem;
+  align-self: center;
+`;
+
+export const UpdateButton = styled.button`
+  background-color: rgb(21, 33, 244);
+  color: white;
+  border-radius: 25px;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  font-size: 1.25rem;
+  margin-top: 1rem;
+  align-self: center;
+`;
\ No newline at end of file
diff --git a/src/pages/therapist/TherapistHome.jsx b/src/pages/therapist/TherapistHome.jsx
new file mode 100644
index 00000000..3192bc84
--- /dev/null
+++ b/src/pages/therapist/TherapistHome.jsx
@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+
+import { UserContext } from 'common/contexts/UserContext';
+import { Title } from 'common/components/form/Text';
+import OrderTable from 'common/components/OrderTableTherapist';
+import NewOrderForm from 'common/components/table_pop_ups/NewOrderForm';
+import ProgramBudgetList from 'common/components/ProgramBudgetList';
+
+const TherapistHomePage = styled.div`
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 2rem;
+`;
+
+const FormDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-bottom: 10px;
+`;
+
+export default function TherapistHome() {
+  const { user } = useContext(UserContext);
+
+  return (
+    <TherapistHomePage>
+      <TextContainer>
+        <Title>Welcome, {user?.firstname}!</Title>
+      </TextContainer>
+      <ProgramBudgetList />
+      <FormDiv>
+        <NewOrderForm />
+      </FormDiv>
+      <OrderTable />
+    </TherapistHomePage>
+  );
+}