From 096af1510a421d96a1d1af4723f63b806540a690 Mon Sep 17 00:00:00 2001
From: Sonny Nguyen <sonnynguyen163@gmail.com>
Date: Fri, 12 Apr 2024 17:45:33 -0700
Subject: [PATCH 1/3] Split timer displays, added stepper, convert settings to
 drawer, update context

---
 knip.config.json                              |    4 +
 package-lock.json                             | 1355 ++++++++++++++++-
 package.json                                  |    4 +-
 public/pomoparty-logo-white.webp              |  Bin 7568 -> 0 bytes
 public/svg/alert.svg                          |    1 +
 public/svg/pizza-slice.svg                    |    8 +
 public/svg/pizza.svg                          |   77 +
 src/app/_components/Dashboard.tsx             |   14 -
 src/app/_components/Navbar.tsx                |   40 +-
 src/app/_components/Timer.tsx                 |  145 --
 src/app/_components/context/TimerContext.tsx  |   25 +-
 src/app/_components/settings/Settings.tsx     |   93 --
 src/app/_components/timer/BreakTimer.tsx      |   62 +
 src/app/_components/timer/PomodoroTimer.tsx   |   72 +
 src/app/_components/timer/Stepper.tsx         |   55 +
 src/app/_components/timer/Timer.tsx           |   36 +
 .../_components/timer/TimerButtonGroup.tsx    |   97 ++
 src/app/_components/timer/TimerDisplay.tsx    |   49 +
 .../settings/NotificationSettings.tsx         |   13 +-
 .../settings/SaveSettingsAlert.tsx            |   19 +-
 .../timer/settings/SettingsDrawer.tsx         |   73 +
 .../{ => timer}/settings/TimerSettings.tsx    |    8 +-
 src/app/_utils/actions.ts                     |   10 +
 src/app/_utils/helpers.ts                     |    1 +
 src/app/_utils/types.ts                       |    1 +
 src/app/duo-timer/page.tsx                    |   10 -
 src/app/globals.css                           |    2 +
 src/app/page.tsx                              |    9 +-
 tailwind.config.ts                            |    5 +-
 tsconfig.json                                 |    1 +
 30 files changed, 1965 insertions(+), 324 deletions(-)
 create mode 100644 knip.config.json
 delete mode 100644 public/pomoparty-logo-white.webp
 create mode 100644 public/svg/alert.svg
 create mode 100644 public/svg/pizza-slice.svg
 create mode 100644 public/svg/pizza.svg
 delete mode 100644 src/app/_components/Dashboard.tsx
 delete mode 100644 src/app/_components/Timer.tsx
 delete mode 100644 src/app/_components/settings/Settings.tsx
 create mode 100644 src/app/_components/timer/BreakTimer.tsx
 create mode 100644 src/app/_components/timer/PomodoroTimer.tsx
 create mode 100644 src/app/_components/timer/Stepper.tsx
 create mode 100644 src/app/_components/timer/Timer.tsx
 create mode 100644 src/app/_components/timer/TimerButtonGroup.tsx
 create mode 100644 src/app/_components/timer/TimerDisplay.tsx
 rename src/app/_components/{ => timer}/settings/NotificationSettings.tsx (91%)
 rename src/app/_components/{ => timer}/settings/SaveSettingsAlert.tsx (60%)
 create mode 100644 src/app/_components/timer/settings/SettingsDrawer.tsx
 rename src/app/_components/{ => timer}/settings/TimerSettings.tsx (91%)
 create mode 100644 src/app/_utils/helpers.ts
 delete mode 100644 src/app/duo-timer/page.tsx

diff --git a/knip.config.json b/knip.config.json
new file mode 100644
index 0000000..ec85384
--- /dev/null
+++ b/knip.config.json
@@ -0,0 +1,4 @@
+{
+  "entry": ["src/app/{layout,page}.{tsx}"],
+  "project": ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}"]
+}
diff --git a/package-lock.json b/package-lock.json
index e375219..b451c0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
         "husky": "^9.0.11",
+        "knip": "^5.9.4",
         "lint-staged": "^15.2.2",
         "postcss": "^8.4.38",
         "prettier": "^3.2.5",
@@ -192,6 +193,36 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@ericcornelissen/bash-parser": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@ericcornelissen/bash-parser/-/bash-parser-0.5.2.tgz",
+      "integrity": "sha512-4pIMTa1nEFfMXitv7oaNEWOdM+zpOZavesa5GaiWTgda6Zk32CFGxjUp/iIaN0PwgUW1yTq/fztSjbpE8SLGZQ==",
+      "dev": true,
+      "dependencies": {
+        "array-last": "^1.1.1",
+        "babylon": "^6.9.1",
+        "compose-function": "^3.0.3",
+        "deep-freeze": "0.0.1",
+        "filter-iterator": "0.0.1",
+        "filter-obj": "^1.1.0",
+        "has-own-property": "^0.1.0",
+        "identity-function": "^1.0.0",
+        "is-iterable": "^1.1.0",
+        "iterable-lookahead": "^1.0.0",
+        "lodash.curry": "^4.1.1",
+        "magic-string": "^0.16.0",
+        "map-obj": "^2.0.0",
+        "object-pairs": "^0.1.0",
+        "object-values": "^1.0.0",
+        "reverse-arguments": "^1.0.0",
+        "shell-quote-word": "^1.0.1",
+        "to-pascal-case": "^1.0.0",
+        "unescape-js": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -583,6 +614,178 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/@npmcli/git": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-5.0.6.tgz",
+      "integrity": "sha512-4x/182sKXmQkf0EtXxT26GEsaOATpD7WVtza5hrYivWZeo6QefC6xq9KAXrnjtFKBZ4rZwR7aX/zClYYXgtwLw==",
+      "dev": true,
+      "dependencies": {
+        "@npmcli/promise-spawn": "^7.0.0",
+        "lru-cache": "^10.0.1",
+        "npm-pick-manifest": "^9.0.0",
+        "proc-log": "^4.0.0",
+        "promise-inflight": "^1.0.1",
+        "promise-retry": "^2.0.1",
+        "semver": "^7.3.5",
+        "which": "^4.0.0"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/git/node_modules/isexe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@npmcli/git/node_modules/proc-log": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.0.0.tgz",
+      "integrity": "sha512-v1lzmYxGDs2+OZnmYtYZK3DG8zogt+CbQ+o/iqqtTfpyCmGWulCTEQu5GIbivf7OjgIkH2Nr8SH8UxAGugZNbg==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/git/node_modules/which": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/map-workspaces": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@npmcli/map-workspaces/-/map-workspaces-3.0.6.tgz",
+      "integrity": "sha512-tkYs0OYnzQm6iIRdfy+LcLBjcKuQCeE5YLb8KnrIlutJfheNaPvPpgoFEyEFgbjzl5PLZ3IA/BWAwRU0eHuQDA==",
+      "dev": true,
+      "dependencies": {
+        "@npmcli/name-from-folder": "^2.0.0",
+        "glob": "^10.2.2",
+        "minimatch": "^9.0.0",
+        "read-package-json-fast": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/map-workspaces/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,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@npmcli/map-workspaces/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@npmcli/name-from-folder": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/name-from-folder/-/name-from-folder-2.0.0.tgz",
+      "integrity": "sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/package-json": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-5.0.3.tgz",
+      "integrity": "sha512-cgsjCvld2wMqkUqvY+SZI+1ZJ7umGBYc9IAKfqJRKJCcs7hCQYxScUgdsyrRINk3VmdCYf9TXiLBHQ6ECTxhtg==",
+      "dev": true,
+      "dependencies": {
+        "@npmcli/git": "^5.0.0",
+        "glob": "^10.2.2",
+        "hosted-git-info": "^7.0.0",
+        "json-parse-even-better-errors": "^3.0.0",
+        "normalize-package-data": "^6.0.0",
+        "proc-log": "^4.0.0",
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/package-json/node_modules/json-parse-even-better-errors": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
+      "integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/package-json/node_modules/proc-log": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-4.0.0.tgz",
+      "integrity": "sha512-v1lzmYxGDs2+OZnmYtYZK3DG8zogt+CbQ+o/iqqtTfpyCmGWulCTEQu5GIbivf7OjgIkH2Nr8SH8UxAGugZNbg==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/promise-spawn": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-7.0.1.tgz",
+      "integrity": "sha512-P4KkF9jX3y+7yFUxgcUdDtLy+t4OlDGuEBLNs57AZsfSfg+uV6MLndqGpnl4831ggaEdXwR50XFoZP4VFtHolg==",
+      "dev": true,
+      "dependencies": {
+        "which": "^4.0.0"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@npmcli/promise-spawn/node_modules/isexe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@npmcli/promise-spawn/node_modules/which": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -605,6 +808,243 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@pnpm/constants": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@pnpm/constants/-/constants-7.1.1.tgz",
+      "integrity": "sha512-31pZqMtjwV+Vaq7MaPrT1EoDFSYwye3dp6BiHIGRJmVThCQwySRKM7hCvqqI94epNkqFAAYoWrNynWoRYosGdw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
+    "node_modules/@pnpm/core-loggers": {
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/@pnpm/core-loggers/-/core-loggers-9.0.6.tgz",
+      "integrity": "sha512-iK67SGbp+06bA/elpg51wygPFjNA7JKHtKkpLxqXXHw+AjFFBC3f2OznJsCIuDK6HdGi5UhHLYqo5QxJ2gMqJQ==",
+      "dev": true,
+      "dependencies": {
+        "@pnpm/types": "9.4.2"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      },
+      "peerDependencies": {
+        "@pnpm/logger": "^5.0.0"
+      }
+    },
+    "node_modules/@pnpm/error": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/error/-/error-5.0.2.tgz",
+      "integrity": "sha512-0TEm+tWNYm+9uh6DSKyRbv8pv/6b4NL0PastLvMxIoqZbBZ5Zj1cYi332R9xsSUi31ZOsu2wpgn/bC7DA9hrjg==",
+      "dev": true,
+      "dependencies": {
+        "@pnpm/constants": "7.1.1"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
+    "node_modules/@pnpm/fetching-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/fetching-types/-/fetching-types-5.0.0.tgz",
+      "integrity": "sha512-o9gdO1v8Uc5P2fBBuW6GSpfTqIivQmQlqjQJdFiQX0m+tgxlrMRneIg392jZuc6fk7kFqjLheInlslgJfwY+4Q==",
+      "dev": true,
+      "dependencies": {
+        "@zkochan/retry": "^0.2.0",
+        "node-fetch": "3.0.0-beta.9"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
+    "node_modules/@pnpm/graceful-fs": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/graceful-fs/-/graceful-fs-3.2.0.tgz",
+      "integrity": "sha512-vRoXJxscDpHak7YE9SqCkzfrayn+Lw+YueOeHIPEqkgokrHeYgYeONoc2kGh0ObHaRtNSsonozVfJ456kxLNvA==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.11"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
+    "node_modules/@pnpm/logger": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/logger/-/logger-5.0.0.tgz",
+      "integrity": "sha512-YfcB2QrX+Wx1o6LD1G2Y2fhDhOix/bAY/oAnMpHoNLsKkWIRbt1oKLkIFvxBMzLwAEPqnYWguJrYC+J6i4ywbw==",
+      "dev": true,
+      "dependencies": {
+        "bole": "^5.0.0",
+        "ndjson": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
+    "node_modules/@pnpm/npm-package-arg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/npm-package-arg/-/npm-package-arg-1.0.0.tgz",
+      "integrity": "sha512-oQYP08exi6mOPdAZZWcNIGS+KKPsnNwUBzSuAEGWuCcqwMAt3k/WVCqVIXzBxhO5sP2b43og69VHmPj6IroKqw==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^4.0.1",
+        "semver": "^7.3.5",
+        "validate-npm-package-name": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14.6"
+      }
+    },
+    "node_modules/@pnpm/npm-package-arg/node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@pnpm/npm-package-arg/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@pnpm/npm-package-arg/node_modules/validate-npm-package-name": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
+      "integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
+      "dev": true,
+      "dependencies": {
+        "builtins": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@pnpm/npm-resolver": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/npm-resolver/-/npm-resolver-18.1.0.tgz",
+      "integrity": "sha512-fUYKX/iHiHldL0VRVvkQI35YK2jWhZEkPO6rrGke8309+LKAo12v833nBttMDpQrtHefmqhB4mhCzQq6L2Xqmg==",
+      "dev": true,
+      "dependencies": {
+        "@pnpm/core-loggers": "9.0.6",
+        "@pnpm/error": "5.0.2",
+        "@pnpm/fetching-types": "5.0.0",
+        "@pnpm/graceful-fs": "3.2.0",
+        "@pnpm/resolve-workspace-range": "5.0.1",
+        "@pnpm/resolver-base": "11.1.0",
+        "@pnpm/types": "9.4.2",
+        "@zkochan/retry": "^0.2.0",
+        "encode-registry": "^3.0.1",
+        "load-json-file": "^6.2.0",
+        "lru-cache": "^10.0.2",
+        "normalize-path": "^3.0.0",
+        "p-limit": "^3.1.0",
+        "p-memoize": "4.0.1",
+        "parse-npm-tarball-url": "^3.0.0",
+        "path-temp": "^2.1.0",
+        "ramda": "npm:@pnpm/ramda@0.28.1",
+        "rename-overwrite": "^5.0.0",
+        "semver": "^7.5.4",
+        "ssri": "10.0.5",
+        "version-selector-type": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      },
+      "peerDependencies": {
+        "@pnpm/logger": "^5.0.0"
+      }
+    },
+    "node_modules/@pnpm/resolve-workspace-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@pnpm/resolve-workspace-range/-/resolve-workspace-range-5.0.1.tgz",
+      "integrity": "sha512-yQ0pMthlw8rTgS/C9hrjne+NEnnSNevCjtdodd7i15I59jMBYciHifZ/vjg0NY+Jl+USTc3dBE+0h/4tdYjMKg==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.4.0"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
+    "node_modules/@pnpm/resolver-base": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/resolver-base/-/resolver-base-11.1.0.tgz",
+      "integrity": "sha512-y2qKaj18pwe1VWc3YXEitdYFo+WqOOt60aqTUuOVkJAirUzz0DzuYh3Ifct4znYWPdgUXHaN5DMphNF5iL85rA==",
+      "dev": true,
+      "dependencies": {
+        "@pnpm/types": "9.4.2"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
+    "node_modules/@pnpm/types": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/types/-/types-9.4.2.tgz",
+      "integrity": "sha512-g1hcF8Nv4gd76POilz9gD4LITAPXOe5nX4ijgr8ixCbLQZfcpYiMfJ+C1RlMNRUDo8vhlNB4O3bUlxmT6EAQXA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
+    "node_modules/@pnpm/workspace.pkgs-graph": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/@pnpm/workspace.pkgs-graph/-/workspace.pkgs-graph-2.0.14.tgz",
+      "integrity": "sha512-SBXXyWDkPEoaLTjLRyQzRHoBYH+P0NLcIjX1yPUxuJiMTvGOMzjpLWTuxYNVe/P0V0VQMrjpJFaJPjlViNLhzg==",
+      "dev": true,
+      "dependencies": {
+        "@pnpm/npm-package-arg": "^1.0.0",
+        "@pnpm/npm-resolver": "18.1.0",
+        "@pnpm/resolve-workspace-range": "5.0.1",
+        "ramda": "npm:@pnpm/ramda@0.28.1"
+      },
+      "engines": {
+        "node": ">=16.14"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.25",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
@@ -616,6 +1056,23 @@
       "integrity": "sha512-AAWymnpvHbGty1BmgbdfbqQDboXs6xN6h2yAacO4yKVyyUUBnpYkp+P9jjPrV9zrAGw7JVVriRtGOHPInnfjZQ==",
       "dev": true
     },
+    "node_modules/@snyk/github-codeowners": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@snyk/github-codeowners/-/github-codeowners-1.1.0.tgz",
+      "integrity": "sha512-lGFf08pbkEac0NYgVf4hdANpAgApRjNByLXB+WBip3qj1iendOIyAwP2GKkKbQMNVy2r1xxDf0ssfWscoiC+Vw==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^4.1.1",
+        "ignore": "^5.1.8",
+        "p-map": "^4.0.0"
+      },
+      "bin": {
+        "github-codeowners": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=8.10"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
@@ -705,6 +1162,12 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/picomatch": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/picomatch/-/picomatch-2.3.3.tgz",
+      "integrity": "sha512-Yll76ZHikRFCyz/pffKGjrCwe/le2CDwOP5F210KQo27kpRE46U2rDnzikNlVn6/ezH3Mhn46bJMTfeVTtcYMg==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -978,6 +1441,27 @@
         }
       }
     },
+    "node_modules/@zkochan/retry": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@zkochan/retry/-/retry-0.2.0.tgz",
+      "integrity": "sha512-WhB+2B/ZPlW2Xy/kMJBrMbqecWXcbDDgn0K0wKBAgO2OlBTz1iLJrRWduo+DGGn0Akvz1Lu4Xvls7dJojximWw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@zkochan/rimraf": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@zkochan/rimraf/-/rimraf-2.1.3.tgz",
+      "integrity": "sha512-mCfR3gylCzPC+iqdxEA6z5SxJeOgzgbwmyxanKriIne5qZLswDe/M43aD3p5MNzwzXRhbZg/OX+MpES6Zk1a6A==",
+      "dev": true,
+      "dependencies": {
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=12.10"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1118,6 +1602,12 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/arity-n": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arity-n/-/arity-n-1.0.4.tgz",
+      "integrity": "sha512-fExL2kFDC1Q2DUOx3whE/9KoN66IzkY4b4zUHUBFM1ojEYjZZYDcUW3bek/ufGionX9giIKDC5redH2IlGqcQQ==",
+      "dev": true
+    },
     "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",
@@ -1154,6 +1644,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-last": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array-last/-/array-last-1.3.0.tgz",
+      "integrity": "sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-last/node_modules/is-number": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+      "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -1374,6 +1885,15 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/babylon": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+      "dev": true,
+      "bin": {
+        "babylon": "bin/babylon.js"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1422,6 +1942,16 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/bole": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/bole/-/bole-5.0.11.tgz",
+      "integrity": "sha512-KB0Ye0iMAW5BnNbnLfMSQcnI186hKUzE2fpkZWqcxsoTR7eqzlTidSOMYPHJOn/yR7VGH7uSZp37qH9q2Et0zQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-safe-stringify": "^2.0.7",
+        "individual": "^3.0.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1810,6 +2340,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/compose-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz",
+      "integrity": "sha512-xzhzTJ5eC+gmIzvZq+C3kCJHsp9os6tJkrigDRZclyGtOKINbZtE8n1Tzmeh32jW+BUDPbvZpibwvJHBLGMVwg==",
+      "dev": true,
+      "dependencies": {
+        "arity-n": "^1.0.4"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1854,6 +2393,15 @@
         "node": ">= 8"
       }
     },
+    "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==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/css-selector-tokenizer": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@@ -1916,6 +2464,15 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
+      "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==",
+      "dev": true,
+      "engines": {
+        "node": ">= 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",
@@ -1988,6 +2545,12 @@
         }
       }
     },
+    "node_modules/deep-freeze": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+      "integrity": "sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==",
+      "dev": true
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -2102,6 +2665,18 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/easy-table": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/easy-table/-/easy-table-1.2.0.tgz",
+      "integrity": "sha512-OFzVOv03YpvtcWGe5AayU5G2hgybsg3iqA6drU8UaoZyB9jLGMTrz9+asnLp/E+6qPh88yEI1gvyZFZ41dmgww==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "optionalDependencies": {
+        "wcwidth": "^1.0.1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.719",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.719.tgz",
@@ -2114,6 +2689,18 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/encode-registry": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/encode-registry/-/encode-registry-3.0.1.tgz",
+      "integrity": "sha512-6qOwkl1g0fv0DN3Y3ggr2EaZXN71aoAqPp3p/pVaWSBSIo+YjLOWN61Fva43oVyQNPf7kgm8lkudzlzojwE2jw==",
+      "dev": true,
+      "dependencies": {
+        "mem": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/encoding": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
@@ -3015,6 +3602,12 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
+    "node_modules/fast-safe-stringify": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
+      "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
+      "dev": true
+    },
     "node_modules/fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
@@ -3029,6 +3622,20 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-2.1.2.tgz",
+      "integrity": "sha512-YKqtUDwqLyfyMnmbw8XD6Q8j9i/HggKtPEI+pZ1+8bvheBu78biSmNaXWusx1TauGqtUUGx/cBb1mKdq2rLYow==",
+      "dev": true,
+      "engines": {
+        "node": "^10.17.0 || >=12.3.0"
+      },
+      "peerDependenciesMeta": {
+        "domexception": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3051,6 +3658,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-iterator": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/filter-iterator/-/filter-iterator-0.0.1.tgz",
+      "integrity": "sha512-v4lhL7Qa8XpbW3LN46CEnmhGk3eHZwxfNl5at20aEkreesht4YKb/Ba3BUIbnPhAC/r3dmu7ABaGk6MAvh2alA==",
+      "dev": true
+    },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3122,6 +3744,20 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "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==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fs-minipass": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
@@ -3419,6 +4055,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-own-property": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/has-own-property/-/has-own-property-0.1.0.tgz",
+      "integrity": "sha512-14qdBKoonU99XDhWcFKZTShK+QV47qU97u8zzoVo9cL5TZ3BmBHXogItSt9qJjR0KUMFRhcCW8uGIGl8nkl7Aw==",
+      "dev": true
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -3573,6 +4215,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/identity-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/identity-function/-/identity-function-1.0.0.tgz",
+      "integrity": "sha512-kNrgUK0qI+9qLTBidsH85HjDLpZfrrS0ElquKKe/fJFdB3D7VeKdXXEvOPDUHSHOzdZKCAAaQIWWyp0l2yq6pw==",
+      "dev": true
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -3633,6 +4281,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/individual": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-3.0.0.tgz",
+      "integrity": "sha512-rUY5vtT748NMRbEMrTNiFfy29BgGZwGXUi2NFUVMWQrogSLzlJvQV9eeMWi+g1aVaQ53tpyLAQtd5x/JH0Nh1g==",
+      "dev": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -3869,6 +4523,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-iterable": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-iterable/-/is-iterable-1.1.1.tgz",
+      "integrity": "sha512-EdOZCr0NsGE00Pot+x1ZFx9MJK3C6wy91geZpXwvwexDLJvA4nzYyZf7r+EIwSeVsOLDdBz7ATg9NqKTzuNYuQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/is-lambda": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
@@ -4101,6 +4764,15 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/iterable-lookahead": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/iterable-lookahead/-/iterable-lookahead-1.0.0.tgz",
+      "integrity": "sha512-hJnEP2Xk4+44DDwJqUQGdXal5VbyeWLaPyDl2AQc242Zr7iqz4DgpQOrEzglWVMGHMDCkguLHEKxd1+rOsmgSQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
@@ -4184,6 +4856,12 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true
+    },
     "node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
@@ -4196,6 +4874,18 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jsonparse": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
@@ -4228,6 +4918,116 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/knip": {
+      "version": "5.9.4",
+      "resolved": "https://registry.npmjs.org/knip/-/knip-5.9.4.tgz",
+      "integrity": "sha512-33TM8bSHxMMoj+wP9lzjUkIIEfpXaZsLWMYRCoHdbmYnl2HKPMNijcYTxwi1omRROobXrR/VJyH2ZsYOKM1jtg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/webpro"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/webpro"
+        }
+      ],
+      "dependencies": {
+        "@ericcornelissen/bash-parser": "0.5.2",
+        "@nodelib/fs.walk": "2.0.0",
+        "@npmcli/map-workspaces": "^3.0.4",
+        "@npmcli/package-json": "^5.0.0",
+        "@pnpm/logger": "5.0.0",
+        "@pnpm/workspace.pkgs-graph": "2.0.14",
+        "@snyk/github-codeowners": "1.1.0",
+        "@types/picomatch": "2.3.3",
+        "easy-table": "1.2.0",
+        "fast-glob": "3.3.2",
+        "jiti": "1.21.0",
+        "js-yaml": "4.1.0",
+        "micromatch": "4.0.5",
+        "minimist": "1.2.8",
+        "picocolors": "1.0.0",
+        "picomatch": "^4.0.1",
+        "pretty-ms": "9.0.0",
+        "resolve": "1.22.8",
+        "smol-toml": "1.1.4",
+        "strip-json-comments": "5.0.1",
+        "summary": "2.1.0",
+        "zod": "^3.22.4",
+        "zod-validation-error": "^3.0.3"
+      },
+      "bin": {
+        "knip": "bin/knip.js"
+      },
+      "engines": {
+        "node": ">=18.6.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18",
+        "typescript": ">=5.0.4"
+      }
+    },
+    "node_modules/knip/node_modules/@nodelib/fs.scandir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-3.0.0.tgz",
+      "integrity": "sha512-ktI9+PxfHYtKjF3cLTUAh2N+b8MijCRPNwKJNqTVdL0gB0QxLU2rIRaZ1t71oEa3YBDE6bukH1sR0+CDnpp/Mg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "3.0.0",
+        "run-parallel": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/knip/node_modules/@nodelib/fs.stat": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-3.0.0.tgz",
+      "integrity": "sha512-2tQOI38s19P9i7X/Drt0v8iMA+KMsgdhB/dyPER+e+2Y8L1Z7QvnuRdW/uLuf5YRFUYmnj4bMA6qCuZHFI1GDQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/knip/node_modules/@nodelib/fs.walk": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-2.0.0.tgz",
+      "integrity": "sha512-54voNDBobGdMl3BUXSu7UaDh1P85PGHWlJ5e0XhPugo1JulOyCtp2I+5ri4wplGDJ8QGwPEQW7/x3yTLU7yF1A==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "3.0.0",
+        "fastq": "^1.15.0"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "node_modules/knip/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/knip/node_modules/strip-json-comments": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.1.tgz",
+      "integrity": "sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.22",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
@@ -4435,6 +5235,39 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/load-json-file": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
+      "integrity": "sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.15",
+        "parse-json": "^5.0.0",
+        "strip-bom": "^4.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/load-json-file/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==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/load-json-file/node_modules/type-fest": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4455,6 +5288,12 @@
       "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
       "dev": true
     },
+    "node_modules/lodash.curry": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==",
+      "dev": true
+    },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -4677,6 +5516,15 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.16.0.tgz",
+      "integrity": "sha512-c4BEos3y6G2qO0B9X7K0FVLOPT9uGrjYwYRLFmDqyl5YMboUviyecnXWp94fJTSMwPw2/sf+CEYt5AGpmklkkQ==",
+      "dev": true,
+      "dependencies": {
+        "vlq": "^0.2.1"
+      }
+    },
     "node_modules/make-fetch-happen": {
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-13.0.0.tgz",
@@ -4699,6 +5547,52 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "dev": true,
+      "dependencies": {
+        "p-defer": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/map-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-2.0.0.tgz",
+      "integrity": "sha512-TzQSV2DiMYgoF5RycneKVUzIa9bQsj/B3tTgsE3dOGqlzHnGIDaC7XBE7grnA+8kZPnfqSGFe95VHc2oc0VFUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mem": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
+      "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
+      "dev": true,
+      "dependencies": {
+        "map-age-cleaner": "^0.1.3",
+        "mimic-fn": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/mem?sponsor=1"
+      }
+    },
+    "node_modules/mem/node_modules/mimic-fn": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -4964,11 +5858,30 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
-    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
+    },
+    "node_modules/ndjson": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ndjson/-/ndjson-2.0.0.tgz",
+      "integrity": "sha512-nGl7LRGrzugTtaFcJMhLbpzJM6XdivmbkdlaGcrk/LXg2KL/YBC6z1g70xh0/al+oFuVFP8N8kiWRucmeEH/qQ==",
+      "dev": true,
+      "dependencies": {
+        "json-stringify-safe": "^5.0.1",
+        "minimist": "^1.2.5",
+        "readable-stream": "^3.6.0",
+        "split2": "^3.0.0",
+        "through2": "^4.0.0"
+      },
+      "bin": {
+        "ndjson": "cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -5060,12 +5973,44 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "3.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0-beta.9.tgz",
+      "integrity": "sha512-RdbZCEynH2tH46+tj0ua9caUHVWrd/RHnRfvly2EVdqGmI3ndS1Vn/xjm5KuGejDt2RNDQsVRLPNd2QPwcewVg==",
+      "dev": true,
+      "dependencies": {
+        "data-uri-to-buffer": "^3.0.1",
+        "fetch-blob": "^2.1.1"
+      },
+      "engines": {
+        "node": "^10.17 || >=12.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
       "dev": true
     },
+    "node_modules/normalize-package-data": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.0.tgz",
+      "integrity": "sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^7.0.0",
+        "is-core-module": "^2.8.1",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -5084,6 +6029,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/npm-install-checks": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-6.3.0.tgz",
+      "integrity": "sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.1.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm-normalize-package-bin": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
+      "integrity": "sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/npm-package-arg": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-11.0.1.tgz",
@@ -5099,6 +6065,21 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/npm-pick-manifest": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-9.0.0.tgz",
+      "integrity": "sha512-VfvRSs/b6n9ol4Qb+bDwNGUXutpy76x6MARw/XssevE0TnctIKcmklJZM5Z7nqs5z5aW+0S63pgCNbpkUNNXBg==",
+      "dev": true,
+      "dependencies": {
+        "npm-install-checks": "^6.0.0",
+        "npm-normalize-package-bin": "^3.0.0",
+        "npm-package-arg": "^11.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
     "node_modules/npm-registry-fetch": {
       "version": "16.1.0",
       "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-16.1.0.tgz",
@@ -5180,6 +6161,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/object-pairs": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-pairs/-/object-pairs-0.1.0.tgz",
+      "integrity": "sha512-3ECr6K831I4xX/Mduxr9UC+HPOz/d6WKKYj9p4cmC8Lg8p7g8gitzsxNX5IWlSIgFWN/a4JgrJaoAMKn20oKwA==",
+      "dev": true
+    },
+    "node_modules/object-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/object-values/-/object-values-1.0.0.tgz",
+      "integrity": "sha512-+8hwcz/JnQ9EpLIXzN0Rs7DLsBpJNT/xYehtB/jU93tHYr5BFEO8E+JGQNOSqE7opVzz5cGksKFHt7uUJVLSjQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object.assign": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
@@ -5348,6 +6344,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -5391,6 +6396,47 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-memoize": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/p-memoize/-/p-memoize-4.0.1.tgz",
+      "integrity": "sha512-km0sP12uE0dOZ5qP+s7kGVf07QngxyG0gS8sYFvFWhqlgzOsSy+m71aUejf/0akxj5W7gE//2G74qTv6b4iMog==",
+      "dev": true,
+      "dependencies": {
+        "mem": "^6.0.1",
+        "mimic-fn": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/p-memoize?sponsor=1"
+      }
+    },
+    "node_modules/p-memoize/node_modules/mem": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-6.1.1.tgz",
+      "integrity": "sha512-Ci6bIfq/UgcxPTYa8dQQ5FY3BzKkT894bwXWXxC/zqs0XgMO2cT20CGkOqda7gZNkmK5VP4x89IGZ6K7hfbn3Q==",
+      "dev": true,
+      "dependencies": {
+        "map-age-cleaner": "^0.1.3",
+        "mimic-fn": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/mem?sponsor=1"
+      }
+    },
+    "node_modules/p-memoize/node_modules/mimic-fn": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5420,6 +6466,39 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-ms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
+      "integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-npm-tarball-url": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/parse-npm-tarball-url/-/parse-npm-tarball-url-3.0.0.tgz",
+      "integrity": "sha512-InpdgIdNe5xWMEUcrVQUniQKwnggBtJ7+SCwh7zQAZwbbIYZV9XdgJyhtmDSSvykFyQXoe4BINnzKTfCwWLs5g==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=8.15"
+      }
+    },
+    "node_modules/parse-npm-tarball-url/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/pascal-case": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -5476,6 +6555,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path-temp": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/path-temp/-/path-temp-2.1.0.tgz",
+      "integrity": "sha512-cMMJTAZlion/RWRRC48UbrDymEIt+/YSD/l8NqjneyDw2rDOBQcP5yRkMB4CYGn47KMhZvbblBP7Z79OsMw72w==",
+      "dev": true,
+      "dependencies": {
+        "unique-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8.15"
+      }
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -5797,6 +6888,21 @@
         }
       }
     },
+    "node_modules/pretty-ms": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.0.0.tgz",
+      "integrity": "sha512-E9e9HJ9R9NasGOgPaPE8VMeiPKAyWR5jcFpNnwIejslIhWqdqOrb2wShBsncMPUb+BcCd2OPYfh7p2W6oemTng==",
+      "dev": true,
+      "dependencies": {
+        "parse-ms": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/proc-log": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-3.0.0.tgz",
@@ -5806,6 +6912,12 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
+      "dev": true
+    },
     "node_modules/promise-retry": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
@@ -5857,6 +6969,17 @@
         }
       ]
     },
+    "node_modules/ramda": {
+      "name": "@pnpm/ramda",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@pnpm/ramda/-/ramda-0.28.1.tgz",
+      "integrity": "sha512-zcAG+lvU0fMziNeGXpPyCyCJYp5ZVrPElEE4t14jAmViaihohocZ+dDkcRIyAomox8pQsuZnv1EyHR+pOhmUWw==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ramda"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -5902,6 +7025,28 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/read-package-json-fast": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
+      "integrity": "sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==",
+      "dev": true,
+      "dependencies": {
+        "json-parse-even-better-errors": "^3.0.0",
+        "npm-normalize-package-bin": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/read-package-json-fast/node_modules/json-parse-even-better-errors": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz",
+      "integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -5973,6 +7118,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/rename-overwrite": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/rename-overwrite/-/rename-overwrite-5.0.0.tgz",
+      "integrity": "sha512-vSxE5Ww7Jnyotvaxi3Dj0vOMoojH8KMkBfs9xYeW/qNfJiLTcC1fmwTjrbGUq3mQSOCxkG0DbdcvwTUrpvBN4w==",
+      "dev": true,
+      "dependencies": {
+        "@zkochan/rimraf": "^2.1.2",
+        "fs-extra": "10.1.0"
+      },
+      "engines": {
+        "node": ">=12.10"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -6044,6 +7202,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/reverse-arguments": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/reverse-arguments/-/reverse-arguments-1.0.0.tgz",
+      "integrity": "sha512-/x8uIPdTafBqakK0TmPNJzgkLP+3H+yxpUJhCQHsLBg1rYEVNR2D8BRYNWQhVBjyOd7oo1dZRVzIkwMY2oqfYQ==",
+      "dev": true
+    },
     "node_modules/rfdc": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
@@ -6251,6 +7415,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/shell-quote-word": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/shell-quote-word/-/shell-quote-word-1.0.1.tgz",
+      "integrity": "sha512-lT297f1WLAdq0A4O+AknIFRP6kkiI3s8C913eJ0XqBxJbZPGWUNkRQk2u8zk4bEAjUJ5i+fSLwB6z1HzeT+DEg==",
+      "dev": true
+    },
     "node_modules/side-channel": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
@@ -6352,6 +7522,16 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/smol-toml": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.1.4.tgz",
+      "integrity": "sha512-Y0OT8HezWsTNeEOSVxDnKOW/AyNXHQ4BwJNbAXlLTF5wWsBvrcHhIkE5Rf8kQMLmgf7nDX3PVOlgC6/Aiggu3Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 18",
+        "pnpm": ">= 8"
+      }
+    },
     "node_modules/socks": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.1.tgz",
@@ -6388,6 +7568,47 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+      "dev": true
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.17",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz",
+      "integrity": "sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==",
+      "dev": true
+    },
+    "node_modules/split2": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
+      "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": "^3.0.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
@@ -6497,6 +7718,12 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/string.fromcodepoint": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string.fromcodepoint/-/string.fromcodepoint-0.2.1.tgz",
+      "integrity": "sha512-n69H31OnxSGSZyZbgBlvYIXlrMhJQ0dQAX1js1QDhpaUH6zmU3QYlj07bCwCNlPOu3oRXIubGPl2gDGnHsiCqg==",
+      "dev": true
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
@@ -6672,6 +7899,12 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/summary": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/summary/-/summary-2.1.0.tgz",
+      "integrity": "sha512-nMIjMrd5Z2nuB2RZCKJfFMjgS3fygbeyGk9PxPPaJR1RIcyN9yn4A63Isovzm3ZtQuEkLBVgMdPup8UeLH7aQw==",
+      "dev": true
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6833,6 +8066,30 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/through2": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": "3"
+      }
+    },
+    "node_modules/to-no-case": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz",
+      "integrity": "sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==",
+      "dev": true
+    },
+    "node_modules/to-pascal-case": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-pascal-case/-/to-pascal-case-1.0.0.tgz",
+      "integrity": "sha512-QGMWHqM6xPrcQW57S23c5/3BbYb0Tbe9p+ur98ckRnGDwD4wbbtDiYI38CfmMKNB5Iv0REjs5SNDntTwvDxzZA==",
+      "dev": true,
+      "dependencies": {
+        "to-space-case": "^1.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -6844,6 +8101,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/to-space-case": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz",
+      "integrity": "sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==",
+      "dev": true,
+      "dependencies": {
+        "to-no-case": "^1.0.0"
+      }
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -7036,6 +8302,15 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/unescape-js": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/unescape-js/-/unescape-js-1.1.4.tgz",
+      "integrity": "sha512-42SD8NOQEhdYntEiUQdYq/1V/YHwr1HLwlHuTJB5InVVdOSbgI6xu8jK5q65yIzuFCfczzyDF/7hbGzVbyCw0g==",
+      "dev": true,
+      "dependencies": {
+        "string.fromcodepoint": "^0.2.1"
+      }
+    },
     "node_modules/unique-filename": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
@@ -7060,6 +8335,27 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "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==",
+      "dev": true,
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -7115,6 +8411,16 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
     "node_modules/validate-npm-package-name": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz",
@@ -7127,6 +8433,24 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/version-selector-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/version-selector-type/-/version-selector-type-3.0.0.tgz",
+      "integrity": "sha512-PSvMIZS7C1MuVNBXl/CDG2pZq8EXy/NW2dHIdm3bVP5N0PC8utDK8ttXLXj44Gn3J0lQE3U7Mpm1estAOd+eiA==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": ">=10.13"
+      }
+    },
+    "node_modules/vlq": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz",
+      "integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==",
+      "dev": true
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -7409,6 +8733,27 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.1.0.tgz",
+      "integrity": "sha512-zujS6HqJjMZCsvjfbnRs7WI3PXN39ovTcY1n8a+KTm4kOH0ZXYsNiJkH1odZf4xZKMkBDL7M2rmQ913FCS1p9w==",
+      "dev": true,
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.18.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index b836c89..aefe3dd 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "lint:fix": "next lint --fix",
     "format": "prettier --write src",
     "prepare": "husky",
+    "knip": "knip",
     "bundle-stats": "ANALYZE=true npm run build"
   },
   "dependencies": {
@@ -39,6 +40,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.0.11",
+    "knip": "^5.9.4",
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
@@ -53,4 +55,4 @@
     "budgetPercentIncreaseRed": 85,
     "showDetails": true
   }
-}
\ No newline at end of file
+}
diff --git a/public/pomoparty-logo-white.webp b/public/pomoparty-logo-white.webp
deleted file mode 100644
index e09f8e1ccff1f5f8964cf3d950f2df99a2394b38..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 7568
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

diff --git a/public/svg/alert.svg b/public/svg/alert.svg
new file mode 100644
index 0000000..a532aa0
--- /dev/null
+++ b/public/svg/alert.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>
\ No newline at end of file
diff --git a/public/svg/pizza-slice.svg b/public/svg/pizza-slice.svg
new file mode 100644
index 0000000..f79e8a7
--- /dev/null
+++ b/public/svg/pizza-slice.svg
@@ -0,0 +1,8 @@
+<svg version="1.1" id="Food_Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 70.887 87.683" enable-background="new 0 0 70.887 87.683" xml:space="preserve" fill="#000000" transform="matrix(1, 0, 0, -1, 0, 0)">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <g id="_x34_"> <g> <path fill="#ECB67C" d="M29.93,82.032L3.74,17.455L2.318,13.95C1.131,11.022,2.674,7.71,5.67,6.709 c18.822-6.288,39.734-6.555,59.654,0.448c2.971,1.044,4.448,4.382,3.221,7.282l-1.305,3.086L39.929,82.106 C38.051,86.546,31.742,86.499,29.93,82.032z"/> </g> <g> <path fill="#E1AC77" d="M3.012,15.672L2.314,13.95C1.127,11.022,2.67,7.71,5.666,6.709C24.488,0.421,45.4,0.153,65.321,7.156 c2.971,1.044,4.448,4.382,3.221,7.282l-0.623,1.474c0,0-17.76-6.176-32.475-6.176S3.012,15.672,3.012,15.672z"/> </g> <g> <path d="M34.949,87.321c-0.02,0-0.039,0-0.058,0c-3.019-0.022-5.598-1.774-6.733-4.571l0,0L0.546,14.669 c-0.772-1.904-0.724-3.981,0.136-5.848c0.851-1.849,2.449-3.28,4.383-3.926c19.99-6.678,41.048-6.519,60.895,0.457 c1.913,0.672,3.48,2.122,4.3,3.977c0.82,1.854,0.837,3.988,0.048,5.854L41.691,82.85C40.522,85.612,37.943,87.321,34.949,87.321z M31.703,81.312c0.55,1.356,1.752,2.172,3.216,2.184c1.483,0.017,2.678-0.787,3.248-2.136l28.616-67.666 c0.386-0.911,0.377-1.912-0.023-2.818c-0.401-0.906-1.136-1.587-2.07-1.915C45.652,2.268,25.452,2.117,6.277,8.523 c-0.95,0.317-1.703,0.991-2.12,1.898c-0.413,0.898-0.437,1.895-0.065,2.811L31.703,81.312z"/> </g> <g> <path fill="#F8CC77" d="M30.484,82.67L7.162,25.165c-0.088-0.217,0.017-0.466,0.235-0.553c17.448-6.961,37.52-7.365,56.208,0.415 c0.216,0.09,0.319,0.342,0.228,0.557L39.661,82.738C37.938,86.813,32.147,86.77,30.484,82.67z"/> </g> <g> <path fill="#E9BB6D" d="M8.54,28.697l-1.433-3.532c-0.088-0.217,0.017-0.466,0.235-0.553c17.448-6.961,37.52-7.365,56.208,0.415 c0.216,0.09,0.319,0.342,0.228,0.557l-1.468,3.472c0,0-13.743-4.883-26.865-4.883S8.54,28.697,8.54,28.697z"/> </g> <g> <path d="M35.091,87.683c-0.018,0-0.036,0-0.055,0c-2.835-0.021-5.259-1.666-6.324-4.293L5.389,25.884 c-0.235-0.581-0.229-1.219,0.017-1.796c0.246-0.577,0.702-1.022,1.283-1.253c18.645-7.439,39.121-7.289,57.65,0.427 c0.576,0.239,1.026,0.691,1.264,1.272c0.238,0.581,0.234,1.219-0.01,1.796l-24.17,57.153 C40.326,86.077,37.902,87.683,35.091,87.683z M32.257,81.951c0.48,1.184,1.529,1.897,2.807,1.906 c1.254-0.026,2.338-0.688,2.835-1.865l23.582-55.76c-16.77-6.587-35.112-6.723-51.979-0.384L32.257,81.951z"/> </g> <g> <circle fill="#E9785A" cx="43.577" cy="34.671" r="8.129"/> </g> <g> <path d="M43.577,44.713c-5.537,0-10.042-4.505-10.042-10.042s4.505-10.042,10.042-10.042s10.042,4.505,10.042,10.042 S49.114,44.713,43.577,44.713z M43.577,28.455c-3.428,0-6.216,2.789-6.216,6.216s2.789,6.216,6.216,6.216s6.216-2.789,6.216-6.216 S47.005,28.455,43.577,28.455z"/> </g> <g> <path fill="#EC6D57" d="M29.699,51.574c0,4.49-3.64,8.129-8.129,8.129c-0.233,0-0.465-0.01-0.693-0.029L15.419,46.26 c1.491-1.724,3.694-2.814,6.151-2.814C26.06,43.445,29.699,47.085,29.699,51.574z"/> </g> <g> <path d="M21.57,61.617c-0.289,0-0.574-0.012-0.857-0.036c-0.716-0.062-1.337-0.519-1.608-1.185l-5.459-13.414 c-0.271-0.666-0.146-1.428,0.325-1.972c1.91-2.209,4.68-3.476,7.599-3.476c5.537,0,10.042,4.505,10.042,10.042 S27.107,61.617,21.57,61.617z M17.675,46.73l4.49,11.033c3.15-0.3,5.622-2.961,5.622-6.188c0-3.428-2.789-6.216-6.216-6.216 C20.142,45.358,18.771,45.849,17.675,46.73z"/> </g> <g> <path fill="#E9785A" d="M42.726,75.491c-3.745-0.727-6.572-4.023-6.572-7.98c0-4.49,3.64-8.129,8.129-8.129 c1.684,0,3.248,0.512,4.545,1.388L42.726,75.491z"/> </g> <g> <path d="M42.727,77.404c-0.121,0-0.243-0.011-0.365-0.035c-4.705-0.912-8.12-5.058-8.12-9.857c0-5.537,4.505-10.042,10.042-10.042 c2.012,0,3.954,0.594,5.616,1.716c0.753,0.509,1.044,1.478,0.696,2.318l-6.102,14.721C44.193,76.948,43.488,77.404,42.727,77.404z M44.284,61.294c-3.428,0-6.216,2.789-6.216,6.217c0,2.447,1.433,4.619,3.564,5.625l4.758-11.477 C45.72,61.419,45.01,61.294,44.284,61.294z"/> </g> </g> </g>
+</svg>
\ No newline at end of file
diff --git a/public/svg/pizza.svg b/public/svg/pizza.svg
new file mode 100644
index 0000000..fb69de9
--- /dev/null
+++ b/public/svg/pizza.svg
@@ -0,0 +1,77 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#C39774;" d="M229.038,256L385.38,99.659C345.368,59.647,290.094,34.9,229.038,34.9
+	C106.928,34.9,7.938,133.889,7.938,256c0,122.47,98.63,221.101,221.101,221.101c119.11,0,216.223-94.186,220.922-212.145
+	c0.195-4.88-3.682-8.956-8.565-8.956H229.038z"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="342.974" cy="90.668" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="194.575" cy="55.682" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="79.248" cy="142.474" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="47.826" cy="345.579" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="186.637" cy="435.092" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="325.522" cy="431.917" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="415.015" cy="331.852" r="7.938"/>
+<path style="fill:#FDD05F;" d="M49.944,256c0,98.911,80.184,179.095,179.095,179.095S408.133,354.911,408.133,256H229.038
+	l126.639-126.639c-32.409-32.409-77.183-52.455-126.639-52.455C130.128,76.906,49.944,157.089,49.944,256z"/>
+<path style="opacity:0.1;enable-background:new    ;" d="M229.038,76.906c-98.911,0-179.095,80.184-179.095,179.095
+	c0,2.409,0.061,4.804,0.156,7.189c3.775-95.576,82.437-171.904,178.938-171.904c45.796,0,87.571,17.198,119.237,45.477l7.401-7.401
+	C323.267,96.951,278.493,76.906,229.038,76.906z"/>
+<g>
+	<path style="fill:#DE2A4E;" d="M308.919,256c0,15.883,12.876,28.759,28.759,28.759c15.883,0,28.759-12.876,28.759-28.759
+		L308.919,256L308.919,256z"/>
+	<path style="fill:#DE2A4E;" d="M334.738,150.3c-11.231-11.231-29.441-11.231-40.672,0c-11.231,11.231-11.231,29.441,0,40.672
+		L334.738,150.3z"/>
+	<circle style="fill:#DE2A4E;" cx="249.936" cy="134.536" r="28.755"/>
+	<circle style="fill:#DE2A4E;" cx="134.652" cy="170.001" r="28.755"/>
+	<circle style="fill:#DE2A4E;" cx="108.014" cy="245.471" r="28.755"/>
+	<circle style="fill:#DE2A4E;" cx="206.343" cy="205.529" r="28.755"/>
+	<circle style="fill:#DE2A4E;" cx="136.769" cy="334" r="28.755"/>
+	<circle style="fill:#DE2A4E;" cx="221.171" cy="305.235" r="28.755"/>
+	<circle style="fill:#DE2A4E;" cx="234.601" cy="383.234" r="28.755"/>
+	<circle style="fill:#DE2A4E;" cx="325.522" cy="334" r="28.755"/>
+</g>
+<circle style="opacity:0.15;enable-background:new    ;" cx="320.125" cy="328.645" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="222.949" cy="309.955" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="333.46" cy="266.447" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="248.518" cy="142.474" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="115.951" cy="242.232" r="7.938"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="131.943" cy="331.852" r="7.938"/>
+<path style="opacity:0.1;enable-background:new    ;" d="M375.91,90.749L251.74,214.918h18.381L385.38,99.659
+	C382.315,96.594,379.149,93.629,375.91,90.749z"/>
+<g>
+	<path style="fill:#FDD05F;" d="M339.359,238.524L339.359,238.524c-6.239,0-11.297-5.058-11.297-11.297v-25.321h22.593v25.321
+		C350.655,233.466,345.598,238.524,339.359,238.524z"/>
+	<path style="fill:#FDD05F;" d="M385.959,230.057L385.959,230.057c-6.239,0-11.297-5.058-11.297-11.297v-16.854h22.593v16.854
+		C397.255,224.999,392.198,230.057,385.959,230.057z"/>
+</g>
+<path style="fill:#C39774;" d="M445.693,52.04c-3.317-3.596-8.942-3.753-12.402-0.293l-23.52,23.52L283.132,201.906h212.356
+	c4.874,0,8.761-4.061,8.567-8.931C501.898,138.67,480.154,89.401,445.693,52.04z"/>
+<circle style="opacity:0.15;enable-background:new    ;" cx="457.941" cy="96.203" r="7.938"/>
+<path style="fill:#FDD05F;" d="M462.227,201.906c0-49.456-20.046-94.229-52.455-126.639L283.132,201.906H462.227z"/>
+<g>
+	<path style="fill:#DE2A4E;" d="M420.532,201.906c0-15.883-12.876-28.759-28.759-28.759s-28.759,12.876-28.759,28.759H420.532z"/>
+	<path style="fill:#DE2A4E;" d="M348.16,136.878c11.231,11.231,29.441,11.231,40.672,0c11.231-11.231,11.231-29.441,0-40.672
+		L348.16,136.878z"/>
+</g>
+<rect x="328.063" y="201.91" style="opacity:0.1;enable-background:new    ;" width="22.593" height="10.272"/>
+<rect x="374.661" y="201.91" style="opacity:0.1;enable-background:new    ;" width="22.593" height="10.272"/>
+<path d="M451.528,46.658L451.528,46.658c-3.051-3.307-7.376-5.257-11.863-5.348c-4.55-0.083-8.785,1.622-11.986,4.824L385.274,88.54
+	c-42.547-39.762-97.711-61.578-156.235-61.578c-61.178,0-118.694,23.824-161.955,67.084C23.824,137.306,0,194.822,0,256
+	c0,61.353,23.777,118.918,66.949,162.09c43.174,43.173,100.738,66.948,162.09,66.948c59.563,0,115.985-22.75,158.872-64.059
+	c42.769-41.196,67.622-96.494,69.981-155.707c0.179-4.485-1.501-8.912-4.606-12.144c-3.139-3.266-7.361-5.065-11.89-5.065H248.201
+	l38.22-38.22h33.705v17.383c0,10.606,8.629,19.234,19.234,19.234c10.606,0,19.234-8.629,19.234-19.234v-17.383h8.132v8.916
+	c0,10.606,8.629,19.234,19.234,19.234c10.606,0,19.234-8.629,19.234-19.234v-8.916h90.295c4.533,0,8.759-1.8,11.9-5.069
+	c3.101-3.226,4.776-7.642,4.598-12.114C509.833,138.443,488.361,86.592,451.528,46.658z M441.395,263.938
+	c0.071,0,0.261,0,0.443,0.189c0.134,0.14,0.198,0.312,0.189,0.512c-2.195,55.102-25.326,106.564-65.131,144.905
+	c-39.914,38.445-92.424,59.618-147.859,59.618c-57.112,0-110.69-22.124-150.865-62.299C38.001,366.69,15.875,313.112,15.875,256
+	c0-117.539,95.625-213.162,213.163-213.162c54.282,0,105.471,20.156,145.014,56.924l-18.501,18.501
+	c-34.597-31.841-79.212-49.293-126.514-49.293c-103.129,0-187.032,83.902-187.032,187.032s83.903,187.032,187.032,187.032
+	c100.47,0,182.677-79.633,186.851-179.095h25.507V263.938z M277.52,196.293c-0.001,0.001-0.002,0.002-0.003,0.003l-54.09,54.09
+	c-2.27,2.27-2.95,5.684-1.721,8.65c1.229,2.967,4.122,4.9,7.333,4.9h170.967c-4.161,90.706-79.251,163.22-170.967,163.22
+	c-94.376,0-171.157-76.78-171.157-171.157S134.662,84.844,229.038,84.844c43.061,0,83.692,15.801,115.282,44.649L277.52,196.293z
+	 M342.718,227.227c0,1.852-1.507,3.359-3.359,3.359S336,229.079,336,227.227v-17.383h6.718L342.718,227.227L342.718,227.227z
+	 M389.318,218.76c0,1.852-1.507,3.359-3.359,3.359s-3.359-1.507-3.359-3.359v-8.916h6.718L389.318,218.76L389.318,218.76z
+	 M302.295,193.969l88.697-88.697c0,0,0.001-0.001,0.002-0.002l18.646-18.646c27.07,29.642,42.645,67.243,44.464,107.345
+	L302.295,193.969L302.295,193.969z M495.942,193.774c-0.186,0.195-0.387,0.195-0.454,0.195h-25.501
+	c-1.839-44.341-19.063-85.922-49.116-118.577l18.033-18.033c0.05-0.05,0.186-0.184,0.44-0.177c0.199,0.004,0.371,0.085,0.514,0.239
+	h-0.001c34.279,37.164,54.262,85.417,56.266,135.869C496.127,193.36,496.136,193.573,495.942,193.774z"/>
+</svg>
\ No newline at end of file
diff --git a/src/app/_components/Dashboard.tsx b/src/app/_components/Dashboard.tsx
deleted file mode 100644
index ef68e3f..0000000
--- a/src/app/_components/Dashboard.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Settings from "./settings/Settings";
-import Timer from "./Timer";
-import { TimerContextProvider } from "./context/TimerContext";
-
-export default function Dashboard() {
-  return (
-    <>
-      <TimerContextProvider>
-        <Timer />
-        <Settings />
-      </TimerContextProvider>
-    </>
-  );
-}
diff --git a/src/app/_components/Navbar.tsx b/src/app/_components/Navbar.tsx
index 9ce582a..bbbf60c 100644
--- a/src/app/_components/Navbar.tsx
+++ b/src/app/_components/Navbar.tsx
@@ -4,35 +4,33 @@ import Link from "next/link";
 
 export default function NavBar() {
   return (
-    <div className="navbar fixed bg-primary px-16 py-2 drop-shadow-lg">
-      <a className="flex-1" href="/">
+    <div className="navbar fixed z-10 bg-primary px-16 py-2 drop-shadow-lg">
+      <Link
+        className="mr-auto flex font-title text-4xl tracking-wider text-base-100"
+        href="/"
+      >
+        P
         <Image
-          src="/pomoparty-logo-white.webp"
-          className="h-auto w-auto"
-          height={50}
-          width={200}
+          src="/svg/pizza.svg"
+          height={33}
+          width={33}
           alt="pomoparty-logo"
           priority={true}
         />
-      </a>
-      <div className="flex space-x-6">
-        <Link href="/duo-timer">
-          <button className="prose text-white">Duo Session</button>
-        </Link>
+        MOPARTY
+      </Link>
+      <div className="font-display ml-auto flex items-center space-x-6">
         <Link href="/contact">
-          <button className="prose text-white">Contact</button>
+          <button className="text-white">Contact</button>
+        </Link>
+        <Link href="#">
+          <button className="text-white">Sign In</button>
         </Link>
-        <a>
-          <button className="prose text-white">Features</button>
-        </a>
-        <a>
-          <button className="prose text-white">Sign In</button>
-        </a>
-        <a>
-          <button className="btn btn-accent w-24 border-2 text-primary shadow-md">
+        <Link href="#">
+          <button className="btn btn-accent border-2 text-primary shadow-md">
             Sign Up
           </button>
-        </a>
+        </Link>
       </div>
     </div>
   );
diff --git a/src/app/_components/Timer.tsx b/src/app/_components/Timer.tsx
deleted file mode 100644
index a76ea65..0000000
--- a/src/app/_components/Timer.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
-import SaveSettingsAlert from "./settings/SaveSettingsAlert";
-import Image from "next/image";
-import { useTimerContext } from "./context/TimerContext";
-import { toggleActiveTimer } from "../_utils/actions";
-
-export default function Timer() {
-  const { timer, dispatch } = useTimerContext();
-  const { pomodoroTime } = timer.settings;
-  const [minutes, setMinutes] = useState(pomodoroTime);
-  const [seconds, setSeconds] = useState(0);
-  const [percentage, setPercentage] = useState(0);
-  const timerRef = useRef<NodeJS.Timeout>();
-  const startButtonText =
-    pomodoroTime === minutes && seconds === 0 ? "Start" : "Resume";
-
-  const timeToSecs = (min: number, sec: number): number => min * 60 + sec;
-
-  const totalStartSec = useMemo(
-    () => timeToSecs(pomodoroTime, 0),
-    [pomodoroTime],
-  );
-
-  useEffect(() => {
-    setMinutes(pomodoroTime);
-    setSeconds(0);
-  }, [pomodoroTime]);
-
-  useEffect(() => {
-    if (timer.activeTimer) {
-      timerRef.current = setInterval(() => {
-        if (seconds === 0) {
-          if (minutes === 0) {
-            clearInterval(timerRef.current);
-          } else {
-            setMinutes(minutes - 1);
-            setSeconds(59);
-          }
-        } else {
-          setSeconds(seconds - 1);
-        }
-      }, 1000);
-    }
-    return () => clearInterval(timerRef.current);
-  }, [timer.activeTimer, minutes, seconds]);
-
-  useEffect(() => {
-    setPercentage(100 - (timeToSecs(minutes, seconds) / totalStartSec) * 100);
-  }, [totalStartSec, minutes, seconds]);
-
-  const handleClick = (actionType: "toggle" | "reset") => {
-    if (!timer.activeTimer && actionType === "toggle") {
-      toggleActiveTimer(dispatch, timer);
-    } else {
-      toggleActiveTimer(dispatch, timer);
-      if (actionType === "toggle") {
-        clearInterval(timerRef.current);
-      } else if (actionType === "reset") {
-        setMinutes(pomodoroTime);
-        setSeconds(0);
-      }
-    }
-  };
-
-  return (
-    <div className="flex flex-col items-center justify-center space-y-10">
-      <SaveSettingsAlert />
-      <div
-        className="radial-progress border-4 border-primary bg-primary text-white"
-        style={
-          {
-            "--value": percentage,
-            "--size": "12rem",
-            "--thickness": "4px",
-          } as CSSProperties
-        }
-        role="progressbar"
-      >
-        <div className="grid auto-cols-max grid-flow-col gap-1 text-center">
-          <div className="prose prose-xl flex flex-col text-white">
-            <span className="prose-md prose countdown text-2xl text-white">
-              <span style={{ "--value": minutes } as CSSProperties}></span>:
-            </span>
-            min
-          </div>
-          <div className="prose prose-xl flex flex-col text-white">
-            <span className="prose prose-lg countdown text-2xl text-white">
-              <span style={{ "--value": seconds } as CSSProperties}></span>
-            </span>
-            sec
-          </div>
-        </div>
-      </div>
-      <div className="flex space-x-5">
-        <button
-          className="group btn btn-primary min-w-28"
-          onClick={() => handleClick("toggle")}
-          disabled={minutes === 0 && seconds === 0}
-        >
-          {timer.activeTimer ? (
-            <span className="flex w-full items-center justify-between">
-              <Image
-                src="/svg/pause.svg"
-                className="group-hover:animate-crescendo"
-                alt="pause"
-                height={14}
-                width={14}
-              />
-              Pause
-            </span>
-          ) : (
-            <span
-              className={`flex w-full items-center justify-between ${startButtonText === "Start" ? "pr-2" : ""}`}
-            >
-              <Image
-                src="/svg/play.svg"
-                className="group-hover:animate-crescendo"
-                alt="play"
-                height={14}
-                width={14}
-              />
-              {startButtonText}
-            </span>
-          )}
-        </button>
-        <button
-          className="group btn btn-primary min-w-28 disabled:text-[#FFF]"
-          disabled={pomodoroTime === minutes && seconds === 0}
-          onClick={() => handleClick("reset")}
-        >
-          <span className="flex w-full items-center justify-between">
-            <Image
-              src="/svg/reset.svg"
-              className="group-hover:animate-spin"
-              alt="reset"
-              height={23}
-              width={23}
-            />
-            Reset
-          </span>
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/_components/context/TimerContext.tsx b/src/app/_components/context/TimerContext.tsx
index 0765a26..7e978b8 100644
--- a/src/app/_components/context/TimerContext.tsx
+++ b/src/app/_components/context/TimerContext.tsx
@@ -1,4 +1,4 @@
-import { SettingsType, TimerType } from "@/app/_utils/types";
+import { TimerType } from "@/app/_utils/types";
 import {
   createContext,
   PropsWithChildren,
@@ -8,8 +8,9 @@ import {
 } from "react";
 import { useContextWrapper } from "./useContextWrapper";
 
-export const initialTimer: TimerType = {
+const initialTimer: TimerType = {
   activeTimer: false,
+  activeStep: 0,
   showAlert: false,
   settings: {
     pomodoroTime: 25,
@@ -22,6 +23,8 @@ export const initialTimer: TimerType = {
 export enum ActionType {
   toggleActiveTimer = "toggleActiveTimer",
   updateSaveAlert = "updateSaveAlert",
+  updateActiveStep = "updateActiveStep",
+  resetActiveStep = "resetActiveStep",
   updateSettings = "updateSettings",
   updateSoundSettings = "updateSoundSettings",
   revertSettings = "revertSettings",
@@ -29,11 +32,7 @@ export enum ActionType {
 
 export type IAction = {
   type: ActionType;
-  timer: {
-    activeTimer: boolean;
-    showAlert: boolean;
-    settings: SettingsType;
-  };
+  timer: TimerType;
 };
 
 const timerReducer = (
@@ -66,6 +65,18 @@ const timerReducer = (
         },
       };
     }
+    case "updateActiveStep": {
+      return {
+        ...timer,
+        activeStep: action.timer.activeStep + 1,
+      };
+    }
+    case "resetActiveStep": {
+      return {
+        ...timer,
+        activeStep: 0,
+      };
+    }
     case "updateSaveAlert": {
       return {
         ...timer,
diff --git a/src/app/_components/settings/Settings.tsx b/src/app/_components/settings/Settings.tsx
deleted file mode 100644
index 4adb9e1..0000000
--- a/src/app/_components/settings/Settings.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useState } from "react";
-import Image from "next/image";
-import TimerSettings from "./TimerSettings";
-import NotificationSettings from "./NotificationSettings";
-import { useTimerContext } from "../context/TimerContext";
-import {
-  updateSettings,
-  revertSettings,
-  updateSaveAlert,
-  toggleActiveTimer,
-} from "@/app/_utils/actions";
-
-export default function Settings() {
-  const { timer, dispatch } = useTimerContext();
-  const [isOpen, setIsOpen] = useState(false);
-  const [tempSettings, setTempSettings] = useState(timer.settings);
-
-  const toggleModal = (actionType?: "save" | "revert") => {
-    const htmlModal = document.getElementById(
-      "settings_modal",
-    ) as HTMLDialogElement;
-    if (timer.activeTimer) {
-      toggleActiveTimer(dispatch, timer);
-    }
-    if (!isOpen) {
-      setIsOpen(true);
-      htmlModal.showModal();
-    } else {
-      setIsOpen(false);
-      if (actionType === "save") {
-        updateSaveAlert(dispatch, timer);
-        updateSettings(dispatch, { ...timer, settings: { ...tempSettings } });
-      } else {
-        revertSettings(dispatch, { ...timer, settings: { ...timer.settings } });
-      }
-      htmlModal.close();
-    }
-  };
-
-  return (
-    <>
-      <button
-        className="group btn btn-primary border-2"
-        onClick={() => toggleModal()}
-      >
-        <Image
-          src="/svg/settings.svg"
-          className="group-hover:animate-spin"
-          alt="settings"
-          height={20}
-          width={20}
-        />
-        Settings
-      </button>
-      <dialog
-        id="settings_modal"
-        className="modal modal-bottom mx-auto flex max-w-md sm:modal-middle"
-      >
-        <div className="modal-box flex w-full max-w-xs flex-col items-center justify-center  space-y-4 px-0 py-8">
-          <h3 className="flex h-6 text-lg font-bold text-gray-400">
-            POMOPARTY SETTINGS
-          </h3>
-          <hr className="border-1 my-6 h-px w-full bg-gray-200" />
-          <TimerSettings
-            tempSettings={tempSettings}
-            setTempSettings={setTempSettings}
-          />
-          <hr className="border-1 my-6 h-px w-full bg-gray-200" />
-          <NotificationSettings />
-          <form
-            method="dialog"
-            className="modal-backdrop mr-6 flex items-center justify-end space-x-3 pt-6"
-          >
-            <button
-              type="button"
-              className="btn btn-outline btn-secondary btn-md border-primary text-primary shadow-md"
-              onClick={() => toggleModal("revert")}
-            >
-              Close
-            </button>
-            <button
-              onClick={() => toggleModal("save")}
-              className="btn btn-primary"
-            >
-              <Image src="/svg/save.svg" alt="save" height={17} width={17} />
-              Save
-            </button>
-          </form>
-        </div>
-      </dialog>
-    </>
-  );
-}
diff --git a/src/app/_components/timer/BreakTimer.tsx b/src/app/_components/timer/BreakTimer.tsx
new file mode 100644
index 0000000..7cfd5b3
--- /dev/null
+++ b/src/app/_components/timer/BreakTimer.tsx
@@ -0,0 +1,62 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { TimerDisplay } from "./TimerDisplay";
+import { useTimerContext } from "../context/TimerContext";
+import { timeToSecs } from "@/app/_utils/helpers";
+import { TimerButtonGroup } from "./TimerButtonGroup";
+
+export default function BreakTimer() {
+  const { timer } = useTimerContext();
+  const { breakTime } = timer.settings;
+  const [minutes, setMinutes] = useState(breakTime);
+  const [seconds, setSeconds] = useState(0);
+  const [percentage, setPercentage] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const totalStartSec = useMemo(() => timeToSecs(breakTime, 0), [breakTime]);
+
+  useEffect(() => {
+    setMinutes(breakTime);
+    setSeconds(0);
+  }, [breakTime]);
+
+  useEffect(() => {
+    if (timer.activeTimer) {
+      timerRef.current = setInterval(() => {
+        if (seconds === 0) {
+          if (minutes === 0) {
+            if (timerRef.current) clearInterval(timerRef.current);
+          } else {
+            setMinutes(minutes - 1);
+            setSeconds(59);
+          }
+        } else {
+          setSeconds(seconds - 1);
+        }
+      }, 1000);
+    }
+    return () => {
+      if (timerRef.current)
+        if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [timer.activeTimer, minutes, seconds]);
+
+  useEffect(() => {
+    setPercentage(100 - (timeToSecs(minutes, seconds) / totalStartSec) * 100);
+  }, [totalStartSec, minutes, seconds]);
+
+  return (
+    <>
+      <TimerDisplay {...{ minutes, seconds, percentage }} />
+      <TimerButtonGroup
+        {...{
+          timerMinutes: breakTime,
+          minutes,
+          seconds,
+          setMinutes,
+          setSeconds,
+          timerRef,
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/_components/timer/PomodoroTimer.tsx b/src/app/_components/timer/PomodoroTimer.tsx
new file mode 100644
index 0000000..a4a27a8
--- /dev/null
+++ b/src/app/_components/timer/PomodoroTimer.tsx
@@ -0,0 +1,72 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { TimerDisplay } from "./TimerDisplay";
+import { useTimerContext } from "../context/TimerContext";
+import { timeToSecs } from "@/app/_utils/helpers";
+import { TimerButtonGroup } from "./TimerButtonGroup";
+import { updateActiveStep } from "@/app/_utils/actions";
+
+export default function PomodoroTimer() {
+  const { timer, dispatch } = useTimerContext();
+  const { pomodoroTime, rounds } = timer.settings;
+  const [minutes, setMinutes] = useState(pomodoroTime);
+  const [seconds, setSeconds] = useState(0);
+  const [percentage, setPercentage] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const totalStartSec = useMemo(
+    () => timeToSecs(pomodoroTime, 0),
+    [pomodoroTime],
+  );
+
+  useEffect(() => {
+    setMinutes(pomodoroTime);
+    setSeconds(0);
+  }, [pomodoroTime]);
+
+  useEffect(() => {
+    if (timer.activeTimer) {
+      timerRef.current = setInterval(() => {
+        if (seconds === 0) {
+          if (minutes === 0) {
+            if (rounds !== timer.activeStep + 1) {
+              setMinutes(pomodoroTime);
+              setSeconds(0);
+            } else {
+              if (timerRef.current) clearInterval(timerRef.current);
+            }
+            updateActiveStep(dispatch, timer);
+          } else {
+            setMinutes(minutes - 1);
+            setSeconds(59);
+          }
+        } else {
+          setSeconds(seconds - 1);
+        }
+      }, 1000);
+    }
+    return () => {
+      if (timerRef.current)
+        if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [timer, minutes, pomodoroTime, rounds, seconds, dispatch]);
+
+  useEffect(() => {
+    setPercentage(100 - (timeToSecs(minutes, seconds) / totalStartSec) * 100);
+  }, [totalStartSec, minutes, seconds]);
+
+  return (
+    <>
+      <TimerDisplay {...{ minutes, seconds, percentage }} />
+      <TimerButtonGroup
+        {...{
+          timerMinutes: pomodoroTime,
+          minutes,
+          seconds,
+          setMinutes,
+          setSeconds,
+          timerRef,
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/_components/timer/Stepper.tsx b/src/app/_components/timer/Stepper.tsx
new file mode 100644
index 0000000..0c882fa
--- /dev/null
+++ b/src/app/_components/timer/Stepper.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import { useTimerContext } from "../context/TimerContext";
+import uuid from "react-uuid";
+import Image from "next/image";
+
+export const Stepper = () => {
+  const { timer } = useTimerContext();
+  const { activeStep } = timer;
+  const [totalRounds, setTotalRounds] = useState([
+    ...Array(timer.settings.rounds).keys(),
+  ]);
+  const listId = uuid();
+
+  useEffect(() => {
+    setTotalRounds([...Array(timer.settings.rounds).keys()]);
+  }, [timer.settings.rounds]);
+
+  return (
+    <div className="overflow-x-auto">
+      <h2 className="mb-4 text-center font-title text-3xl text-primary">
+        Rounds
+      </h2>
+      <ul className="steps">
+        <li key={`${listId}`} data-content="★" className="step step-primary">
+          Task Start
+        </li>
+        {totalRounds.map((round, i) => {
+          return (
+            <li
+              key={`${listId}-${i}`}
+              data-content={round + 1}
+              className={`step ${activeStep > round ? "step-primary" : ""}`}
+            >
+              {activeStep === round && (
+                <Image
+                  src="/svg/pizza-slice.svg"
+                  className="mt-2 animate-bounce"
+                  height={30}
+                  width={30}
+                  alt="pizza icon"
+                />
+              )}
+            </li>
+          );
+        })}
+        <li
+          data-content="✓"
+          className={`step ${activeStep === totalRounds.length ? "step-primary" : ""}`}
+        >
+          Task Done!
+        </li>
+      </ul>
+    </div>
+  );
+};
diff --git a/src/app/_components/timer/Timer.tsx b/src/app/_components/timer/Timer.tsx
new file mode 100644
index 0000000..b45bff9
--- /dev/null
+++ b/src/app/_components/timer/Timer.tsx
@@ -0,0 +1,36 @@
+import SaveSettingsAlert from "./settings/SaveSettingsAlert";
+import Image from "next/image";
+import SettingsDrawer from "./settings/SettingsDrawer";
+import PomodoroTimer from "./PomodoroTimer";
+import BreakTimer from "./BreakTimer";
+import { Stepper } from "./Stepper";
+
+export default function Timer() {
+  return (
+    <div className="drawer drawer-end">
+      <input id="settings-drawer" type="checkbox" className="drawer-toggle" />
+      <div className="drawer-content ">
+        <div className="flex flex-col items-center justify-center space-y-5">
+          <SaveSettingsAlert />
+          <Stepper />
+          <PomodoroTimer />
+          {/* <BreakTimer /> */}
+        </div>
+      </div>
+      <label
+        htmlFor="settings-drawer"
+        className="group btn btn-primary drawer-button m-auto my-4 max-w-32 border-2"
+      >
+        <Image
+          src="/svg/settings.svg"
+          className="group-hover:animate-spin"
+          alt="settings"
+          height={20}
+          width={20}
+        />
+        Settings
+      </label>
+      <SettingsDrawer />
+    </div>
+  );
+}
diff --git a/src/app/_components/timer/TimerButtonGroup.tsx b/src/app/_components/timer/TimerButtonGroup.tsx
new file mode 100644
index 0000000..b16cb1c
--- /dev/null
+++ b/src/app/_components/timer/TimerButtonGroup.tsx
@@ -0,0 +1,97 @@
+import Image from "next/image";
+import { useTimerContext } from "../context/TimerContext";
+import { toggleActiveTimer } from "../../_utils/actions";
+import { Dispatch, MutableRefObject, SetStateAction } from "react";
+
+type TimerButtonGroupProps = {
+  timerMinutes: number;
+  minutes: number;
+  seconds: number;
+  setMinutes: Dispatch<SetStateAction<number>>;
+  setSeconds: Dispatch<SetStateAction<number>>;
+  timerRef: MutableRefObject<ReturnType<typeof setInterval> | null>;
+};
+
+export const TimerButtonGroup = ({
+  timerMinutes,
+  minutes,
+  seconds,
+  setMinutes,
+  setSeconds,
+  timerRef,
+}: TimerButtonGroupProps) => {
+  const { timer, dispatch } = useTimerContext();
+
+  const startButtonText =
+    timerMinutes === minutes && seconds === 0 ? "Start" : "Resume";
+
+  const handleToggle = () => {
+    if (!timer.activeTimer) {
+      toggleActiveTimer(dispatch, timer);
+    } else {
+      toggleActiveTimer(dispatch, timer);
+      if (timerRef.current) clearInterval(timerRef.current);
+    }
+  };
+
+  const handleReset = () => {
+    if (timer.activeTimer) {
+      toggleActiveTimer(dispatch, timer);
+    }
+    if (timerRef.current) clearInterval(timerRef.current);
+    setMinutes(timerMinutes);
+    setSeconds(0);
+  };
+
+  return (
+    <div className="flex space-x-5">
+      <button
+        className="group btn btn-primary min-w-28"
+        onClick={() => handleToggle()}
+        disabled={minutes === 0 && seconds === 0}
+      >
+        {timer.activeTimer ? (
+          <span className="flex w-full items-center justify-between">
+            <Image
+              src="/svg/pause.svg"
+              className="group-hover:animate-crescendo"
+              alt="pause"
+              height={14}
+              width={14}
+            />
+            Pause
+          </span>
+        ) : (
+          <span
+            className={`flex w-full items-center justify-between ${startButtonText === "Start" ? "pr-2" : ""}`}
+          >
+            <Image
+              src="/svg/play.svg"
+              className="group-hover:animate-crescendo"
+              alt="play"
+              height={14}
+              width={14}
+            />
+            {startButtonText}
+          </span>
+        )}
+      </button>
+      <button
+        className="group btn btn-primary min-w-28 disabled:text-base-100"
+        disabled={timerMinutes === minutes && seconds === 0}
+        onClick={() => handleReset()}
+      >
+        <span className="flex w-full items-center justify-between">
+          <Image
+            src="/svg/reset.svg"
+            className="group-hover:animate-spin"
+            alt="reset"
+            height={23}
+            width={23}
+          />
+          Reset
+        </span>
+      </button>
+    </div>
+  );
+};
diff --git a/src/app/_components/timer/TimerDisplay.tsx b/src/app/_components/timer/TimerDisplay.tsx
new file mode 100644
index 0000000..c2228ad
--- /dev/null
+++ b/src/app/_components/timer/TimerDisplay.tsx
@@ -0,0 +1,49 @@
+import { CSSProperties } from "react";
+
+type TimerDisplayProps = {
+  minutes: number;
+  seconds: number;
+  percentage: number;
+};
+
+export function TimerDisplay({
+  minutes,
+  seconds,
+  percentage,
+}: TimerDisplayProps) {
+  return (
+    <div
+      className="radial-progress border-4 border-primary bg-primary text-accent"
+      style={
+        {
+          "--value": percentage,
+          "--size": "13rem",
+          "--thickness": "10px",
+        } as CSSProperties
+      }
+      role="progressbar"
+    >
+      <div className="grid auto-cols-max grid-flow-col gap-1 text-base-100">
+        <span className="countdown font-title text-5xl font-bold">
+          <span
+            style={
+              {
+                "--value": minutes,
+              } as CSSProperties
+            }
+          />
+          :
+        </span>
+        <span className="countdown font-title text-5xl font-bold text-base-100">
+          <span
+            style={
+              {
+                "--value": seconds,
+              } as CSSProperties
+            }
+          />
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/_components/settings/NotificationSettings.tsx b/src/app/_components/timer/settings/NotificationSettings.tsx
similarity index 91%
rename from src/app/_components/settings/NotificationSettings.tsx
rename to src/app/_components/timer/settings/NotificationSettings.tsx
index 179ee34..7eb1ad0 100644
--- a/src/app/_components/settings/NotificationSettings.tsx
+++ b/src/app/_components/timer/settings/NotificationSettings.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { useRef } from "react";
-import useSound from "node_modules/use-sound/dist";
-import { useTimerContext } from "../context/TimerContext";
+import useSound from "use-sound";
+import { useTimerContext } from "../../context/TimerContext";
 import { updateSoundSettings } from "@/app/_utils/actions";
 
 export default function NotificationSettings() {
@@ -45,14 +45,17 @@ export default function NotificationSettings() {
   };
 
   return (
-    <div className="flex w-full max-w-sm flex-col items-center justify-center space-y-1 px-5">
+    <div className="flex w-full max-w-sm flex-col items-center justify-center space-y-4 px-5">
       <h4 className="text-md mr-auto font-bold text-base-300">SOUND</h4>
       <div className="space-between flex w-full items-center gap-7">
-        <label className="form-control min-h-32 w-full">
+        <label className="form-control min-h-20">
           <div className="label flex items-center justify-start">
             <span className="label-text">Notification</span>
           </div>
-          <details className="dropdown" ref={dropdownRef}>
+          <details
+            className="dropdown dropdown-end dropdown-right"
+            ref={dropdownRef}
+          >
             <summary className="group no-animation flex min-h-9 w-40 select-none items-center justify-between rounded border-2 px-5 text-sm hover:border-base-300 focus:border-base-300">
               {sound}
               <Image
diff --git a/src/app/_components/settings/SaveSettingsAlert.tsx b/src/app/_components/timer/settings/SaveSettingsAlert.tsx
similarity index 60%
rename from src/app/_components/settings/SaveSettingsAlert.tsx
rename to src/app/_components/timer/settings/SaveSettingsAlert.tsx
index 9281fd1..e914644 100644
--- a/src/app/_components/settings/SaveSettingsAlert.tsx
+++ b/src/app/_components/timer/settings/SaveSettingsAlert.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
-import { useTimerContext } from "../context/TimerContext";
+import { useTimerContext } from "../../context/TimerContext";
 import { updateSaveAlert } from "@/app/_utils/actions";
+import Image from "next/image";
 
 export default function SaveSettingsAlert() {
   const [isVisible, setIsVisible] = useState(false);
@@ -21,23 +22,11 @@ export default function SaveSettingsAlert() {
   return (
     <div
       role="alert"
-      className={`alert bg-white shadow-md transition duration-1000 ease-in-out ${
+      className={`alert max-w-xs bg-white shadow-md transition duration-1000 ease-in-out ${
         isVisible ? "opacity-100" : "opacity-0"
       }`}
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-6 w-6 shrink-0 stroke-current"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-        />
-      </svg>
+      <Image src="/svg/alert.svg" alt="alert" height={24} width={24} />
       <span>Settings Saved!</span>
     </div>
   );
diff --git a/src/app/_components/timer/settings/SettingsDrawer.tsx b/src/app/_components/timer/settings/SettingsDrawer.tsx
new file mode 100644
index 0000000..65f9825
--- /dev/null
+++ b/src/app/_components/timer/settings/SettingsDrawer.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import Image from "next/image";
+import TimerSettings from "./TimerSettings";
+import NotificationSettings from "./NotificationSettings";
+import { useTimerContext } from "../../context/TimerContext";
+import {
+  updateSettings,
+  revertSettings,
+  updateSaveAlert,
+  toggleActiveTimer,
+  resetActiveStep,
+} from "@/app/_utils/actions";
+
+export default function SettingsDrawer() {
+  const { timer, dispatch } = useTimerContext();
+  const [tempSettings, setTempSettings] = useState(timer.settings);
+
+  const handleClick = (actionType?: "save" | "revert") => {
+    if (timer.activeTimer) {
+      toggleActiveTimer(dispatch, timer);
+    }
+    if (actionType === "save") {
+      updateSaveAlert(dispatch, timer);
+      updateSettings(dispatch, { ...timer, settings: { ...tempSettings } });
+      resetActiveStep(dispatch, timer);
+    } else {
+      revertSettings(dispatch, { ...timer, settings: { ...timer.settings } });
+    }
+  };
+
+  return (
+    <div className="drawer-side">
+      <label
+        htmlFor="settings-drawer"
+        aria-label="close sidebar"
+        className="drawer-overlay"
+      />
+      <div className="flex h-full min-h-full w-full max-w-sm flex-col items-center justify-start bg-base-100 px-4 pt-24 text-base-content">
+        <h3 className="flex h-6 text-lg font-bold text-gray-400">
+          POMOPARTY SETTINGS
+        </h3>
+        <div className="mb-5 flex h-full w-full flex-col justify-between">
+          <div className="mt-8 flex h-full w-full flex-col items-center space-y-8">
+            <hr className="border-1 h-px w-full bg-gray-200" />
+            <TimerSettings
+              tempSettings={tempSettings}
+              setTempSettings={setTempSettings}
+            />
+            <hr className="border-1 h-px w-full bg-gray-200" />
+            <NotificationSettings />
+          </div>
+          <div className="flex w-full flex-col items-center justify-center gap-4">
+            <label
+              htmlFor="settings-drawer"
+              className="btn btn-primary drawer-button btn-block"
+              onClick={() => handleClick("save")}
+            >
+              <Image src="/svg/save.svg" alt="save" height={17} width={17} />
+              Save
+            </label>
+            <label
+              htmlFor="settings-drawer"
+              className="btn btn-outline btn-secondary btn-block border-primary text-primary shadow-md"
+              onClick={() => handleClick("revert")}
+            >
+              Close
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/_components/settings/TimerSettings.tsx b/src/app/_components/timer/settings/TimerSettings.tsx
similarity index 91%
rename from src/app/_components/settings/TimerSettings.tsx
rename to src/app/_components/timer/settings/TimerSettings.tsx
index ab08403..e276882 100644
--- a/src/app/_components/settings/TimerSettings.tsx
+++ b/src/app/_components/timer/settings/TimerSettings.tsx
@@ -21,12 +21,12 @@ export default function TimerSettings({
     };
 
   return (
-    <div className="flex w-full max-w-sm flex-col items-center justify-center space-y-1 px-5">
+    <div className="flex w-full max-w-sm flex-col items-center justify-center space-y-4 px-2">
       <h4 className="text-md mr-auto font-bold text-base-300">TIMER LENGTH</h4>
       <label className="form-control w-full max-w-sm py-1.5">
         <div className="label justify-between">
           <span className="label-text">Pomodoro</span>
-          <span className="text-lg text-primary">{pomodoroTime + " min"}</span>
+          <span className="text-primary">{pomodoroTime + " min"}</span>
         </div>
         <input
           type="range"
@@ -46,7 +46,7 @@ export default function TimerSettings({
         <label className="form-control w-full py-1">
           <div className="label justify-between">
             <span className="label-text">Short Break</span>
-            <span className="text-lg text-primary">{breakTime + " min"}</span>
+            <span className="text-primary">{breakTime + " min"}</span>
           </div>
           <input
             type="range"
@@ -65,7 +65,7 @@ export default function TimerSettings({
         <label className="form-control w-full py-1">
           <div className="label justify-between">
             <span className="label-text">Rounds</span>
-            <span className="text-lg text-primary">{rounds}</span>
+            <span className="text-primary">{rounds}</span>
           </div>
           <input
             type="range"
diff --git a/src/app/_utils/actions.ts b/src/app/_utils/actions.ts
index 4b28a47..a237e05 100644
--- a/src/app/_utils/actions.ts
+++ b/src/app/_utils/actions.ts
@@ -26,3 +26,13 @@ export const updateSoundSettings = (
 
 export const revertSettings = (dispatch: Dispatch<IAction>, timer: TimerType) =>
   dispatch({ type: ActionType.revertSettings, timer: timer });
+
+export const updateActiveStep = (
+  dispatch: Dispatch<IAction>,
+  timer: TimerType,
+) => dispatch({ type: ActionType.updateActiveStep, timer: timer });
+
+export const resetActiveStep = (
+  dispatch: Dispatch<IAction>,
+  timer: TimerType,
+) => dispatch({ type: ActionType.resetActiveStep, timer: timer });
diff --git a/src/app/_utils/helpers.ts b/src/app/_utils/helpers.ts
new file mode 100644
index 0000000..8893727
--- /dev/null
+++ b/src/app/_utils/helpers.ts
@@ -0,0 +1 @@
+export const timeToSecs = (min: number, sec: number): number => min * 60 + sec;
diff --git a/src/app/_utils/types.ts b/src/app/_utils/types.ts
index c1c7b61..4698c51 100644
--- a/src/app/_utils/types.ts
+++ b/src/app/_utils/types.ts
@@ -12,6 +12,7 @@ export type SettingsType = {
 
 export type TimerType = {
   activeTimer: boolean;
+  activeStep: number;
   showAlert: boolean;
   settings: SettingsType;
 };
diff --git a/src/app/duo-timer/page.tsx b/src/app/duo-timer/page.tsx
deleted file mode 100644
index 07a4c74..0000000
--- a/src/app/duo-timer/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-"use client";
-import Dashboard from "../_components/Dashboard";
-
-export default function DuoTimer() {
-  return (
-    <main className="flex min-h-screen flex-col items-center space-y-4 p-20">
-      <Dashboard />
-    </main>
-  );
-}
diff --git a/src/app/globals.css b/src/app/globals.css
index f27f9ff..c466158 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Rowdies:wght@300;400;700&display=swap");
 
 :root {
   --foreground-rgb: 0, 0, 255;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 17897d6..8de613f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,15 @@
 "use client";
-import Dashboard from "./_components/Dashboard";
 import Link from "next/link";
 import Image from "next/image";
+import { TimerContextProvider } from "./_components/context/TimerContext";
+import Timer from "./_components/timer/Timer";
 
 export default function Home() {
   return (
-    <main className="flex flex-col items-center space-y-4 p-20">
-      <Dashboard />
+    <main className="flex flex-col items-center p-20">
+      <TimerContextProvider>
+        <Timer />
+      </TimerContextProvider>
       <Link href="/duo-timer">
         <button className="btn btn-primary min-w-28 justify-between">
           <Image
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 347fbcf..f010736 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,7 +7,7 @@ const config: Config = {
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/_server/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/_components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/solo-timer/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/duo-timer/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
@@ -15,6 +15,9 @@ const config: Config = {
       colors: {
         neutral: colors.neutral,
       },
+      fontFamily: {
+        title: "Rowdies",
+      },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
diff --git a/tsconfig.json b/tsconfig.json
index 16739a8..a7fe1a8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
+    "target": "ES6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,

From 8eb9341c13651ca84009fdc56c1fe37ba67a0ff5 Mon Sep 17 00:00:00 2001
From: Sonny Nguyen <sonnynguyen163@gmail.com>
Date: Wed, 17 Apr 2024 18:02:43 -0700
Subject: [PATCH 2/3] custom button, daisy update, custom slider, styling
 updates

---
 .hintrc                                       |  8 ++
 global.d.ts                                   |  1 +
 package-lock.json                             | 14 +--
 package.json                                  |  3 +-
 public/svg/cancel.svg                         | 15 +++
 src/app/_actions/handleWeb3.tsx               |  2 -
 src/app/_components/ContactForm.tsx           | 31 +++++--
 src/app/_components/Navbar.tsx                | 74 +++++++++------
 src/app/_components/context/TimerContext.tsx  |  2 +-
 src/app/_components/timer/BreakTimer.tsx      |  2 +-
 src/app/_components/timer/PomodoroTimer.tsx   |  4 +-
 src/app/_components/timer/Stepper.tsx         | 11 +--
 .../_components/timer/TimerButtonGroup.tsx    | 17 ++--
 src/app/_components/timer/TimerDisplay.tsx    |  1 +
 .../timer/settings/NotificationSettings.tsx   |  4 +-
 .../timer/settings/SaveSettingsAlert.tsx      |  2 +-
 .../timer/settings/SettingsDrawer.tsx         | 12 +--
 .../timer/settings/TimerSettings.tsx          | 93 ++++++++++++-------
 src/app/_components/ui/ThemedButton.tsx       | 64 +++++++++++++
 src/app/globals.css                           |  7 --
 src/app/page.tsx                              |  5 +-
 tailwind.config.ts                            |  2 +-
 tsconfig.json                                 |  4 +-
 use-sound.d.ts                                | 45 ---------
 24 files changed, 252 insertions(+), 171 deletions(-)
 create mode 100644 .hintrc
 create mode 100644 global.d.ts
 create mode 100644 public/svg/cancel.svg
 create mode 100644 src/app/_components/ui/ThemedButton.tsx
 delete mode 100644 use-sound.d.ts

diff --git a/.hintrc b/.hintrc
new file mode 100644
index 0000000..cb34607
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}
\ No newline at end of file
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..b849a16
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1 @@
+declare module "*.mp3";
diff --git a/package-lock.json b/package-lock.json
index b451c0e..e426d74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "0.1.0",
       "dependencies": {
         "@next/bundle-analyzer": "^14.1.4",
-        "@types/howler": "^2.2.11",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "@typescript-eslint/typescript-estree": "^7.4.0",
@@ -28,7 +27,7 @@
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "autoprefixer": "^10.4.19",
-        "daisyui": "^4.9.0",
+        "daisyui": "^4.10.2",
         "eslint": "^8.57.0",
         "eslint-config-next": "14.1.4",
         "eslint-config-prettier": "^9.1.0",
@@ -1131,11 +1130,6 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
-    "node_modules/@types/howler": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.11.tgz",
-      "integrity": "sha512-7aBoUL6RbSIrqKnpEgfa1wSNUBK06mn08siP2QI0zYk7MXfEJAaORc4tohamQYqCqVESoDyRWSdQn2BOKWj2Qw=="
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2440,9 +2434,9 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.9.0.tgz",
-      "integrity": "sha512-9JsDx4E+30kPxThE+6yEwQokqg1957uwTx/skP2RE98fG6Ten6U+S9YXeQg1a3CI958aF5aOb0oEA+KZFfrZUA==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.10.2.tgz",
+      "integrity": "sha512-eCWS1W/JPyxW9IvlgW5m0R6rp9ZhRsBTW37rvEUthckkjsV04u8XipV519OoccSA46ixhSJa3q7XLI1WUFtRCA==",
       "dev": true,
       "dependencies": {
         "css-selector-tokenizer": "^0.8",
diff --git a/package.json b/package.json
index aefe3dd..ab21fa1 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@next/bundle-analyzer": "^14.1.4",
-    "@types/howler": "^2.2.11",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
     "@typescript-eslint/typescript-estree": "^7.4.0",
@@ -34,7 +33,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.4.19",
-    "daisyui": "^4.9.0",
+    "daisyui": "^4.10.2",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.1.4",
     "eslint-config-prettier": "^9.1.0",
diff --git a/public/svg/cancel.svg b/public/svg/cancel.svg
new file mode 100644
index 0000000..1d46296
--- /dev/null
+++ b/public/svg/cancel.svg
@@ -0,0 +1,15 @@
+            <svg
+              className="size-4 flex-shrink-0"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M18 6 6 18"></path>
+              <path d="m6 6 12 12"></path>
+            </svg>
\ No newline at end of file
diff --git a/src/app/_actions/handleWeb3.tsx b/src/app/_actions/handleWeb3.tsx
index 27bc35a..294629d 100644
--- a/src/app/_actions/handleWeb3.tsx
+++ b/src/app/_actions/handleWeb3.tsx
@@ -11,8 +11,6 @@ export async function submitWeb3Form(formData: FormData) {
     const object = Object.fromEntries(formData);
     const json = JSON.stringify(object);
 
-    console.log("checking body: ", object);
-
     const response = await fetch("https://api.web3forms.com/submit", {
       method: "POST",
       headers: {
diff --git a/src/app/_components/ContactForm.tsx b/src/app/_components/ContactForm.tsx
index f7d3b02..68d2224 100644
--- a/src/app/_components/ContactForm.tsx
+++ b/src/app/_components/ContactForm.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { submitWeb3Form } from "@/app/_actions/handleWeb3";
+import { submitWeb3Form } from "@/_actions/handleWeb3";
 import { useMemo, useRef } from "react";
+import { ThemedButton } from "./ui/ThemedButton";
 
 export default function ContactForm() {
   const categories = useMemo(
@@ -32,10 +33,15 @@ export default function ContactForm() {
         }}
       >
         <div className="form-control">
-          <label className="label">
+          <label htmlFor="category" className="label">
             <span className="label-text">I&apos;d like to chat about...</span>
           </label>
-          <select name="category" className="select select-bordered" required>
+          <select
+            id="category"
+            name="category"
+            className="select select-bordered"
+            required
+          >
             <option disabled selected>
               - Please Select -
             </option>
@@ -43,10 +49,11 @@ export default function ContactForm() {
           </select>
         </div>
         <div className="form-control">
-          <label className="label">
+          <label htmlFor="text" className="label">
             <span className="label-text">Name</span>
           </label>
           <input
+            id="text"
             type="text"
             name="name"
             placeholder="John Doe"
@@ -55,10 +62,11 @@ export default function ContactForm() {
           />
         </div>
         <div className="form-control">
-          <label className="label">
+          <label htmlFor="email" className="label">
             <span className="label-text">Email</span>
           </label>
           <input
+            id="email"
             type="email"
             name="email"
             placeholder="my@email.com"
@@ -67,11 +75,11 @@ export default function ContactForm() {
           />
         </div>
         <div className="form-control">
-          <label className="label">
+          <label htmlFor="email" className="label">
             <span className="label-text">Your Message</span>
           </label>
-
           <textarea
+            id="message"
             name="message"
             placeholder="Please enter your message here."
             className="textarea textarea-bordered resize-none"
@@ -80,9 +88,14 @@ export default function ContactForm() {
         </div>
 
         <div className="form-control mt-6">
-          <button type="submit" className="btn btn-primary">
+          <ThemedButton
+            variant="solid"
+            size="md"
+            type="submit"
+            className="btn btn-primary"
+          >
             Submit Form
-          </button>
+          </ThemedButton>
         </div>
       </form>
     </>
diff --git a/src/app/_components/Navbar.tsx b/src/app/_components/Navbar.tsx
index bbbf60c..7042bf3 100644
--- a/src/app/_components/Navbar.tsx
+++ b/src/app/_components/Navbar.tsx
@@ -1,37 +1,57 @@
 "use client";
 import Image from "next/image";
 import Link from "next/link";
+import { ThemedButton } from "./ui/ThemedButton";
 
 export default function NavBar() {
   return (
-    <div className="navbar fixed z-10 bg-primary px-16 py-2 drop-shadow-lg">
-      <Link
-        className="mr-auto flex font-title text-4xl tracking-wider text-base-100"
-        href="/"
+    <header className="shadowsm:flex-nowrap fixed flex w-full flex-wrap bg-base-100 py-3 text-sm sm:justify-start">
+      <nav
+        className="mx-auto w-full max-w-[85rem] px-7 sm:flex sm:items-center sm:justify-between"
+        aria-label="navigation bar"
       >
-        P
-        <Image
-          src="/svg/pizza.svg"
-          height={33}
-          width={33}
-          alt="pomoparty-logo"
-          priority={true}
-        />
-        MOPARTY
-      </Link>
-      <div className="font-display ml-auto flex items-center space-x-6">
-        <Link href="/contact">
-          <button className="text-white">Contact</button>
+        <Link
+          className="flex font-title text-4xl tracking-wider text-primary drop-shadow-lg"
+          href="/"
+        >
+          P
+          <Image
+            src="/svg/pizza.svg"
+            height={33}
+            width={33}
+            alt="pomoparty-logo"
+            priority={true}
+          />
+          MOPARTY
         </Link>
-        <Link href="#">
-          <button className="text-white">Sign In</button>
-        </Link>
-        <Link href="#">
-          <button className="btn btn-accent border-2 text-primary shadow-md">
-            Sign Up
-          </button>
-        </Link>
-      </div>
-    </div>
+        <div className="mt-5 flex flex-row items-center gap-5 sm:mt-0 sm:justify-end sm:ps-5">
+          <Link href="/contact">
+            <ThemedButton
+              className="no-underline hover:no-underline"
+              alt="contact"
+              variant="link"
+              size="md"
+            >
+              Contact
+            </ThemedButton>
+          </Link>
+          <Link href="#">
+            <ThemedButton
+              className="no-underline hover:no-underline"
+              alt="sign in"
+              variant="link"
+              size="md"
+            >
+              Sign In
+            </ThemedButton>
+          </Link>
+          <Link href="#">
+            <ThemedButton alt="sign up" variant="solid" size="md">
+              Sign Up
+            </ThemedButton>
+          </Link>
+        </div>
+      </nav>
+    </header>
   );
 }
diff --git a/src/app/_components/context/TimerContext.tsx b/src/app/_components/context/TimerContext.tsx
index 7e978b8..243296f 100644
--- a/src/app/_components/context/TimerContext.tsx
+++ b/src/app/_components/context/TimerContext.tsx
@@ -1,4 +1,4 @@
-import { TimerType } from "@/app/_utils/types";
+import { TimerType } from "@/_utils/types";
 import {
   createContext,
   PropsWithChildren,
diff --git a/src/app/_components/timer/BreakTimer.tsx b/src/app/_components/timer/BreakTimer.tsx
index 7cfd5b3..125acfc 100644
--- a/src/app/_components/timer/BreakTimer.tsx
+++ b/src/app/_components/timer/BreakTimer.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { TimerDisplay } from "./TimerDisplay";
 import { useTimerContext } from "../context/TimerContext";
-import { timeToSecs } from "@/app/_utils/helpers";
+import { timeToSecs } from "@/_utils/helpers";
 import { TimerButtonGroup } from "./TimerButtonGroup";
 
 export default function BreakTimer() {
diff --git a/src/app/_components/timer/PomodoroTimer.tsx b/src/app/_components/timer/PomodoroTimer.tsx
index a4a27a8..58dfc0a 100644
--- a/src/app/_components/timer/PomodoroTimer.tsx
+++ b/src/app/_components/timer/PomodoroTimer.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { TimerDisplay } from "./TimerDisplay";
 import { useTimerContext } from "../context/TimerContext";
-import { timeToSecs } from "@/app/_utils/helpers";
+import { timeToSecs } from "@/_utils/helpers";
 import { TimerButtonGroup } from "./TimerButtonGroup";
-import { updateActiveStep } from "@/app/_utils/actions";
+import { updateActiveStep } from "@/_utils/actions";
 
 export default function PomodoroTimer() {
   const { timer, dispatch } = useTimerContext();
diff --git a/src/app/_components/timer/Stepper.tsx b/src/app/_components/timer/Stepper.tsx
index 0c882fa..6eacabe 100644
--- a/src/app/_components/timer/Stepper.tsx
+++ b/src/app/_components/timer/Stepper.tsx
@@ -21,14 +21,11 @@ export const Stepper = () => {
         Rounds
       </h2>
       <ul className="steps">
-        <li key={`${listId}`} data-content="★" className="step step-primary">
-          Task Start
-        </li>
         {totalRounds.map((round, i) => {
           return (
             <li
               key={`${listId}-${i}`}
-              data-content={round + 1}
+              data-content={activeStep > round ? "✓" : round + 1}
               className={`step ${activeStep > round ? "step-primary" : ""}`}
             >
               {activeStep === round && (
@@ -43,12 +40,6 @@ export const Stepper = () => {
             </li>
           );
         })}
-        <li
-          data-content="✓"
-          className={`step ${activeStep === totalRounds.length ? "step-primary" : ""}`}
-        >
-          Task Done!
-        </li>
       </ul>
     </div>
   );
diff --git a/src/app/_components/timer/TimerButtonGroup.tsx b/src/app/_components/timer/TimerButtonGroup.tsx
index b16cb1c..8b85361 100644
--- a/src/app/_components/timer/TimerButtonGroup.tsx
+++ b/src/app/_components/timer/TimerButtonGroup.tsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 import { useTimerContext } from "../context/TimerContext";
 import { toggleActiveTimer } from "../../_utils/actions";
 import { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { ThemedButton } from "../ui/ThemedButton";
 
 type TimerButtonGroupProps = {
   timerMinutes: number;
@@ -45,8 +46,10 @@ export const TimerButtonGroup = ({
 
   return (
     <div className="flex space-x-5">
-      <button
-        className="group btn btn-primary min-w-28"
+      <ThemedButton
+        className="group min-w-28"
+        variant="solid"
+        size="md"
         onClick={() => handleToggle()}
         disabled={minutes === 0 && seconds === 0}
       >
@@ -75,9 +78,11 @@ export const TimerButtonGroup = ({
             {startButtonText}
           </span>
         )}
-      </button>
-      <button
-        className="group btn btn-primary min-w-28 disabled:text-base-100"
+      </ThemedButton>
+      <ThemedButton
+        className="group min-w-28 disabled:text-base-100"
+        variant="solid"
+        size="md"
         disabled={timerMinutes === minutes && seconds === 0}
         onClick={() => handleReset()}
       >
@@ -91,7 +96,7 @@ export const TimerButtonGroup = ({
           />
           Reset
         </span>
-      </button>
+      </ThemedButton>
     </div>
   );
 };
diff --git a/src/app/_components/timer/TimerDisplay.tsx b/src/app/_components/timer/TimerDisplay.tsx
index c2228ad..f3386ad 100644
--- a/src/app/_components/timer/TimerDisplay.tsx
+++ b/src/app/_components/timer/TimerDisplay.tsx
@@ -13,6 +13,7 @@ export function TimerDisplay({
 }: TimerDisplayProps) {
   return (
     <div
+      title="Timer Progress"
       className="radial-progress border-4 border-primary bg-primary text-accent"
       style={
         {
diff --git a/src/app/_components/timer/settings/NotificationSettings.tsx b/src/app/_components/timer/settings/NotificationSettings.tsx
index 7eb1ad0..c6337bb 100644
--- a/src/app/_components/timer/settings/NotificationSettings.tsx
+++ b/src/app/_components/timer/settings/NotificationSettings.tsx
@@ -1,8 +1,8 @@
 import Image from "next/image";
 import { useRef } from "react";
-import useSound from "use-sound";
+import useSound from "node_modules/use-sound/dist";
 import { useTimerContext } from "../../context/TimerContext";
-import { updateSoundSettings } from "@/app/_utils/actions";
+import { updateSoundSettings } from "@/_utils/actions";
 
 export default function NotificationSettings() {
   const { timer, dispatch } = useTimerContext();
diff --git a/src/app/_components/timer/settings/SaveSettingsAlert.tsx b/src/app/_components/timer/settings/SaveSettingsAlert.tsx
index e914644..139a7e1 100644
--- a/src/app/_components/timer/settings/SaveSettingsAlert.tsx
+++ b/src/app/_components/timer/settings/SaveSettingsAlert.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTimerContext } from "../../context/TimerContext";
-import { updateSaveAlert } from "@/app/_utils/actions";
+import { updateSaveAlert } from "@/_utils/actions";
 import Image from "next/image";
 
 export default function SaveSettingsAlert() {
diff --git a/src/app/_components/timer/settings/SettingsDrawer.tsx b/src/app/_components/timer/settings/SettingsDrawer.tsx
index 65f9825..7da021c 100644
--- a/src/app/_components/timer/settings/SettingsDrawer.tsx
+++ b/src/app/_components/timer/settings/SettingsDrawer.tsx
@@ -9,7 +9,7 @@ import {
   updateSaveAlert,
   toggleActiveTimer,
   resetActiveStep,
-} from "@/app/_utils/actions";
+} from "@/_utils/actions";
 
 export default function SettingsDrawer() {
   const { timer, dispatch } = useTimerContext();
@@ -35,13 +35,13 @@ export default function SettingsDrawer() {
         aria-label="close sidebar"
         className="drawer-overlay"
       />
-      <div className="flex h-full min-h-full w-full max-w-sm flex-col items-center justify-start bg-base-100 px-4 pt-24 text-base-content">
-        <h3 className="flex h-6 text-lg font-bold text-gray-400">
+      <div className="flex h-full min-h-full w-full max-w-sm flex-col items-center justify-start bg-base-100 pt-2 text-base-content">
+        <h3 className="mb-6 mt-3 flex h-6 select-none text-center text-xl font-bold text-primary">
           POMOPARTY SETTINGS
         </h3>
-        <div className="mb-5 flex h-full w-full flex-col justify-between">
+        <hr className="border-1 h-px w-full bg-gray-200" />
+        <div className="mb-4 flex h-full w-full flex-col justify-between">
           <div className="mt-8 flex h-full w-full flex-col items-center space-y-8">
-            <hr className="border-1 h-px w-full bg-gray-200" />
             <TimerSettings
               tempSettings={tempSettings}
               setTempSettings={setTempSettings}
@@ -49,7 +49,7 @@ export default function SettingsDrawer() {
             <hr className="border-1 h-px w-full bg-gray-200" />
             <NotificationSettings />
           </div>
-          <div className="flex w-full flex-col items-center justify-center gap-4">
+          <div className="flex w-full flex-col items-center justify-center gap-4 px-4">
             <label
               htmlFor="settings-drawer"
               className="btn btn-primary drawer-button btn-block"
diff --git a/src/app/_components/timer/settings/TimerSettings.tsx b/src/app/_components/timer/settings/TimerSettings.tsx
index e276882..256a425 100644
--- a/src/app/_components/timer/settings/TimerSettings.tsx
+++ b/src/app/_components/timer/settings/TimerSettings.tsx
@@ -1,11 +1,44 @@
 import { ChangeEvent, Dispatch, SetStateAction } from "react";
-import { SettingsType } from "@/app/_utils/types";
+import { SettingsType } from "@/_utils/types";
 
 type TimerSettingsProps = {
   tempSettings: SettingsType;
   setTempSettings: Dispatch<SetStateAction<SettingsType>>;
 };
 
+type SliderBarProps = {
+  id: string;
+  value: number;
+  min: number;
+  max: number;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  label: string;
+};
+
+const SliderBar = ({ ...props }: SliderBarProps) => {
+  const { id, label, min, max, value, onChange } = props;
+  return (
+    <>
+      <label
+        className=" flex select-none items-center justify-between"
+        htmlFor={id}
+      >
+        <span>{label}</span>
+        <span className="text-lg text-primary">{value + " min"}</span>
+      </label>
+      <input
+        id={id}
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        onChange={onChange}
+        className="range range-primary range-sm w-full"
+      />
+    </>
+  );
+};
+
 export default function TimerSettings({
   tempSettings,
   setTempSettings,
@@ -21,66 +54,56 @@ export default function TimerSettings({
     };
 
   return (
-    <div className="flex w-full max-w-sm flex-col items-center justify-center space-y-4 px-2">
-      <h4 className="text-md mr-auto font-bold text-base-300">TIMER LENGTH</h4>
-      <label className="form-control w-full max-w-sm py-1.5">
-        <div className="label justify-between">
-          <span className="label-text">Pomodoro</span>
-          <span className="text-primary">{pomodoroTime + " min"}</span>
-        </div>
-        <input
-          type="range"
+    <div className="flex w-full max-w-sm flex-col items-center justify-center space-y-4 px-6">
+      <h4 className="text-md mr-auto select-none font-bold text-base-300">
+        TIMER LENGTH
+      </h4>
+      <div className="w-full max-w-sm space-y-3 py-1.5">
+        <SliderBar
+          id="pomodoro"
           min={1}
-          max="60"
+          max={60}
           value={pomodoroTime}
-          className="range range-primary range-sm"
           onChange={handleSliderInputs("pomodoroTime")}
+          label="Pomodoro"
         />
         <div className="mt-2 flex w-full justify-between px-0.5 text-xs text-base-content">
           <span>1</span>
           <span>30</span>
           <span>60</span>
         </div>
-      </label>
+      </div>
       <div className="flex w-full max-w-sm items-center gap-7">
-        <label className="form-control w-full py-1">
-          <div className="label justify-between">
-            <span className="label-text">Short Break</span>
-            <span className="text-primary">{breakTime + " min"}</span>
-          </div>
-          <input
-            type="range"
+        <div className="w-full space-y-3 py-1.5">
+          <SliderBar
+            id="breaktime"
             min={1}
-            max="30"
+            max={30}
             value={breakTime}
-            className="range range-primary range-sm"
             onChange={handleSliderInputs("breakTime")}
+            label="Short Break"
           />
-          <div className="mt-2 flex w-full justify-between px-0.5 text-xs text-base-content">
+          <div className="mt-1 flex w-full select-none justify-between px-0.5 text-sm text-black">
             <span>1</span>
             <span>15</span>
             <span>30</span>
           </div>
-        </label>
-        <label className="form-control w-full py-1">
-          <div className="label justify-between">
-            <span className="label-text">Rounds</span>
-            <span className="text-primary">{rounds}</span>
-          </div>
-          <input
-            type="range"
+        </div>
+        <div className="w-full space-y-3 py-1.5">
+          <SliderBar
+            id="rounds"
             min={1}
-            max="15"
+            max={15}
             value={rounds}
-            className="range range-primary range-sm"
             onChange={handleSliderInputs("rounds")}
+            label="Rounds"
           />
-          <div className="mt-2 flex w-full justify-between px-0.5 text-xs text-base-content">
+          <div className="mt-1 flex  w-full select-none justify-between px-0.5 text-sm text-black">
             <span>1</span>
             <span>8</span>
             <span>15</span>
           </div>
-        </label>
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/_components/ui/ThemedButton.tsx b/src/app/_components/ui/ThemedButton.tsx
new file mode 100644
index 0000000..c66036f
--- /dev/null
+++ b/src/app/_components/ui/ThemedButton.tsx
@@ -0,0 +1,64 @@
+import { ButtonHTMLAttributes } from "react";
+
+type ButtonVariant = "solid" | "outline" | "ghost" | "link";
+type ButtonSize = "sm" | "md" | "lg";
+
+type ThemedButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant: ButtonVariant;
+  alt?: string;
+  size: ButtonSize;
+  block?: boolean;
+};
+
+const getSizeClass = (size: ButtonSize) => {
+  switch (size) {
+    case "sm":
+      return "py-2 px-3";
+    case "md":
+      return "py-3 px-4";
+    case "lg":
+      return "p-4 sm:p-5";
+    default:
+      return "py-3 px-4";
+  }
+};
+
+const getTypeClass = (type: ButtonVariant) => {
+  switch (type) {
+    case "solid":
+      return "btn-primary";
+    case "outline":
+      return "btn-outline btn-primary";
+    case "ghost":
+      return "btn-ghost";
+    case "link":
+      return "btn-link";
+    default:
+      return "btn-primary";
+  }
+};
+
+const getButtonClasses = (
+  variant: ButtonVariant,
+  size: ButtonSize,
+  block?: boolean,
+) => {
+  const btnBlock = block ? "w-full justify-center" : "";
+  return getSizeClass(size) + " " + getTypeClass(variant) + " " + btnBlock;
+};
+
+export const ThemedButton = ({ ...btnProps }: ThemedButtonProps) => {
+  const { variant, size, block, onClick, children, className, disabled } =
+    btnProps;
+  const buttonClasses = getButtonClasses(variant, size, block);
+  return (
+    <button
+      type="button"
+      className={`${className} ${buttonClasses} btn`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/src/app/globals.css b/src/app/globals.css
index c466158..fd1f1fa 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,13 +10,6 @@
   --background-end-rgb: 255, 255, 255;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 0, 0, 0;
-    --background-rgb: 255, 255, 255;
-  }
-}
-
 body {
   background: #ffff;
   overflow: hidden;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8de613f..cbb4457 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { TimerContextProvider } from "./_components/context/TimerContext";
 import Timer from "./_components/timer/Timer";
+import { ThemedButton } from "./_components/ui/ThemedButton";
 
 export default function Home() {
   return (
@@ -11,7 +12,7 @@ export default function Home() {
         <Timer />
       </TimerContextProvider>
       <Link href="/duo-timer">
-        <button className="btn btn-primary min-w-28 justify-between">
+        <ThemedButton alt="duo session" variant="solid" size="md">
           <Image
             src="/svg/duo.svg"
             style={{ height: "auto" }}
@@ -20,7 +21,7 @@ export default function Home() {
             width={20}
           />
           Duo Session
-        </button>
+        </ThemedButton>
       </Link>
     </main>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f010736..2b1980b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -42,7 +42,7 @@ const config: Config = {
           "primary-content": "#FFF",
           secondary: "#FF8989",
           "secondary-content": "#FFF",
-          accent: "#FFEADD",
+          accent: "#FFA3A3",
           "accent-content": "#FFF",
           neutral: "#FF8989",
           "base-100": "#FFF",
diff --git a/tsconfig.json b/tsconfig.json
index a7fe1a8..cdca2a2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,10 +20,10 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/app/*"]
     }
   },
-  "typeRoots": ["./use-sound.d.ts"],
+  "typeRoots": ["./global.d.ts"],
   "include": [
     "next-env.d.ts",
     "**/*.ts",
diff --git a/use-sound.d.ts b/use-sound.d.ts
deleted file mode 100644
index dcd919b..0000000
--- a/use-sound.d.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-declare module "use-sound" {
-  import { Howl, Howler } from "howler";
-
-  interface HookOptions {
-    volume?: number;
-    playbackRate?: number;
-    interrupt?: boolean;
-    soundEnabled?: boolean;
-    sprite?: { [key: string]: [number, number] };
-    // You can add more properties as needed based on your use case
-  }
-
-  interface ExposedData {
-    volume: number;
-    playbackRate: number;
-    interrupt: boolean;
-    soundEnabled: boolean;
-    sprite: { [key: string]: [number, number] };
-    // You can add more properties as needed based on your use case
-  }
-
-  type PlayFunction = (options?: PlayOptions) => void;
-
-  interface PlayOptions {
-    id?: string;
-    forceSoundEnabled?: boolean;
-    playbackRate?: number;
-    // You can add more properties as needed based on your use case
-  }
-
-  interface PlayExposedData extends ExposedData {
-    stop: (id?: string) => void;
-    pause: (id?: string) => void;
-    duration: number | null;
-    sound: Howl | null;
-  }
-
-  type UseSoundTuple = [PlayFunction, PlayExposedData];
-
-  const useSound: (src: string, options?: HookOptions) => UseSoundTuple;
-
-  export default useSound;
-}
-
-declare module "*.mp3";

From 75defee3e9795b300d9ca3d5dbcc90d5f95c9921 Mon Sep 17 00:00:00 2001
From: Sonny Nguyen <sonnynguyen163@gmail.com>
Date: Wed, 17 Apr 2024 18:05:18 -0700
Subject: [PATCH 3/3] rm cancel svg

---
 public/svg/cancel.svg | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 public/svg/cancel.svg

diff --git a/public/svg/cancel.svg b/public/svg/cancel.svg
deleted file mode 100644
index 1d46296..0000000
--- a/public/svg/cancel.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-            <svg
-              className="size-4 flex-shrink-0"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path d="M18 6 6 18"></path>
-              <path d="m6 6 12 12"></path>
-            </svg>
\ No newline at end of file