diff --git a/package.json b/package.json
index ec5ba75..9a0fe8f 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
},
"dependencies": {
"clsx": "^2.0.0",
- "tailwind-merge": "^1.14.0"
+ "tailwind-merge": "^1.14.0",
+ "tailwindcss": "^3.3.3"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.3.1",
@@ -66,7 +67,6 @@
"prettier": "^3.0.2",
"publint": "^0.2.0",
"storybook": "^7.3.1",
- "tailwindcss": "^3.3.3",
"tsup": "^7.2.0",
"typescript": "^5.1.6"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7ea59e4..fbfde89 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
tailwind-merge:
specifier: ^1.14.0
version: 1.14.0
+ tailwindcss:
+ specifier: ^3.3.3
+ version: 3.3.3
devDependencies:
'@storybook/addon-essentials':
@@ -73,9 +76,6 @@ devDependencies:
storybook:
specifier: ^7.3.1
version: 7.3.1
- tailwindcss:
- specifier: ^3.3.3
- version: 3.3.3
tsup:
specifier: ^7.2.0
version: 7.2.0(postcss@8.4.28)(typescript@5.1.6)
@@ -88,7 +88,7 @@ packages:
/@alloc/quick-lru@5.2.0:
resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
engines: {node: '>=10'}
- dev: true
+ dev: false
/@ampproject/remapping@2.2.1:
resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
@@ -1770,17 +1770,14 @@ packages:
'@jridgewell/set-array': 1.1.2
'@jridgewell/sourcemap-codec': 1.4.15
'@jridgewell/trace-mapping': 0.3.19
- dev: true
/@jridgewell/resolve-uri@3.1.1:
resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
engines: {node: '>=6.0.0'}
- dev: true
/@jridgewell/set-array@1.1.2:
resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
engines: {node: '>=6.0.0'}
- dev: true
/@jridgewell/source-map@0.3.5:
resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
@@ -1791,14 +1788,12 @@ packages:
/@jridgewell/sourcemap-codec@1.4.15:
resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
- dev: true
/@jridgewell/trace-mapping@0.3.19:
resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
dependencies:
'@jridgewell/resolve-uri': 3.1.1
'@jridgewell/sourcemap-codec': 1.4.15
- dev: true
/@juggle/resize-observer@3.4.0:
resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
@@ -1828,12 +1823,10 @@ packages:
dependencies:
'@nodelib/fs.stat': 2.0.5
run-parallel: 1.2.0
- dev: true
/@nodelib/fs.stat@2.0.5:
resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
engines: {node: '>= 8'}
- dev: true
/@nodelib/fs.walk@1.2.8:
resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -1841,7 +1834,6 @@ packages:
dependencies:
'@nodelib/fs.scandir': 2.1.5
fastq: 1.15.0
- dev: true
/@pkgjs/parseargs@0.11.0:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
@@ -3932,7 +3924,6 @@ packages:
/any-promise@1.3.0:
resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
- dev: true
/anymatch@3.1.3:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -3940,7 +3931,6 @@ packages:
dependencies:
normalize-path: 3.0.0
picomatch: 2.3.1
- dev: true
/app-root-dir@1.0.2:
resolution: {integrity: sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==}
@@ -3948,7 +3938,7 @@ packages:
/arg@5.0.2:
resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
- dev: true
+ dev: false
/argparse@1.0.10:
resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -4111,7 +4101,6 @@ packages:
/balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
- dev: true
/base64-js@1.5.1:
resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -4136,7 +4125,6 @@ packages:
/binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
- dev: true
/bl@4.1.0:
resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
@@ -4178,7 +4166,6 @@ packages:
dependencies:
balanced-match: 1.0.2
concat-map: 0.0.1
- dev: true
/brace-expansion@2.0.1:
resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
@@ -4191,7 +4178,6 @@ packages:
engines: {node: '>=8'}
dependencies:
fill-range: 7.0.1
- dev: true
/browser-assert@1.2.1:
resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
@@ -4294,7 +4280,7 @@ packages:
/camelcase-css@2.0.1:
resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
engines: {node: '>= 6'}
- dev: true
+ dev: false
/camelcase@5.3.1:
resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
@@ -4340,7 +4326,6 @@ packages:
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.2
- dev: true
/chownr@1.1.4:
resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
@@ -4473,7 +4458,6 @@ packages:
/commander@4.1.1:
resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
engines: {node: '>= 6'}
- dev: true
/commander@6.2.1:
resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
@@ -4508,7 +4492,6 @@ packages:
/concat-map@0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
- dev: true
/concat-stream@1.6.2:
resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
@@ -4610,7 +4593,6 @@ packages:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
hasBin: true
- dev: true
/csstype@3.1.2:
resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
@@ -4767,7 +4749,7 @@ packages:
/didyoumean@1.2.2:
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
- dev: true
+ dev: false
/dir-glob@3.0.1:
resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@@ -4778,7 +4760,7 @@ packages:
/dlv@1.1.3:
resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
- dev: true
+ dev: false
/doctrine@3.0.0:
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
@@ -5143,7 +5125,6 @@ packages:
glob-parent: 5.1.2
merge2: 1.4.1
micromatch: 4.0.5
- dev: true
/fast-json-stable-stringify@2.1.0:
resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -5153,7 +5134,6 @@ packages:
resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
dependencies:
reusify: 1.0.4
- dev: true
/fb-watchman@2.0.2:
resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
@@ -5189,7 +5169,6 @@ packages:
engines: {node: '>=8'}
dependencies:
to-regex-range: 5.0.1
- dev: true
/finalhandler@1.2.0:
resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
@@ -5319,19 +5298,16 @@ packages:
/fs.realpath@1.0.0:
resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
- dev: true
/fsevents@2.3.2:
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
- dev: true
optional: true
/function-bind@1.1.1:
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
- dev: true
/functions-have-names@1.2.3:
resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
@@ -5405,14 +5381,13 @@ packages:
engines: {node: '>= 6'}
dependencies:
is-glob: 4.0.3
- dev: true
/glob-parent@6.0.2:
resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
engines: {node: '>=10.13.0'}
dependencies:
is-glob: 4.0.3
- dev: true
+ dev: false
/glob-promise@4.2.2(glob@7.2.3):
resolution: {integrity: sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==}
@@ -5449,7 +5424,6 @@ packages:
minimatch: 3.1.2
once: 1.4.0
path-is-absolute: 1.0.1
- dev: true
/glob@7.2.3:
resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -5567,7 +5541,6 @@ packages:
engines: {node: '>= 0.4.0'}
dependencies:
function-bind: 1.1.1
- dev: true
/hosted-git-info@2.8.9:
resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
@@ -5701,11 +5674,9 @@ packages:
dependencies:
once: 1.4.0
wrappy: 1.0.2
- dev: true
/inherits@2.0.4:
resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
- dev: true
/internal-slot@1.0.5:
resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
@@ -5767,7 +5738,6 @@ packages:
engines: {node: '>=8'}
dependencies:
binary-extensions: 2.2.0
- dev: true
/is-boolean-object@1.1.2:
resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -5786,7 +5756,6 @@ packages:
resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
dependencies:
has: 1.0.3
- dev: true
/is-date-object@1.0.5:
resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -5808,7 +5777,6 @@ packages:
/is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
- dev: true
/is-fullwidth-code-point@3.0.0:
resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -5832,7 +5800,6 @@ packages:
engines: {node: '>=0.10.0'}
dependencies:
is-extglob: 2.1.1
- dev: true
/is-gzip@1.0.0:
resolution: {integrity: sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==}
@@ -5866,7 +5833,6 @@ packages:
/is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
- dev: true
/is-path-cwd@2.2.0:
resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
@@ -6104,7 +6070,6 @@ packages:
/jiti@1.19.1:
resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==}
hasBin: true
- dev: true
/joycon@3.1.1:
resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
@@ -6250,11 +6215,9 @@ packages:
/lilconfig@2.1.0:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'}
- dev: true
/lines-and-columns@1.2.4:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
- dev: true
/lint-staged@14.0.0:
resolution: {integrity: sha512-0tLf0pqZYkar/wu3nTctk4rVIG+d7PanDYv4/IQR4qwdqfQkTDziLRFnqMcLuLBTuUqmcLwsHPD2EjQ18d/oaA==}
@@ -6481,7 +6444,6 @@ packages:
/merge2@1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}
- dev: true
/methods@1.1.2:
resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
@@ -6494,7 +6456,6 @@ packages:
dependencies:
braces: 3.0.2
picomatch: 2.3.1
- dev: true
/mime-db@1.52.0:
resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -6539,7 +6500,6 @@ packages:
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
dependencies:
brace-expansion: 1.1.11
- dev: true
/minimatch@5.1.6:
resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
@@ -6628,13 +6588,11 @@ packages:
any-promise: 1.3.0
object-assign: 4.1.1
thenify-all: 1.6.0
- dev: true
/nanoid@3.3.6:
resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
- dev: true
/needle@3.2.0:
resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
@@ -6702,7 +6660,6 @@ packages:
/normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
- dev: true
/normalize-range@0.1.2:
resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
@@ -6749,12 +6706,11 @@ packages:
/object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
- dev: true
/object-hash@3.0.0:
resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
engines: {node: '>= 6'}
- dev: true
+ dev: false
/object-inspect@1.12.3:
resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -6799,7 +6755,6 @@ packages:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
dependencies:
wrappy: 1.0.2
- dev: true
/onetime@5.1.2:
resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
@@ -6930,7 +6885,6 @@ packages:
/path-is-absolute@1.0.1:
resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
engines: {node: '>=0.10.0'}
- dev: true
/path-key@3.1.1:
resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
@@ -6944,7 +6898,6 @@ packages:
/path-parse@1.0.7:
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
- dev: true
/path-scurry@1.10.1:
resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
@@ -6981,12 +6934,10 @@ packages:
/picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
- dev: true
/picomatch@2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
- dev: true
/pidtree@0.6.0:
resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
@@ -6997,7 +6948,7 @@ packages:
/pify@2.3.0:
resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
engines: {node: '>=0.10.0'}
- dev: true
+ dev: false
/pify@4.0.1:
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
@@ -7007,7 +6958,6 @@ packages:
/pirates@4.0.6:
resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
engines: {node: '>= 6'}
- dev: true
/pkg-dir@3.0.0:
resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==}
@@ -7047,7 +6997,7 @@ packages:
postcss-value-parser: 4.2.0
read-cache: 1.0.0
resolve: 1.22.4
- dev: true
+ dev: false
/postcss-js@4.0.1(postcss@8.4.28):
resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -7057,7 +7007,7 @@ packages:
dependencies:
camelcase-css: 2.0.1
postcss: 8.4.28
- dev: true
+ dev: false
/postcss-load-config@4.0.1(postcss@8.4.28):
resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
@@ -7074,7 +7024,6 @@ packages:
lilconfig: 2.1.0
postcss: 8.4.28
yaml: 2.3.1
- dev: true
/postcss-loader@7.3.3(postcss@8.4.28)(webpack@5.88.2):
resolution: {integrity: sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==}
@@ -7139,7 +7088,7 @@ packages:
dependencies:
postcss: 8.4.28
postcss-selector-parser: 6.0.13
- dev: true
+ dev: false
/postcss-selector-parser@6.0.13:
resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
@@ -7147,11 +7096,9 @@ packages:
dependencies:
cssesc: 3.0.0
util-deprecate: 1.0.2
- dev: true
/postcss-value-parser@4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
- dev: true
/postcss@8.4.28:
resolution: {integrity: sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==}
@@ -7160,7 +7107,6 @@ packages:
nanoid: 3.3.6
picocolors: 1.0.0
source-map-js: 1.0.2
- dev: true
/prettier@2.8.8:
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
@@ -7309,7 +7255,6 @@ packages:
/queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
- dev: true
/ramda@0.29.0:
resolution: {integrity: sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==}
@@ -7489,7 +7434,7 @@ packages:
resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
dependencies:
pify: 2.3.0
- dev: true
+ dev: false
/read-pkg-up@7.0.1:
resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -7536,7 +7481,6 @@ packages:
engines: {node: '>=8.10.0'}
dependencies:
picomatch: 2.3.1
- dev: true
/recast@0.21.5:
resolution: {integrity: sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==}
@@ -7663,7 +7607,6 @@ packages:
is-core-module: 2.13.0
path-parse: 1.0.7
supports-preserve-symlinks-flag: 1.0.0
- dev: true
/restore-cursor@3.1.0:
resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
@@ -7684,7 +7627,6 @@ packages:
/reusify@1.0.4:
resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
- dev: true
/rfdc@1.3.0:
resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
@@ -7723,7 +7665,6 @@ packages:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
dependencies:
queue-microtask: 1.2.3
- dev: true
/sade@1.8.1:
resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
@@ -7926,7 +7867,6 @@ packages:
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
- dev: true
/source-map-support@0.5.21:
resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -8101,7 +8041,6 @@ packages:
mz: 2.7.0
pirates: 4.0.6
ts-interface-checker: 0.1.13
- dev: true
/supports-color@5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -8127,7 +8066,6 @@ packages:
/supports-preserve-symlinks-flag@1.0.0:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
- dev: true
/synchronous-promise@2.0.17:
resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
@@ -8166,7 +8104,7 @@ packages:
sucrase: 3.34.0
transitivePeerDependencies:
- ts-node
- dev: true
+ dev: false
/tapable@2.2.1:
resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -8284,13 +8222,11 @@ packages:
engines: {node: '>=0.8'}
dependencies:
thenify: 3.3.1
- dev: true
/thenify@3.3.1:
resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
dependencies:
any-promise: 1.3.0
- dev: true
/through2@2.0.5:
resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
@@ -8317,7 +8253,6 @@ packages:
engines: {node: '>=8.0'}
dependencies:
is-number: 7.0.0
- dev: true
/tocbot@4.21.1:
resolution: {integrity: sha512-IfajhBTeg0HlMXu1f+VMbPef05QpDTsZ9X2Yn1+8npdaXsXg/+wrm9Ze1WG5OS1UDC3qJ5EQN/XOZ3gfXjPFCw==}
@@ -8350,7 +8285,6 @@ packages:
/ts-interface-checker@0.1.13:
resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
- dev: true
/tslib@1.14.1:
resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
@@ -8584,7 +8518,6 @@ packages:
/util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
- dev: true
/util@0.12.5:
resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
@@ -8817,7 +8750,6 @@ packages:
/wrappy@1.0.2:
resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
- dev: true
/write-file-atomic@2.4.3:
resolution: {integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==}
@@ -8883,7 +8815,6 @@ packages:
/yaml@2.3.1:
resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==}
engines: {node: '>= 14'}
- dev: true
/yargs-parser@20.2.9:
resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
diff --git a/src/docs/Tailwind.mdx b/src/docs/Tailwind.mdx
index 581397e..5dd099e 100644
--- a/src/docs/Tailwind.mdx
+++ b/src/docs/Tailwind.mdx
@@ -1,3 +1,22 @@
import { Meta } from "@storybook/blocks";
+
+# Tailwind
+
+The component library is designed to use Tailwind as the css framework. Therefore it exposes a **Tailwind Plugin** & **a Tailwind Preset** containing all relevant base styles for the ZenML design system.
+
+The styles aren't bundled into a dedicated stylesheet that can be imported from the lib itself. Therefore you need to extend the `content` prop of your `tailwind.config.js` like so:
+
+```js
+import { zenmlPreset } from "@zenml-io/react-component-library";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+ presets: [zenmlPreset],
+ content: [
+ "./src/**/*.{js,ts,jsx,tsx}",
+ "./node_modules/@zenml-io/react-component-library/**/*.{js,ts,jsx,tsx}"
+ ]
+};
+```
diff --git a/src/index.ts b/src/index.ts
index b6c7193..e00695a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,2 @@
export { cn } from "./utilities";
+export { zenmlPlugin, zenmlPreset } from "./tailwind/index";
diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts
new file mode 100644
index 0000000..3d684b8
--- /dev/null
+++ b/src/tailwind/index.ts
@@ -0,0 +1,259 @@
+import plugin from "tailwindcss/plugin";
+import { Config } from "tailwindcss";
+
+/**
+ * Tailwind Plugin that contains the tailwind setup for the ZenML design system
+ */
+export const zenmlPlugin = plugin(
+ function ({ addBase }) {
+ addBase({
+ ":root": {
+ "--color-primary-900": "258 66% 7%",
+ "--color-primary-800": "259 66% 14%",
+ "--color-primary-700": "259 68% 21%",
+ "--color-primary-600": "260 67% 28%",
+ "--color-primary-500": "259 67% 35%",
+ "--color-primary-400": "260 89% 60%",
+ "--color-primary-300": "260 89% 68%",
+ "--color-primary-200": "260 89% 76%",
+ "--color-primary-100": "260 90% 84%",
+ "--color-primary-050": "259 90% 92%",
+ "--color-primary-025": "259 90% 96%",
+ "--color-neutral-900": "221 39% 11%",
+ "--color-neutral-800": "215 28% 17%",
+ "--color-neutral-700": "217 19% 27%",
+ "--color-neutral-600": "215 14% 34%",
+ "--color-neutral-500": "220 9% 46%",
+ "--color-neutral-400": "218 11% 65%",
+ "--color-neutral-300": "216 12% 84%",
+ "--color-neutral-200": "220 13% 91%",
+ "--color-neutral-100": "220 14% 96%",
+ "--color-neutral-050": "210 20% 98%",
+ "--color-neutral-000": "0 0% 100%",
+ "--color-error-900": "4 59% 19%",
+ "--color-error-800": "3 58% 29%",
+ "--color-error-700": "4 59% 39%",
+ "--color-error-600": "4 59% 48%",
+ "--color-error-500": "4 81% 58%",
+ "--color-error-400": "4 81% 65%",
+ "--color-error-300": "4 82% 72%",
+ "--color-error-200": "3 81% 79%",
+ "--color-error-100": "4 81% 86%",
+ "--color-error-050": "3 81% 92%",
+ "--color-warning-900": "32 93% 17%",
+ "--color-warning-800": "33 92% 25%",
+ "--color-warning-700": "32 92% 34%",
+ "--color-warning-600": "33 93% 42%",
+ "--color-warning-500": "32 95% 51%",
+ "--color-warning-400": "32 95% 59%",
+ "--color-warning-300": "32 95% 67%",
+ "--color-warning-200": "33 95% 75%",
+ "--color-warning-100": "32 95% 84%",
+ "--color-warning-050": "33 96% 90%",
+ "--color-success-900": "137 75% 14%",
+ "--color-success-800": "137 75% 22%",
+ "--color-success-700": "137 74% 29%",
+ "--color-success-600": "137 75% 36%",
+ "--color-success-500": "137 74% 43%",
+ "--color-success-400": "137 56% 53%",
+ "--color-success-300": "137 56% 62%",
+ "--color-success-200": "137 56% 71%",
+ "--color-success-100": "137 57% 81%",
+ "--color-success-050": "137 55% 89%",
+ "--color-blue-900": "208 88% 10%",
+ "--color-blue-800": "209 88% 17%",
+ "--color-blue-700": "208 89% 25%",
+ "--color-blue-600": "208 89% 33%",
+ "--color-blue-500": "209 89% 42%",
+ "--color-blue-400": "209 90% 50%",
+ "--color-blue-300": "209 90% 58%",
+ "--color-blue-200": "208 89% 67%",
+ "--color-blue-100": "208 89% 75%",
+ "--color-blue-050": "209 90% 84%",
+ "--color-blue-025": "208 88% 90%",
+ "--color-text-primary": "var(--color-primary-900)",
+ "--color-text-secondary": "var(--color-neutral-500)",
+ "--color-text-tertiary": "var(--color-neutral-300)",
+ "--color-text-negative": "var(--color-neutral-000)",
+ "--color-text-brand": "var(--color-primary-500)",
+ "--color-text-error": "var(--color-error-500)",
+ "--color-text-warning": "var(--color-warning-500)",
+ "--color-text-success": "var(--color-success-500)",
+ "--color-surface-primary": "var(--color-neutral-000)",
+ "--color-surface-secondary": "var(--color-neutral-050)",
+ "--color-surface-tertiary": "var(--color-neutral-100)",
+ "--color-surface-strong": "var(--color-primary-400)",
+ "--color-border-minimal": "var(--color-neutral-100)",
+ "--color-border-moderate": "var(--color-neutral-200)",
+ "--color-border-bold": "var(--color-neutral-500)"
+ }
+ });
+ },
+ {
+ theme: {
+ borderRadius: {
+ sharp: "0px",
+ sm: "0.25rem/* 4px */",
+ md: "0.5rem/* 8px */",
+ rounded: "9999px"
+ },
+ spacing: {
+ 0: "0rem/* 0px */",
+ 0.25: "0.125rem/* 2px */",
+ 0.5: "0.25rem/* 4px */",
+ 1: "0.5rem/* 8px */",
+ 2: "0.75rem/* 12px */",
+ 3: "1rem/* 16px */",
+ 4: "1.25rem/* 20px */",
+ 5: "1.5rem/* 24px */",
+ 6: "2rem/* 32px */",
+ 7: "2.5rem/* 40px */",
+ 8: "3rem/* 48px */",
+ 9: "4rem/* 64px */",
+ 10: "4.5rem/* 72px */",
+ 11: "5rem/* 80px */",
+ 12: "6rem/* 96px */"
+ },
+ fontSize: {
+ "text-xs": ["0.75rem/* 12px */", "1.125rem"],
+ "text-sm": ["0.875rem/* 14px */", "1.25rem"],
+ "text-md": ["1rem/* 16px */", "1.5rem"],
+ "text-lg": ["1.125rem/* 18px */", "1.75rem"],
+ "text-xl": ["1.25rem/* 20px */", "1.875rem"],
+ "display-xs": ["1.5rem/* 24px */", "2rem"],
+ "display-sm": ["1.875rem/* 30px */", "2.375rem"],
+ "display-md": [
+ "2.25rem /* 36px */",
+ {
+ letterSpacing: "-0.045rem",
+ lineHeight: "2.75rem"
+ }
+ ],
+ "display-lg": [
+ "3rem/* 48px */",
+ {
+ letterSpacing: "-0.06rem",
+ lineHeight: "3.75rem"
+ }
+ ],
+ "display-xl": ["3.75rem/* 60px */", "4.5rem"]
+ },
+ extend: {
+ colors: {
+ theme: {
+ text: {
+ primary: "hsl(var(--color-text-primary) / )",
+ secondary: "hsl(var(--color-text-secondary) / )",
+ tertiary: "hsl(var(--color-text-tertiary) / )",
+ negative: "hsl(var(--color-text-negative) / )",
+ brand: "hsl(var(--color-text-brand) / )",
+ error: "hsl(var(--color-text-error) / )",
+ warning: "hsl(var(--color-text-warning) / )",
+ success: "hsl(var(--color-text-success) / )"
+ },
+ surface: {
+ primary: "hsl(var(--color-surface-primary) / )",
+ secondary: "hsl(var(--color-surface-secondary) / )",
+ tertiary: "hsl(var(--color-surface-tertiary) / )",
+ strong: "hsl(var(--color-surface-strong) / )"
+ },
+ border: {
+ minimal: "hsl(var(--color-border-minimal) / )",
+ moderate: "hsl(var(--color-border-moderate) / )",
+ bold: "hsl(var(--color-border-bold) / )"
+ }
+ },
+ primary: {
+ 900: "hsl(var(--color-primary-900) / )",
+ 800: "hsl(var(--color-primary-800) / )",
+ 700: "hsl(var(--color-primary-700) / )",
+ 600: "hsl(var(--color-primary-600) / )",
+ 500: "hsl(var(--color-primary-500) / )",
+ 400: "hsl(var(--color-primary-400) / )",
+ 300: "hsl(var(--color-primary-300) / )",
+ 200: "hsl(var(--color-primary-200) / )",
+ 100: "hsl(var(--color-primary-100) / )",
+ 50: "hsl(var(--color-primary-050) / )",
+ 25: "hsl(var(--color-primary-025) / )"
+ },
+ neutral: {
+ 900: "hsl(var(--color-neutral-900) / )",
+ 800: "hsl(var(--color-neutral-800) / )",
+ 700: "hsl(var(--color-neutral-700) / )",
+ 600: "hsl(var(--color-neutral-600) / )",
+ 500: "hsl(var(--color-neutral-500) / )",
+ 400: "hsl(var(--color-neutral-400) / )",
+ 300: "hsl(var(--color-neutral-300) / )",
+ 200: "hsl(var(--color-neutral-200) / )",
+ 100: "hsl(var(--color-neutral-100) / )",
+ 50: "hsl(var(--color-neutral-050) / )"
+ },
+ error: {
+ 900: "hsl(var(--color-error-900) / )",
+ 800: "hsl(var(--color-error-800) / )",
+ 700: "hsl(var(--color-error-700) / )",
+ 600: "hsl(var(--color-error-600) / )",
+ 500: "hsl(var(--color-error-500) / )",
+ 400: "hsl(var(--color-error-400) / )",
+ 300: "hsl(var(--color-error-300) / )",
+ 200: "hsl(var(--color-error-200) / )",
+ 100: "hsl(var(--color-error-100) / )",
+ 50: "hsl(var(--color-error-050) / )"
+ },
+ warning: {
+ 900: "hsl(var(--color-warning-900) / )",
+ 800: "hsl(var(--color-warning-800) / )",
+ 700: "hsl(var(--color-warning-700) / )",
+ 600: "hsl(var(--color-warning-600) / )",
+ 500: "hsl(var(--color-warning-500) / )",
+ 400: "hsl(var(--color-warning-400) / )",
+ 300: "hsl(var(--color-warning-300) / )",
+ 200: "hsl(var(--color-warning-200) / )",
+ 100: "hsl(var(--color-warning-100) / )",
+ 50: "hsl(var(--color-warning-050) / )"
+ },
+ success: {
+ 900: "hsl(var(--color-success-900) / )",
+ 800: "hsl(var(--color-success-800) / )",
+ 700: "hsl(var(--color-success-700) / )",
+ 600: "hsl(var(--color-success-600) / )",
+ 500: "hsl(var(--color-success-500) / )",
+ 400: "hsl(var(--color-success-400) / )",
+ 300: "hsl(var(--color-success-300) / )",
+ 200: "hsl(var(--color-success-200) / )",
+ 100: "hsl(var(--color-success-100) / )",
+ 50: "hsl(var(--color-success-050) / )"
+ },
+ blue: {
+ 900: "hsl(var(--color-blue-900) / )",
+ 800: "hsl(var(--color-blue-800) / )",
+ 700: "hsl(var(--color-blue-700) / )",
+ 600: "hsl(var(--color-blue-600) / )",
+ 500: "hsl(var(--color-blue-500) / )",
+ 400: "hsl(var(--color-blue-400) / )",
+ 300: "hsl(var(--color-blue-300) / )",
+ 200: "hsl(var(--color-blue-200) / )",
+ 100: "hsl(var(--color-blue-100) / )",
+ 50: "hsl(var(--color-blue-050) / )",
+ 25: "hsl(var(--color-blue-025) / )"
+ }
+ },
+ backgroundImage: {
+ "gradient-dark":
+ "linear-gradient(to bottom right, hsl(var(--color-primary-500)), hsl(var(--color-primary-400)))"
+ },
+ animation: {
+ "spin-slow": "spin 2s linear infinite"
+ }
+ }
+ }
+ }
+);
+
+/**
+ * Tailwind preset containing a template tailwind.config with the ZenML Plugin included
+ */
+export const zenmlPreset = {
+ content: [],
+ plugins: [zenmlPlugin]
+} satisfies Config;
diff --git a/tailwind.config.js b/tailwind.config.js
index ef09f8b..1c7b738 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,8 @@
+import { zenmlPreset } from "./src/index";
+
/** @type {import('tailwindcss').Config} */
export default {
+ presets: [zenmlPreset],
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {}