diff --git a/package-lock.json b/package-lock.json
index 1637fd22..117fa64d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
 			"name": "pol-ui",
 			"version": "1.0.5",
 			"license": "MIT",
+			"dependencies": {
+				"tailwind-variants": "^0.1.13"
+			},
 			"devDependencies": {
 				"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
 				"@storybook/addon-essentials": "^7.0.17",
@@ -70,7 +73,6 @@
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
 			"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-			"dev": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -4274,7 +4276,6 @@
 			"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",
@@ -4288,7 +4289,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
 			"integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -4297,7 +4297,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
 			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -4305,14 +4304,12 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-			"dev": true
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.18",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
 			"integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "3.1.0",
 				"@jridgewell/sourcemap-codec": "1.4.14"
@@ -4321,8 +4318,7 @@
 		"node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.14",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-			"dev": true
+			"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
 		},
 		"node_modules/@juggle/resize-observer": {
 			"version": "3.4.0",
@@ -4525,7 +4521,6 @@
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
 			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-			"dev": true,
 			"dependencies": {
 				"@nodelib/fs.stat": "2.0.5",
 				"run-parallel": "^1.1.9"
@@ -4538,7 +4533,6 @@
 			"version": "2.0.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
 			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-			"dev": true,
 			"engines": {
 				"node": ">= 8"
 			}
@@ -4547,7 +4541,6 @@
 			"version": "1.2.8",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
 			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-			"dev": true,
 			"dependencies": {
 				"@nodelib/fs.scandir": "2.1.5",
 				"fastq": "^1.6.0"
@@ -10376,14 +10369,12 @@
 		"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
+			"integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
 		},
 		"node_modules/anymatch": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
 			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-			"dev": true,
 			"dependencies": {
 				"normalize-path": "^3.0.0",
 				"picomatch": "^2.0.4"
@@ -10420,8 +10411,7 @@
 		"node_modules/arg": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-			"dev": true
+			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
 		},
 		"node_modules/argparse": {
 			"version": "2.0.1",
@@ -10944,8 +10934,7 @@
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
 		},
 		"node_modules/base": {
 			"version": "0.11.2",
@@ -11024,7 +11013,6 @@
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
 			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -11122,7 +11110,6 @@
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
 			"dependencies": {
 				"balanced-match": "^1.0.0",
 				"concat-map": "0.0.1"
@@ -11132,7 +11119,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-			"dev": true,
 			"dependencies": {
 				"fill-range": "^7.0.1"
 			},
@@ -11398,7 +11384,6 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
 			"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}
@@ -11533,7 +11518,6 @@
 			"version": "3.5.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
 			"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "individual",
@@ -11560,7 +11544,6 @@
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
 			"dependencies": {
 				"is-glob": "^4.0.1"
 			},
@@ -12010,8 +11993,7 @@
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"dev": true
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
 		},
 		"node_modules/concat-stream": {
 			"version": "1.6.2",
@@ -12225,7 +12207,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true,
 			"bin": {
 				"cssesc": "bin/cssesc"
 			},
@@ -12607,8 +12588,7 @@
 		"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
+			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
 		},
 		"node_modules/diff-sequences": {
 			"version": "27.5.1",
@@ -12634,8 +12614,7 @@
 		"node_modules/dlv": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-			"dev": true
+			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
 		},
 		"node_modules/doctrine": {
 			"version": "3.0.0",
@@ -14293,7 +14272,6 @@
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
 			"integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
-			"dev": true,
 			"dependencies": {
 				"@nodelib/fs.stat": "^2.0.2",
 				"@nodelib/fs.walk": "^1.2.3",
@@ -14309,7 +14287,6 @@
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
 			"dependencies": {
 				"is-glob": "^4.0.1"
 			},
@@ -14342,7 +14319,6 @@
 			"version": "1.15.0",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
 			"integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-			"dev": true,
 			"dependencies": {
 				"reusify": "^1.0.4"
 			}
@@ -14427,7 +14403,6 @@
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-			"dev": true,
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
 			},
@@ -14678,14 +14653,12 @@
 		"node_modules/fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"dev": true
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
 		},
 		"node_modules/fsevents": {
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-			"dev": true,
 			"hasInstallScript": true,
 			"optional": true,
 			"os": [
@@ -14698,8 +14671,7 @@
 		"node_modules/function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-			"dev": true
+			"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
 		},
 		"node_modules/function.prototype.name": {
 			"version": "1.1.5",
@@ -14907,7 +14879,6 @@
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
 			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-			"dev": true,
 			"dependencies": {
 				"is-glob": "^4.0.3"
 			},
@@ -15138,7 +15109,6 @@
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 			"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-			"dev": true,
 			"dependencies": {
 				"function-bind": "^1.1.1"
 			},
@@ -15562,7 +15532,6 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
 			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-			"dev": true,
 			"dependencies": {
 				"once": "^1.3.0",
 				"wrappy": "1"
@@ -15571,8 +15540,7 @@
 		"node_modules/inherits": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"dev": true
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
 		},
 		"node_modules/internal-slot": {
 			"version": "1.0.5",
@@ -15713,7 +15681,6 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
 			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
 			"dependencies": {
 				"binary-extensions": "^2.0.0"
 			},
@@ -15777,7 +15744,6 @@
 			"version": "2.12.1",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
 			"integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
-			"dev": true,
 			"dependencies": {
 				"has": "^1.0.3"
 			},
@@ -15900,7 +15866,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -15942,7 +15907,6 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"dev": true,
 			"dependencies": {
 				"is-extglob": "^2.1.1"
 			},
@@ -16020,7 +15984,6 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.12.0"
 			}
@@ -17777,7 +17740,6 @@
 			"version": "1.19.1",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
 			"integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==",
-			"dev": true,
 			"bin": {
 				"jiti": "bin/jiti.js"
 			}
@@ -18125,7 +18087,6 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
 			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=10"
 			}
@@ -18133,8 +18094,7 @@
 		"node_modules/lines-and-columns": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-			"dev": true
+			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
 		},
 		"node_modules/load-json-file": {
 			"version": "4.0.0",
@@ -18573,7 +18533,6 @@
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
 			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-			"dev": true,
 			"engines": {
 				"node": ">= 8"
 			}
@@ -18591,7 +18550,6 @@
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
 			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-			"dev": true,
 			"dependencies": {
 				"braces": "^3.0.2",
 				"picomatch": "^2.3.1"
@@ -18655,7 +18613,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
 			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
 			"dependencies": {
 				"brace-expansion": "^1.1.7"
 			},
@@ -18780,7 +18737,6 @@
 			"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",
@@ -18791,7 +18747,6 @@
 			"version": "3.3.6",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
 			"integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -18979,7 +18934,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
 			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -19041,7 +18995,6 @@
 			"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"
 			}
@@ -19149,7 +19102,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
 			"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}
@@ -19318,7 +19270,6 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-			"dev": true,
 			"dependencies": {
 				"wrappy": "1"
 			}
@@ -19557,7 +19508,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -19574,8 +19524,7 @@
 		"node_modules/path-parse": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-			"dev": true
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
 		"node_modules/path-scurry": {
 			"version": "1.10.1",
@@ -19643,14 +19592,12 @@
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-			"dev": true
+			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
 			"engines": {
 				"node": ">=8.6"
 			},
@@ -19671,7 +19618,6 @@
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
 			"integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
-			"dev": true,
 			"engines": {
 				"node": ">= 6"
 			}
@@ -19766,7 +19712,6 @@
 			"version": "8.4.27",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
 			"integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -19912,7 +19857,6 @@
 			"version": "15.1.0",
 			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
 			"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-			"dev": true,
 			"dependencies": {
 				"postcss-value-parser": "^4.0.0",
 				"read-cache": "^1.0.0",
@@ -19929,7 +19873,6 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
 			"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-			"dev": true,
 			"dependencies": {
 				"camelcase-css": "^2.0.1"
 			},
@@ -20000,7 +19943,6 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
 			"integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
-			"dev": true,
 			"dependencies": {
 				"lilconfig": "^2.0.5",
 				"yaml": "^2.1.1"
@@ -20029,7 +19971,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
 			"integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
-			"dev": true,
 			"engines": {
 				"node": ">= 14"
 			}
@@ -20059,7 +20000,6 @@
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
 			"integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-			"dev": true,
 			"dependencies": {
 				"postcss-selector-parser": "^6.0.11"
 			},
@@ -20290,7 +20230,6 @@
 			"version": "6.0.13",
 			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
 			"integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-			"dev": true,
 			"dependencies": {
 				"cssesc": "^3.0.0",
 				"util-deprecate": "^1.0.2"
@@ -20321,8 +20260,7 @@
 		"node_modules/postcss-value-parser": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-			"dev": true
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
@@ -20631,7 +20569,6 @@
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
 			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -20819,7 +20756,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
 			"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-			"dev": true,
 			"dependencies": {
 				"pify": "^2.3.0"
 			}
@@ -20828,7 +20764,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
 			"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -20980,7 +20915,6 @@
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
 			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-			"dev": true,
 			"dependencies": {
 				"picomatch": "^2.2.1"
 			},
@@ -21367,7 +21301,6 @@
 			"version": "1.22.2",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
 			"integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
-			"dev": true,
 			"dependencies": {
 				"is-core-module": "^2.11.0",
 				"path-parse": "^1.0.7",
@@ -21454,7 +21387,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
 			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-			"dev": true,
 			"engines": {
 				"iojs": ">=1.0.0",
 				"node": ">=0.10.0"
@@ -21495,7 +21427,6 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
 			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -22123,7 +22054,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -23940,7 +23870,6 @@
 			"version": "3.34.0",
 			"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
 			"integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.2",
 				"commander": "^4.0.0",
@@ -23962,7 +23891,6 @@
 			"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"
 			}
@@ -23971,7 +23899,6 @@
 			"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",
@@ -24051,7 +23978,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
 			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -24132,11 +24058,34 @@
 				"url": "https://github.com/chalk/slice-ansi?sponsor=1"
 			}
 		},
+		"node_modules/tailwind-merge": {
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+			"integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/dcastil"
+			}
+		},
+		"node_modules/tailwind-variants": {
+			"version": "0.1.13",
+			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.13.tgz",
+			"integrity": "sha512-G2M7M74hjq0nAo6QdEfUJgF+0t9DecFUw91GC1P9YTnwMcfB3uChT5U5e2DuNU42xoOz15lzo7r0mPdMzZkylg==",
+			"dependencies": {
+				"tailwind-merge": "^1.13.2"
+			},
+			"engines": {
+				"node": ">=16.x",
+				"pnpm": ">=7.x"
+			},
+			"peerDependencies": {
+				"tailwindcss": "*"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "3.3.3",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
 			"integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
-			"dev": true,
 			"dependencies": {
 				"@alloc/quick-lru": "^5.2.0",
 				"arg": "^5.0.2",
@@ -24341,7 +24290,6 @@
 			"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"
 			}
@@ -24350,7 +24298,6 @@
 			"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"
 			},
@@ -24478,7 +24425,6 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
 			"dependencies": {
 				"is-number": "^7.0.0"
 			},
@@ -24558,8 +24504,7 @@
 		"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
+			"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
 		},
 		"node_modules/ts-morph": {
 			"version": "18.0.0",
@@ -25111,8 +25056,7 @@
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-			"dev": true
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
 		"node_modules/utils-merge": {
 			"version": "1.0.1",
@@ -25585,8 +25529,7 @@
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-			"dev": true
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
 		},
 		"node_modules/write": {
 			"version": "1.0.3",
diff --git a/package.json b/package.json
index 21fe4b7f..e14fee9a 100644
--- a/package.json
+++ b/package.json
@@ -121,5 +121,8 @@
 		"vite": "^4.3.8",
 		"vite-plugin-css-injected-by-js": "^3.1.1",
 		"vite-plugin-dts": "^2.3.0"
+	},
+	"dependencies": {
+		"tailwind-variants": "^0.1.13"
 	}
 }
diff --git a/src/components/Inputs/DateInput/DateInput.stories.ts b/src/components/Inputs/DateInput/DateInput.stories.ts
new file mode 100644
index 00000000..0610f896
--- /dev/null
+++ b/src/components/Inputs/DateInput/DateInput.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DateInput } from "../DateInput";
+
+const meta = {
+	title: "Inputs/DateInput",
+	component: DateInput,
+} satisfies Meta<typeof DateInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		onChange: (date: string) => console.log(date),
+	},
+};
+export const WithLabel: Story = {
+	args: {
+		label: "Date",
+	},
+};
diff --git a/src/components/Inputs/DateInput/DateInput.tsx b/src/components/Inputs/DateInput/DateInput.tsx
new file mode 100644
index 00000000..13a47ae1
--- /dev/null
+++ b/src/components/Inputs/DateInput/DateInput.tsx
@@ -0,0 +1,49 @@
+import "../../../style/baseTheme.scss";
+
+interface Props {
+	value?: string;
+	label?: string;
+	onChange?: (newDate: string) => void;
+	className?: string;
+	id?: string;
+}
+
+const DateInput: React.FC<Props> = ({ label, value, onChange, className, id }) => {
+	const handleDateChange = (e: { target: { value: string } }) => {
+		const selectedDate = e.target.value;
+		onChange?.(selectedDate);
+	};
+
+	const formatValue = (value: string | undefined) => {
+		// if not value, return the actual date
+		if (!value) return new Date().toISOString().split("T")[0];
+
+		// take the date string and format it to yyyy-mm-dd
+		// if the value is empty, return an empty string
+		// if the value is not empty, return the formatted value
+		return new Date(value).toISOString().split("T")[0];
+	};
+
+	return (
+		<div className="position-relative flex flex-col w-fit px-2 py-1 transition-all  ring-1 ring-primary  border-primary/50 rounded-lg focus-within:shadow-lg    hover:ring-2  focus-within:ring-accent/50 ">
+			{label && (
+				<label className="text-xs" htmlFor="date">
+					{label}
+				</label>
+			)}
+			<input
+				type="date"
+				name="date"
+				id={id}
+				className={`
+        bg-transparent
+         outline-none
+         ${className}`}
+				value={formatValue(value)}
+				onChange={handleDateChange}
+			/>
+		</div>
+	);
+};
+
+export default DateInput;
diff --git a/src/components/Inputs/DateInput/index.ts b/src/components/Inputs/DateInput/index.ts
new file mode 100644
index 00000000..41504de3
--- /dev/null
+++ b/src/components/Inputs/DateInput/index.ts
@@ -0,0 +1 @@
+export { default as DateInput } from "./DateInput";
diff --git a/src/components/Inputs/Field/Field.stories.ts b/src/components/Inputs/Field/Field.stories.ts
new file mode 100644
index 00000000..b044a7f4
--- /dev/null
+++ b/src/components/Inputs/Field/Field.stories.ts
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Field } from "../Field";
+
+const meta = {
+	title: "Inputs/Field",
+	component: Field,
+} satisfies Meta<typeof Field>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		label: "Input",
+	},
+};
+export const WithValue: Story = {
+	args: {
+		label: "Input",
+		value: "This is a value",
+	},
+};
+export const NumberType: Story = {
+	args: {
+		label: "Number Input",
+		type: "number",
+	},
+};
+export const HelperText: Story = {
+	args: {
+		label: "Input",
+		helperText: "This is a helper text",
+	},
+};
+export const InputWithError: Story = {
+	args: {
+		label: "Input",
+		error: "This is an error",
+	},
+};
+export const InputWithHelperTextAndError: Story = {
+	args: {
+		label: "Input",
+		helperText: "This is a helper text",
+		error: "This is an error",
+	},
+};
+export const Disabled: Story = {
+	args: {
+		disabled: true,
+	},
+};
+export const MaxLength: Story = {
+	args: {
+		maxLength: 10,
+	},
+};
+export const Multiline: Story = {
+	args: {
+		multiline: true,
+	},
+};
+export const MultilineWithLabels: Story = {
+	args: {
+		label: "Input",
+		multiline: true,
+	},
+};
diff --git a/src/components/Inputs/Field/Field.tsx b/src/components/Inputs/Field/Field.tsx
new file mode 100644
index 00000000..8f78e25f
--- /dev/null
+++ b/src/components/Inputs/Field/Field.tsx
@@ -0,0 +1,98 @@
+import { ChangeEvent } from "react";
+import { containerStyles, inputStyles, labelStyles } from "./Styled";
+import React from "react";
+interface Props<T> {
+	label?: string;
+	name?: string;
+	type?: "text" | "number" | "password" | "email" | "date" | "time" | "url" | "search" | "tel";
+	value?: T;
+	multiline?: boolean;
+	onChange?: (value: T) => void;
+	error?: string;
+	className?: string;
+	disabled?: boolean;
+	required?: boolean;
+	helperText?: string;
+	maxLength?: number;
+	fullWidth?: boolean;
+	size?: "small" | "normal" | "large";
+	props?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof Props<T>>;
+}
+
+const Field = <T extends string | number>({
+	label,
+	value = undefined,
+	onChange,
+	disabled,
+	required,
+	type = "text",
+	error,
+	multiline,
+	helperText,
+	className,
+	maxLength,
+	fullWidth = false,
+	size = "normal",
+	...props
+}: Props<T>) => {
+	const handleChange = (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => {
+		const inputValue = e.target.value;
+		let newValue: T = inputValue as T;
+		if (!onChange) return;
+
+		if (type === "number") {
+			newValue = Number(inputValue) as T;
+			if (isNaN(newValue as number)) {
+				newValue = "" as T;
+			}
+		}
+		if (!newValue) return;
+
+		onChange(newValue);
+	};
+	const [focused, setFocused] = React.useState(false);
+	const hasValue =
+		typeof value === "number" ||
+		type === "date" ||
+		type === "time" ||
+		type === "number" ||
+		Boolean(value?.length);
+	return (
+		<div className={containerStyles()}>
+			{multiline ? (
+				<textarea
+					onFocus={() => setFocused(true)}
+					rows={5}
+					disabled={disabled ?? false}
+					maxLength={maxLength}
+					required={required}
+					defaultValue={value ?? ""}
+					onChange={handleChange}
+					className={inputStyles() + className}
+				/>
+			) : (
+				<input
+					{...(props as Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof Props<T>>)}
+					type={type}
+					onFocus={() => setFocused(true)}
+					maxLength={maxLength}
+					required={required}
+					disabled={disabled}
+					defaultValue={value ?? ""}
+					onChange={handleChange}
+					className={inputStyles() + className}
+				/>
+			)}
+			{Boolean(label) && (
+				<label className={labelStyles({ isUp: hasValue || focused })}>
+					{label}
+					{required && `*`}
+				</label>
+			)}
+			{Boolean(helperText) && <span className="color-primary/60 text-xs">{helperText}</span>}
+			{Boolean(error) && <span className="text-xs text-red-500">{error}</span>}
+		</div>
+	);
+};
+
+export default Field;
diff --git a/src/components/Inputs/Field/Styled.tsx b/src/components/Inputs/Field/Styled.tsx
new file mode 100644
index 00000000..878aa45b
--- /dev/null
+++ b/src/components/Inputs/Field/Styled.tsx
@@ -0,0 +1,47 @@
+import { tv } from "tailwind-variants";
+
+export const containerStyles = tv({
+	base: `flex flex-col gap-1   relative   w-full text-primary transition-all  `,
+});
+
+export const labelStyles = tv({
+	base: `label 
+        transition-all 
+        absolute 
+        text-primary/60 
+        top-0 left-2 
+        translate-y-1 
+		p-1 
+        pointer-events-none `,
+	variants: {
+		isUp: {
+			true: "text-primary py-0 translate-y-[-50%] bg-white text-sm focus:text-accent",
+			false: " ",
+		},
+	},
+
+	defaultVariants: {
+		isUp: false,
+	},
+});
+
+export const inputStyles = tv({
+	base: `transition-all
+            outline-none
+            rounded-lg
+            p-2
+            ring-1
+            ring-primary          
+            hover:shadow-lg
+            focus:ring-accent
+            peer`,
+	variants: {
+		multiline: {
+			true: "input peer  min-h-[100px] max-h-[300px] resize-y",
+			false: "input peer  ",
+		},
+	},
+	defaultVariants: {
+		multiline: false,
+	},
+});
diff --git a/src/components/Inputs/Field/index.ts b/src/components/Inputs/Field/index.ts
new file mode 100644
index 00000000..5c3a2c98
--- /dev/null
+++ b/src/components/Inputs/Field/index.ts
@@ -0,0 +1 @@
+export { default as Field } from './Field';
diff --git a/src/components/Inputs/Switch/Switch.stories.ts b/src/components/Inputs/Switch/Switch.stories.ts
index 278c2b9f..7a58ac68 100644
--- a/src/components/Inputs/Switch/Switch.stories.ts
+++ b/src/components/Inputs/Switch/Switch.stories.ts
@@ -37,3 +37,10 @@ export const Disabled: Story = {
 		disabled: true,
 	},
 };
+export const WithError: Story = {
+	args: {
+		label: "Switch",
+		checked: true,
+		error: "This is an error",
+	},
+};
diff --git a/src/components/Inputs/Switch/Switch.tsx b/src/components/Inputs/Switch/Switch.tsx
index 7fe6355a..0587b103 100644
--- a/src/components/Inputs/Switch/Switch.tsx
+++ b/src/components/Inputs/Switch/Switch.tsx
@@ -24,7 +24,7 @@ export const Switch: React.FC<Props> = ({
 	};
 
 	return (
-		<div data-testid="switchContainer" className={`flex gap-3  items-center`}>
+		<div className={`flex gap-3  items-center`}>
 			<input
 				role="switch"
 				disabled={disabled}
@@ -61,7 +61,7 @@ export const Switch: React.FC<Props> = ({
 				after:transition-[background-color_0.2s,transform_0.2s] 
 				after:content-[''] 
 				
-				checked:bg-accent 
+				checked:bg-accent/60
  				checked:after:z-[2] 
  				checked:after:ml-[0.8rem] 
  				${size === "large" ? "checked:after:ml-[1rem] " : ""}
@@ -71,54 +71,42 @@ export const Switch: React.FC<Props> = ({
 				checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] 
 				checked:after:transition-[background-color_0.2s,transform_0.2s] 
 				checked:after:content-[''] 
-				
+				transition-all
 				hover:cursor-pointer 
 				focus:outline-none 
-				
-				focus:ring-0 
-				focus:before:scale-100 
-				focus:before:opacity-[0.12] 
-				focus:before:shadow-[3px_-1px_0px_13px_rgba(0,0,0,0.6)] 
-				focus:before:transition-[box-shadow_0.2s,transform_0.2s] 
-				focus:after:absolute 
-				focus:after:z-[1] 
-				focus:after:block 
-				focus:after:h-6 
-				focus:after:w-6 
-				focus:after:rounded-full 
-				focus:after:content-[''] 
-				
-				checked:focus:border-primary 
-				checked:focus:bg-primary 
-				checked:focus:before:ml-[1.0625rem] 
-				checked:focus:before:scale-100 
-				checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] 
-				checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] 
-				
+				focus:ring-accent
+				focus:ring-4
+				active:outline-none 
+ 				active:ring-accent/50
+				active:ring-4
 				disabled:opacity-50
-				
+				disabled:cursor-not-allowed
 				dark:bg-neutral-600 
 				dark:after:bg-neutral-400 
 				dark:checked:bg-primary 
 				dark:checked:after:bg-primary 
-				dark:focus:before:shadow-[3px_-1px_0px_13px_rgba(255,255,255,0.4)] 
-				dark:checked:focus:before:shadow-[3px_-1px_0px_13px_#3b71ca] ${className}`}
+				 ${className}`}
 				type="checkbox"
 				id="flexSwitchCheckDefault"
 			/>
 			{label && (
 				<label
 					role="heading"
+					onClick={toggleSwitch}
 					aria-level={4}
-					className={`inline-block pl-[0.15rem] hover:cursor-pointer ${
-						error ? "text-red-400" : ""
-					}`}
+					className={`
+					hover:cursor-pointer 
+					
+					${disabled ? "text-neutral-400 hover:cursor-not-allowed" : "text-primary hover:cursor-pointer "}
+					${size === "small" ? "text-sm" : ""}
+					${size === "large" ? "text-lg" : ""}
+					${error ? "text-red-400" : ""}`}
 					htmlFor="flexSwitchCheckDefault"
 				>
 					{label}
 				</label>
 			)}
-			{error && <p className="text-red-400">{error}</p>}
+			{error && <small className="text-red-400">{`(${error})`}</small>}
 		</div>
 	);
 };