diff --git a/package-lock.json b/package-lock.json
index 3c6a035..aa4b71e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,29 +9,29 @@
       "version": "3.1.2",
       "license": "MIT",
       "dependencies": {
-        "@wppconnect/wa-js": "^2.22.2",
+        "@wppconnect/wa-js": "^2.23.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
-        "@types/chrome": "^0.0.224",
-        "@types/jest": "^29.4.4",
-        "@types/react": "^18.0.28",
+        "@types/chrome": "^0.0.233",
+        "@types/jest": "^29.5.1",
+        "@types/react": "^18.0.38",
         "@types/react-dom": "^18.0.11",
         "autoprefixer": "^10.4.14",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.3",
-        "cssnano": "^5.1.15",
+        "cssnano": "^6.0.0",
         "jest": "^29.5.0",
-        "postcss-loader": "^7.0.2",
-        "rimraf": "^4.4.0",
+        "postcss-loader": "^7.2.4",
+        "rimraf": "^5.0.0",
         "speed-measure-webpack-plugin": "^1.5.0",
         "style-loader": "^3.3.2",
-        "tailwindcss": "^3.2.7",
-        "ts-jest": "^29.0.5",
+        "tailwindcss": "^3.3.1",
+        "ts-jest": "^29.1.0",
         "ts-loader": "^9.4.2",
-        "typescript": "^4.9.5",
-        "webpack-cli": "^5.0.1",
+        "typescript": "^5.0.4",
+        "webpack-cli": "^5.0.2",
         "webpack-merge": "^5.8.0"
       }
     },
@@ -639,6 +639,30 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -1104,6 +1128,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.25.24",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.24.tgz",
@@ -1137,6 +1171,34 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz",
+      "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.0",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
@@ -1179,9 +1241,9 @@
       }
     },
     "node_modules/@types/chrome": {
-      "version": "0.0.224",
-      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.224.tgz",
-      "integrity": "sha512-YkL7q3KDV7OAKgVCBNIfH73rnjNMbIzAYHzTa2DKhSK/2z0Wf/n8yJnK/UoW+lvuYJJR4LtAkG3YvsIZTy7BOA==",
+      "version": "0.0.233",
+      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.233.tgz",
+      "integrity": "sha512-T3HUW8LDhHfYPbUkOZilhnqX04sZqEFIQO0OIG8byZ7PBIk2jYys1AkNg56UbtKbsh3dABmOniK+0Q3oyo7Sxg==",
       "dev": true,
       "dependencies": {
         "@types/filesystem": "*",
@@ -1272,9 +1334,9 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "29.5.0",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.0.tgz",
-      "integrity": "sha512-3Emr5VOl/aoBwnWcH/EFQvlSAmjV+XtV9GGu5mwdYew5vhQh0IUZx/60x0TzHDu09Bi7HMx10t/namdJw5QIcg==",
+      "version": "29.5.1",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.1.tgz",
+      "integrity": "sha512-tEuVcHrpaixS36w7hpsfLBLpjtMRJUE09/MHXn923LOVojDwyC14cWcfc0rDs0VEfUyYmt/+iX1kxxp+gZMcaQ==",
       "dev": true,
       "dependencies": {
         "expect": "^29.0.0",
@@ -1306,9 +1368,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.0.28",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
-      "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
+      "version": "18.0.38",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.38.tgz",
+      "integrity": "sha512-ExsidLLSzYj4cvaQjGnQCk4HFfVT9+EZ9XZsQ8Hsrcn8QNgXtpZ3m9vSIC2MWtx7jHictK6wYhQgGh6ic58oOw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1540,9 +1602,9 @@
       }
     },
     "node_modules/@webpack-cli/serve": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.1.tgz",
-      "integrity": "sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.2.tgz",
+      "integrity": "sha512-S9h3GmOmzUseyeFW3tYNnWS7gNUuwxZ3mmMq0JyW78Vx1SGKPSkt5bT4pB0rUnVfHjP0EL9gW2bOzmtiTfQt0A==",
       "dev": true,
       "engines": {
         "node": ">=14.15.0"
@@ -1558,9 +1620,9 @@
       }
     },
     "node_modules/@wppconnect/wa-js": {
-      "version": "2.22.2",
-      "resolved": "https://registry.npmjs.org/@wppconnect/wa-js/-/wa-js-2.22.2.tgz",
-      "integrity": "sha512-WhkQZUg/u7drmst4Kpl1juw7AD2kj+i/eyY0tbbPtBfBjqO4LJfTLpta06clgxr7Oj1Cm/I+Jv9lSZKQva5lqw==",
+      "version": "2.23.3",
+      "resolved": "https://registry.npmjs.org/@wppconnect/wa-js/-/wa-js-2.23.3.tgz",
+      "integrity": "sha512-Zeaxf7QPkz/LAIJUNsRWVomjdxfzGTlOFdjH956X0eW5XCQ3+x3k1dXLJQfvtHLumRfy2Li3R9q9dUM2zS5yfg==",
       "engines": {
         "whatsapp-web": ">=2.2245.8-beta"
       }
@@ -1580,10 +1642,11 @@
       "peer": true
     },
     "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1591,22 +1654,12 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-node": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
-      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.0.0",
-        "acorn-walk": "^7.0.0",
-        "xtend": "^4.0.2"
-      }
-    },
     "node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -1695,6 +1748,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -2222,9 +2281,9 @@
       }
     },
     "node_modules/cosmiconfig": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.2.tgz",
-      "integrity": "sha512-rmpUFKMZiawLfug8sP4NbpBSOpWftZB6UACOLEiNbnRAYM1TzgQuTWlMYFRuPgmoTCkcOxSMwQJQpJmiXv/eHw==",
+      "version": "8.1.3",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.1.3.tgz",
+      "integrity": "sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==",
       "dev": true,
       "dependencies": {
         "import-fresh": "^3.2.1",
@@ -2239,6 +2298,22 @@
         "url": "https://github.com/sponsors/d-fischer"
       }
     },
+    "node_modules/cosmiconfig-typescript-loader": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-4.3.0.tgz",
+      "integrity": "sha512-NTxV1MFfZDLPiBMjxbHRwSh5LaLcPMwNdCutmnHJCKoVnlvldPWlllonKwrsRJ5pYZBIBGRWWU2tfvzxgeSW5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@types/node": "*",
+        "cosmiconfig": ">=7",
+        "ts-node": ">=10",
+        "typescript": ">=3"
+      }
+    },
     "node_modules/cosmiconfig/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2257,6 +2332,13 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2272,9 +2354,9 @@
       }
     },
     "node_modules/css-declaration-sorter": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
-      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
+      "integrity": "sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==",
       "dev": true,
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -2310,15 +2392,15 @@
       }
     },
     "node_modules/css-select": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
       "dev": true,
       "dependencies": {
         "boolbase": "^1.0.0",
-        "css-what": "^6.0.1",
-        "domhandler": "^4.3.1",
-        "domutils": "^2.8.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
         "nth-check": "^2.0.1"
       },
       "funding": {
@@ -2326,16 +2408,16 @@
       }
     },
     "node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
       "dev": true,
       "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
     "node_modules/css-what": {
@@ -2363,17 +2445,16 @@
       }
     },
     "node_modules/cssnano": {
-      "version": "5.1.15",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
-      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-6.0.0.tgz",
+      "integrity": "sha512-RGlcbzGhzEBCHuQe3k+Udyj5M00z0pm9S+VurHXFEOXxH+y0sVrJH2sMzoyz2d8N1EScazg+DVvmgyx0lurwwA==",
       "dev": true,
       "dependencies": {
-        "cssnano-preset-default": "^5.2.14",
-        "lilconfig": "^2.0.3",
-        "yaml": "^1.10.2"
+        "cssnano-preset-default": "^6.0.0",
+        "lilconfig": "^2.1.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2384,72 +2465,93 @@
       }
     },
     "node_modules/cssnano-preset-default": {
-      "version": "5.2.14",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
-      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.0.0.tgz",
+      "integrity": "sha512-BDxlaFzObRDXUiCCBQUNQcI+f1/aX2mgoNtXGjV6PG64POcHoDUoX+LgMWw+Q4609QhxwkcSnS65YFs42RA6qQ==",
       "dev": true,
       "dependencies": {
         "css-declaration-sorter": "^6.3.1",
-        "cssnano-utils": "^3.1.0",
+        "cssnano-utils": "^4.0.0",
         "postcss-calc": "^8.2.3",
-        "postcss-colormin": "^5.3.1",
-        "postcss-convert-values": "^5.1.3",
-        "postcss-discard-comments": "^5.1.2",
-        "postcss-discard-duplicates": "^5.1.0",
-        "postcss-discard-empty": "^5.1.1",
-        "postcss-discard-overridden": "^5.1.0",
-        "postcss-merge-longhand": "^5.1.7",
-        "postcss-merge-rules": "^5.1.4",
-        "postcss-minify-font-values": "^5.1.0",
-        "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.4",
-        "postcss-minify-selectors": "^5.2.1",
-        "postcss-normalize-charset": "^5.1.0",
-        "postcss-normalize-display-values": "^5.1.0",
-        "postcss-normalize-positions": "^5.1.1",
-        "postcss-normalize-repeat-style": "^5.1.1",
-        "postcss-normalize-string": "^5.1.0",
-        "postcss-normalize-timing-functions": "^5.1.0",
-        "postcss-normalize-unicode": "^5.1.1",
-        "postcss-normalize-url": "^5.1.0",
-        "postcss-normalize-whitespace": "^5.1.1",
-        "postcss-ordered-values": "^5.1.3",
-        "postcss-reduce-initial": "^5.1.2",
-        "postcss-reduce-transforms": "^5.1.0",
-        "postcss-svgo": "^5.1.0",
-        "postcss-unique-selectors": "^5.1.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "postcss-colormin": "^6.0.0",
+        "postcss-convert-values": "^6.0.0",
+        "postcss-discard-comments": "^6.0.0",
+        "postcss-discard-duplicates": "^6.0.0",
+        "postcss-discard-empty": "^6.0.0",
+        "postcss-discard-overridden": "^6.0.0",
+        "postcss-merge-longhand": "^6.0.0",
+        "postcss-merge-rules": "^6.0.0",
+        "postcss-minify-font-values": "^6.0.0",
+        "postcss-minify-gradients": "^6.0.0",
+        "postcss-minify-params": "^6.0.0",
+        "postcss-minify-selectors": "^6.0.0",
+        "postcss-normalize-charset": "^6.0.0",
+        "postcss-normalize-display-values": "^6.0.0",
+        "postcss-normalize-positions": "^6.0.0",
+        "postcss-normalize-repeat-style": "^6.0.0",
+        "postcss-normalize-string": "^6.0.0",
+        "postcss-normalize-timing-functions": "^6.0.0",
+        "postcss-normalize-unicode": "^6.0.0",
+        "postcss-normalize-url": "^6.0.0",
+        "postcss-normalize-whitespace": "^6.0.0",
+        "postcss-ordered-values": "^6.0.0",
+        "postcss-reduce-initial": "^6.0.0",
+        "postcss-reduce-transforms": "^6.0.0",
+        "postcss-svgo": "^6.0.0",
+        "postcss-unique-selectors": "^6.0.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/cssnano-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
-      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.0.tgz",
+      "integrity": "sha512-Z39TLP+1E0KUcd7LGyF4qMfu8ZufI0rDzhdyAMsa/8UyNUU8wpS0fhdBxbQbv32r64ea00h4878gommRVg2BHw==",
       "dev": true,
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
       "dev": true,
       "dependencies": {
-        "css-tree": "^1.1.2"
+        "css-tree": "~2.2.0"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
       }
     },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
     "node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
@@ -2488,15 +2590,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/defined": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
-      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -2506,29 +2599,22 @@
         "node": ">=8"
       }
     },
-    "node_modules/detective": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
-      "dev": true,
-      "dependencies": {
-        "acorn-node": "^1.8.2",
-        "defined": "^1.0.0",
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "detective": "bin/detective.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/diff-sequences": {
       "version": "29.4.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.4.3.tgz",
@@ -2557,14 +2643,14 @@
       "dev": true
     },
     "node_modules/dom-serializer": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
       "dev": true,
       "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
       },
       "funding": {
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
@@ -2583,12 +2669,12 @@
       ]
     },
     "node_modules/domhandler": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
       "dev": true,
       "dependencies": {
-        "domelementtype": "^2.2.0"
+        "domelementtype": "^2.3.0"
       },
       "engines": {
         "node": ">= 4"
@@ -2598,14 +2684,14 @@
       }
     },
     "node_modules/domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
       "dev": true,
       "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
       },
       "funding": {
         "url": "https://github.com/fb55/domutils?sponsor=1"
@@ -2649,10 +2735,13 @@
       }
     },
     "node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
@@ -2913,6 +3002,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.1.tgz",
+      "integrity": "sha512-uUWsN4aOxJAS8KOuf3QMyFtgm1pkb6I+KRZbRF/ghdf5T7sM+B1lLLzPDxswUjkmHyxQAVzEgG35E3NzDM9GVw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -3430,6 +3547,35 @@
         "node": ">=8"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.1.0.tgz",
+      "integrity": "sha512-DiEwVPqsieUzZBNxQ2cxznmFzfg/AMgJUjYw5xl6rSmCxAQXECcbSdwcLM6Ds6T09+SBfSNCGPhYUoQ96P4h7A==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jackspeak/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
     "node_modules/jest": {
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-29.5.0.tgz",
@@ -4033,6 +4179,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4232,9 +4387,9 @@
       }
     },
     "node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
       "dev": true
     },
     "node_modules/merge-stream": {
@@ -4309,19 +4464,10 @@
         "node": "*"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/minipass": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.5.tgz",
-      "integrity": "sha512-+yQl7SX3bIT83Lhb4BVorMAHVuqsskxRdlmO9kTpyukp8vsm2Sn/fUOV9xlnG8/a5JsypJzap21lz/y3FBMJ8Q==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -4333,6 +4479,17 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -4404,18 +4561,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -4440,6 +4585,15 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-hash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
@@ -4588,28 +4742,28 @@
       "dev": true
     },
     "node_modules/path-scurry": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.6.1.tgz",
-      "integrity": "sha512-OW+5s+7cw6253Q4E+8qQ/u1fVvcJQCJo/VFD8pje+dbJCF1n5ZRMV2AEHbGp+5Q7jxQIYJxkHopnj6nzdGeZLA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.7.0.tgz",
+      "integrity": "sha512-UkZUeDjczjYRE495+9thsgcVgsaCPkaw80slmfVFgllxY+IO8ubTsOpFVjDPROBqJdHfVPUFRHPBV/WciOVfWg==",
       "dev": true,
       "dependencies": {
-        "lru-cache": "^7.14.1",
-        "minipass": "^4.0.2"
+        "lru-cache": "^9.0.0",
+        "minipass": "^5.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "7.18.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
-      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-9.1.1.tgz",
+      "integrity": "sha512-65/Jky17UwSb0BuB9V+MyDpsOtXKmYwzhyl+cOa9XUiI4uV2Ouy/2voFP3+al0BjZbJgMBD8FojMpAf+Z+qn4A==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": "14 || >=16.14"
       }
     },
     "node_modules/path-type": {
@@ -4707,9 +4861,9 @@
       }
     },
     "node_modules/postcss-colormin": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
-      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.0.0.tgz",
+      "integrity": "sha512-EuO+bAUmutWoZYgHn2T1dG1pPqHU6L4TjzPlu4t1wZGXQ/fxV16xg2EJmYi0z+6r+MGV1yvpx1BHkUaRrPa2bw==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.21.4",
@@ -4718,71 +4872,71 @@
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-convert-values": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
-      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.0.0.tgz",
+      "integrity": "sha512-U5D8QhVwqT++ecmy8rnTb+RL9n/B806UVaS3m60lqle4YDFcpbS3ae5bTQIh3wOGUSDHSEtMYLs/38dNG7EYFw==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-discard-comments": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
-      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.0.tgz",
+      "integrity": "sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==",
       "dev": true,
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-discard-duplicates": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
-      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.0.tgz",
+      "integrity": "sha512-bU1SXIizMLtDW4oSsi5C/xHKbhLlhek/0/yCnoMQany9k3nPBq+Ctsv/9oMmyqbR96HYHxZcHyK2HR5P/mqoGA==",
       "dev": true,
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-discard-empty": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
-      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.0.tgz",
+      "integrity": "sha512-b+h1S1VT6dNhpcg+LpyiUrdnEZfICF0my7HAKgJixJLW7BnNmpRH34+uw/etf5AhOlIhIAuXApSzzDzMI9K/gQ==",
       "dev": true,
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-discard-overridden": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
-      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz",
+      "integrity": "sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==",
       "dev": true,
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
@@ -4854,12 +5008,13 @@
       }
     },
     "node_modules/postcss-loader": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.1.0.tgz",
-      "integrity": "sha512-vTD2DJ8vJD0Vr1WzMQkRZWRjcynGh3t7NeoLg+Sb1TeuK7etiZfL/ZwHbaVa3M+Qni7Lj/29voV9IggnIUjlIw==",
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.2.4.tgz",
+      "integrity": "sha512-F88rpxxNspo5hatIc+orYwZDtHFaVFOSIVAx+fBfJC1GmhWbVmPWtmg2gXKE1OxJbneOSGn8PWdIwsZFcruS+w==",
       "dev": true,
       "dependencies": {
-        "cosmiconfig": "^8.0.0",
+        "cosmiconfig": "^8.1.3",
+        "cosmiconfig-typescript-loader": "^4.3.0",
         "klona": "^2.0.6",
         "semver": "^7.3.8"
       },
@@ -4872,102 +5027,112 @@
       },
       "peerDependencies": {
         "postcss": "^7.0.0 || ^8.0.1",
+        "ts-node": ">=10",
+        "typescript": ">=4",
         "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ts-node": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/postcss-merge-longhand": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
-      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.0.tgz",
+      "integrity": "sha512-4VSfd1lvGkLTLYcxFuISDtWUfFS4zXe0FpF149AyziftPFQIWxjvFSKhA4MIxMe4XM3yTDgQMbSNgzIVxChbIg==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.1"
+        "stylehacks": "^6.0.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-merge-rules": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
-      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.0.0.tgz",
+      "integrity": "sha512-rCXkklftzEkniyv3f4mRCQzxD6oE4Quyh61uyWTUbCJ26Pv2hoz+fivJSsSBWxDBeScR4fKCfF3HHTcD7Ybqnw==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^3.1.0",
+        "cssnano-utils": "^4.0.0",
         "postcss-selector-parser": "^6.0.5"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-minify-font-values": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
-      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.0.0.tgz",
+      "integrity": "sha512-zNRAVtyh5E8ndZEYXA4WS8ZYsAp798HiIQ1V2UF/C/munLp2r1UGHwf1+6JFu7hdEhJFN+W1WJQKBrtjhFgEnA==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-minify-gradients": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
-      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.0.tgz",
+      "integrity": "sha512-wO0F6YfVAR+K1xVxF53ueZJza3L+R3E6cp0VwuXJQejnNUH0DjcAFe3JEBeTY1dLwGa0NlDWueCA1VlEfiKgAA==",
       "dev": true,
       "dependencies": {
         "colord": "^2.9.1",
-        "cssnano-utils": "^3.1.0",
+        "cssnano-utils": "^4.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-minify-params": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
-      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.0.0.tgz",
+      "integrity": "sha512-Fz/wMQDveiS0n5JPcvsMeyNXOIMrwF88n7196puSuQSWSa+/Ofc1gDOSY2xi8+A4PqB5dlYCKk/WfqKqsI+ReQ==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.21.4",
-        "cssnano-utils": "^3.1.0",
+        "cssnano-utils": "^4.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-minify-selectors": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
-      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.0.tgz",
+      "integrity": "sha512-ec/q9JNCOC2CRDNnypipGfOhbYPuUkewGwLnbv6omue/PSASbHSU7s6uSQ0tcFRVv731oMIx8k0SP4ZX6be/0g==",
       "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.5"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
@@ -5052,181 +5217,180 @@
       }
     },
     "node_modules/postcss-normalize-charset": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
-      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.0.tgz",
+      "integrity": "sha512-cqundwChbu8yO/gSWkuFDmKrCZ2vJzDAocheT2JTd0sFNA4HMGoKMfbk2B+J0OmO0t5GUkiAkSM5yF2rSLUjgQ==",
       "dev": true,
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-normalize-display-values": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
-      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.0.tgz",
+      "integrity": "sha512-Qyt5kMrvy7dJRO3OjF7zkotGfuYALETZE+4lk66sziWSPzlBEt7FrUshV6VLECkI4EN8Z863O6Nci4NXQGNzYw==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-normalize-positions": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
-      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.0.tgz",
+      "integrity": "sha512-mPCzhSV8+30FZyWhxi6UoVRYd3ZBJgTRly4hOkaSifo0H+pjDYcii/aVT4YE6QpOil15a5uiv6ftnY3rm0igPg==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-normalize-repeat-style": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
-      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.0.tgz",
+      "integrity": "sha512-50W5JWEBiOOAez2AKBh4kRFm2uhrT3O1Uwdxz7k24aKtbD83vqmcVG7zoIwo6xI2FZ/HDlbrCopXhLeTpQib1A==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-normalize-string": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
-      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.0.tgz",
+      "integrity": "sha512-KWkIB7TrPOiqb8ZZz6homet2KWKJwIlysF5ICPZrXAylGe2hzX/HSf4NTX2rRPJMAtlRsj/yfkrWGavFuB+c0w==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-normalize-timing-functions": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
-      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.0.tgz",
+      "integrity": "sha512-tpIXWciXBp5CiFs8sem90IWlw76FV4oi6QEWfQwyeREVwUy39VSeSqjAT7X0Qw650yAimYW5gkl2Gd871N5SQg==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-normalize-unicode": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
-      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.0.0.tgz",
+      "integrity": "sha512-ui5crYkb5ubEUDugDc786L/Me+DXp2dLg3fVJbqyAl0VPkAeALyAijF2zOsnZyaS1HyfPuMH0DwyY18VMFVNkg==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.21.4",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-normalize-url": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
-      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.0.tgz",
+      "integrity": "sha512-98mvh2QzIPbb02YDIrYvAg4OUzGH7s1ZgHlD3fIdTHLgPLRpv1ZTKJDnSAKr4Rt21ZQFzwhGMXxpXlfrUBKFHw==",
       "dev": true,
       "dependencies": {
-        "normalize-url": "^6.0.1",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-normalize-whitespace": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
-      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.0.tgz",
+      "integrity": "sha512-7cfE1AyLiK0+ZBG6FmLziJzqQCpTQY+8XjMhMAz8WSBSCsCNNUKujgIgjCAmDT3cJ+3zjTXFkoD15ZPsckArVw==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-ordered-values": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
-      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.0.tgz",
+      "integrity": "sha512-K36XzUDpvfG/nWkjs6d1hRBydeIxGpKS2+n+ywlKPzx1nMYDYpoGbcjhj5AwVYJK1qV2/SDoDEnHzlPD6s3nMg==",
       "dev": true,
       "dependencies": {
-        "cssnano-utils": "^3.1.0",
+        "cssnano-utils": "^4.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-reduce-initial": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
-      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz",
+      "integrity": "sha512-s2UOnidpVuXu6JiiI5U+fV2jamAw5YNA9Fdi/GRK0zLDLCfXmSGqQtzpUPtfN66RtCbb9fFHoyZdQaxOB3WxVA==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.21.4",
         "caniuse-api": "^3.0.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-reduce-transforms": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
-      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.0.tgz",
+      "integrity": "sha512-FQ9f6xM1homnuy1wLe9lP1wujzxnwt1EwiigtWwuyf8FsqqXUDUp2Ulxf9A5yjlUOTdCJO6lonYjg1mgqIIi2w==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
@@ -5246,31 +5410,31 @@
       }
     },
     "node_modules/postcss-svgo": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
-      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.0.tgz",
+      "integrity": "sha512-r9zvj/wGAoAIodn84dR/kFqwhINp5YsJkLoujybWG59grR/IHx+uQ2Zo+IcOwM0jskfYX3R0mo+1Kip1VSNcvw==",
       "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0",
-        "svgo": "^2.7.0"
+        "svgo": "^3.0.2"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >= 18"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
     "node_modules/postcss-unique-selectors": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
-      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.0.tgz",
+      "integrity": "sha512-EPQzpZNxOxP7777t73RQpZE5e9TrnCrkvp7AH7a0l89JmZiPnS82y216JowHXwpBCQitfyxrof9TK3rYbi7/Yw==",
       "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.5"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
@@ -5525,12 +5689,12 @@
       }
     },
     "node_modules/rimraf": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.4.0.tgz",
-      "integrity": "sha512-X36S+qpCUR0HjXlkDe4NAOhS//aHH0Z+h8Ckf2auGJk3PTnx5rLmrHkwNdbVQuCSUhOyFrlRvFEllZOYE+yZGQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.0.tgz",
+      "integrity": "sha512-Jf9llaP+RvaEVS5nPShYFhtXIrb3LRKP281ib3So0KkeZKo2wIKyq0Re7TOSwanasA423PSr6CCIL4bP6T040g==",
       "dev": true,
       "dependencies": {
-        "glob": "^9.2.0"
+        "glob": "^10.0.0"
       },
       "bin": {
         "rimraf": "dist/cjs/src/bin.js"
@@ -5552,15 +5716,19 @@
       }
     },
     "node_modules/rimraf/node_modules/glob": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-9.3.0.tgz",
-      "integrity": "sha512-EAZejC7JvnQINayvB/7BJbpZpNOJ8Lrw2OZNEvQxe0vaLn1SuwMcfV7/MNaX8L/T0wmptBFI4YMtDvSBxYDc7w==",
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.2.2.tgz",
+      "integrity": "sha512-Xsa0BcxIC6th9UwNjZkhrMtNo/MnyRL8jGCP+uEwhA5oFOCY1f2s1/oNKY47xQ0Bg5nkjsfAEIej1VeH62bDDQ==",
       "dev": true,
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "minimatch": "^7.4.1",
-        "minipass": "^4.2.4",
-        "path-scurry": "^1.6.1"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.0.3",
+        "minimatch": "^9.0.0",
+        "minipass": "^5.0.0",
+        "path-scurry": "^1.7.0"
+      },
+      "bin": {
+        "glob": "dist/cjs/src/bin.js"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -5570,15 +5738,15 @@
       }
     },
     "node_modules/rimraf/node_modules/minimatch": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.2.tgz",
-      "integrity": "sha512-xy4q7wou3vUoC9k1xGTXc+awNdGaGVHtFUaey8tiX4H1QRc04DZ/rmDFwNm2EBsuYEhAZ6SgMmYf3InGY6OauA==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.0.tgz",
+      "integrity": "sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -5810,13 +5978,6 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
-    "node_modules/stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
-      "dev": true
-    },
     "node_modules/stack-utils": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@@ -5915,21 +6076,86 @@
       }
     },
     "node_modules/stylehacks": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
-      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.0.tgz",
+      "integrity": "sha512-+UT589qhHPwz6mTlCLSt/vMNTJx8dopeJlZAlBMJPWA3ORqu6wmQY7FBXf+qD+FsqoBJODyqNxOUP3jdntFRdw==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.21.4",
         "postcss-selector-parser": "^6.0.4"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": "^14 || ^16 || >=18.0"
       },
       "peerDependencies": {
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+      "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -5955,24 +6181,27 @@
       }
     },
     "node_modules/svgo": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+      "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
       "dev": true,
       "dependencies": {
         "@trysound/sax": "0.2.0",
         "commander": "^7.2.0",
-        "css-select": "^4.1.3",
-        "css-tree": "^1.1.3",
-        "csso": "^4.2.0",
-        "picocolors": "^1.0.0",
-        "stable": "^0.1.8"
+        "css-select": "^5.1.0",
+        "css-tree": "^2.2.1",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
       },
       "bin": {
         "svgo": "bin/svgo"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
       }
     },
     "node_modules/svgo/node_modules/commander": {
@@ -5985,20 +6214,20 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
-      "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.1.tgz",
+      "integrity": "sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==",
       "dev": true,
       "dependencies": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
         "color-name": "^1.1.4",
-        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
+        "jiti": "^1.17.2",
         "lilconfig": "^2.0.6",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
@@ -6012,7 +6241,8 @@
         "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
-        "resolve": "^1.22.1"
+        "resolve": "^1.22.1",
+        "sucrase": "^3.29.0"
       },
       "bin": {
         "tailwind": "lib/cli.js",
@@ -6172,19 +6402,6 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/terser/node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/terser/node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -6210,6 +6427,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -6237,10 +6475,16 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "node_modules/ts-jest": {
-      "version": "29.0.5",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.0.5.tgz",
-      "integrity": "sha512-PL3UciSgIpQ7f6XjVOmbi96vmDHUqAyqDr8YxzopDqX3kfgYtX1cuNeBjP+L9sFXi6nzsGGA6R3fP3DDDJyrxA==",
+      "version": "29.1.0",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.0.tgz",
+      "integrity": "sha512-ZhNr7Z4PcYa+JjMl62ir+zPiNJfXJN6E8hSLnaUKhOgqcn8vb3e537cpkd0FuAfRK3sR1LSqM1MOhliXNgOFPA==",
       "dev": true,
       "dependencies": {
         "bs-logger": "0.x",
@@ -6263,7 +6507,7 @@
         "@jest/types": "^29.0.0",
         "babel-jest": "^29.0.0",
         "jest": "^29.0.0",
-        "typescript": ">=4.3"
+        "typescript": ">=4.3 <6"
       },
       "peerDependenciesMeta": {
         "@babel/core": {
@@ -6299,6 +6543,57 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/type-detect": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
@@ -6321,16 +6616,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=12.20"
       }
     },
     "node_modules/update-browserslist-db": {
@@ -6385,6 +6680,13 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/v8-to-istanbul": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.1.0.tgz",
@@ -6477,17 +6779,17 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.1.tgz",
-      "integrity": "sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.0.2.tgz",
+      "integrity": "sha512-4y3W5Dawri5+8dXm3+diW6Mn1Ya+Dei6eEVAdIduAmYNLzv1koKVAqsfgrrc9P2mhrYHQphx5htnGkcNwtubyQ==",
       "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^2.0.1",
         "@webpack-cli/info": "^2.0.1",
-        "@webpack-cli/serve": "^2.0.1",
+        "@webpack-cli/serve": "^2.0.2",
         "colorette": "^2.0.14",
-        "commander": "^9.4.1",
+        "commander": "^10.0.1",
         "cross-spawn": "^7.0.3",
         "envinfo": "^7.7.3",
         "fastest-levenshtein": "^1.0.12",
@@ -6522,12 +6824,12 @@
       }
     },
     "node_modules/webpack-cli/node_modules/commander": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
-      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
       "dev": true,
       "engines": {
-        "node": "^12.20.0 || >=14"
+        "node": ">=14"
       }
     },
     "node_modules/webpack-merge": {
@@ -6553,19 +6855,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/webpack/node_modules/acorn": {
-      "version": "8.8.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/webpack/node_modules/acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
@@ -6686,15 +6975,6 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -6746,6 +7026,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 4ddd7c7..1cf9693 100644
--- a/package.json
+++ b/package.json
@@ -17,29 +17,29 @@
     "url": "git+https://github.com/marcosvrs/wtf.git"
   },
   "dependencies": {
-    "@wppconnect/wa-js": "^2.22.2",
+    "@wppconnect/wa-js": "^2.23.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.224",
-    "@types/jest": "^29.4.4",
-    "@types/react": "^18.0.28",
+    "@types/chrome": "^0.0.233",
+    "@types/jest": "^29.5.1",
+    "@types/react": "^18.0.38",
     "@types/react-dom": "^18.0.11",
     "autoprefixer": "^10.4.14",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
-    "cssnano": "^5.1.15",
+    "cssnano": "^6.0.0",
     "jest": "^29.5.0",
-    "postcss-loader": "^7.0.2",
-    "rimraf": "^4.4.0",
+    "postcss-loader": "^7.2.4",
+    "rimraf": "^5.0.0",
     "speed-measure-webpack-plugin": "^1.5.0",
     "style-loader": "^3.3.2",
-    "tailwindcss": "^3.2.7",
-    "ts-jest": "^29.0.5",
+    "tailwindcss": "^3.3.1",
+    "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.2",
-    "typescript": "^4.9.5",
-    "webpack-cli": "^5.0.1",
+    "typescript": "^5.0.4",
+    "webpack-cli": "^5.0.2",
     "webpack-merge": "^5.8.0"
   }
 }
diff --git a/public/manifest.json b/public/manifest.json
index cf0403d..6a90b74 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -33,6 +33,9 @@
       "run_at": "document_start"
     }
   ],
+  "externally_connectable": {
+    "matches": ["https://web.whatsapp.com/*"]
+  },
   "homepage_url": "https://github.com/marcosvrs/wtf",
   "options_ui": {
     "open_in_tab": false,
diff --git a/public/schema.json b/public/schema.json
index 9603c0a..ed0e579 100644
--- a/public/schema.json
+++ b/public/schema.json
@@ -5,6 +5,14 @@
             "title": "Message to be sent to the contact",
             "type": "string"
         },
+        "delay": {
+            "title": "Sets the delay between the messages sent",
+            "type": "integer"
+        },
+        "prefix": {
+            "title": "Prefix to be added to the contact number",
+            "type": "integer"
+        },
         "attachment": {
             "title": "Attachment to be sent to the contact",
             "type": "object",
diff --git a/src/components/LogTable.tsx b/src/components/LogTable.tsx
deleted file mode 100644
index 4ec2987..0000000
--- a/src/components/LogTable.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { Component, MouseEvent } from 'react';
-
-export default class LogTable extends Component<{}, { logs: { level: number, message: string, attachment: boolean, contact: number, date: string }[] }>{
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            logs: []
-        };
-    }
-
-    componentDidMount() {
-        chrome.storage.local.get({ logs: [] }, data => this.setState({ logs: data.logs }));
-    }
-
-    handleClear = (event: MouseEvent<HTMLButtonElement>) => {
-        chrome.storage.local.set({ logs: [] });
-        this.setState({ logs: [] });
-    }
-
-    handleUpdate = (event: MouseEvent<HTMLButtonElement>) => {
-        chrome.storage.local.get({ logs: [] }, data =>
-            this.setState({ logs: data.logs })
-        );
-    }
-
-    render() {
-        const logLevelClass: { [key: number]: string } = {
-            1: 'bg-red-100 hover:bg-red-200',
-            2: 'bg-yellow-100 hover:bg-yellow-200',
-            3: 'bg-green-100 hover:bg-green-200'
-        };
-        return <div className="max-w-xl mx-auto my-10 bg-white shadow-lg rounded-lg overflow-hidden">
-            <div className="px-4 py-2 border-b border-gray-200 flex justify-between items-center">
-                <h1 className="text-lg font-semibold text-gray-800">Logs</h1>
-                <div className="flex justify-end gap-4">
-                    <button
-                        className="px-4 py-2 rounded-md bg-blue-500 text-white hover:bg-white hover:text-blue-500 hover:border hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        onClick={this.handleUpdate}
-                    >
-                        Atualizar
-                    </button>
-                    <button
-                        className="px-4 py-2 rounded-md text-blue-500 border border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        onClick={this.handleClear}
-                    >
-                        Limpar
-                    </button>
-                </div>
-            </div>
-            <div className="px-4 py-2">
-                <table className="w-full table-auto">
-                    <thead>
-                        <tr className="text-left font-bold">
-                            <th className="px-4 py-2 text-center">Número</th>
-                            <th className="px-4 py-2 text-center">Mensagem</th>
-                            <th className="px-4 py-2 text-center">Anexo</th>
-                            <th className="px-4 py-2 text-center">Data/Hora</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {this.state.logs.map((log, index) => (
-                            <tr key={index} className={logLevelClass[log.level]}>
-                                <td className="border px-4 py-2">{log.contact}</td>
-                                <td className="border px-4 py-2">{log.message}</td>
-                                <td className="border px-4 py-2 text-center">{log.attachment ? '✓' : '×'}</td>
-                                <td className="border px-4 py-2">{log.date}</td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-        </div>;
-    }
-}
\ No newline at end of file
diff --git a/src/components/MessageButtonsForm.tsx b/src/components/MessageButtonsForm.tsx
deleted file mode 100644
index f21a80a..0000000
--- a/src/components/MessageButtonsForm.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import React, { ChangeEvent, Component, DragEvent } from 'react';
-
-export default class MessageButtonsForm extends Component<{}, { buttons: { id: number, type: string, value: string, text: string }[], draggedIndex: number | null, dropIndex: number | null }>{
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            draggedIndex: null,
-            dropIndex: null,
-            buttons: []
-        };
-    }
-
-    componentDidMount(): void {
-        chrome.storage.local.get({ buttons: [] }, data => this.setState({
-            buttons: data.buttons.map((button: { [key: string]: string }) => {
-                const [type = ''] = Object.keys(button).filter(
-                    (prop) => !['text'].includes(prop)
-                );
-                return {
-                    id: type === 'id' ? button[type] : Math.floor(Math.random() * 1000),
-                    type: type,
-                    value: button[type] || '',
-                    text: button.text
-                };
-            })
-        }));
-    }
-
-    compareArrays = (arr1: { id: number, type: string, value: string, text: string }[], arr2: { id: number, type: string, value: string, text: string }[]): boolean => {
-        // Check if arrays have different lengths
-        if (arr1.length !== arr2.length) {
-            return false;
-        }
-        // Check if each object in arr1 has a corresponding object in arr2
-        for (let i = 0; i < arr1.length; i++) {
-            let obj1 = arr1[i];
-            let obj2 = arr2[i];
-            if (!obj2) {
-                // If obj2 is undefined, there is no matching object in arr2
-                return false;
-            }
-            // Check if properties of obj1 and obj2 are the same
-            if (obj1.id !== obj2.id || obj1.type !== obj2.type || obj1.value !== obj2.value || obj1.text !== obj2.text) {
-                return false;
-            }
-        }
-        // If we reach this point, the arrays are equal
-        return true;
-    }
-
-    componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<{ buttons: { id: number, type: string, value: string, text: string }[]; }>, snapshot?: any): void {
-        const { buttons } = this.state;
-        if (!this.compareArrays(prevState.buttons, buttons)) {
-            chrome.storage.local.set({
-                buttons: buttons.map(button => ({
-                    [button.type]: button.value,
-                    text: button.text
-                }))
-            });
-        }
-    }
-
-    handleDrag = (event: DragEvent<HTMLTableRowElement>, index: number) => {
-        event.dataTransfer.effectAllowed = 'move';
-        event.dataTransfer.setData('text/plain', `${index}`);
-        this.setState({ draggedIndex: index });
-    }
-
-    handleDragOver = (event: DragEvent<HTMLTableRowElement>, index: number) => {
-        event.preventDefault();
-        this.setState({ dropIndex: index });
-    }
-
-    handleDrop = (event: DragEvent<HTMLTableRowElement>, index: number) => {
-        event.preventDefault();
-        const sourceIndex = event.dataTransfer.getData('text');
-        const buttons = [...this.state.buttons];
-        const [draggedItem] = buttons.splice(+sourceIndex, 1);
-        buttons.splice(index, 0, draggedItem);
-        this.setState({ buttons, draggedIndex: null, dropIndex: null });
-    }
-
-    handleTypeChange = (event: ChangeEvent<HTMLSelectElement>, id: number) => {
-        const buttons = [...this.state.buttons];
-        this.setState({
-            buttons: buttons.map(button => {
-                if (button.id !== id) return button;
-                const type = event.target.value;
-                let value = button.value || '';
-                if (type === 'phoneNumber') {
-                    value = value.replace(/\D/g, '');
-                } else if (type === 'id') {
-                    value = `${button.id}`;
-                }
-                return {
-                    id: button.id || 0,
-                    type,
-                    value,
-                    text: button.text || '',
-                };
-            })
-        });
-    }
-
-    handleValueChange = (event: ChangeEvent<HTMLInputElement>, id: number) => {
-        const buttons = [...this.state.buttons];
-        this.setState({
-            buttons: buttons.map(button => {
-                if (button.id !== id) return button;
-                let value = event.target.value;
-                if (button.type === 'phoneNumber') {
-                    value = value.replace(/\D/g, '')
-                } else if (button.type === 'id') {
-                    value = `${button.id}`;
-                }
-                return {
-                    id: button.id || 0,
-                    type: button.type || '',
-                    value: value,
-                    text: button.text || '',
-                };
-            })
-        });
-    }
-
-    handleTextChange = (event: ChangeEvent<HTMLInputElement>, id: number) => {
-        const buttons = [...this.state.buttons];
-        this.setState({
-            buttons: buttons.map(button => {
-                if (button.id !== id) return button;
-                return {
-                    id: button.id || 0,
-                    type: button.type || '',
-                    value: button.value || '',
-                    text: event.target.value,
-                };
-            })
-        });
-    }
-
-    handleDeleteButton = (id: number) => {
-        const buttons = [...this.state.buttons];
-        this.setState({ buttons: buttons.filter(button => button.id !== id) });
-    }
-
-    handleAddButton = () => {
-        const buttons = [...this.state.buttons, {
-            id: Math.floor(Math.random() * 1000),
-            type: 'url',
-            value: '',
-            text: ''
-        }];
-        this.setState({ buttons });
-    }
-
-    render() {
-        const { buttons, draggedIndex, dropIndex } = this.state;
-        return <div className="max-w-xl mx-auto my-10 bg-white shadow-lg rounded-lg overflow-hidden">
-            <div className="px-4 py-2 border-b border-gray-200 flex justify-between items-center">
-                <h1 className="text-lg font-semibold text-gray-800">Botões</h1>
-                {buttons.length < 3 &&
-                    <button
-                        className="px-4 py-2 rounded-md bg-blue-500 text-white border border-white hover:bg-white hover:text-blue-500 hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        onClick={this.handleAddButton}
-                    >
-                        Adicionar
-                    </button>}
-            </div>
-            <div className="px-4 py-2">
-                {buttons.length > 0 &&
-                    <table className="w-full table-auto">
-                        <thead>
-                            <tr className="text-left font-bold">
-                                <th className="px-4 py-2"></th>
-                                <th className="px-4 py-2 text-center">Tipo</th>
-                                <th className="px-4 py-2 text-center">Conteúdo</th>
-                                <th className="px-4 py-2 text-center">Texto</th>
-                                <th className="px-4 py-2 text-center">Ações</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {buttons.map((button, index) => (
-                                <tr
-                                    key={button.id}
-                                    draggable
-                                    onDragStart={event => this.handleDrag(event, index)}
-                                    onDragOver={event => this.handleDragOver(event, index)}
-                                    onDrop={event => this.handleDrop(event, index)}
-                                    className={`${index === draggedIndex ? 'bg-blue-100' : ''} ${index === dropIndex ? 'border-dashed border-2' : 'border'}`}
-                                >
-                                    <td className="border px-4 py-2 cursor-move text-center">☰</td>
-                                    <td className="border px-4 py-2">
-                                        <select
-                                            className="w-full bg-gray-100 border border-gray-300 p-1 rounded-md focus:ring focus:ring-blue-500 focus:outline-none focus:shadow-outline"
-                                            value={button.type}
-                                            onChange={event => this.handleTypeChange(event, button.id)}
-                                        >
-                                            <option value="url">URL</option>
-                                            <option value="phoneNumber">Número de Telefone</option>
-                                            <option value="id">ID</option>
-                                        </select>
-                                    </td>
-                                    <td className="border px-4 py-2">
-                                        <input
-                                            className={`${button.type === 'id' ? 'bg-white border-0' : 'bg-gray-100 border border-gray-300 shadow-sm'} w-full p-1 rounded-md focus:ring focus:ring-blue-500 focus:outline-none focus:shadow-outline`}
-                                            type={button.type === 'phoneNumber' ? 'tel' : button.type === 'url' ? 'url' : 'text'}
-                                            value={button.value}
-                                            onChange={event => this.handleValueChange(event, button.id)}
-                                            disabled={button.type === 'id'}
-                                        />
-                                    </td>
-                                    <td className="border px-4 py-2">
-                                        <input
-                                            className="w-full bg-gray-100 border border-gray-300 p-1 rounded-md shadow-sm focus:ring focus:ring-blue-500 focus:outline-none focus:shadow-outline"
-                                            type="text"
-                                            value={button.text}
-                                            onChange={event => this.handleTextChange(event, button.id)}
-                                        />
-                                    </td>
-                                    <td className="border px-4 py-2 text-center">
-                                        <button
-                                            className="text-3xl text-red-500 text-center hover:text-red-600 focus:outline-none"
-                                            onClick={() => this.handleDeleteButton(button.id)}
-                                        >
-                                            ×
-                                        </button>
-                                    </td>
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>}
-            </div>
-            <div className="px-4 py-2 border-t border-gray-200">
-                <p className="text-red-600 font-bold mb-1">Importante: O botão do tipo "ID" pode não funcionar em todas as configurações! Teste antes de enviar em massa!</p>
-                <p>Você pode criar 3 tipos de botões:</p>
-                <ul className="list-disc ml-8">
-                    <li><b>URL</b>: Redireciona a um site.</li>
-                    <li><b>Número de Telefone</b>: Liga a um número.</li>
-                    <li><b>ID</b>: Envia o texto de volta ao remetente.</li>
-                </ul>
-            </div>
-        </div >;
-    }
-}
\ No newline at end of file
diff --git a/src/components/MessageForm.tsx b/src/components/MessageForm.tsx
deleted file mode 100644
index 62c6293..0000000
--- a/src/components/MessageForm.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { ChangeEvent, Component, createRef, MouseEvent } from 'react';
-import type { Attachment } from '../types/Attachment';
-
-export default class MessageForm extends Component<{}, { message: string, attachment: Attachment }>{
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            message: 'Enviado por WTF',
-            attachment: null
-        };
-    }
-
-    fileRef = createRef<HTMLInputElement>();
-
-    componentDidMount(): void {
-        chrome.storage.local.get(
-            { message: 'Enviado por WTF', attachment: null },
-            data => {
-                this.setState({ message: data.message, attachment: data.attachment });
-                if (data.attachment != null && this.fileRef.current !== null) {
-                    fetch(data.attachment.url).then(response => response.blob()).then(blob => {
-                        const myFile = new File([blob], data.attachment.name, {
-                            type: data.attachment.type,
-                            lastModified: data.attachment.lastModified,
-                        });
-                        const dataTransfer = new DataTransfer();
-                        dataTransfer.items.add(myFile);
-                        if (this.fileRef.current !== null) {
-                            this.fileRef.current.files = dataTransfer.files;
-                        }
-                    });
-                }
-            });
-    }
-
-    componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<{ message: string, attachment: Attachment }>, snapshot?: any): void {
-        const { message, attachment } = this.state;
-
-        if (prevState.message !== message) {
-            chrome.storage.local.set({ message });
-        }
-
-        if (prevState.attachment?.url !== attachment?.url) {
-            if (attachment == null) {
-                chrome.storage.local.set({ attachment });
-            } else {
-                chrome.storage.local.set({
-                    attachment: {
-                        name: attachment.name,
-                        type: attachment.type,
-                        url: attachment.url,
-                        lastModified: attachment.lastModified
-                    }
-                });
-            }
-        }
-    }
-
-    handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-        this.setState({ message: event.target.value });
-    }
-
-    handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-        if (event.target.files) {
-            const file = event.target.files[0];
-            const reader = new FileReader();
-            reader.onload = ev => {
-                if (ev.target === null || ev.target.result === null) return;
-                this.setState({
-                    attachment: {
-                        name: file.name,
-                        type: file.type,
-                        url: ev.target.result,
-                        lastModified: file.lastModified
-                    }
-                });
-            };
-            reader.readAsDataURL(file);
-        } else {
-            this.setState({ attachment: null });
-        }
-    }
-
-    handleFileClear = (event: MouseEvent<HTMLButtonElement>) => {
-        if (this.fileRef.current == null) return;
-        this.fileRef.current.files = new DataTransfer().files;
-        this.setState({ attachment: null });
-    }
-
-    render() {
-        const { message, attachment } = this.state;
-        return <div className="max-w-xl mx-auto my-10 bg-white shadow-lg rounded-lg overflow-hidden">
-            <div className="px-4 py-2 border-b border-gray-200 flex justify-between items-center">
-                <h1 className="text-lg font-semibold text-gray-800">Elaboração da mensagem</h1>
-            </div>
-            <div className="px-4 py-2 flex flex-row gap-4">
-                <div className="flex flex-col basis-1/2">
-                    <textarea
-                        className="w-full flex-auto bg-gray-100 border border-gray-300 p-1 rounded-lg focus:ring focus:ring-blue-500 focus:outline-none focus:shadow-outline"
-                        value={message}
-                        onChange={this.handleMessageChange}
-                    ></textarea>
-                </div>
-                <div className="flex flex-col flex-auto basis-1/2 border-2 border-dashed border-gray-400 rounded-lg px-4 py-6">
-                    <label htmlFor="attachment" className="text-center cursor-pointer">
-                        {attachment?.name ? attachment.name : <>
-                            <p className="mb-2 text-2xl">🖼</p>
-                            <p className="text-sm text-gray-600">
-                                Selecione um anexo (Opcional)
-                            </p>
-                        </>}
-                    </label>
-                    <input
-                        id="attachment"
-                        name="attachment"
-                        className="hidden"
-                        type="file"
-                        ref={this.fileRef}
-                        onChange={this.handleFileChange}
-                    />
-                    {attachment != null &&
-                        <button
-                            className="mt-2 px-3 py-1 rounded-md bg-red-500 text-white text-sm font-medium hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500"
-                            onClick={this.handleFileClear}
-                        >
-                            Limpar
-                        </button>}
-                </div>
-            </div>
-            <div className="px-4 py-2 border-t border-gray-200">
-            <p className="mb-1">Se desejar enviar apenas o anexo, mantenha o campo de mensagem vazio.</p>
-            <p>Sugestão: Envie primeiro uma mensagem para o seu próprio número para visualizar a sua mensagem antes de envia-la em massa.</p>
-            </div>
-        </div>;
-    }
-}
\ No newline at end of file
diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
new file mode 100644
index 0000000..b3ad9a4
--- /dev/null
+++ b/src/components/atoms/Button.tsx
@@ -0,0 +1,145 @@
+import React, { ButtonHTMLAttributes, Component } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+}
+
+export default class Button extends Component<ButtonProps, {}> {
+    render() {
+        const { variant, children, ...buttonProps } = this.props;
+
+        const classNames = [
+            'px-4',
+            'py-2',
+            'rounded-md',
+            'transition',
+            'ease-in-out',
+            'duration-150',
+            'focus:shadow-equal',
+            'focus:outline-none',
+            'border',
+            'border-transparent',
+            'ring-2',
+            'ring-transparent',
+            'focus:outline-none'
+        ];
+        switch (variant) {
+            case 'primary':
+                classNames.push(
+                    'bg-blue-600',
+                    'dark:bg-blue-400',
+                    'text-white',
+                    'hover:bg-transparent',
+                    'hover:text-blue-600',
+                    'dark:hover:text-blue-400',
+                    'hover:border-blue-600',
+                    'dark:hover:border-blue-400',
+                    'focus:ring-blue-600',
+                    'dark:focus:ring-blue-400'
+                );
+                break;
+            case 'secondary':
+                classNames.push(
+                    'bg-transparent',
+                    'text-blue-600',
+                    'dark:text-blue-400',
+                    'hover:text-white',
+                    'hover:bg-blue-600',
+                    'dark:hover:bg-blue-400',
+                    'hover:border-blue-600',
+                    'dark:hover:border-blue-400',
+                    'focus:ring-blue-600',
+                    'dark:focus:ring-blue-400'
+                );
+                break;
+            case 'success':
+                classNames.push(
+                    'bg-green-600',
+                    'dark:bg-green-400',
+                    'text-white',
+                    'hover:bg-transparent',
+                    'hover:text-green-600',
+                    'dark:hover:text-green-400',
+                    'hover:border-green-600',
+                    'dark:hover:border-green-400',
+                    'focus:ring-green-600',
+                    'dark:focus:ring-green-400'
+                );
+                break;
+            case 'danger':
+                classNames.push(
+                    'bg-red-600',
+                    'dark:bg-red-400',
+                    'text-white',
+                    'hover:bg-transparent',
+                    'hover:text-red-600',
+                    'dark:hover:text-red-400',
+                    'hover:border-red-600',
+                    'dark:hover:border-red-400',
+                    'focus:ring-red-600',
+                    'dark:focus:ring-red-400'
+                );
+                break;
+            case 'warning':
+                classNames.push(
+                    'bg-orange-600',
+                    'dark:bg-orange-400',
+                    'text-white',
+                    'hover:bg-transparent',
+                    'hover:text-orange-600',
+                    'dark:hover:text-orange-400',
+                    'hover:border-orange-600',
+                    'dark:hover:border-orange-400',
+                    'focus:ring-orange-600',
+                    'dark:focus:ring-orange-400'
+                );
+                break;
+            case 'info':
+                classNames.push(
+                    'bg-teal-600',
+                    'dark:bg-teal-400',
+                    'text-white',
+                    'hover:bg-transparent',
+                    'hover:text-teal-600',
+                    'dark:hover:text-teal-400',
+                    'hover:border-teal-600',
+                    'dark:hover:border-teal-400',
+                    'focus:ring-teal-600',
+                    'dark:focus:ring-teal-400'
+                );
+                break;
+            case 'light':
+                classNames.push(
+                    'bg-gray-200',
+                    'dark:bg-gray-800',
+                    'text-gray-800',
+                    'dark:text-gray-200',
+                    'hover:bg-transparent',
+                    'hover:border-gray-800',
+                    'dark:hover:border-gray-200',
+                    'focus:ring-gray-800',
+                    'dark:focus:ring-gray-200'
+                );
+                break;
+            case 'dark':
+                classNames.push(
+                    'bg-gray-800',
+                    'dark:bg-gray-200',
+                    'text-gray-200',
+                    'dark:text-gray-800',
+                    'hover:bg-transparent',
+                    'hover:text-gray-800',
+                    'dark:hover:text-gray-200',
+                    'hover:border-gray-800',
+                    'dark:hover:border-gray-200',
+                    'focus:ring-gray-800',
+                    'dark:focus:ring-gray-200'
+                );
+                break;
+        }
+
+        return <button {...buttonProps} className={[...classNames, ...(this.props.className || '').split(' ')].join(' ')} >
+            {children}
+        </button>;
+    }
+}
\ No newline at end of file
diff --git a/src/components/atoms/ControlFactory.tsx b/src/components/atoms/ControlFactory.tsx
new file mode 100644
index 0000000..71ff4cb
--- /dev/null
+++ b/src/components/atoms/ControlFactory.tsx
@@ -0,0 +1,49 @@
+import React, { Component, ComponentClass } from 'react';
+
+type ControlType = 'input' | 'textarea' | 'select';
+
+type ControlPropsMap = {
+    input: React.InputHTMLAttributes<HTMLInputElement>,
+    textarea: React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    select: React.SelectHTMLAttributes<HTMLSelectElement>,
+};
+
+class ControlFactory {
+    static create<T extends ControlType>(type: T): ComponentClass<ControlPropsMap[T]> {
+        return class CustomInput extends Component<ControlPropsMap[T], {}> {
+            render() {
+                const props = this.props;
+                const classNames = ['w-full',
+                    'flex-auto',
+                    'bg-slate-100',
+                    'dark:bg-slate-900',
+                    'border',
+                    'border-slate-400',
+                    'dark:border-slate-600',
+                    'p-1',
+                    'rounded-lg',
+                    'transition-shadow',
+                    'ease-in-out',
+                    'duration-150',
+                    'focus:shadow-equal',
+                    'focus:shadow-blue-800',
+                    'dark:focus:shadow-blue-200',
+                    'focus:outline-none'];
+
+                if (type === 'input') {
+                    return <input {...(props as React.InputHTMLAttributes<HTMLInputElement>)} className={[...classNames, ...(this.props.className || '').split(' ')].join(' ')} />;
+                } else if (type === 'textarea') {
+                    return <textarea {...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)} className={[...classNames, ...(this.props.className || '').split(' ')].join(' ')} />;
+                } else {
+                    return <select {...(props as React.SelectHTMLAttributes<HTMLSelectElement>)} className={[...classNames, ...(this.props.className || '').split(' ')].join(' ')}>
+                        {props.children}
+                    </select>;
+                }
+            }
+        };
+    }
+}
+
+export const ControlInput = ControlFactory.create('input');
+export const ControlTextArea = ControlFactory.create('textarea');
+export const ControlSelect = ControlFactory.create('select');
diff --git a/src/components/molecules/Box.tsx b/src/components/molecules/Box.tsx
new file mode 100644
index 0000000..6db1b5f
--- /dev/null
+++ b/src/components/molecules/Box.tsx
@@ -0,0 +1,57 @@
+import React, { Component, HTMLAttributes, ReactNode } from 'react';
+
+interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    headerButtons?: ReactNode;
+    bodyClassName?: string;
+    footer?: ReactNode;
+}
+
+export default class Box extends Component<BoxProps, {}> {
+    render() {
+        const { children, title, headerButtons, bodyClassName, footer, ...boxProps } = this.props;
+        return <div {...boxProps} className={['max-w-xl',
+            'mx-auto',
+            'flex',
+            'flex-col',
+            'bg-white',
+            'dark:bg-black',
+            'dark:text-slate-100',
+            'shadow-lg',
+            'dark:shadow-none',
+            'rounded-lg',
+            // 'overflow-hidden',
+            ...(this.props.className || '').split(' ')
+        ].join(' ')}>
+            {(title || headerButtons) && <div className={['p-4',
+                'border-b',
+                'border-slate-200',
+                'dark:border-gray-800',
+                'flex',
+                'justify-between',
+                'items-center'].join(' ')}>
+                {title && <h1 className={['text-lg',
+                    'font-semibold',
+                    'text-slate-800',
+                    'dark:text-slate-200'].join(' ')}>{title}</h1>}
+                {headerButtons}
+            </div>}
+            <div className={[
+                'flex-auto',
+                'flex',
+                'flex-col',
+                'gap-4',
+                ...(this.props.bodyClassName || '').split(' ')
+            ].join(' ')}>
+                {children}
+            </div>
+            {footer && <div className={['px-4',
+                'py-2',
+                'border-t',
+                'border-slate-200',
+                'dark:border-gray-800'].join(' ')}>
+                {footer}
+            </div>}
+        </div>;
+    }
+}
\ No newline at end of file
diff --git a/src/components/molecules/SelectCountryCode.tsx b/src/components/molecules/SelectCountryCode.tsx
new file mode 100644
index 0000000..7569073
--- /dev/null
+++ b/src/components/molecules/SelectCountryCode.tsx
@@ -0,0 +1,165 @@
+import { ControlInput } from '../atoms/ControlFactory';
+import React, { ChangeEvent, Component, createRef } from 'react';
+
+const countryCodes = require('../../countryCodes.pt-BR.json');
+
+interface CountryCode {
+    value: number;
+    label: string;
+}
+
+export default class SelectCountryCode extends Component<{ options?: CountryCode[] }, {
+    isOpen: boolean,
+    searchValue: string,
+    selectedValue: CountryCode | null,
+    options: CountryCode[],
+    filteredOptions: CountryCode[]
+}> {
+    constructor(props: { options: CountryCode[] }) {
+        super(props);
+        const defaultOptions = [{ value: 0, label: 'Sem Prefixo' }, ...countryCodes];
+        const { options = defaultOptions } = props;
+        this.state = {
+            isOpen: false,
+            searchValue: '',
+            selectedValue: options.find(option => option.value === 55),
+            options,
+            filteredOptions: options,
+        };
+    }
+
+    wrapperRef = createRef<HTMLDivElement>();
+
+    toggleOpen = () => {
+        this.setState(prevState => ({
+            ...prevState,
+            isOpen: !prevState.isOpen
+        }));
+    };
+
+    handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+        const searchValue = e.target.value.toLowerCase();
+        const filteredOptions = this.state.options.filter((option) =>
+            option.label.toLowerCase().includes(searchValue)
+        );
+
+        this.setState({ searchValue, filteredOptions });
+    };
+
+    handleSelect = (selectedValue: CountryCode) => {
+        this.setState({ selectedValue, isOpen: false, searchValue: '', filteredOptions: this.state.options });
+    };
+
+    handleClickOutside = (e: MouseEvent) => {
+        if (e.target instanceof Node && !this.wrapperRef.current?.contains(e.target)) {
+            this.setState({ isOpen: false });
+        }
+    };
+
+    componentDidMount() {
+        document.addEventListener('mousedown', this.handleClickOutside);
+        chrome.storage.local.get(
+            { prefix: 55 },
+            data => {
+                this.setState({ selectedValue: this.state.options.find(option => option.value === data.prefix) ?? null });
+            });
+    }
+
+    componentDidUpdate(prevProps: Readonly<{ options: CountryCode[] }>, prevState: Readonly<{
+        isOpen: boolean,
+        searchValue: string,
+        selectedValue: CountryCode | null,
+        options: CountryCode[],
+        filteredOptions: CountryCode[]
+    }>, snapshot?: any) {
+        if (prevState.selectedValue !== this.state.selectedValue) {
+            chrome.storage.local.set({ prefix: this.state.selectedValue?.value || 0 });
+        }
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+
+    render() {
+        const { isOpen, searchValue, selectedValue, filteredOptions } = this.state;
+        const { options } = this.props;
+
+        return (
+            <div className="relative select-none" ref={this.wrapperRef}>
+                <div
+                    className={[
+                        'w-full',
+                        'flex-auto',
+                        'bg-slate-100',
+                        'dark:bg-slate-900',
+                        'border',
+                        'border-slate-400',
+                        'dark:border-slate-600',
+                        'p-2',
+                        'rounded-lg',
+                        'transition-shadow',
+                        'ease-in-out',
+                        'duration-150',
+                        'focus:shadow-equal',
+                        'focus:shadow-blue-800',
+                        'dark:focus:shadow-blue-200',
+                        'focus:outline-none',
+                        'cursor-pointer',
+                        'flex',
+                        'justify-between',
+                        'items-center'
+                    ].join(' ')}
+                    onClick={this.toggleOpen}
+                >
+                    <span>{selectedValue ? selectedValue.label : 'Selecione um Prefixo'}</span>
+                    <svg
+                        className={`transform transition-transform duration-300 ${isOpen ? 'rotate-180' : ''
+                            }`}
+                        width="16"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M4.86133 6.7539L8.00065 9.89322L11.1399 6.7539"
+                            stroke="#374151"
+                            strokeWidth="1.5"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        />
+                    </svg>
+                </div>
+                {
+                    isOpen && (
+                        <div className="absolute w-full mt-1 z-10 border border-slate-200 dark:border-slate-800 bg-slate-100 dark:bg-slate-900 rounded-md shadow-lg">
+                            <ControlInput
+                                className="p-2 w-full"
+                                type="text"
+                                placeholder="Procurar"
+                                value={searchValue}
+                                onChange={this.handleSearch}
+                            />
+                            <ul>
+                                {filteredOptions.length ? (
+                                    filteredOptions.map((option, index) => (
+                                        <li
+                                            key={index}
+                                            className={`p-2 cursor-pointer hover:bg-blue-400 dark:hover:bg-blue-600${selectedValue === option ? ' bg-blue-200 dark:bg-blue-800' : ''}`}
+                                            onClick={() => this.handleSelect(option)}
+                                        >
+                                            {option.label}
+                                        </li>
+                                    ))
+                                ) : (
+                                    <li className="p-2 cursor-default text-slate-400 dark:text-slate-600">Nenhum prefixo encontrado</li>
+                                )}
+                            </ul>
+                        </div>
+                    )
+                }
+            </div >
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/components/organisms/LogTable.tsx b/src/components/organisms/LogTable.tsx
new file mode 100644
index 0000000..e96d8e0
--- /dev/null
+++ b/src/components/organisms/LogTable.tsx
@@ -0,0 +1,75 @@
+import React, { Component, MouseEvent } from 'react';
+import type Log from '../../types/Log';
+import Button from '../atoms/Button';
+import Box from '../molecules/Box';
+
+export default class LogTable extends Component<{ className?: string }, { logs: Log[] }>{
+    constructor(props: { className?: string }) {
+        super(props);
+        this.state = {
+            logs: []
+        };
+    }
+
+    componentDidMount() {
+        chrome.storage.local.get({ logs: [] }, data => this.setState({ logs: data.logs }));
+    }
+
+    handleClear = (event: MouseEvent<HTMLButtonElement>) => {
+        chrome.storage.local.set({ logs: [] });
+        this.setState({ logs: [] });
+    }
+
+    handleUpdate = (event: MouseEvent<HTMLButtonElement>) => {
+        chrome.storage.local.get({ logs: [] }, data =>
+            this.setState({ logs: data.logs })
+        );
+    }
+
+    render() {
+        const logLevelClass: { [key: number]: string } = {
+            1: 'bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800',
+            2: 'bg-yellow-100 dark:bg-yellow-900 hover:bg-yellow-200 dark:hover:bg-yellow-800',
+            3: 'bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800'
+        };
+
+        return <Box
+            className={this.props.className}
+            title="Logs"
+            headerButtons={<div className="flex justify-end gap-4">
+                <Button
+                    variant="primary"
+                    onClick={this.handleUpdate}
+                >
+                    Atualizar
+                </Button>
+                <Button
+                    variant="secondary"
+                    onClick={this.handleClear}
+                >
+                    Limpar
+                </Button>
+            </div>}>
+            <table className="mx-4 table-auto">
+                <thead>
+                    <tr className="text-left font-bold">
+                        <th className="px-4 py-2 text-center">Número</th>
+                        <th className="px-4 py-2 text-center">Mensagem</th>
+                        <th className="px-4 py-2 text-center">Anexo</th>
+                        <th className="px-4 py-2 text-center">Data/Hora</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {this.state.logs.map((log, index) => (
+                        <tr key={index} className={logLevelClass[log.level]}>
+                            <td className="border px-4 py-2">{log.contact}</td>
+                            <td className="border px-4 py-2">{log.message}</td>
+                            <td className="border px-4 py-2 text-center">{log.attachment ? '✓' : '×'}</td>
+                            <td className="border px-4 py-2">{log.date}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </Box>;
+    }
+}
\ No newline at end of file
diff --git a/src/components/organisms/MessageButtonsForm.tsx b/src/components/organisms/MessageButtonsForm.tsx
new file mode 100644
index 0000000..9cf55f0
--- /dev/null
+++ b/src/components/organisms/MessageButtonsForm.tsx
@@ -0,0 +1,236 @@
+import React, { ChangeEvent, Component, DragEvent } from 'react';
+import Button from '../atoms/Button';
+import { ControlInput, ControlSelect } from '../atoms/ControlFactory';
+import Box from '../molecules/Box';
+
+export default class MessageButtonsForm extends Component<{ className?: string }, { buttons: { id: number, type: string, value: string, text: string }[], draggedIndex: number | null, dropIndex: number | null }>{
+    constructor(props: { className?: string }) {
+        super(props);
+        this.state = {
+            draggedIndex: null,
+            dropIndex: null,
+            buttons: []
+        };
+    }
+
+    componentDidMount() {
+        chrome.storage.local.get({ buttons: [] }, data => this.setState({
+            buttons: data.buttons.map((button: { [key: string]: string }) => {
+                const [type = ''] = Object.keys(button).filter(
+                    (prop) => !['text'].includes(prop)
+                );
+                return {
+                    id: type === 'id' ? button[type] : Math.floor(Math.random() * 1000),
+                    type: type,
+                    value: button[type] || '',
+                    text: button.text
+                };
+            })
+        }));
+    }
+
+    compareArrays = (arr1: { id: number, type: string, value: string, text: string }[], arr2: { id: number, type: string, value: string, text: string }[]) => {
+        // Check if arrays have different lengths
+        if (arr1.length !== arr2.length) {
+            return false;
+        }
+        // Check if each object in arr1 has a corresponding object in arr2
+        for (let i = 0; i < arr1.length; i++) {
+            let obj1 = arr1[i];
+            let obj2 = arr2[i];
+            if (!obj2) {
+                // If obj2 is undefined, there is no matching object in arr2
+                return false;
+            }
+            // Check if properties of obj1 and obj2 are the same
+            if (obj1.id !== obj2.id || obj1.type !== obj2.type || obj1.value !== obj2.value || obj1.text !== obj2.text) {
+                return false;
+            }
+        }
+        // If we reach this point, the arrays are equal
+        return true;
+    }
+
+    componentDidUpdate(prevProps: Readonly<{ className?: string }>, prevState: Readonly<{ buttons: { id: number, type: string, value: string, text: string }[]; }>, snapshot?: any) {
+        const { buttons } = this.state;
+        if (!this.compareArrays(prevState.buttons, buttons)) {
+            chrome.storage.local.set({
+                buttons: buttons.map(button => ({
+                    [button.type]: button.value,
+                    text: button.text
+                }))
+            });
+        }
+    }
+
+    handleDrag = (event: DragEvent<HTMLTableRowElement>, index: number) => {
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/plain', `${index}`);
+        this.setState({ draggedIndex: index });
+    }
+
+    handleDragOver = (event: DragEvent<HTMLTableRowElement>, index: number) => {
+        event.preventDefault();
+        this.setState({ dropIndex: index });
+    }
+
+    handleDrop = (event: DragEvent<HTMLTableRowElement>, index: number) => {
+        event.preventDefault();
+        const sourceIndex = event.dataTransfer.getData('text');
+        const buttons = [...this.state.buttons];
+        const [draggedItem] = buttons.splice(+sourceIndex, 1);
+        buttons.splice(index, 0, draggedItem);
+        this.setState({ buttons, draggedIndex: null, dropIndex: null });
+    }
+
+    handleTypeChange = (event: ChangeEvent<HTMLSelectElement>, id: number) => {
+        const buttons = [...this.state.buttons];
+        this.setState({
+            buttons: buttons.map(button => {
+                if (button.id !== id) return button;
+                const type = event.target.value;
+                let value = button.value || '';
+                if (type === 'phoneNumber') {
+                    value = value.replace(/\D/g, '');
+                } else if (type === 'id') {
+                    value = `${button.id}`;
+                }
+                return {
+                    id: button.id || 0,
+                    type,
+                    value,
+                    text: button.text || '',
+                };
+            })
+        });
+    }
+
+    handleValueChange = (event: ChangeEvent<HTMLInputElement>, id: number) => {
+        const buttons = [...this.state.buttons];
+        this.setState({
+            buttons: buttons.map(button => {
+                if (button.id !== id) return button;
+                let value = event.target.value;
+                if (button.type === 'phoneNumber') {
+                    value = value.replace(/\D/g, '')
+                } else if (button.type === 'id') {
+                    value = `${button.id}`;
+                }
+                return {
+                    id: button.id || 0,
+                    type: button.type || '',
+                    value: value,
+                    text: button.text || '',
+                };
+            })
+        });
+    }
+
+    handleTextChange = (event: ChangeEvent<HTMLInputElement>, id: number) => {
+        const buttons = [...this.state.buttons];
+        this.setState({
+            buttons: buttons.map(button => {
+                if (button.id !== id) return button;
+                return {
+                    id: button.id || 0,
+                    type: button.type || '',
+                    value: button.value || '',
+                    text: event.target.value,
+                };
+            })
+        });
+    }
+
+    handleDeleteButton = (id: number) => {
+        const buttons = [...this.state.buttons];
+        this.setState({ buttons: buttons.filter(button => button.id !== id) });
+    }
+
+    handleAddButton = () => {
+        const buttons = [...this.state.buttons, {
+            id: Math.floor(Math.random() * 1000),
+            type: 'url',
+            value: '',
+            text: ''
+        }];
+        this.setState({ buttons });
+    }
+
+    render() {
+        const { buttons, draggedIndex, dropIndex } = this.state;
+
+        return <Box
+            className={this.props.className}
+            title="Botões"
+            headerButtons={buttons.length < 3 && <Button variant="light" onClick={this.handleAddButton}>Adicionar</Button>}
+            footer={<>
+                <p className="text-red-600 dark:text-red-400 font-bold mb-1">
+                    Importante: O botão do tipo 'ID' pode não funcionar em todas as configurações! Teste antes de enviar em massa!
+                </p>
+                <p>Você pode criar 3 tipos de botões:</p>
+                <ul className="list-disc ml-8">
+                    <li><b>URL</b>: Redireciona a um site.</li>
+                    <li><b>Número de Telefone</b>: Liga a um número.</li>
+                    <li><b>ID</b>: Envia o texto de volta ao remetente.</li>
+                </ul>
+            </>}>
+            {buttons.length > 0 &&
+                <table className="mx-4 table-auto">
+                    <thead>
+                        <tr className="text-left font-bold">
+                            <th className="px-4 py-2"></th>
+                            <th className="px-4 py-2 text-center">Tipo</th>
+                            <th className="px-4 py-2 text-center">Conteúdo</th>
+                            <th className="px-4 py-2 text-center">Texto</th>
+                            <th className="px-4 py-2 text-center"></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {buttons.map((button, index) => (
+                            <tr
+                                key={button.id}
+                                draggable
+                                onDragStart={event => this.handleDrag(event, index)}
+                                onDragOver={event => this.handleDragOver(event, index)}
+                                onDrop={event => this.handleDrop(event, index)}
+                                className={`${index === draggedIndex ? 'bg-blue-100 dark:bg-blue-900' : ''} ${index === dropIndex ? 'border-dashed border-2' : 'border'}`}
+                            >
+                                <td className="border px-4 py-2 cursor-move text-center">☰</td>
+                                <td className="border px-4 py-2">
+                                    <ControlSelect value={button.type} onChange={event => this.handleTypeChange(event, button.id)}>
+                                        <option value="url">URL</option>
+                                        <option value="phoneNumber">Número de Telefone</option>
+                                        <option value="id">ID</option>
+                                    </ControlSelect>
+                                </td>
+                                <td className="border px-4 py-2">
+                                    <ControlInput
+                                        className={button.type === 'id' ? 'bg-transparent border-0' : ''}
+                                        type={button.type === 'phoneNumber' ? 'tel' : button.type === 'url' ? 'url' : 'text'}
+                                        value={button.value}
+                                        onChange={event => this.handleValueChange(event, button.id)}
+                                        disabled={button.type === 'id'}
+                                    />
+                                </td>
+                                <td className="border px-4 py-2">
+                                    <ControlInput
+                                        type="text"
+                                        value={button.text}
+                                        onChange={event => this.handleTextChange(event, button.id)}
+                                    />
+                                </td>
+                                <td className="border text-center align-middle">
+                                    <Button
+                                        className="text-3xl text-red-500 hover:text-red-600 dark:hover:text-red-400 p-0 ring-0"
+                                        onClick={() => this.handleDeleteButton(button.id)}
+                                    >
+                                        ×
+                                    </Button>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>}
+        </Box>;
+    }
+}
\ No newline at end of file
diff --git a/src/components/organisms/MessageForm.tsx b/src/components/organisms/MessageForm.tsx
new file mode 100644
index 0000000..9e71bdc
--- /dev/null
+++ b/src/components/organisms/MessageForm.tsx
@@ -0,0 +1,193 @@
+import React, { ChangeEvent, Component, createRef, MouseEvent } from 'react';
+import type { Attachment } from '../../types/Attachment';
+import Button from '../atoms/Button';
+import { ControlTextArea } from '../atoms/ControlFactory';
+import Box from '../molecules/Box';
+import SelectCountryCode from '../molecules/SelectCountryCode';
+
+export default class MessageForm extends Component<{ className?: string }, { message: string, attachment: Attachment, delay: number }>{
+    constructor(props: { className?: string }) {
+        super(props);
+        this.state = {
+            message: 'Enviado por WTF',
+            attachment: null,
+            delay: 0
+        };
+    }
+
+    fileRef = createRef<HTMLInputElement>();
+
+    componentDidMount() {
+        chrome.storage.local.get(
+            { message: 'Enviado por WTF', attachment: null, delay: 0 },
+            data => {
+                this.setState({ message: data.message, attachment: data.attachment, delay: data.delay });
+                if (data.attachment != null && this.fileRef.current !== null) {
+                    fetch(data.attachment.url).then(response => response.blob()).then(blob => {
+                        const myFile = new File([blob], data.attachment.name, {
+                            type: data.attachment.type,
+                            lastModified: data.attachment.lastModified,
+                        });
+                        const dataTransfer = new DataTransfer();
+                        dataTransfer.items.add(myFile);
+                        if (this.fileRef.current !== null) {
+                            this.fileRef.current.files = dataTransfer.files;
+                        }
+                    });
+                }
+            });
+    }
+
+    componentDidUpdate(prevProps: Readonly<{ className?: string }>, prevState: Readonly<{ message: string, attachment: Attachment, delay: number }>, snapshot?: any) {
+        const { message, attachment, delay } = this.state;
+
+        if (prevState.message !== message) {
+            chrome.storage.local.set({ message });
+        }
+
+        if (prevState.delay !== delay) {
+            chrome.storage.local.set({ delay });
+        }
+
+        if (prevState.attachment?.url !== attachment?.url) {
+            if (attachment == null) {
+                chrome.storage.local.set({ attachment });
+            } else {
+                chrome.storage.local.set({
+                    attachment: {
+                        name: attachment.name,
+                        type: attachment.type,
+                        url: attachment.url,
+                        lastModified: attachment.lastModified
+                    }
+                });
+            }
+        }
+    }
+
+    handleMessageChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+        this.setState({ message: event.target.value });
+    }
+
+    handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files) {
+            const file = event.target.files[0];
+            const reader = new FileReader();
+            reader.onload = ev => {
+                if (ev.target === null || ev.target.result === null) return;
+                this.setState({
+                    attachment: {
+                        name: file.name,
+                        type: file.type,
+                        url: ev.target.result,
+                        lastModified: file.lastModified
+                    }
+                });
+            };
+            reader.readAsDataURL(file);
+        } else {
+            this.setState({ attachment: null });
+        }
+    }
+
+    handleFileClear = (event: MouseEvent<HTMLButtonElement>) => {
+        if (this.fileRef.current == null) return;
+        this.fileRef.current.files = new DataTransfer().files;
+        this.setState({ attachment: null });
+    }
+
+    render() {
+        const { message, attachment } = this.state;
+
+        return <Box
+            className={this.props.className}
+            title="Elaboração da mensagem"
+            footer={<>
+                <p className="mb-1">Se desejar enviar apenas o anexo, mantenha o campo de mensagem vazio.</p>
+                <p>Sugestão: Envie primeiro uma mensagem para o seu próprio número para visualizar a sua mensagem antes de envia-la em massa.</p>
+            </>}>
+            <div className="mt-4 mx-4 flex flex-row gap-4">
+                <div className="flex flex-col basis-1/2">
+                    <ControlTextArea
+                        value={message}
+                        onChange={this.handleMessageChange}
+                    />
+                </div>
+                <div className={['px-4',
+                    'py-6',
+                    'flex',
+                    'flex-col',
+                    'flex-auto',
+                    'basis-1/2',
+                    'border-2',
+                    'border-dashed',
+                    'border-slate-400',
+                    'dark:border-slate-600',
+                    'rounded-lg'].join(' ')}>
+                    <label htmlFor="attachment" className="mb-2 text-center cursor-pointer">
+                        {attachment?.name ? attachment.name : <>
+                            <p className="mb-2 text-2xl">🖼</p>
+                            <p className="text-sm text-slate-800 dark:text-slate-200">
+                                Selecione um anexo (Opcional)
+                            </p>
+                        </>}
+                    </label>
+                    <input
+                        id="attachment"
+                        name="attachment"
+                        className="hidden"
+                        type="file"
+                        ref={this.fileRef}
+                        onChange={this.handleFileChange}
+                    />
+                    {attachment != null &&
+                        <Button
+                            variant="danger"
+                            onClick={this.handleFileClear}
+                        >
+                            Limpar
+                        </Button>}
+                </div>
+            </div>
+            <div className="mx-4 flex items-center">
+                <label htmlFor="delay">Intervalo entre mensagens (<span className="font-mono">{this.state.delay.toFixed(1)}s</span>):</label>
+                <input
+                    type="range"
+                    id="delay"
+                    name="delay"
+                    min="0"
+                    max="10"
+                    step="0.1"
+                    value={this.state.delay}
+                    onChange={(e) => this.setState({ delay: +e.target.value })}
+                    className={['w-full',
+                        'h-1.5',
+                        'bg-slate-100',
+                        'dark:bg-slate-900',
+                        'border',
+                        'border-slate-400',
+                        'dark:border-slate-600',
+                        'accent-slate-600',
+                        'dark:accent-slate-400',
+                        'appearance-none',
+                        'outline-none',
+                        'rounded-full',
+                        'cursor-pointer',
+                        'transition-shadow',
+                        'ease-in-out',
+                        'duration-150',
+                        'hover:bg-blue-100',
+                        'dark:hover:bg-blue-900',
+                        'focus:shadow-equal',
+                        'focus:shadow-blue-800',
+                        'dark:focus:shadow-blue-200',
+                        'focus:outline-none'].join(' ')}
+                />
+            </div>
+            <div className="mb-4 mx-4 flex flex-col">
+            <label className="mb-2">Selecione um prefixo para adicionar automaticamente ao número dos contatos:</label>
+            <SelectCountryCode />
+            </div>
+        </Box>;
+    }
+}
\ No newline at end of file
diff --git a/src/content_script.ts b/src/content_script.ts
index 7736818..77f2b5d 100644
--- a/src/content_script.ts
+++ b/src/content_script.ts
@@ -1,5 +1,11 @@
+import AsyncChromeMessageManager from './utils/AsyncChromeMessageManager';
+import type Log from './types/Log';
+import { ChromeMessageTypes } from './types/ChromeMessageTypes';
+
+const ContentScriptMessageManager = new AsyncChromeMessageManager('contentScript');
+
 function injectScript(scriptName: string) {
-  return new Promise(function (resolve) {
+  return new Promise(resolve => {
     var s = document.createElement('script');
     s.src = chrome.runtime.getURL(scriptName);
     s.onload = function () {
@@ -12,8 +18,8 @@ function injectScript(scriptName: string) {
   });
 }
 
-function addLog({ level, message, attachment = false, contact }: { level: number, message: string, attachment: boolean, contact: string }) {
-  chrome.storage.local.get({ logs: [] }, data => {
+async function addLog({ level, message, attachment = false, contact }: Log) {
+  return chrome.storage.local.get({ logs: [] }, async data => {
     const currentLogs = data.logs;
     currentLogs.push({
       level,
@@ -22,20 +28,18 @@ function addLog({ level, message, attachment = false, contact }: { level: number
       contact,
       date: new Date().toLocaleString()
     });
-    chrome.storage.local.set({ logs: currentLogs });
+    return chrome.storage.local.set({ logs: currentLogs });
   });
 }
 
-window.addEventListener('message', event => {
-  // We only accept messages from ourselves
-  if (event.source !== window) {
-    return;
-  }
-
-  if (event.data.type && (event.data.type === 'LOG')) {
-    addLog(event.data);
+ContentScriptMessageManager.addHandler(ChromeMessageTypes.ADD_LOG, async (log) => {
+  try {
+    await addLog(log);
+    return true;
+  } catch (error) {
+    return false;
   }
-}, false);
+});
 
 if (document.readyState === 'complete') {
   injectScript('js/wa-js.js');
diff --git a/src/countryCodes.json b/src/countryCodes.json
new file mode 100644
index 0000000..c61e650
--- /dev/null
+++ b/src/countryCodes.json
@@ -0,0 +1,962 @@
+[
+    {
+        "vaue": 93,
+        "label": "Afghanistan (+93)"
+    },
+    {
+        "vaue": 355,
+        "label": "Albania (+355)"
+    },
+    {
+        "vaue": 213,
+        "label": "Algeria (+213)"
+    },
+    {
+        "vaue": 1,
+        "label": "American Samoa (+1)"
+    },
+    {
+        "vaue": 376,
+        "label": "Andorra (+376)"
+    },
+    {
+        "vaue": 244,
+        "label": "Angola (+244)"
+    },
+    {
+        "vaue": 1,
+        "label": "Anguilla (+1)"
+    },
+    {
+        "vaue": 672,
+        "label": "Antarctica (+672)"
+    },
+    {
+        "vaue": 1,
+        "label": "Antigua and Barbuda (+1)"
+    },
+    {
+        "vaue": 54,
+        "label": "Argentina (+54)"
+    },
+    {
+        "vaue": 374,
+        "label": "Armenia (+374)"
+    },
+    {
+        "vaue": 297,
+        "label": "Aruba (+297)"
+    },
+    {
+        "vaue": 61,
+        "label": "Australia (+61)"
+    },
+    {
+        "vaue": 43,
+        "label": "Austria (+43)"
+    },
+    {
+        "vaue": 994,
+        "label": "Azerbaijan (+994)"
+    },
+    {
+        "vaue": 1,
+        "label": "Bahamas (+1)"
+    },
+    {
+        "vaue": 973,
+        "label": "Bahrain (+973)"
+    },
+    {
+        "vaue": 880,
+        "label": "Bangladesh (+880)"
+    },
+    {
+        "vaue": 1,
+        "label": "Barbados (+1)"
+    },
+    {
+        "vaue": 375,
+        "label": "Belarus (+375)"
+    },
+    {
+        "vaue": 32,
+        "label": "Belgium (+32)"
+    },
+    {
+        "vaue": 501,
+        "label": "Belize (+501)"
+    },
+    {
+        "vaue": 229,
+        "label": "Benin (+229)"
+    },
+    {
+        "vaue": 1,
+        "label": "Bermuda (+1)"
+    },
+    {
+        "vaue": 975,
+        "label": "Bhutan (+975)"
+    },
+    {
+        "vaue": 591,
+        "label": "Bolivia (+591)"
+    },
+    {
+        "vaue": 387,
+        "label": "Bosnia and Herzegovina (+387)"
+    },
+    {
+        "vaue": 267,
+        "label": "Botswana (+267)"
+    },
+    {
+        "vaue": 55,
+        "label": "Brazil (+55)"
+    },
+    {
+        "vaue": 246,
+        "label": "British Indian Ocean Territory (+246)"
+    },
+    {
+        "vaue": 1,
+        "label": "British Virgin Islands (+1)"
+    },
+    {
+        "vaue": 673,
+        "label": "Brunei (+673)"
+    },
+    {
+        "vaue": 359,
+        "label": "Bulgaria (+359)"
+    },
+    {
+        "vaue": 226,
+        "label": "Burkina Faso (+226)"
+    },
+    {
+        "vaue": 257,
+        "label": "Burundi (+257)"
+    },
+    {
+        "vaue": 855,
+        "label": "Cambodia (+855)"
+    },
+    {
+        "vaue": 237,
+        "label": "Cameroon (+237)"
+    },
+    {
+        "vaue": 1,
+        "label": "Canada (+1)"
+    },
+    {
+        "vaue": 238,
+        "label": "Cape Verde (+238)"
+    },
+    {
+        "vaue": 1,
+        "label": "Cayman Islands (+1)"
+    },
+    {
+        "vaue": 236,
+        "label": "Central African Republic (+236)"
+    },
+    {
+        "vaue": 235,
+        "label": "Chad (+235)"
+    },
+    {
+        "vaue": 56,
+        "label": "Chile (+56)"
+    },
+    {
+        "vaue": 86,
+        "label": "China (+86)"
+    },
+    {
+        "vaue": 61,
+        "label": "Christmas Island (+61)"
+    },
+    {
+        "vaue": 61,
+        "label": "Cocos Islands (+61)"
+    },
+    {
+        "vaue": 57,
+        "label": "Colombia (+57)"
+    },
+    {
+        "vaue": 269,
+        "label": "Comoros (+269)"
+    },
+    {
+        "vaue": 682,
+        "label": "Cook Islands (+682)"
+    },
+    {
+        "vaue": 506,
+        "label": "Costa Rica (+506)"
+    },
+    {
+        "vaue": 385,
+        "label": "Croatia (+385)"
+    },
+    {
+        "vaue": 53,
+        "label": "Cuba (+53)"
+    },
+    {
+        "vaue": 599,
+        "label": "Curacao (+599)"
+    },
+    {
+        "vaue": 357,
+        "label": "Cyprus (+357)"
+    },
+    {
+        "vaue": 420,
+        "label": "Czech Republic (+420)"
+    },
+    {
+        "vaue": 243,
+        "label": "Democratic Republic of the Congo (+243)"
+    },
+    {
+        "vaue": 45,
+        "label": "Denmark (+45)"
+    },
+    {
+        "vaue": 253,
+        "label": "Djibouti (+253)"
+    },
+    {
+        "vaue": 1,
+        "label": "Dominica (+1)"
+    },
+    {
+        "vaue": 1,
+        "label": "Dominican Republic (+1)"
+    },
+    {
+        "vaue": 670,
+        "label": "East Timor (+670)"
+    },
+    {
+        "vaue": 593,
+        "label": "Ecuador (+593)"
+    },
+    {
+        "vaue": 20,
+        "label": "Egypt (+20)"
+    },
+    {
+        "vaue": 503,
+        "label": "El Salvador (+503)"
+    },
+    {
+        "vaue": 240,
+        "label": "Equatorial Guinea (+240)"
+    },
+    {
+        "vaue": 291,
+        "label": "Eritrea (+291)"
+    },
+    {
+        "vaue": 372,
+        "label": "Estonia (+372)"
+    },
+    {
+        "vaue": 251,
+        "label": "Ethiopia (+251)"
+    },
+    {
+        "vaue": 500,
+        "label": "Falkland Islands (+500)"
+    },
+    {
+        "vaue": 298,
+        "label": "Faroe Islands (+298)"
+    },
+    {
+        "vaue": 679,
+        "label": "Fiji (+679)"
+    },
+    {
+        "vaue": 358,
+        "label": "Finland (+358)"
+    },
+    {
+        "vaue": 33,
+        "label": "France (+33)"
+    },
+    {
+        "vaue": 689,
+        "label": "French Polynesia (+689)"
+    },
+    {
+        "vaue": 241,
+        "label": "Gabon (+241)"
+    },
+    {
+        "vaue": 220,
+        "label": "Gambia (+220)"
+    },
+    {
+        "vaue": 995,
+        "label": "Georgia (+995)"
+    },
+    {
+        "vaue": 49,
+        "label": "Germany (+49)"
+    },
+    {
+        "vaue": 233,
+        "label": "Ghana (+233)"
+    },
+    {
+        "vaue": 350,
+        "label": "Gibraltar (+350)"
+    },
+    {
+        "vaue": 30,
+        "label": "Greece (+30)"
+    },
+    {
+        "vaue": 299,
+        "label": "Greenland (+299)"
+    },
+    {
+        "vaue": 1,
+        "label": "Grenada (+1)"
+    },
+    {
+        "vaue": 1,
+        "label": "Guam (+1)"
+    },
+    {
+        "vaue": 502,
+        "label": "Guatemala (+502)"
+    },
+    {
+        "vaue": 44,
+        "label": "Guernsey (+44)"
+    },
+    {
+        "vaue": 224,
+        "label": "Guinea (+224)"
+    },
+    {
+        "vaue": 245,
+        "label": "Guinea-Bissau (+245)"
+    },
+    {
+        "vaue": 592,
+        "label": "Guyana (+592)"
+    },
+    {
+        "vaue": 509,
+        "label": "Haiti (+509)"
+    },
+    {
+        "vaue": 504,
+        "label": "Honduras (+504)"
+    },
+    {
+        "vaue": 852,
+        "label": "Hong Kong (+852)"
+    },
+    {
+        "vaue": 36,
+        "label": "Hungary (+36)"
+    },
+    {
+        "vaue": 354,
+        "label": "Iceland (+354)"
+    },
+    {
+        "vaue": 91,
+        "label": "India (+91)"
+    },
+    {
+        "vaue": 62,
+        "label": "Indonesia (+62)"
+    },
+    {
+        "vaue": 98,
+        "label": "Iran (+98)"
+    },
+    {
+        "vaue": 964,
+        "label": "Iraq (+964)"
+    },
+    {
+        "vaue": 353,
+        "label": "Ireland (+353)"
+    },
+    {
+        "vaue": 44,
+        "label": "Isle of Man (+44)"
+    },
+    {
+        "vaue": 972,
+        "label": "Israel (+972)"
+    },
+    {
+        "vaue": 39,
+        "label": "Italy (+39)"
+    },
+    {
+        "vaue": 225,
+        "label": "Ivory Coast (+225)"
+    },
+    {
+        "vaue": 1,
+        "label": "Jamaica (+1)"
+    },
+    {
+        "vaue": 81,
+        "label": "Japan (+81)"
+    },
+    {
+        "vaue": 44,
+        "label": "Jersey (+44)"
+    },
+    {
+        "vaue": 962,
+        "label": "Jordan (+962)"
+    },
+    {
+        "vaue": 7,
+        "label": "Kazakhstan (+7)"
+    },
+    {
+        "vaue": 254,
+        "label": "Kenya (+254)"
+    },
+    {
+        "vaue": 686,
+        "label": "Kiribati (+686)"
+    },
+    {
+        "vaue": 383,
+        "label": "Kosovo (+383)"
+    },
+    {
+        "vaue": 965,
+        "label": "Kuwait (+965)"
+    },
+    {
+        "vaue": 996,
+        "label": "Kyrgyzstan (+996)"
+    },
+    {
+        "vaue": 856,
+        "label": "Laos (+856)"
+    },
+    {
+        "vaue": 371,
+        "label": "Latvia (+371)"
+    },
+    {
+        "vaue": 961,
+        "label": "Lebanon (+961)"
+    },
+    {
+        "vaue": 266,
+        "label": "Lesotho (+266)"
+    },
+    {
+        "vaue": 231,
+        "label": "Liberia (+231)"
+    },
+    {
+        "vaue": 218,
+        "label": "Libya (+218)"
+    },
+    {
+        "vaue": 423,
+        "label": "Liechtenstein (+423)"
+    },
+    {
+        "vaue": 370,
+        "label": "Lithuania (+370)"
+    },
+    {
+        "vaue": 352,
+        "label": "Luxembourg (+352)"
+    },
+    {
+        "vaue": 853,
+        "label": "Macau (+853)"
+    },
+    {
+        "vaue": 389,
+        "label": "Macedonia (+389)"
+    },
+    {
+        "vaue": 261,
+        "label": "Madagascar (+261)"
+    },
+    {
+        "vaue": 265,
+        "label": "Malawi (+265)"
+    },
+    {
+        "vaue": 60,
+        "label": "Malaysia (+60)"
+    },
+    {
+        "vaue": 960,
+        "label": "Maldives (+960)"
+    },
+    {
+        "vaue": 223,
+        "label": "Mali (+223)"
+    },
+    {
+        "vaue": 356,
+        "label": "Malta (+356)"
+    },
+    {
+        "vaue": 692,
+        "label": "Marshall Islands (+692)"
+    },
+    {
+        "vaue": 222,
+        "label": "Mauritania (+222)"
+    },
+    {
+        "vaue": 230,
+        "label": "Mauritius (+230)"
+    },
+    {
+        "vaue": 262,
+        "label": "Mayotte (+262)"
+    },
+    {
+        "vaue": 52,
+        "label": "Mexico (+52)"
+    },
+    {
+        "vaue": 691,
+        "label": "Micronesia (+691)"
+    },
+    {
+        "vaue": 373,
+        "label": "Moldova (+373)"
+    },
+    {
+        "vaue": 377,
+        "label": "Monaco (+377)"
+    },
+    {
+        "vaue": 976,
+        "label": "Mongolia (+976)"
+    },
+    {
+        "vaue": 382,
+        "label": "Montenegro (+382)"
+    },
+    {
+        "vaue": 1,
+        "label": "Montserrat (+1)"
+    },
+    {
+        "vaue": 212,
+        "label": "Morocco (+212)"
+    },
+    {
+        "vaue": 258,
+        "label": "Mozambique (+258)"
+    },
+    {
+        "vaue": 95,
+        "label": "Myanmar (+95)"
+    },
+    {
+        "vaue": 264,
+        "label": "Namibia (+264)"
+    },
+    {
+        "vaue": 674,
+        "label": "Nauru (+674)"
+    },
+    {
+        "vaue": 977,
+        "label": "Nepal (+977)"
+    },
+    {
+        "vaue": 31,
+        "label": "Netherlands (+31)"
+    },
+    {
+        "vaue": 599,
+        "label": "Netherlands Antilles (+599)"
+    },
+    {
+        "vaue": 687,
+        "label": "New Caledonia (+687)"
+    },
+    {
+        "vaue": 64,
+        "label": "New Zealand (+64)"
+    },
+    {
+        "vaue": 505,
+        "label": "Nicaragua (+505)"
+    },
+    {
+        "vaue": 227,
+        "label": "Niger (+227)"
+    },
+    {
+        "vaue": 234,
+        "label": "Nigeria (+234)"
+    },
+    {
+        "vaue": 683,
+        "label": "Niue (+683)"
+    },
+    {
+        "vaue": 850,
+        "label": "North Korea (+850)"
+    },
+    {
+        "vaue": 1,
+        "label": "Northern Mariana Islands (+1)"
+    },
+    {
+        "vaue": 47,
+        "label": "Norway (+47)"
+    },
+    {
+        "vaue": 968,
+        "label": "Oman (+968)"
+    },
+    {
+        "vaue": 92,
+        "label": "Pakistan (+92)"
+    },
+    {
+        "vaue": 680,
+        "label": "Palau (+680)"
+    },
+    {
+        "vaue": 970,
+        "label": "Palestine (+970)"
+    },
+    {
+        "vaue": 507,
+        "label": "Panama (+507)"
+    },
+    {
+        "vaue": 675,
+        "label": "Papua New Guinea (+675)"
+    },
+    {
+        "vaue": 595,
+        "label": "Paraguay (+595)"
+    },
+    {
+        "vaue": 51,
+        "label": "Peru (+51)"
+    },
+    {
+        "vaue": 63,
+        "label": "Philippines (+63)"
+    },
+    {
+        "vaue": 64,
+        "label": "Pitcairn (+64)"
+    },
+    {
+        "vaue": 48,
+        "label": "Poland (+48)"
+    },
+    {
+        "vaue": 351,
+        "label": "Portugal (+351)"
+    },
+    {
+        "vaue": 1,
+        "label": "Puerto Rico (+1)"
+    },
+    {
+        "vaue": 974,
+        "label": "Qatar (+974)"
+    },
+    {
+        "vaue": 242,
+        "label": "Republic of the Congo (+242)"
+    },
+    {
+        "vaue": 262,
+        "label": "Reunion (+262)"
+    },
+    {
+        "vaue": 40,
+        "label": "Romania (+40)"
+    },
+    {
+        "vaue": 7,
+        "label": "Russia (+7)"
+    },
+    {
+        "vaue": 250,
+        "label": "Rwanda (+250)"
+    },
+    {
+        "vaue": 590,
+        "label": "Saint Barthelemy (+590)"
+    },
+    {
+        "vaue": 290,
+        "label": "Saint Helena (+290)"
+    },
+    {
+        "vaue": 1,
+        "label": "Saint Kitts and Nevis (+1)"
+    },
+    {
+        "vaue": 1,
+        "label": "Saint Lucia (+1)"
+    },
+    {
+        "vaue": 590,
+        "label": "Saint Martin (+590)"
+    },
+    {
+        "vaue": 508,
+        "label": "Saint Pierre and Miquelon (+508)"
+    },
+    {
+        "vaue": 1,
+        "label": "Saint Vincent and the Grenadines (+1)"
+    },
+    {
+        "vaue": 685,
+        "label": "Samoa (+685)"
+    },
+    {
+        "vaue": 378,
+        "label": "San Marino (+378)"
+    },
+    {
+        "vaue": 239,
+        "label": "Sao Tome and Principe (+239)"
+    },
+    {
+        "vaue": 966,
+        "label": "Saudi Arabia (+966)"
+    },
+    {
+        "vaue": 221,
+        "label": "Senegal (+221)"
+    },
+    {
+        "vaue": 381,
+        "label": "Serbia (+381)"
+    },
+    {
+        "vaue": 248,
+        "label": "Seychelles (+248)"
+    },
+    {
+        "vaue": 232,
+        "label": "Sierra Leone (+232)"
+    },
+    {
+        "vaue": 65,
+        "label": "Singapore (+65)"
+    },
+    {
+        "vaue": 1,
+        "label": "Sint Maarten (+1)"
+    },
+    {
+        "vaue": 421,
+        "label": "Slovakia (+421)"
+    },
+    {
+        "vaue": 386,
+        "label": "Slovenia (+386)"
+    },
+    {
+        "vaue": 677,
+        "label": "Solomon Islands (+677)"
+    },
+    {
+        "vaue": 252,
+        "label": "Somalia (+252)"
+    },
+    {
+        "vaue": 27,
+        "label": "South Africa (+27)"
+    },
+    {
+        "vaue": 82,
+        "label": "South Korea (+82)"
+    },
+    {
+        "vaue": 211,
+        "label": "South Sudan (+211)"
+    },
+    {
+        "vaue": 34,
+        "label": "Spain (+34)"
+    },
+    {
+        "vaue": 94,
+        "label": "Sri Lanka (+94)"
+    },
+    {
+        "vaue": 249,
+        "label": "Sudan (+249)"
+    },
+    {
+        "vaue": 597,
+        "label": "Suriname (+597)"
+    },
+    {
+        "vaue": 47,
+        "label": "Svalbard and Jan Mayen (+47)"
+    },
+    {
+        "vaue": 268,
+        "label": "Swaziland (+268)"
+    },
+    {
+        "vaue": 46,
+        "label": "Sweden (+46)"
+    },
+    {
+        "vaue": 41,
+        "label": "Switzerland (+41)"
+    },
+    {
+        "vaue": 963,
+        "label": "Syria (+963)"
+    },
+    {
+        "vaue": 886,
+        "label": "Taiwan (+886)"
+    },
+    {
+        "vaue": 992,
+        "label": "Tajikistan (+992)"
+    },
+    {
+        "vaue": 255,
+        "label": "Tanzania (+255)"
+    },
+    {
+        "vaue": 66,
+        "label": "Thailand (+66)"
+    },
+    {
+        "vaue": 228,
+        "label": "Togo (+228)"
+    },
+    {
+        "vaue": 690,
+        "label": "Tokelau (+690)"
+    },
+    {
+        "vaue": 676,
+        "label": "Tonga (+676)"
+    },
+    {
+        "vaue": 1,
+        "label": "Trinidad and Tobago (+1)"
+    },
+    {
+        "vaue": 216,
+        "label": "Tunisia (+216)"
+    },
+    {
+        "vaue": 90,
+        "label": "Turkey (+90)"
+    },
+    {
+        "vaue": 993,
+        "label": "Turkmenistan (+993)"
+    },
+    {
+        "vaue": 1,
+        "label": "Turks and Caicos Islands (+1)"
+    },
+    {
+        "vaue": 688,
+        "label": "Tuvalu (+688)"
+    },
+    {
+        "vaue": 1,
+        "label": "U.S. Virgin Islands (+1)"
+    },
+    {
+        "vaue": 256,
+        "label": "Uganda (+256)"
+    },
+    {
+        "vaue": 380,
+        "label": "Ukraine (+380)"
+    },
+    {
+        "vaue": 971,
+        "label": "United Arab Emirates (+971)"
+    },
+    {
+        "vaue": 44,
+        "label": "United Kingdom (+44)"
+    },
+    {
+        "vaue": 1,
+        "label": "United States (+1)"
+    },
+    {
+        "vaue": 598,
+        "label": "Uruguay (+598)"
+    },
+    {
+        "vaue": 998,
+        "label": "Uzbekistan (+998)"
+    },
+    {
+        "vaue": 678,
+        "label": "Vanuatu (+678)"
+    },
+    {
+        "vaue": 379,
+        "label": "Vatican (+379)"
+    },
+    {
+        "vaue": 58,
+        "label": "Venezuela (+58)"
+    },
+    {
+        "vaue": 84,
+        "label": "Vietnam (+84)"
+    },
+    {
+        "vaue": 681,
+        "label": "Wallis and Futuna (+681)"
+    },
+    {
+        "vaue": 212,
+        "label": "Western Sahara (+212)"
+    },
+    {
+        "vaue": 967,
+        "label": "Yemen (+967)"
+    },
+    {
+        "vaue": 260,
+        "label": "Zambia (+260)"
+    },
+    {
+        "vaue": 263,
+        "label": "Zimbabwe (+263)"
+    }
+]
\ No newline at end of file
diff --git a/src/countryCodes.pt-BR.json b/src/countryCodes.pt-BR.json
new file mode 100644
index 0000000..40cf9c7
--- /dev/null
+++ b/src/countryCodes.pt-BR.json
@@ -0,0 +1,962 @@
+[
+    {
+        "value": 93,
+        "label": "Afeganistão (+93)"
+    },
+    {
+        "value": 355,
+        "label": "Albânia (+355)"
+    },
+    {
+        "value": 213,
+        "label": "Argélia (+213)"
+    },
+    {
+        "value": 1,
+        "label": "Samoa Americana (+1)"
+    },
+    {
+        "value": 376,
+        "label": "Andorra (+376)"
+    },
+    {
+        "value": 244,
+        "label": "Angola (+244)"
+    },
+    {
+        "value": 1,
+        "label": "Anguilla (+1)"
+    },
+    {
+        "value": 672,
+        "label": "Antártica (+672)"
+    },
+    {
+        "value": 1,
+        "label": "Antígua e Barbuda (+1)"
+    },
+    {
+        "value": 54,
+        "label": "Argentina (+54)"
+    },
+    {
+        "value": 374,
+        "label": "Armênia (+374)"
+    },
+    {
+        "value": 297,
+        "label": "Aruba (+297)"
+    },
+    {
+        "value": 61,
+        "label": "Austrália (+61)"
+    },
+    {
+        "value": 43,
+        "label": "Áustria (+43)"
+    },
+    {
+        "value": 994,
+        "label": "Azerbaijão (+994)"
+    },
+    {
+        "value": 1,
+        "label": "Bahamas (+1)"
+    },
+    {
+        "value": 973,
+        "label": "Bahrein (+973)"
+    },
+    {
+        "value": 880,
+        "label": "Bangladesh (+880)"
+    },
+    {
+        "value": 1,
+        "label": "Barbados (+1)"
+    },
+    {
+        "value": 375,
+        "label": "Belarus (+375)"
+    },
+    {
+        "value": 32,
+        "label": "Bélgica (+32)"
+    },
+    {
+        "value": 501,
+        "label": "Belize (+501)"
+    },
+    {
+        "value": 229,
+        "label": "Benin (+229)"
+    },
+    {
+        "value": 1,
+        "label": "Bermudas (+1)"
+    },
+    {
+        "value": 975,
+        "label": "Butão (+975)"
+    },
+    {
+        "value": 591,
+        "label": "Bolívia (+591)"
+    },
+    {
+        "value": 387,
+        "label": "Bosnia and Herzegovina (+387)"
+    },
+    {
+        "value": 267,
+        "label": "Botsuana (+267)"
+    },
+    {
+        "value": 55,
+        "label": "Brasil (+55)"
+    },
+    {
+        "value": 246,
+        "label": "British Indian Ocean Territory (+246)"
+    },
+    {
+        "value": 1,
+        "label": "Ilhas Virgens Britânicas (+1)"
+    },
+    {
+        "value": 673,
+        "label": "Brunei (+673)"
+    },
+    {
+        "value": 359,
+        "label": "Bulgária (+359)"
+    },
+    {
+        "value": 226,
+        "label": "Burkina Faso (+226)"
+    },
+    {
+        "value": 257,
+        "label": "Burundi (+257)"
+    },
+    {
+        "value": 855,
+        "label": "Camboja (+855)"
+    },
+    {
+        "value": 237,
+        "label": "Camarões (+237)"
+    },
+    {
+        "value": 1,
+        "label": "Canada (+1)"
+    },
+    {
+        "value": 238,
+        "label": "Cabo Verde (+238)"
+    },
+    {
+        "value": 1,
+        "label": "Ilhas Cayman (+1)"
+    },
+    {
+        "value": 236,
+        "label": "República Centro-Africana (+236)"
+    },
+    {
+        "value": 235,
+        "label": "Chad (+235)"
+    },
+    {
+        "value": 56,
+        "label": "Chile (+56)"
+    },
+    {
+        "value": 86,
+        "label": "China (+86)"
+    },
+    {
+        "value": 61,
+        "label": "Ilha de Natal (+61)"
+    },
+    {
+        "value": 61,
+        "label": "Ilhas Cocos (+61)"
+    },
+    {
+        "value": 57,
+        "label": "Colômbia (+57)"
+    },
+    {
+        "value": 269,
+        "label": "Comores (+269)"
+    },
+    {
+        "value": 682,
+        "label": "Ilhas Cook (+682)"
+    },
+    {
+        "value": 506,
+        "label": "Costa Rica (+506)"
+    },
+    {
+        "value": 385,
+        "label": "Croácia (+385)"
+    },
+    {
+        "value": 53,
+        "label": "Cuba (+53)"
+    },
+    {
+        "value": 599,
+        "label": "Curaçao (+599)"
+    },
+    {
+        "value": 357,
+        "label": "Chipre (+357)"
+    },
+    {
+        "value": 420,
+        "label": "República Tcheca (+420)"
+    },
+    {
+        "value": 243,
+        "label": "República Democrática do Congo (+243)"
+    },
+    {
+        "value": 45,
+        "label": "Dinamarca (+45)"
+    },
+    {
+        "value": 253,
+        "label": "Djibouti (+253)"
+    },
+    {
+        "value": 1,
+        "label": "Dominica (+1)"
+    },
+    {
+        "value": 1,
+        "label": "República Dominicana (+1)"
+    },
+    {
+        "value": 670,
+        "label": "Timor Leste (+670)"
+    },
+    {
+        "value": 593,
+        "label": "Equador (+593)"
+    },
+    {
+        "value": 20,
+        "label": "Egito (+20)"
+    },
+    {
+        "value": 503,
+        "label": "El Salvador (+503)"
+    },
+    {
+        "value": 240,
+        "label": "Guiné Equatorial (+240)"
+    },
+    {
+        "value": 291,
+        "label": "Eritreia (+291)"
+    },
+    {
+        "value": 372,
+        "label": "Estônia (+372)"
+    },
+    {
+        "value": 251,
+        "label": "Etiópia (+251)"
+    },
+    {
+        "value": 500,
+        "label": "Falkland Islands (+500)"
+    },
+    {
+        "value": 298,
+        "label": "Ilhas Faroe (+298)"
+    },
+    {
+        "value": 679,
+        "label": "Fiji (+679)"
+    },
+    {
+        "value": 358,
+        "label": "Finlândia (+358)"
+    },
+    {
+        "value": 33,
+        "label": "França (+33)"
+    },
+    {
+        "value": 689,
+        "label": "Polinésia Francesa (+689)"
+    },
+    {
+        "value": 241,
+        "label": "Gabão (+241)"
+    },
+    {
+        "value": 220,
+        "label": "Gâmbia (+220)"
+    },
+    {
+        "value": 995,
+        "label": "Georgia (+995)"
+    },
+    {
+        "value": 49,
+        "label": "Alemanha (+49)"
+    },
+    {
+        "value": 233,
+        "label": "Ghana (+233)"
+    },
+    {
+        "value": 350,
+        "label": "Gibraltar (+350)"
+    },
+    {
+        "value": 30,
+        "label": "Grécia (+30)"
+    },
+    {
+        "value": 299,
+        "label": "Gronelândia (+299)"
+    },
+    {
+        "value": 1,
+        "label": "Grenada (+1)"
+    },
+    {
+        "value": 1,
+        "label": "Guam (+1)"
+    },
+    {
+        "value": 502,
+        "label": "Guatemala (+502)"
+    },
+    {
+        "value": 44,
+        "label": "Guernsey (+44)"
+    },
+    {
+        "value": 224,
+        "label": "Guiné (+224)"
+    },
+    {
+        "value": 245,
+        "label": "Guiné-Bissau (+245)"
+    },
+    {
+        "value": 592,
+        "label": "Guyana (+592)"
+    },
+    {
+        "value": 509,
+        "label": "Haiti (+509)"
+    },
+    {
+        "value": 504,
+        "label": "Honduras (+504)"
+    },
+    {
+        "value": 852,
+        "label": "Hong Kong (+852)"
+    },
+    {
+        "value": 36,
+        "label": "Hungria (+36)"
+    },
+    {
+        "value": 354,
+        "label": "Islândia (+354)"
+    },
+    {
+        "value": 91,
+        "label": "Índia (+91)"
+    },
+    {
+        "value": 62,
+        "label": "Indonesia (+62)"
+    },
+    {
+        "value": 98,
+        "label": "Irã (+98)"
+    },
+    {
+        "value": 964,
+        "label": "Iraque (+964)"
+    },
+    {
+        "value": 353,
+        "label": "Ireland (+353)"
+    },
+    {
+        "value": 44,
+        "label": "Isle of Man (+44)"
+    },
+    {
+        "value": 972,
+        "label": "Israel (+972)"
+    },
+    {
+        "value": 39,
+        "label": "Itália (+39)"
+    },
+    {
+        "value": 225,
+        "label": "Costa do Marfim (+225)"
+    },
+    {
+        "value": 1,
+        "label": "Jamaica (+1)"
+    },
+    {
+        "value": 81,
+        "label": "Japão (+81)"
+    },
+    {
+        "value": 44,
+        "label": "Jersey (+44)"
+    },
+    {
+        "value": 962,
+        "label": "Jordan (+962)"
+    },
+    {
+        "value": 7,
+        "label": "Cazaquistão (+7)"
+    },
+    {
+        "value": 254,
+        "label": "Quênia (+254)"
+    },
+    {
+        "value": 686,
+        "label": "Kiribati (+686)"
+    },
+    {
+        "value": 383,
+        "label": "Kosovo (+383)"
+    },
+    {
+        "value": 965,
+        "label": "Kuwait (+965)"
+    },
+    {
+        "value": 996,
+        "label": "Quirguistão (+996)"
+    },
+    {
+        "value": 856,
+        "label": "Laos (+856)"
+    },
+    {
+        "value": 371,
+        "label": "Latvia (+371)"
+    },
+    {
+        "value": 961,
+        "label": "Líbano (+961)"
+    },
+    {
+        "value": 266,
+        "label": "Lesotho (+266)"
+    },
+    {
+        "value": 231,
+        "label": "Libéria (+231)"
+    },
+    {
+        "value": 218,
+        "label": "Líbia (+218)"
+    },
+    {
+        "value": 423,
+        "label": "Liechtenstein (+423)"
+    },
+    {
+        "value": 370,
+        "label": "Lituânia (+370)"
+    },
+    {
+        "value": 352,
+        "label": "Luxemburgo (+352)"
+    },
+    {
+        "value": 853,
+        "label": "Macau (+853)"
+    },
+    {
+        "value": 389,
+        "label": "Macedônia (+389)"
+    },
+    {
+        "value": 261,
+        "label": "Madagascar (+261)"
+    },
+    {
+        "value": 265,
+        "label": "Malawi (+265)"
+    },
+    {
+        "value": 60,
+        "label": "Malásia (+60)"
+    },
+    {
+        "value": 960,
+        "label": "Maldivas (+960)"
+    },
+    {
+        "value": 223,
+        "label": "Mali (+223)"
+    },
+    {
+        "value": 356,
+        "label": "Malta (+356)"
+    },
+    {
+        "value": 692,
+        "label": "Marshall Islands (+692)"
+    },
+    {
+        "value": 222,
+        "label": "Mauritânia (+222)"
+    },
+    {
+        "value": 230,
+        "label": "Mauritius (+230)"
+    },
+    {
+        "value": 262,
+        "label": "Mayotte (+262)"
+    },
+    {
+        "value": 52,
+        "label": "México (+52)"
+    },
+    {
+        "value": 691,
+        "label": "Micronésia (+691)"
+    },
+    {
+        "value": 373,
+        "label": "Moldova (+373)"
+    },
+    {
+        "value": 377,
+        "label": "Mônaco (+377)"
+    },
+    {
+        "value": 976,
+        "label": "Mongólia (+976)"
+    },
+    {
+        "value": 382,
+        "label": "Montenegro (+382)"
+    },
+    {
+        "value": 1,
+        "label": "Montserrat (+1)"
+    },
+    {
+        "value": 212,
+        "label": "Marrocos (+212)"
+    },
+    {
+        "value": 258,
+        "label": "Moçambique (+258)"
+    },
+    {
+        "value": 95,
+        "label": "Myanmar (+95)"
+    },
+    {
+        "value": 264,
+        "label": "Namíbia (+264)"
+    },
+    {
+        "value": 674,
+        "label": "Nauru (+674)"
+    },
+    {
+        "value": 977,
+        "label": "Nepal (+977)"
+    },
+    {
+        "value": 31,
+        "label": "Netherlands (+31)"
+    },
+    {
+        "value": 599,
+        "label": "Antilhas Holandesas (+599)"
+    },
+    {
+        "value": 687,
+        "label": "Nova Caledônia (+687)"
+    },
+    {
+        "value": 64,
+        "label": "Nova Zelândia (+64)"
+    },
+    {
+        "value": 505,
+        "label": "Nicarágua (+505)"
+    },
+    {
+        "value": 227,
+        "label": "Níger (+227)"
+    },
+    {
+        "value": 234,
+        "label": "Nigeria (+234)"
+    },
+    {
+        "value": 683,
+        "label": "Niue (+683)"
+    },
+    {
+        "value": 850,
+        "label": "Coréia do Norte (+850)"
+    },
+    {
+        "value": 1,
+        "label": "Ilhas Marianas do Norte (+1)"
+    },
+    {
+        "value": 47,
+        "label": "Norway (+47)"
+    },
+    {
+        "value": 968,
+        "label": "Omã (+968)"
+    },
+    {
+        "value": 92,
+        "label": "Paquistão (+92)"
+    },
+    {
+        "value": 680,
+        "label": "Palau (+680)"
+    },
+    {
+        "value": 970,
+        "label": "Palestina (+970)"
+    },
+    {
+        "value": 507,
+        "label": "Panamá (+507)"
+    },
+    {
+        "value": 675,
+        "label": "Papua Nova Guiné (+675)"
+    },
+    {
+        "value": 595,
+        "label": "Paraguai (+595)"
+    },
+    {
+        "value": 51,
+        "label": "Peru (+51)"
+    },
+    {
+        "value": 63,
+        "label": "Filipinas (+63)"
+    },
+    {
+        "value": 64,
+        "label": "Pitcairn (+64)"
+    },
+    {
+        "value": 48,
+        "label": "Polônia (+48)"
+    },
+    {
+        "value": 351,
+        "label": "Portugal (+351)"
+    },
+    {
+        "value": 1,
+        "label": "Porto Rico (+1)"
+    },
+    {
+        "value": 974,
+        "label": "Qatar (+974)"
+    },
+    {
+        "value": 242,
+        "label": "República do Congo (+242)"
+    },
+    {
+        "value": 262,
+        "label": "Reunião (+262)"
+    },
+    {
+        "value": 40,
+        "label": "Romênia (+40)"
+    },
+    {
+        "value": 7,
+        "label": "Rússia (+7)"
+    },
+    {
+        "value": 250,
+        "label": "Ruanda (+250)"
+    },
+    {
+        "value": 590,
+        "label": "Saint Barthelemy (+590)"
+    },
+    {
+        "value": 290,
+        "label": "Santa Helena (+290)"
+    },
+    {
+        "value": 1,
+        "label": "Saint Kitts e Nevis (+1)"
+    },
+    {
+        "value": 1,
+        "label": "Santa Lúcia (+1)"
+    },
+    {
+        "value": 590,
+        "label": "Saint Martin (+590)"
+    },
+    {
+        "value": 508,
+        "label": "Saint Pierre e Miquelon (+508)"
+    },
+    {
+        "value": 1,
+        "label": "São Vicente e as Granadinas (+1)"
+    },
+    {
+        "value": 685,
+        "label": "Samoa (+685)"
+    },
+    {
+        "value": 378,
+        "label": "San Marino (+378)"
+    },
+    {
+        "value": 239,
+        "label": "São Tomé e Príncipe (+239)"
+    },
+    {
+        "value": 966,
+        "label": "Arábia Saudita (+966)"
+    },
+    {
+        "value": 221,
+        "label": "Senegal (+221)"
+    },
+    {
+        "value": 381,
+        "label": "Sérvia (+381)"
+    },
+    {
+        "value": 248,
+        "label": "Seychelles (+248)"
+    },
+    {
+        "value": 232,
+        "label": "Serra Leoa (+232)"
+    },
+    {
+        "value": 65,
+        "label": "Singapura (+65)"
+    },
+    {
+        "value": 1,
+        "label": "Sint Maarten (+1)"
+    },
+    {
+        "value": 421,
+        "label": "Eslováquia (+421)"
+    },
+    {
+        "value": 386,
+        "label": "Eslovênia (+386)"
+    },
+    {
+        "value": 677,
+        "label": "Ilhas Salomão (+677)"
+    },
+    {
+        "value": 252,
+        "label": "Somália (+252)"
+    },
+    {
+        "value": 27,
+        "label": "África do Sul (+27)"
+    },
+    {
+        "value": 82,
+        "label": "Coréia do Sul (+82)"
+    },
+    {
+        "value": 211,
+        "label": "Sul do Sudão (+211)"
+    },
+    {
+        "value": 34,
+        "label": "Espanha (+34)"
+    },
+    {
+        "value": 94,
+        "label": "Sri Lanka (+94)"
+    },
+    {
+        "value": 249,
+        "label": "Sudão (+249)"
+    },
+    {
+        "value": 597,
+        "label": "Suriname (+597)"
+    },
+    {
+        "value": 47,
+        "label": "Svalbard e Jan Mayen (+47)"
+    },
+    {
+        "value": 268,
+        "label": "Swazilândia (+268)"
+    },
+    {
+        "value": 46,
+        "label": "Suécia (+46)"
+    },
+    {
+        "value": 41,
+        "label": "Switzerland (+41)"
+    },
+    {
+        "value": 963,
+        "label": "Syria (+963)"
+    },
+    {
+        "value": 886,
+        "label": "Taiwan (+886)"
+    },
+    {
+        "value": 992,
+        "label": "Tajiquistão (+992)"
+    },
+    {
+        "value": 255,
+        "label": "Tanzânia (+255)"
+    },
+    {
+        "value": 66,
+        "label": "Tailândia (+66)"
+    },
+    {
+        "value": 228,
+        "label": "Togo (+228)"
+    },
+    {
+        "value": 690,
+        "label": "Tokelau (+690)"
+    },
+    {
+        "value": 676,
+        "label": "Tonga (+676)"
+    },
+    {
+        "value": 1,
+        "label": "Trinidad e Tobago (+1)"
+    },
+    {
+        "value": 216,
+        "label": "Tunísia (+216)"
+    },
+    {
+        "value": 90,
+        "label": "Turquia (+90)"
+    },
+    {
+        "value": 993,
+        "label": "Turcomenistão (+993)"
+    },
+    {
+        "value": 1,
+        "label": "Ilhas Turcas e Caicos (+1)"
+    },
+    {
+        "value": 688,
+        "label": "Tuvalu (+688)"
+    },
+    {
+        "value": 1,
+        "label": "U.S. Virgin Islands (+1)"
+    },
+    {
+        "value": 256,
+        "label": "Uganda (+256)"
+    },
+    {
+        "value": 380,
+        "label": "Ucrânia (+380)"
+    },
+    {
+        "value": 971,
+        "label": "Emirados Árabes Unidos (+971)"
+    },
+    {
+        "value": 44,
+        "label": "Reino Unido (+44)"
+    },
+    {
+        "value": 1,
+        "label": "Estados Unidos (+1)"
+    },
+    {
+        "value": 598,
+        "label": "Uruguai (+598)"
+    },
+    {
+        "value": 998,
+        "label": "Uzbequistão (+998)"
+    },
+    {
+        "value": 678,
+        "label": "Vanuatu (+678)"
+    },
+    {
+        "value": 379,
+        "label": "Vaticano (+379)"
+    },
+    {
+        "value": 58,
+        "label": "Venezuela (+58)"
+    },
+    {
+        "value": 84,
+        "label": "Vietnã (+84)"
+    },
+    {
+        "value": 681,
+        "label": "Wallis e Futuna (+681)"
+    },
+    {
+        "value": 212,
+        "label": "Sahara Ocidental (+212)"
+    },
+    {
+        "value": 967,
+        "label": "Iêmen (+967)"
+    },
+    {
+        "value": 260,
+        "label": "Zambia (+260)"
+    },
+    {
+        "value": 263,
+        "label": "Zimbabwe (+263)"
+    }
+]
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 796882a..e1ba548 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+@keyframes progressBar {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.progress-bar {
+  background: linear-gradient(270deg, #1e3a8a, #3b82f6, #9333ea);
+  background-size: 200% 200%;
+}
+
+.progress-bar-animated {
+  animation: progressBar 2s ease infinite;
+}
diff --git a/src/options.tsx b/src/options.tsx
index 193fdb9..2de0ccd 100644
--- a/src/options.tsx
+++ b/src/options.tsx
@@ -1,24 +1,25 @@
 import React, { Component } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
-import LogTable from './components/LogTable';
-import MessageButtonsForm from './components/MessageButtonsForm';
-import MessageForm from './components/MessageForm';
+import LogTable from './components/organisms/LogTable';
+import MessageButtonsForm from './components/organisms/MessageButtonsForm';
+import MessageForm from './components/organisms/MessageForm';
 
 class Options extends Component<{}, {}>{
 
-  componentDidMount(): void {
+  componentDidMount() {
     const body = document.querySelector('body');
     if (!body) return;
     body.classList.add('bg-gray-100');
+    body.classList.add('dark:bg-gray-900');
     body.style.minWidth = '48rem';
   }
 
   render() {
     return <>
-      <MessageForm />
-      <MessageButtonsForm />
-      <LogTable />
+      <MessageForm className="my-10" />
+      <MessageButtonsForm className="my-10" />
+      <LogTable className="my-10" />
     </>;
   }
 }
diff --git a/src/popup.tsx b/src/popup.tsx
index 6996f9c..838396e 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,40 +1,70 @@
 import React, { ChangeEvent, Component, FormEvent, MouseEvent } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
-import type { MessageButtonsTypes } from '@wppconnect/wa-js/dist/chat/functions/prepareMessageButtons';
-import type { Message } from './types/Message';
-import type { Attachment } from './types/Attachment';
+import Button from './components/atoms/Button';
+import { ControlTextArea } from './components/atoms/ControlFactory';
+import Box from './components/molecules/Box';
+import QueueStatus from './types/QueueStatus';
+import AsyncChromeMessageManager from './utils/AsyncChromeMessageManager';
+import { ChromeMessageTypes } from './types/ChromeMessageTypes';
 
-class Popup extends Component<{}, { contacts: string }> {
+const PopupMessageManager = new AsyncChromeMessageManager('popup');
+
+class Popup extends Component<{}, { contacts: string, duplicatedContacts: number, status?: QueueStatus, confirmed: boolean }> {
   constructor(props: {}) {
     super(props);
     this.state = {
-      contacts: ''
+      contacts: '',
+      duplicatedContacts: 0,
+      status: undefined,
+      confirmed: true,
     };
   }
 
+  queueStatusListener = 0;
+
+  componentDidMount() {
+    const body = document.querySelector('body');
+    if (!body) return;
+    body.classList.add('bg-gray-100');
+    body.classList.add('dark:bg-gray-900');
+
+    this.updateStatus();
+    this.queueStatusListener = window.setInterval(this.updateStatus, 100);
+  }
+
+  updateStatus = () => {
+    PopupMessageManager.sendMessage(ChromeMessageTypes.QUEUE_STATUS, undefined).then((status) => {
+      this.setState({ status });
+    });
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.queueStatusListener);
+  }
+
+  componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<{ contacts: string, status?: QueueStatus, confirmed: boolean }>, snapshot?: any) {
+    if (!prevState.status?.isProcessing && this.state.status?.isProcessing) {
+      this.setState({ confirmed: false });
+    }
+  }
+
   handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     this.setState({ contacts: event.target.value.replace(/[^\d\n\t,;]*/g, '') });
   }
 
-  parseContacts = () => {
-    const contacts = this.state.contacts.split(/[\n\t,;]/).map(s => s.trim().replace(/[\D]*/g, ''));
+  parseContacts = (prefix: number) => {
+    const prefixToString = (prefix === 0 ? '' : prefix).toString();
+    const contactList = this.state.contacts.split(/[\n\t,;]/).filter(str => str.trim() !== '');
+    const pristinedContactsWithPrefix = contactList.map(s => prefixToString.concat(s.trim().replace(/[\D]*/g, '')));
 
-    return contacts.filter((contact: string, index: number) => {
-      const result = contacts.indexOf(contact) === index;
+    this.setState({ duplicatedContacts: 0 });
+
+    return pristinedContactsWithPrefix.filter((contact: string, index: number) => {
+      const result = pristinedContactsWithPrefix.indexOf(contact) === index;
       if (!result) {
-        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
-          const tabId = tabs[0].id;
-          if (tabId) {
-            chrome.scripting.executeScript({
-              target: { tabId: tabId },
-              func: function (message: object) {
-                window.postMessage(message);
-              },
-              args: [{ type: 'LOG', level: 2, message: 'Número duplicado.', attachment: false, contact }]
-            });
-          }
-        });
+        this.setState(prevState => ({ duplicatedContacts: prevState.duplicatedContacts + 1 }));
+        PopupMessageManager.sendMessage(ChromeMessageTypes.ADD_LOG, { level: 2, message: 'Número duplicado.', attachment: false, contact });
       }
 
       return result;
@@ -42,28 +72,11 @@ class Popup extends Component<{}, { contacts: string }> {
   }
 
   handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    this.parseContacts().forEach(contact => {
-      chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
-        const tabId = tabs[0].id;
-        if (tabId) {
-          chrome.storage.local.get({ message: 'Enviado por WTF', attachment: null, buttons: [] }, data => {
-            chrome.scripting.executeScript({
-              target: { tabId: tabId },
-              func: function (contact: string, message: string, attachment: Attachment, buttons?: MessageButtonsTypes[]) {
-                window.dispatchEvent(new CustomEvent<Message>('sendMessage', {
-                  detail: {
-                    contact,
-                    message,
-                    attachment,
-                    buttons
-                  }
-                }));
-              },
-              args: [contact, data.message, data.attachment, data.buttons]
-            });
-          });
-        }
-      });
+    chrome.storage.local.get({ message: 'Enviado por WTF', attachment: null, buttons: [], delay: 0, prefix: 55 }, async data => {
+      let i = 0;
+      for (const contact of this.parseContacts(data.prefix)) {
+        PopupMessageManager.sendMessage(ChromeMessageTypes.SEND_MESSAGE, { contact, message: data.message, attachment: data.attachment, buttons: data.buttons, delay: data.delay });
+      }
     });
     event.preventDefault();
   }
@@ -76,33 +89,73 @@ class Popup extends Component<{}, { contacts: string }> {
     }
   }
 
+  formatTime = (milliseconds: number) => {
+    const hours = Math.floor(milliseconds / 3600000);
+    const minutes = Math.floor((milliseconds % 3600000) / 60000);
+    const seconds = (milliseconds / 1000).toFixed(2);
+
+    const hoursString = hours > 0 ? `${hours}h ` : '';
+    const minutesString = minutes > 0 ? `${minutes}m ` : '';
+
+    return `${hoursString}${minutesString}${seconds}s`;
+  };
+
+
   render() {
-    return <form onSubmit={this.handleSubmit}>
-      <div className="container mx-auto p-6 flex flex-col bg-gray-100 w-96 h-96">
-        <textarea
-          className="w-full flex-auto mb-4 border border-gray-300 p-1 rounded-lg focus:ring focus:ring-blue-500 focus:outline-none focus:shadow-outline"
-          value={this.state.contacts}
-          onChange={this.handleChange}
-          placeholder="Adicione a lista de números para o envio das mensagens, separados por vírgula ou cada número em uma nova linha."
-          required
-        />
-        <div className="flex justify-between items-center">
-          <button
-            className="px-4 py-2 rounded-md bg-blue-500 text-white hover:bg-white hover:text-blue-500 hover:border hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            type="submit"
-          >
-            Enviar
-          </button>
-          <button
-            className="px-4 py-2 rounded-md text-blue-500 border border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-            type="button"
-            onClick={this.handleOptions}
-          >
-            Opções
-          </button>
+    return <>
+      {!this.state.confirmed && <Box
+        className="w-96 h-96"
+        title={this.state.status?.isProcessing ? 'Enviando mensagens...' : ''}
+        footer={this.state.status?.isProcessing ?
+          <Button variant="danger" onClick={() => PopupMessageManager.sendMessage(ChromeMessageTypes.STOP_QUEUE, undefined)}>Cancelar</Button>
+          : <Button variant="primary" onClick={() => this.setState({ confirmed: true })}>Ok</Button>}>
+        <div className="grid grid-cols-2 gap-4 p-4">
+          <div>Tempo:</div>
+          <div>{this.formatTime(this.state.status?.elapsedTime || 0)}</div>
+          {this.state.status?.sendingMessage && <div className="col-span-2">Enviando...</div>}
+          {this.state.status?.waiting && <div>Aguardando:</div>}
+          {this.state.status?.waiting && <div>{this.formatTime(this.state.status.waiting)}</div>}
+          <div>Enviadas:</div>
+          <div>{this.state.status?.processedItems}</div>
+          <div>{this.state.status?.isProcessing ? 'Restantes' : 'Não entregues'}:</div>
+          <div>{this.state.status?.remainingItems}</div>
+          <div>Duplicados:</div>
+          <div>{this.state.duplicatedContacts}</div>
+          {this.state.status && <div className="w-full h-4 bg-gray-300 dark:bg-gray-600 rounded relative col-span-2 self-end">
+            <div
+              className={`h-4 rounded progress-bar${this.state.status?.isProcessing ? ' progress-bar-animated' : ''}`}
+              style={{ width: `${(this.state.status?.processedItems / (this.state.status?.processedItems + this.state.status?.remainingItems)) * 100}%` }}
+            ></div>
+            <div className="absolute inset-0 flex items-center justify-center">
+              <span className="text-xs font-semibold">
+                {Math.round((this.state.status?.processedItems / (this.state.status?.processedItems + this.state.status?.remainingItems)) * 100)}%
+              </span>
+            </div>
+          </div>}
         </div>
-      </div>
-    </form>;
+      </Box>}
+      {this.state.confirmed && <form onSubmit={this.handleSubmit}>
+        <Box className="w-96 h-96" bodyClassName="p-4" footer="Não se esqueça de adicionar o prefixo DDD da região de cada contato.">
+          <ControlTextArea
+            className="flex-auto"
+            value={this.state.contacts}
+            onChange={this.handleChange}
+            placeholder="Adicione a lista de números para o envio das mensagens, separados por vírgula ou cada número em uma nova linha."
+            required
+          />
+          <div className="flex justify-between items-center">
+            <Button variant="primary" type="submit">Enviar</Button>
+            <Button
+              variant="secondary"
+              type="button"
+              onClick={this.handleOptions}
+            >
+              Opções
+            </Button>
+          </div>
+        </Box>
+      </form>}
+    </>;
   }
 }
 
diff --git a/src/types/Attachment.d.ts b/src/types/Attachment.ts
similarity index 100%
rename from src/types/Attachment.d.ts
rename to src/types/Attachment.ts
diff --git a/src/types/ChromeMessageContentTypes.ts b/src/types/ChromeMessageContentTypes.ts
new file mode 100644
index 0000000..76d62df
--- /dev/null
+++ b/src/types/ChromeMessageContentTypes.ts
@@ -0,0 +1,31 @@
+import Log from "./Log";
+import { Message } from "./Message";
+import QueueStatus from "./QueueStatus";
+import { ChromeMessageTypes } from "./ChromeMessageTypes";
+
+export default interface ChromeMessageContentTypes {
+  [ChromeMessageTypes.QUEUE_STATUS]: {
+    payload: undefined;
+    response: QueueStatus;
+  };
+  [ChromeMessageTypes.SEND_MESSAGE]: {
+    payload: Message;
+    response: boolean;
+  };
+  [ChromeMessageTypes.ADD_LOG]: {
+    payload: Log;
+    response: boolean;
+  };
+  [ChromeMessageTypes.PAUSE_QUEUE]: {
+    payload: undefined;
+    response: boolean;
+  };
+  [ChromeMessageTypes.RESUME_QUEUE]: {
+    payload: undefined;
+    response: boolean;
+  };
+  [ChromeMessageTypes.STOP_QUEUE]: {
+    payload: undefined;
+    response: boolean;
+  };
+}
diff --git a/src/types/ChromeMessageTypes.ts b/src/types/ChromeMessageTypes.ts
new file mode 100644
index 0000000..b57f64b
--- /dev/null
+++ b/src/types/ChromeMessageTypes.ts
@@ -0,0 +1,9 @@
+export enum ChromeMessageTypes {
+  QUEUE_STATUS = "QUEUE_STATUS",
+  SEND_MESSAGE = "SEND_MESSAGE",
+  PAUSE_QUEUE = "PAUSE_QUEUE",
+  RESUME_QUEUE = "RESUME_QUEUE",
+  STOP_QUEUE = "STOP_QUEUE",
+  ADD_LOG = "ADD_LOG",
+}
+
diff --git a/src/types/Log.ts b/src/types/Log.ts
new file mode 100644
index 0000000..bc7f39d
--- /dev/null
+++ b/src/types/Log.ts
@@ -0,0 +1,7 @@
+export default interface Log {
+    level: number;
+    message: string;
+    attachment: boolean;
+    contact: string;
+    date?: string;
+}
\ No newline at end of file
diff --git a/src/types/Message.d.ts b/src/types/Message.ts
similarity index 79%
rename from src/types/Message.d.ts
rename to src/types/Message.ts
index 2b45c42..521208d 100644
--- a/src/types/Message.d.ts
+++ b/src/types/Message.ts
@@ -5,5 +5,6 @@ export type Message = {
     contact: string,
     message: string,
     attachment: Attachment,
-    buttons?: MessageButtonsTypes[]
+    buttons: MessageButtonsTypes[],
+    delay?: number
 }
\ No newline at end of file
diff --git a/src/types/QueueStatus.ts b/src/types/QueueStatus.ts
new file mode 100644
index 0000000..a746961
--- /dev/null
+++ b/src/types/QueueStatus.ts
@@ -0,0 +1,13 @@
+export default interface QueueStatus {
+    isProcessing: boolean;
+    totalItems: number;
+    processedItems: number;
+    remainingItems: number;
+    elapsedTime: number;
+    sendingMessage: number | false;
+    waiting: number | false;
+    items: {
+        detail: any;
+        elapsedTime: number;
+    }[];
+}
\ No newline at end of file
diff --git a/src/utils/AsyncChromeMessageManager.ts b/src/utils/AsyncChromeMessageManager.ts
new file mode 100644
index 0000000..74253e7
--- /dev/null
+++ b/src/utils/AsyncChromeMessageManager.ts
@@ -0,0 +1,133 @@
+import ChromeMessageContentTypes from "types/ChromeMessageContentTypes";
+
+type MessageData<K extends keyof ChromeMessageContentTypes> = {
+  type: K;
+  payload: ChromeMessageContentTypes[K]["payload"];
+};
+
+type MessageDataResponse<K extends keyof ChromeMessageContentTypes> = {
+  type: `${K}_RESPONSE`;
+  payload: ChromeMessageContentTypes[K]["response"];
+};
+
+type MessageHandler<K extends keyof ChromeMessageContentTypes> = (
+  payload: ChromeMessageContentTypes[K]["payload"]
+) => Promise<ChromeMessageContentTypes[K]["response"]>;
+
+export default class AsyncChromeMessageManager {
+  constructor(private source: "popup" | "contentScript" | "webpage") {
+    if (this.source === "contentScript") {
+      this.forwardMessagesFromWebpageToPopup();
+      this.forwardResponsesFromPopupToWebpage();
+    }
+  }
+
+  private forwardMessagesFromWebpageToPopup() {
+    window.addEventListener("message", (event) => {
+      if (event.source === window && event.origin === window.location.origin) {
+        chrome.runtime.sendMessage(event.data);
+      }
+    });
+  }
+
+  private forwardResponsesFromPopupToWebpage() {
+    chrome.runtime.onMessage.addListener((message) => {
+      window.postMessage(message, window.location.origin);
+    });
+  }
+
+  public addHandler<K extends keyof ChromeMessageContentTypes>(type: K, handler: MessageHandler<K>) {
+    try {
+      if (this.source !== "webpage") {
+        this.addExtensionMessageHandler(type, handler);
+      }
+      if (this.source !== "popup") {
+        this.addWebpageMessageHandler(type, handler);
+      }
+    } catch (error) {
+      console.error('WTF.AsyncChromeMessageManager.addHandler', error);
+    }
+  }
+
+  private addWebpageMessageHandler<K extends keyof ChromeMessageContentTypes>(type: K, handler: MessageHandler<K>) {
+    window.addEventListener("message", (event) => {
+      if (event.source === window && event.origin === window.location.origin && event.data.type === type) {
+        handler(event.data.payload).then((response) => {
+          window.postMessage({ type: `${type}_RESPONSE`, payload: response }, window.location.origin);
+        }).catch((error) => {
+          console.error(`WTF.AsyncChromeMessageManager.addWebpageMessageHandler ${type}_RESPONSE`, error);
+        });
+      }
+    });
+  }
+
+  private addExtensionMessageHandler<K extends keyof ChromeMessageContentTypes>(type: K, handler: MessageHandler<K>) {
+    chrome.runtime.onMessage.addListener((message) => {
+      if (message.type === type) {
+        handler(message.payload).then((response) => {
+          chrome.runtime.sendMessage({ type: `${type}_RESPONSE`, payload: response });
+        }).catch((error) => {
+          console.error(`WTF.AsyncChromeMessageManager.addExtensionMessageHandler ${type}_RESPONSE`, error);
+        });
+      }
+    });
+  }
+
+  public async sendMessage<K extends keyof ChromeMessageContentTypes>(
+    type: K,
+    payload: ChromeMessageContentTypes[K]["payload"]
+  ): Promise<ChromeMessageContentTypes[K]["response"]> {
+    const message: MessageData<K> = { type, payload };
+
+    return new Promise((resolve, reject) => {
+      try {
+        const listener = (response: MessageDataResponse<K>) => {
+          if (response.type === `${type}_RESPONSE`) {
+            chrome.runtime.onMessage.removeListener(listener);
+            resolve(response.payload);
+          }
+        };
+
+        if (this.source !== "popup") {
+          this.sendWebpageMessage(message, listener);
+        }
+        if (this.source !== "webpage") {
+          this.sendExtensionMessage(message, listener);
+        }
+      } catch (error) {
+        console.error('WTF.AsyncChromeMessageManager.sendMessage', error)
+        reject(error);
+      }
+    });
+  }
+
+  private sendWebpageMessage<K extends keyof ChromeMessageContentTypes>(
+    message: MessageData<K>, listener: (response: MessageDataResponse<K>) => void
+  ) {
+    window.postMessage(message, window.location.origin);
+    const responseListener = (event: MessageEvent) => {
+      if (event.source === window && event.origin === window.location.origin) {
+        listener(event.data);
+        window.removeEventListener("message", responseListener);
+      }
+    };
+    window.addEventListener("message", responseListener);
+  }
+
+  private sendExtensionMessage<K extends keyof ChromeMessageContentTypes>(
+    message: MessageData<K>,
+    listener: (response: MessageDataResponse<K>) => void
+  ) {
+    chrome.runtime.onMessage.addListener(listener);
+
+    if (this.source === "popup") {
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0].id) {
+          chrome.tabs.sendMessage(tabs[0].id, message);
+        }
+      });
+    } else if (this.source === "contentScript") {
+      chrome.runtime.sendMessage(message);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/utils/AsyncEventQueue.ts b/src/utils/AsyncEventQueue.ts
new file mode 100644
index 0000000..45d770d
--- /dev/null
+++ b/src/utils/AsyncEventQueue.ts
@@ -0,0 +1,120 @@
+import type QueueStatus from '../types/QueueStatus';
+
+interface QueueItem<T = any> {
+    eventHandler: (detail: T) => Promise<void>;
+    detail: T;
+}
+
+class AsyncEventQueue {
+    private queue: QueueItem[] = [];
+    private isProcessing: boolean = false;
+    private startTime: number = 0;
+    private endTime: number = 0;
+    private processedItems: number = 0;
+    private remainingItems: number = 0;
+    private items: { detail: any; startTime: number; elapsedTime: number }[] = [];
+    private sendingMessage: number | false = false;
+    private waiting: number | false = false;
+    private aborted: boolean = false;
+    private paused: boolean = false;
+    private pausePromiseResolve: ((value?: unknown) => void) | null = () => { };
+
+    private async wait(ms: number) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    public async add<T extends { delay?: number; }>({ eventHandler, detail }: QueueItem<T>) {
+        this.queue.push({ eventHandler, detail });
+
+        if (!this.isProcessing) {
+            this.aborted = false;
+            this.isProcessing = true;
+            this.startTime = Date.now();
+            this.processedItems = 0;
+            this.items = [];
+
+            while (this.queue.length > 0) {
+                if (this.paused) {
+                    await new Promise(resolve => {
+                        this.pausePromiseResolve = resolve;
+                    });
+                }
+
+                if (this.aborted) {
+                    this.remainingItems = this.queue.length;
+                    this.queue = [];
+                    break;
+                }
+
+                const item = this.queue.shift();
+                if (item === undefined) continue;
+                this.processedItems++;
+                const startTime = Date.now();
+                this.sendingMessage = Date.now();
+                await item.eventHandler(item.detail);
+                this.sendingMessage = false;
+                const elapsedTime = Date.now() - startTime;
+                this.items.push({ detail: item.detail, startTime, elapsedTime });
+                if (item.detail.delay && this.queue.length !== 0) {
+                    this.waiting = Date.now();
+                    const waitStart = Date.now();
+                    const waitTarget = item.detail.delay * 1000;
+                    while (Date.now() - waitStart < waitTarget) {
+                        await this.wait(100);
+                        if (this.paused) {
+                            await new Promise(resolve => {
+                                this.pausePromiseResolve = resolve;
+                            });
+                        }
+
+                        if (this.aborted) {
+                            this.remainingItems = this.queue.length;
+                            this.queue = [];
+                            break;
+                        }
+                    }
+                    this.waiting = false;
+                }
+            }
+
+            this.endTime = Date.now();
+            this.isProcessing = false;
+        }
+    }
+
+    public pause() {
+        this.paused = true;
+    }
+
+    public resume() {
+        if (this.paused && this.pausePromiseResolve) {
+            this.paused = false;
+            this.pausePromiseResolve();
+            this.pausePromiseResolve = null;
+        }
+    }
+
+    public stop() {
+        this.aborted = true;
+        if (this.paused) {
+            this.resume();
+        }
+    }
+
+    public getStatus(): QueueStatus {
+        return {
+            elapsedTime: this.isProcessing ? Date.now() - this.startTime : this.endTime - this.startTime,
+            isProcessing: this.isProcessing,
+            items: this.items,
+            sendingMessage: this.sendingMessage === false ? this.sendingMessage : Date.now() - this.sendingMessage,
+            waiting: this.waiting === false ? this.waiting : Date.now() - this.waiting,
+            processedItems: this.processedItems,
+            remainingItems: this.aborted ? this.remainingItems : this.queue.length,
+            totalItems: this.processedItems + this.queue.length,
+        };
+    }
+}
+
+const asyncQueue = new AsyncEventQueue();
+
+export default asyncQueue;
\ No newline at end of file
diff --git a/src/wa-js.ts b/src/wa-js.ts
index 985bb86..f9f9048 100644
--- a/src/wa-js.ts
+++ b/src/wa-js.ts
@@ -1,89 +1,120 @@
 import * as WPP from '@wppconnect/wa-js';
 import type { Message } from './types/Message';
+import asyncQueue from './utils/AsyncEventQueue';
+import AsyncChromeMessageManager from './utils/AsyncChromeMessageManager';
+import { ChromeMessageTypes } from './types/ChromeMessageTypes';
 
-async function sendMessage({ contact, message = 'Enviado por WTF', attachment = null, buttons = [] }: Message) {
-    try {
-        contact = contact.replace(/[\D]*/g, '');
-        if (!WPP.conn.isAuthenticated()) {
-            const errorMsg = 'Conecte-se primeiro!';
-            window.postMessage({ type: 'LOG', level: 1, message: errorMsg, attachment: attachment != null, contact });
-            return alert(errorMsg);
-        }
-        let result: WPP.chat.SendMessageReturn = {
-            id: '',
-            ack: 0,
-            sendMsgResult: new Promise(resolve => resolve(WPP.whatsapp.enums.SendMsgResult.ERROR_UNKNOWN)),
-        };
-        if (attachment && buttons.length > 0) {
-            const response = await fetch(attachment.url.toString());
-            const data = await response.blob();
-            result = await WPP.chat.sendFileMessage(
-                contact,
-                new File([data], attachment.name, {
-                    type: attachment.type,
-                    lastModified: attachment.lastModified,
-                }),
-                {
-                    type: 'image',
-                    caption: message,
-                    createChat: true,
-                    waitForAck: true,
-                    buttons
-                }
-            );
-        } else if (buttons.length > 0) {
-            result = await WPP.chat.sendTextMessage(contact, message, {
+const WebpageMessageManager = new AsyncChromeMessageManager('webpage');
+
+async function sendWPPMessage({ contact, message, attachment, buttons }: Message) {
+    if (attachment && buttons.length > 0) {
+        const response = await fetch(attachment.url.toString());
+        const data = await response.blob();
+        return await WPP.chat.sendFileMessage(
+            contact,
+            new File([data], attachment.name, {
+                type: attachment.type,
+                lastModified: attachment.lastModified,
+            }),
+            {
+                type: 'image',
+                caption: message,
                 createChat: true,
                 waitForAck: true,
                 buttons
-            });
-        } else if (attachment) {
-            const response = await fetch(attachment.url.toString());
-            const data = await response.blob();
-            result = await WPP.chat.sendFileMessage(
-                contact,
-                new File([data], attachment.name, {
-                    type: attachment.type,
-                    lastModified: attachment.lastModified,
-                }),
-                {
-                    type: 'auto-detect',
-                    caption: message,
-                    createChat: true,
-                    waitForAck: true
-                }
-            );
-        } else {
-            result = await WPP.chat.sendTextMessage(contact, message, {
+            }
+        );
+    } else if (buttons.length > 0) {
+        return await WPP.chat.sendTextMessage(contact, message, {
+            createChat: true,
+            waitForAck: true,
+            buttons
+        });
+    } else if (attachment) {
+        const response = await fetch(attachment.url.toString());
+        const data = await response.blob();
+        return await WPP.chat.sendFileMessage(
+            contact,
+            new File([data], attachment.name, {
+                type: attachment.type,
+                lastModified: attachment.lastModified,
+            }),
+            {
+                type: 'auto-detect',
+                caption: message,
                 createChat: true,
                 waitForAck: true
-            });
-        }
-        result.sendMsgResult.then(value => {
-            let level = 3;
-            let message = 'Mensagem enviada com sucesso!';
-            if (value !== WPP.whatsapp.enums.SendMsgResult.OK) {
-                level = 1;
-                message = 'Falha ao enviar a mensage: ' + value;
             }
-            window.postMessage({ type: 'LOG', level, message, attachment: attachment != null, contact });
+        );
+    } else {
+        return await WPP.chat.sendTextMessage(contact, message, {
+            createChat: true,
+            waitForAck: true
         });
+    }
+}
+
+async function sendMessage({ contact, message, attachment = null, buttons = [] }: Message) {
+    if (!WPP.conn.isAuthenticated()) {
+        const errorMsg = 'Conecte-se primeiro!';
+        alert(errorMsg);
+        throw new Error(errorMsg);
+    }
+    const result = await sendWPPMessage({ contact, message, attachment, buttons });
+    return result.sendMsgResult.then(value => {
+        if (value !== WPP.whatsapp.enums.SendMsgResult.OK) {
+            throw new Error('Falha ao enviar a mensagem: ' + value);
+        } else {
+            WebpageMessageManager.sendMessage(ChromeMessageTypes.ADD_LOG, { level: 3, message: 'Mensagem enviada com sucesso!', attachment: attachment != null, contact: contact });
+        }
+    });
+}
+
+async function addToQueue(message: Message) {
+    try {
+        await asyncQueue.add({ eventHandler: sendMessage, detail: message });
+        return true;
     } catch (error) {
         if (error instanceof Error) {
-            window.postMessage({ type: 'LOG', level: 1, message: error.message, attachment: attachment != null, contact });
+            WebpageMessageManager.sendMessage(ChromeMessageTypes.ADD_LOG, { level: 1, message: error.message, attachment: message.attachment != null, contact: message.contact });
         }
+        throw error;
     }
 }
 
-window.addEventListener('sendMessage', async (event: CustomEventInit<Message>) => {
-    const { detail } = event;
-    if (detail === undefined) return;
+WebpageMessageManager.addHandler(ChromeMessageTypes.PAUSE_QUEUE, async () => {
+    await asyncQueue.pause();
+    return true;
+});
+
+WebpageMessageManager.addHandler(ChromeMessageTypes.RESUME_QUEUE, async () => {
+    await asyncQueue.resume();
+    return true;
+});
+
+WebpageMessageManager.addHandler(ChromeMessageTypes.STOP_QUEUE, async () => {
+    await asyncQueue.stop();
+    return true;
+});
+
+WebpageMessageManager.addHandler(ChromeMessageTypes.SEND_MESSAGE, async (message) => {
     if (WPP.webpack.isReady) {
-        return await sendMessage(detail);
+        return await addToQueue(message);
+    } else {
+        return new Promise((resolve, reject) => {
+            WPP.webpack.onReady(async () => {
+                try {
+                    resolve(await addToQueue(message));
+                } catch (error) {
+                    reject(error);
+                }
+            });
+        });
     }
-    WPP.webpack.onReady(async () => {
-        await sendMessage(detail);
-    });
+});
+
+WebpageMessageManager.addHandler(ChromeMessageTypes.QUEUE_STATUS, async () => {
+    return await asyncQueue.getStatus();
 });
 
 WPP.webpack.injectLoader();
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 5a66654..a9209bd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,21 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      boxShadow: {
+        'equal-sm': '0 0 2px 0 rgb(0 0 0 / 0.05)',
+        'equal': '0 0 3px 0 rgb(0 0 0 / 0.1)',
+        'equal-md': '0 0 6px -1px rgb(0 0 0 / 0.1)',
+        'equal-lg': '0 0 15px -3px rgb(0 0 0 / 0.1)',
+        'equal-xl': '0 0 25px -5px rgb(0 0 0 / 0.1)',
+        'equal-2xl': '0 0 50px -12px rgb(0 0 0 / 0.25)',
+      },
+    },
+  },
+  variants: {
+    extend: {
+      boxShadow: ['hover', 'focus'],
+    },
   },
   plugins: [],
 }
\ No newline at end of file