diff --git a/package-lock.json b/package-lock.json index 3c812e16..6e727b9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "@storybook/react": "^8.3.3", "@storybook/react-webpack5": "^8.3.3", "@storybook/test": "^8.3.3", + "@tailwindcss/container-queries": "^0.1.1", "@wordpress/eslint-plugin": "^20.3.0", "@wordpress/prettier-config": "^4.4.0", "@wordpress/scripts": "^27.9.0", @@ -72,6 +73,7 @@ "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" }, @@ -2701,6 +2703,7 @@ "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dev": true, "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", @@ -2717,6 +2720,7 @@ "version": "6.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, "engines": { "node": ">=12" }, @@ -2728,6 +2732,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", @@ -2744,6 +2749,7 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", @@ -3468,6 +3474,7 @@ "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -3481,6 +3488,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, "engines": { "node": ">=6.0.0" } @@ -3489,6 +3497,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, "engines": { "node": ">=6.0.0" } @@ -3506,12 +3515,14 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", - "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==" + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", + "dev": true }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" @@ -3786,6 +3797,7 @@ "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" @@ -3798,6 +3810,7 @@ "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" } @@ -3806,6 +3819,7 @@ "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" @@ -3818,6 +3832,7 @@ "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" @@ -3835,22 +3850,6 @@ "url": "https://opencollective.com/unts" } }, - "node_modules/@playwright/test": { - "version": "1.46.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz", - "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==", - "dev": true, - "peer": true, - "dependencies": { - "playwright": "1.46.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz", @@ -5460,6 +5459,15 @@ "@swc/counter": "^0.1.3" } }, + "node_modules/@tailwindcss/container-queries": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz", + "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==", + "dev": true, + "peerDependencies": { + "tailwindcss": ">=3.2.0" + } + }, "node_modules/@tannin/compile": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@tannin/compile/-/compile-1.1.0.tgz", @@ -7574,6 +7582,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, "engines": { "node": ">=8" } @@ -7608,12 +7617,14 @@ "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==" + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true }, "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" @@ -7634,7 +7645,8 @@ "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==" + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true }, "node_modules/argparse": { "version": "1.0.10", @@ -8323,7 +8335,8 @@ "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==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true }, "node_modules/bare-events": { "version": "2.4.2", @@ -8392,6 +8405,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, "engines": { "node": ">=8" }, @@ -8469,6 +8483,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -8477,6 +8492,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, "dependencies": { "fill-range": "^7.1.1" }, @@ -8645,6 +8661,7 @@ "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" } @@ -8876,6 +8893,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -8899,6 +8917,7 @@ "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" }, @@ -9096,6 +9115,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -9106,7 +9126,8 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "node_modules/colord": { "version": "2.9.3", @@ -9779,6 +9800,7 @@ "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" }, @@ -10357,7 +10379,8 @@ "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", - "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==" + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true }, "node_modules/diff-sequences": { "version": "29.6.3", @@ -10383,7 +10406,8 @@ "node_modules/dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", - "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==" + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true }, "node_modules/dns-packet": { "version": "5.6.1", @@ -10532,7 +10556,8 @@ "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", - "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" + "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true }, "node_modules/ee-first": { "version": "1.1.1", @@ -10561,7 +10586,8 @@ "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==" + "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true }, "node_modules/emojis-list": { "version": "3.0.0", @@ -12390,6 +12416,7 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dev": true, "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", @@ -12405,6 +12432,7 @@ "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" }, @@ -12449,6 +12477,7 @@ "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==", + "dev": true, "dependencies": { "reusify": "^1.0.4" } @@ -12534,6 +12563,7 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -12812,6 +12842,7 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", + "dev": true, "dependencies": { "cross-spawn": "^7.0.0", "signal-exit": "^4.0.1" @@ -12827,6 +12858,7 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -12840,6 +12872,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, "dependencies": { "shebang-regex": "^3.0.0" }, @@ -12851,6 +12884,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, "engines": { "node": ">=8" } @@ -12859,6 +12893,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, "engines": { "node": ">=14" }, @@ -12870,6 +12905,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, "dependencies": { "isexe": "^2.0.0" }, @@ -13140,6 +13176,7 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -13153,6 +13190,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -13348,6 +13386,7 @@ "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" }, @@ -13589,6 +13628,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -14326,6 +14366,7 @@ "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" }, @@ -14386,6 +14427,7 @@ "version": "2.15.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz", "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", + "dev": true, "dependencies": { "hasown": "^2.0.2" }, @@ -14454,6 +14496,7 @@ "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" } @@ -14474,6 +14517,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, "engines": { "node": ">=8" } @@ -14506,6 +14550,7 @@ "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" }, @@ -14541,6 +14586,7 @@ "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" } @@ -14829,7 +14875,8 @@ "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true }, "node_modules/isobject": { "version": "3.0.1", @@ -14840,16 +14887,6 @@ "node": ">=0.10.0" } }, - "node_modules/isomorphic.js": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz", - "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==", - "peer": true, - "funding": { - "type": "GitHub Sponsors ❤", - "url": "https://github.com/sponsors/dmonad" - } - }, "node_modules/istanbul-lib-coverage": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz", @@ -14990,6 +15027,7 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "dev": true, "dependencies": { "@isaacs/cliui": "^8.0.2" }, @@ -16695,6 +16733,7 @@ "version": "1.21.6", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz", "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==", + "dev": true, "bin": { "jiti": "bin/jiti.js" } @@ -16730,7 +16769,8 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "node_modules/js-yaml": { "version": "3.14.1", @@ -17013,27 +17053,6 @@ "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.17.1.tgz", "integrity": "sha512-72/MhR7jqmyqD10bmJw8gztlCm4KDDT+TPtU4elqXrEvHoO5XENi34YAEUD9gIkPfqSwyLa9mwAX1nKzIr5xEA==" }, - "node_modules/lib0": { - "version": "0.2.97", - "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.97.tgz", - "integrity": "sha512-Q4d1ekgvufi9FiHkkL46AhecfNjznSL9MRNoJRQ76gBHS9OqU2ArfQK0FvBpuxgWeJeNI0LVgAYMIpsGeX4gYg==", - "peer": true, - "dependencies": { - "isomorphic.js": "^0.2.4" - }, - "bin": { - "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js", - "0gentesthtml": "bin/gentesthtml.js", - "0serve": "bin/0serve.js" - }, - "engines": { - "node": ">=16" - }, - "funding": { - "type": "GitHub Sponsors ❤", - "url": "https://github.com/sponsors/dmonad" - } - }, "node_modules/lighthouse": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/lighthouse/-/lighthouse-10.4.0.tgz", @@ -17283,6 +17302,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz", "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==", + "dev": true, "engines": { "node": ">=14" }, @@ -17293,7 +17313,8 @@ "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==" + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true }, "node_modules/linkify-it": { "version": "3.0.3", @@ -17456,6 +17477,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -17854,6 +17876,7 @@ "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" } @@ -17877,6 +17900,7 @@ "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -18022,6 +18046,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", + "dev": true, "engines": { "node": ">=8" } @@ -18092,6 +18117,7 @@ "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", @@ -18255,6 +18281,7 @@ "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" } @@ -18493,6 +18520,7 @@ "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" } @@ -18507,6 +18535,7 @@ "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" } @@ -18872,7 +18901,8 @@ "node_modules/package-json-from-dist": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz", - "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==" + "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==", + "dev": true }, "node_modules/param-case": { "version": "3.0.4", @@ -19004,6 +19034,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, "engines": { "node": ">=8" } @@ -19011,12 +19042,14 @@ "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==" + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true }, "node_modules/path-scurry": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "dev": true, "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" @@ -19031,7 +19064,8 @@ "node_modules/path-scurry/node_modules/lru-cache": { "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", - "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==" + "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "dev": true }, "node_modules/path-to-regexp": { "version": "0.1.7", @@ -19072,6 +19106,7 @@ "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" }, @@ -19113,6 +19148,7 @@ "version": "4.0.6", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", + "dev": true, "engines": { "node": ">= 6" } @@ -19181,53 +19217,6 @@ "node": ">=8" } }, - "node_modules/playwright": { - "version": "1.46.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz", - "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==", - "dev": true, - "peer": true, - "dependencies": { - "playwright-core": "1.46.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=18" - }, - "optionalDependencies": { - "fsevents": "2.3.2" - } - }, - "node_modules/playwright-core": { - "version": "1.46.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz", - "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==", - "dev": true, - "peer": true, - "bin": { - "playwright-core": "cli.js" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/playwright/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": [ - "darwin" - ], - "peer": true, - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/plur": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/plur/-/plur-4.0.0.tgz", @@ -19268,6 +19257,7 @@ "version": "8.4.44", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz", "integrity": "sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==", + "dev": true, "funding": [ { "type": "opencollective", @@ -19393,6 +19383,7 @@ "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", @@ -19409,6 +19400,7 @@ "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" }, @@ -19427,6 +19419,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", + "dev": true, "funding": [ { "type": "opencollective", @@ -19461,6 +19454,7 @@ "version": "2.5.1", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz", "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==", + "dev": true, "bin": { "yaml": "bin.mjs" }, @@ -19669,6 +19663,7 @@ "version": "6.2.0", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, "funding": [ { "type": "opencollective", @@ -19921,6 +19916,7 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -19969,6 +19965,7 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, "funding": [ { "type": "github", @@ -20368,6 +20365,7 @@ "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", @@ -20435,6 +20433,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "dev": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -20518,6 +20517,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "dev": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -20590,6 +20590,7 @@ "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" } @@ -20598,6 +20599,7 @@ "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" } @@ -20749,6 +20751,7 @@ "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" }, @@ -21039,6 +21042,7 @@ "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "dev": true, "dependencies": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", @@ -21116,6 +21120,7 @@ "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" @@ -21196,6 +21201,7 @@ "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", @@ -21355,6 +21361,7 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, "dependencies": { "loose-envify": "^1.1.0" } @@ -22205,6 +22212,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -22219,6 +22227,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -22231,12 +22240,14 @@ "node_modules/string-width-cjs/node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true }, "node_modules/string-width-cjs/node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -22247,12 +22258,14 @@ "node_modules/string-width/node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true }, "node_modules/string-width/node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -22359,6 +22372,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, "dependencies": { "ansi-regex": "^6.0.1" }, @@ -22374,6 +22388,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -22385,6 +22400,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, "engines": { "node": ">=12" }, @@ -22741,6 +22757,7 @@ "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==", + "dev": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", @@ -22762,6 +22779,7 @@ "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" } @@ -22770,6 +22788,7 @@ "version": "10.4.5", "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", @@ -22789,6 +22808,7 @@ "version": "9.0.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -22803,6 +22823,7 @@ "version": "7.1.2", "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, "engines": { "node": ">=16 || 14 >=14.17" } @@ -22857,6 +22878,7 @@ "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" }, @@ -23072,6 +23094,7 @@ "version": "3.4.10", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz", "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==", + "dev": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -23117,6 +23140,7 @@ "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" } @@ -23382,6 +23406,7 @@ "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" } @@ -23390,6 +23415,7 @@ "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" }, @@ -23458,6 +23484,7 @@ "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" }, @@ -23573,7 +23600,8 @@ "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==" + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true }, "node_modules/tsconfig-paths": { "version": "4.2.0", @@ -23749,20 +23777,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "5.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", - "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", - "dev": true, - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, "node_modules/uc.micro": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", @@ -24107,7 +24121,8 @@ "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==" + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true }, "node_modules/utila": { "version": "0.4.0", @@ -24978,6 +24993,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -24994,6 +25010,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -25008,6 +25025,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -25167,23 +25185,6 @@ "fd-slicer": "~1.1.0" } }, - "node_modules/yjs": { - "version": "13.6.18", - "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.18.tgz", - "integrity": "sha512-GBTjO4QCmv2HFKFkYIJl7U77hIB1o22vSCSQD1Ge8ZxWbIbn8AltI4gyXbtL+g5/GJep67HCMq3Y5AmNwDSyEg==", - "peer": true, - "dependencies": { - "lib0": "^0.2.86" - }, - "engines": { - "node": ">=16.0.0", - "npm": ">=8.0.0" - }, - "funding": { - "type": "GitHub Sponsors ❤", - "url": "https://github.com/sponsors/dmonad" - } - }, "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 4443a689..e8df2572 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "@storybook/react": "^8.3.3", "@storybook/react-webpack5": "^8.3.3", "@storybook/test": "^8.3.3", + "@tailwindcss/container-queries": "^0.1.1", "@wordpress/eslint-plugin": "^20.3.0", "@wordpress/prettier-config": "^4.4.0", "@wordpress/scripts": "^27.9.0", diff --git a/src/components/badge/badge.jsx b/src/components/badge/badge.jsx index 771b4235..5316689a 100644 --- a/src/components/badge/badge.jsx +++ b/src/components/badge/badge.jsx @@ -26,6 +26,7 @@ const BadgeComponent = ( props, ref ) => { // Size classes - Based on the size prop. const sizeClasses = { + xxs: 'py-0.5 px-0.5 text-xs', xs: 'py-0.5 px-1 text-xs', sm: 'py-1 px-1.5 text-xs', md: 'py-1 px-1.5 text-sm', @@ -56,6 +57,14 @@ const BadgeComponent = ( props, ref ) => { let buttonClasses = 'group relative justify-center flex items-center [&>svg]:h-4 [&>svg]:w-4 cursor-pointer'; + const iconSizeClasses = { + xxs: '[&>svg]:size-3', + xs: '[&>svg]:size-3', + sm: '[&>svg]:size-3', + md: '[&>svg]:size-4', + lg: '[&>svg]:size-5', + }; + if ( disabled ) { filteredClasses = variantClasses.disabled; buttonClasses += ' cursor-not-allowed disabled'; @@ -79,7 +88,12 @@ const BadgeComponent = ( props, ref ) => { ref={ ref } > { icon ? ( - + { icon } ) : null } diff --git a/src/components/badge/badge.stories.js b/src/components/badge/badge.stories.js index 84026d2f..c13dea49 100644 --- a/src/components/badge/badge.stories.js +++ b/src/components/badge/badge.stories.js @@ -24,7 +24,7 @@ export default { name: 'Size', description: 'Defines the size of the badge.', control: 'select', - options: [ 'xs', 'sm', 'md', 'lg' ], + options: [ 'xxs', 'xs', 'sm', 'md', 'lg' ], table: { type: { summary: 'string' }, defaultValue: { summary: 'md' }, diff --git a/src/components/switch/switch.jsx b/src/components/switch/switch.jsx index 64a3170f..7fe0c6eb 100644 --- a/src/components/switch/switch.jsx +++ b/src/components/switch/switch.jsx @@ -113,10 +113,15 @@ const SwitchComponent = ( toggleDial: 'size-4 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-5 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4', }, + md: { + container: 'w-10 h-5', + toggleDial: + 'size-3 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-5 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4', + }, sm: { - container: 'w-9 h-5', + container: 'w-8 h-4', toggleDial: - 'size-3 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4', + 'size-2.5 top-2/4 left-1 -translate-y-2/4 peer-checked:translate-x-4 before:w-10 before:h-10 before:rounded-full before:absolute before:top-2/4 before:left-2/4 before:-translate-y-2/4 before:-translate-x-2/4', }, }; diff --git a/src/components/switch/switch.stories.js b/src/components/switch/switch.stories.js index ed9b502e..847eb52b 100644 --- a/src/components/switch/switch.stories.js +++ b/src/components/switch/switch.stories.js @@ -13,7 +13,7 @@ export default { name: 'Size', description: 'Defines the size of the switch.', control: 'radio', - options: [ 'sm', 'lg' ], + options: [ 'sm', 'md', 'lg' ], table: { type: { summary: 'string' }, defaultValue: { summary: 'lg' }, diff --git a/src/templates/dashboard-astra/dashboard-astra.stories.js b/src/templates/dashboard-astra/dashboard-astra.stories.js new file mode 100644 index 00000000..d09578f5 --- /dev/null +++ b/src/templates/dashboard-astra/dashboard-astra.stories.js @@ -0,0 +1,658 @@ +import { + Topbar, + Avatar, + Container, + Title, + Label, + Button, + Badge, + RadioButton, +} from '@/components'; +import { + ArrowUpRight, + CircleHelp, + Bell, + CirclePlay, + Ellipsis, + Upload, + Paintbrush, + PanelTop, + PanelBottom, + PaintBucket, + Type, + SquareMousePointer, + PenTool, + LayoutTemplate, + Menu, + Palette, + Baseline, + Ruler, + Newspaper, + PanelTopDashed, + PanelsTopLeft, +} from 'lucide-react'; +import { AstraThemeLogo as Logo } from '@/icons'; + +export default { + title: 'Templates/Dashboard/Astra Dashboard', + parameters: { + layout: 'fullscreen', + }, + decorators: [ + ( Story, parameters ) => ( +
+
+ +
+
+ ), + ], + tags: [ 'autodocs' ], +}; + +const defaultRadioButtonGroupData = [ + { + id: '1', + value: 'analytics', + icon: , + label: 'Site Identity', + toggleLabel: 'Enable', + hideSelection: true, + useSwitch: false, + }, + { + id: '2', + value: 'notifications', + icon: , + label: 'Style Guide', + toggleLabel: 'Disable', + hideSelection: true, + useSwitch: false, + badge: ( + + ), + }, + { + id: '3', + value: 'settings', + icon: , + label: 'Header Builder', + toggleLabel: 'Settings', + hideSelection: true, + useSwitch: false, + }, + { + id: '4', + value: 'security', + icon: , + label: 'Footer Builder', + toggleLabel: 'Security', + hideSelection: true, + useSwitch: false, + }, + { + id: '5', + value: 'marketing', + icon: , + label: 'Colors', + toggleLabel: 'Billing', + hideSelection: true, + useSwitch: false, + }, + { + id: '6', + value: 'modal', + icon: , + label: 'Typography', + toggleLabel: 'modal', + hideSelection: true, + useSwitch: false, + }, + { + id: '7', + value: 'socialshare', + icon: , + label: 'Button', + toggleLabel: 'socialshare', + hideSelection: true, + useSwitch: false, + }, + { + id: '8', + value: 'Blockquote', + icon: , + label: 'Blog', + toggleLabel: 'blockquote', + hideSelection: true, + useSwitch: false, + }, + { + id: '9', + value: 'contenttimeline', + icon: , + label: 'Layout', + toggleLabel: 'contenttimeline', + hideSelection: true, + useSwitch: false, + }, + { + id: '10', + value: 'googlemaps', + icon: , + label: 'Menus', + toggleLabel: 'googlemaps', + hideSelection: true, + useSwitch: false, + }, + { + id: '11', + value: 'lottieanimation', + icon: , + label: 'Background', + toggleLabel: 'lottieanimation', + hideSelection: true, + useSwitch: false, + badge: ( + + ), + disabled: true, + }, + { + id: '12', + value: 'animations', + icon: , + label: 'Advanced Typography', + toggleLabel: 'animations', + hideSelection: true, + useSwitch: false, + badge: ( + + ), + disabled: true, + }, + { + id: '13', + value: 'animations', + icon: , + label: 'Spacing', + toggleLabel: 'animations', + hideSelection: true, + useSwitch: false, + badge: ( + + ), + disabled: true, + }, + { + id: '14', + value: 'animations', + icon: , + label: 'Blog Pro', + toggleLabel: 'animations', + hideSelection: true, + useSwitch: false, + badge: ( + + ), + disabled: true, + }, + { + id: '15', + value: 'animations', + icon: , + label: 'Sticky Header', + toggleLabel: 'animations', + hideSelection: true, + useSwitch: false, + badge: ( + + ), + disabled: true, + }, + { + id: '16', + value: 'animations', + icon: , + label: 'Site Layouts', + toggleLabel: 'animations', + hideSelection: true, + useSwitch: false, + badge: ( + + ), + disabled: true, + }, +]; + +const astraRadioButtonGroupData = [ + { + id: '1', + svg: , + title: 'Astra Theme', + description: 'Free WordPress Page Builder Plugin.', + }, + { + id: '2', + svg: , + title: 'Starters Templates', + description: 'Build your dream website in minutes with AI.', + }, + { + id: '3', + svg: , + title: 'SureCart', + description: 'The new way to sell on WordPress.', + }, + { + id: '4', + svg: , + title: 'SureTriggers', + description: 'Automate your WordPress setup.', + }, +]; + +export const AstraDashboard = () => { + return ( + <> + { /* Navigation Topbar */ } + + + + + + + + + + Dashboard + + + + Settings + + + Starter Templates + + + Upgrade to Pro + + + + + + + + + + + + + + + + + + + { /* Content */ } +
+ + + { /* Welcome Astra card */ } + + +
+ + <p className="text-sm text-text-secondary m-0"> + Astra is fast, fully customizable & + beautiful WordPress theme suitable for + blog, personal portfolio, business + website and WooCommerce storefront. It + is very lightweight and offers + unparalleled speed. + </p> + </div> + <div className="flex gap-3"> + <Button>Start Customizing</Button> + <Button + variant="ghost" + icon={ <CirclePlay /> } + > + Watch a Quick Guide + </Button> + </div> + </Container.Item> + <Container.Item colSpan={ 3 }> + <img + src="https://placehold.co/272x154" + alt="Astra video" + className="w-full h-full object-cover rounded" + /> + </Container.Item> + </Container> + { /* Quick Settings card */ } + <Container + containerType="flex" + direction="column" + className="md:w-full lg:w-full bg-background-primary border-[0.5px] border-solid border-border-subtle rounded-xl p-4" + gap="xs" + > + <Container.Item className="md:w-full p-1 lg:w-full"> + <Container + justify="between" + align="center" + gap="xs" + > + <Container.Item> + <Label + size="md" + className="font-semibold" + > + Quick Settings + </Label> + </Container.Item> + <Container.Item className="items-center flex gap-2"> + <Button + variant="ghost" + className="p-0 leading-none text-icon-secondary" + > + <Ellipsis /> + </Button> + <Button + variant="ghost" + className="p-0 leading-none text-icon-secondary" + > + <ArrowUpRight /> + </Button> + </Container.Item> + </Container> + </Container.Item> + <Container.Item className="md:w-full lg:w-full p-2 rounded-lg bg-background-secondary"> + <RadioButton.Group + as="div" + defaultValue={ `option-${ defaultRadioButtonGroupData[ 0 ].id }` } + multiSelection={ true } + onChange={ ( value ) => { + return value; + } } + className="w-full" + > + { defaultRadioButtonGroupData.map( ( option ) => ( + <RadioButton.Button + key={ `option-${ option.id }` } + borderOn={ true } + value={ option.value } + icon={ option.icon } + hideSelection={ option.hideSelection } + toggleLabel={ option.toggleLabel } + label={ { + heading: option.label, + } } + useSwitch={ option.useSwitch } + className="px-2" + badgeItem={ option.badge } + disabled={ option.disabled } + buttonWrapperClasses="bg-background-primary" + /> + ) ) } + </RadioButton.Group> + </Container.Item> + <Container.Item className="flex items-center justify-center gap-2 text-text-primary text-sm bg-background-secondary rounded-lg p-3"> + <Logo className="size-5" /> + <span className="font-semibold"> + Do More with Astra Pro + </span> + <span className="font-normal text-text-secondary"> + Get access to powerful features without the + high costs. + </span> + <a + href="#" + target="_self" + className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none cursor-pointer text-sm font-semibold text-brand-primary-600" + > + <span>Upgrade to Pro</span> + <ArrowUpRight + className="size-5" + strokeWidth="1.5" + /> + </a> + </Container.Item> + </Container> + </Container.Item> + + <Container.Item colSpan={ 4 } className="flex flex-col gap-8"> + { /* Inegrations card */ } + <Container + containerType="flex" + gap="xs" + direction="column" + className="border-[0.5px] border-solid border-border-subtle rounded-xl p-4 bg-background-primary" + > + <Container.Item className="md:w-full lg:w-full"> + <Container + className="p-1" + justify="between" + gap="xs" + > + <Container.Item> + <Label className="font-semibold"> + Integrations + </Label> + </Container.Item> + <Container.Item + containerType="flex" + direction="row" + className="items-center" + gap="xs" + > + <Button + className="p-0 text-text-secondary" + variant="ghost" + > + <ArrowUpRight /> + </Button> + </Container.Item> + </Container> + </Container.Item> + <Container.Item className="md:w-full lg:w-full bg-field-primary-background rounded-lg"> + <Container className="grid grid-cols-2 p-1 gap-1"> + { astraRadioButtonGroupData.map( ( card ) => ( + <Container.Item + key={ card.id } + className="md:w-full lg:w-full flex" + > + <Container + containerType="flex" + direction="column" + className="flex-1 gap-1 shadow-soft-shadow-inner p-2 rounded-md bg-background-primary" + > + <Container.Item> + <Container className="gap-1 items-center"> + <Container.Item + className="peer-[]:&>svg]:size-5" + grow={ 1 } + order="none" + shrink={ 1 } + > + { card.svg } + </Container.Item> + </Container> + </Container.Item> + <Container.Item className="gap-0.5 p-1"> + <Label className="text-sm font-semibold"> + { card.title } + </Label> + <Label + variant="help" + className="text-sm" + > + { card.description } + </Label> + </Container.Item> + </Container> + </Container.Item> + ) ) } + </Container> + </Container.Item> + </Container> + { /* Vip Support card */ } + <Container + containerType="grid" + gap="xs" + className="p-5 bg-background-primary border-[0.5px] border-solid border-border-subtle shadow-sm rounded-xl" + > + <Container.Item> + <Container gap="xs" align="center"> + <div className="text-base font-semibold text-text-primary"> + VIP Support + </div> + <Badge + label={ 'PRO' } + size="xs" + icon={ null } + variant="inverse" + closable={ false } + className="py-0" + /> + </Container> + </Container.Item> + <Container.Item> + <Container> + <div className="text-sm text-text-secondary mb-2"> + Faster and exclusive support service + designed for VIP assistance and + benefits. + </div> + </Container> + </Container.Item> + <Container.Item> + <Button variant="link">Know more</Button> + </Container.Item> + </Container> + { /* Join the Community card */ } + <Container + containerType="grid" + gap="xs" + className="p-5 bg-background-primary border-[0.5px] border-solid border-border-subtle shadow-sm rounded-xl" + > + <Container.Item> + <Container gap="xs" align="center"> + <div className="text-base font-semibold text-text-primary"> + Join the Community + </div> + </Container> + </Container.Item> + <Container.Item> + <Container> + <div className="text-sm text-text-secondary mb-2"> + Got a question about the plugin, want to + share your awesome project? Join our + wonderful community! + </div> + </Container> + </Container.Item> + <Container.Item> + <Button variant="link">Join now</Button> + </Container.Item> + </Container> + </Container.Item> + </Container> + </div> + </> + ); +}; diff --git a/src/templates/dashboard-spectra/dashboard-spectra.stories.js b/src/templates/dashboard-spectra/dashboard-spectra.stories.js new file mode 100644 index 00000000..34d8e282 --- /dev/null +++ b/src/templates/dashboard-spectra/dashboard-spectra.stories.js @@ -0,0 +1,827 @@ +import { + Topbar, + Container, + Title, + Label, + Button, + Badge, + RadioButton, +} from '@/components'; +import { + ArrowUpRight, + CircleHelp, + Megaphone, + Plus, + ExternalLink, + House, + AppWindow, + PictureInPicture, + Share2, + Newspaper, + ChartNoAxesGantt, + Map, + PanelLeftClose, + Ellipsis, + Headset, + HelpCircle, + MessageSquare, + Star, + Zap, + Check, + X, + LogIn, + UserPlus, + Instagram, + Infinity, +} from 'lucide-react'; +import { SpectraLogo as Logo } from '@/icons'; + +export default { + title: 'Templates/Dashboard/Spectra Dashboard', + parameters: { + layout: 'fullscreen', + }, + decorators: [ + ( Story, parameters ) => ( + <div className="@container"> + <div className="box-border [&_*]:box-border @[80rem]:w-full w-[1376px]"> + <Story { ...parameters } /> + </div> + </div> + ), + ], + tags: [ 'autodocs' ], +}; + +const defaultRadioButtonGroupData = [ + { + id: '1', + value: 'analytics', + icon: <LogIn />, + label: 'Login Form', + description: 'Demo', + toggleLabel: 'Enable', + hideSelection: true, + useSwitch: false, + bagde: ( + <Badge + label={ 'PRO' } + size="xs" + icon={ null } + variant="inverse" + closable={ false } + className="py-0" + /> + ), + }, + { + id: '2', + value: 'notifications', + icon: <UserPlus />, + label: 'Registration Form', + description: 'Demo', + toggleLabel: 'Disable', + hideSelection: true, + useSwitch: false, + bagde: ( + <Badge + label={ 'PRO' } + size="xs" + icon={ null } + variant="inverse" + closable={ false } + className="py-0" + /> + ), + }, + { + id: '3', + value: 'settings', + icon: <Instagram />, + label: 'Instagram Feed', + description: 'Demo', + toggleLabel: 'Settings', + hideSelection: true, + useSwitch: false, + bagde: ( + <Badge + label={ 'PRO' } + size="xs" + icon={ null } + variant="inverse" + closable={ false } + className="py-0" + /> + ), + }, + { + id: '4', + value: 'security', + icon: <Infinity />, + label: 'Loop Builder', + description: 'Demo', + toggleLabel: 'Security', + hideSelection: true, + useSwitch: false, + bagde: ( + <Badge + label={ 'PRO' } + size="xs" + icon={ null } + variant="inverse" + closable={ false } + className="py-0" + /> + ), + }, + { + id: '5', + value: 'marketing', + icon: <AppWindow />, + label: 'Marketing Button', + description: 'Demo', + toggleLabel: 'Billing', + hideSelection: false, + useSwitch: true, + }, + { + id: '6', + value: 'modal', + icon: <PictureInPicture />, + label: 'Modal', + description: 'Demo', + toggleLabel: 'modal', + hideSelection: false, + useSwitch: true, + }, + { + id: '7', + value: 'socialshare', + icon: <Share2 />, + label: 'Social Share', + description: 'Demo', + toggleLabel: 'socialshare', + hideSelection: false, + useSwitch: true, + }, + { + id: '8', + value: 'Blockquote', + icon: <Newspaper />, + label: 'Blockquote', + description: 'Demo', + toggleLabel: 'blockquote', + hideSelection: false, + useSwitch: true, + }, + { + id: '9', + value: 'contenttimeline', + icon: <ChartNoAxesGantt />, + label: 'Content Timeline', + description: 'Demo', + toggleLabel: 'contenttimeline', + hideSelection: false, + useSwitch: true, + }, + { + id: '10', + value: 'googlemaps', + icon: <Map />, + label: 'Google Maps', + description: 'Demo', + toggleLabel: 'googlemaps', + hideSelection: false, + useSwitch: true, + bagde: ( + <Badge + label={ 'New' } + size="xs" + icon={ null } + variant="green" + closable={ false } + className="py-0 mr-2" + /> + ), + }, + { + id: '11', + value: 'lottieanimation', + icon: <House />, + label: 'Lottie Animation', + description: 'Demo', + toggleLabel: 'lottieanimation', + hideSelection: false, + useSwitch: true, + }, + { + id: '12', + value: 'animations', + icon: <PanelLeftClose />, + label: 'Animations', + description: 'Documentation', + toggleLabel: 'animations', + hideSelection: false, + useSwitch: true, + bagde: ( + <Badge + label={ 'Extension' } + size="xs" + icon={ null } + variant="yellow" + closable={ false } + className="py-0 mr-2" + /> + ), + }, +]; + +const astraRadioButtonGroupData = [ + { + id: '1', + badgeText: 'Free', + buttonText: 'Install', + svg: <Logo className="size-5" />, + title: 'Astra Theme', + description: 'Free WordPress Page Builder Plugin.', + }, + { + id: '2', + badgeText: 'Free', + buttonText: 'Activate', + svg: <Logo className="size-5" />, + title: 'Starters Templates', + description: 'Build your dream website in minutes with AI.', + }, + { + id: '3', + badgeText: 'Free', + buttonText: 'Install', + svg: <Logo className="size-5" />, + title: 'SureCart', + description: 'The new way to sell on WordPress.', + }, + { + id: '4', + badgeText: 'Free', + buttonText: 'Install', + svg: <Logo className="size-5" />, + title: 'Presto Player', + description: 'Automate your WordPress setup.', + }, +]; + +const containerRowButtons = [ + { + id: '1', + value: 'vipsupport', + icon: <Headset className="size-4 m-1" />, + label: 'VIP Support', + hideSelection: true, + useSwitch: false, + bagde: ( + <Badge + label={ 'PRO' } + icon={ null } + variant="inverse" + closable={ false } + size="xxs" + /> + ), + }, + { + id: '2', + value: 'helpcenter', + icon: <HelpCircle className="size-4 m-1" />, + label: 'Help Center', + hideSelection: true, + useSwitch: false, + }, + { + id: '3', + value: 'community', + icon: <MessageSquare className="size-4 m-1" />, + label: 'Join the Community', + hideSelection: true, + useSwitch: false, + }, + { + id: '4', + value: 'rateus', + icon: <Star className="size-4 m-1" />, + label: 'Rate Us', + hideSelection: true, + useSwitch: false, + }, +]; + +export const SpectraDashboard = () => { + return ( + <> + <Container + containerType="flex" + align="center" + justify="center" + className="py-2 relative bg-brand-background-hover-100" + > + <div className="space-x-1 text-text-primary text-xs"> + <span className="font-semibold"> + Unlock Spectra's Full Potential! + </span> + <span className="font-normal"> + Get exclusive features and unbeatable performance. + </span> + <a + href="#" + target="_self" + className="content-center text-inherit font-normal underline" + > + Upgrade now + </a> + </div> + <button className="inline-flex items-center justify-center absolute right-2 top-2 p-0 bg-transparent shadow-none border-0 outline-none focus:outline-none cursor-pointer"> + <X className="size-4" /> + </button> + </Container> + { /* Navigation Topbar */ } + <Topbar gap={ 0 } className="h-16 p-0 shadow-sm"> + <Topbar.Left className="p-4"> + <Topbar.Item> + <Logo /> + </Topbar.Item> + </Topbar.Left> + <Topbar.Middle align="left" className="h-full"> + <Topbar.Item className="gap-4"> + <a + href="#" + target="_self" + className="content-center no-underline relative h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-primary text-sm font-medium cursor-pointer" + > + <span>Dashboard</span> + <span className="absolute bottom-0 left-0 w-full h-px bg-brand-primary-600"></span> + </a> + <a + href="#" + target="_self" + className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer" + > + Blocks + </a> + <a + href="#" + target="_self" + className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer" + > + Settings + </a> + <a + href="#" + target="_self" + className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer" + > + AI Features + </a> + <a + href="#" + target="_self" + className="content-center no-underline h-full py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none text-text-tertiary text-sm font-medium cursor-pointer" + > + Free vs Pro + </a> + <a + href="#" + target="_self" + className="content-center no-underline h-full inline-flex items-center py-0 px-1 m-0 bg-transparent outline-none shadow-none border-0 focus:outline-none cursor-pointer text-sm font-semibold text-brand-primary-600" + > + <span>Unlock Pro Features</span> + <ArrowUpRight + className="size-5" + strokeWidth="1.5" + /> + </a> + </Topbar.Item> + </Topbar.Middle> + <Topbar.Right className="p-5" gap="md"> + <Topbar.Item> + <Badge + label="Free" + size="xs" + variant="neutral" + closable={ false } + /> + </Topbar.Item> + <Topbar.Item> + <CircleHelp strokeWidth="1.5" className="size-4 m-1" /> + </Topbar.Item> + <Topbar.Item className="relative after:content-[''] after:inline-block after:size-1.5 after:bg-background-important after:rounded-full after:absolute after:-top-0.5 after:left-5"> + <Megaphone strokeWidth="1.5" className="size-4 m-1" /> + </Topbar.Item> + </Topbar.Right> + </Topbar> + + { /* Content */ } + <div className="bg-background-secondary"> + <Container + containerType="grid" + cols={ 12 } + gap="2xl" + className="p-8 max-w-[82rem] mx-auto" + > + <Container.Item colSpan={ 8 } className="flex flex-col gap-8"> + { /* Welcome Spectra card */ } + <Container + containerType="grid" + cols={ 8 } + gap="2xl" + className="bg-background-primary p-6 shadow-sm rounded-xl" + > + <Container.Item + colSpan={ 5 } + className="flex flex-col gap-6" + > + <div> + <Title + tag="h3" + title="Welcome to Spectra!" + size="lg" + className="text-text-primary mb-1" + /> + <p className="text-sm text-text-secondary m-0"> + We designed Spectra to be intuitive but + we do recommend learning how it works by + checking our comprehensive documentation + and watching the video below. Enjoy your + time with Spectra! + </p> + </div> + <div className="flex gap-3"> + <Button + variant="primary" + iconPosition="right" + icon={ <Plus /> } + > + Create new page + </Button> + <Button + variant="ghost" + iconPosition="right" + icon={ <ExternalLink /> } + > + Read full guide + </Button> + </div> + </Container.Item> + + <Container.Item colSpan={ 3 }> + <img + src="https://placehold.co/272x154" + alt="Spectra video" + className="w-full h-full object-cover rounded" + /> + </Container.Item> + </Container> + { /* Blocks card */ } + <Container + containerType="flex" + direction="column" + className="bg-background-primary md:w-full lg:w-full border border-solid rounded-xl border-border-subtle p-4" + gap="xs" + > + <Container.Item className="md:w-full p-1 lg:w-full"> + <Container + justify="between" + align="center" + gap="xs" + > + <Container.Item className=""> + <Label className="font-semibold text-text-primary"> + Blocks + </Label> + </Container.Item> + <Container.Item + className="items-center flex" + gap="xs" + > + <Label> + <Button + icon={ <ArrowUpRight /> } + iconPosition="right" + variant="ghost" + > + View All + </Button> + </Label> + <Button + variant="ghost" + className="p-0 leading-none " + > + { ' ' } + <Ellipsis /> + </Button> + </Container.Item> + </Container> + </Container.Item> + <Container.Item className="md:w-full lg:w-full p-1 bg-field-primary-background rounded-lg"> + <RadioButton.Group + as="div" + defaultValue={ `option-${ defaultRadioButtonGroupData[ 0 ].id }` } + multiSelection={ true } + onChange={ ( value ) => { + return value; + } } + className="w-full gap-1" + > + { defaultRadioButtonGroupData.map( ( option ) => ( + <RadioButton.Button + key={ `option-${ option.id }` } + borderOn={ true } + value={ option.value } + icon={ option.icon } + hideSelection={ option.hideSelection } + toggleLabel={ option.toggleLabel } + label={ { + heading: option.label, + description: option.description, + } } + useSwitch={ option.useSwitch } + className="px-2" + badgeItem={ option.bagde } + buttonWrapperClasses="bg-background-primary" + /> + ) ) } + </RadioButton.Group> + </Container.Item> + </Container> + { /* Unlock Pro Features card */ } + <Container + containerType="grid" + cols={ 8 } + gap="2xl" + className="bg-background-primary p-6 shadow-sm rounded-xl" + > + <Container.Item + colSpan={ 4 } + className="flex flex-col gap-2" + > + <div className="text-brand-hover-700 flex space-x-1"> + <Zap className="size-4" /> + <div className="font-semibold text-xs"> + Unlock Pro Features + </div> + </div> + <div> + <Title + title="Limitless Design with Spectra Pro!" + tag="h5" + className="text-text-primary" + /> + <p className="text-sm text-text-secondary m-0"> + Utilize advanced blocks, extensions, and + premium features to create a websites + that stands out! + </p> + </div> + <div className="grid grid-cols-2 gap-3"> + <ul className="list-none pl-0 space-y-2"> + <li className="flex items-center space-x-2 text-field-label text-sm"> + <Check className="size-3.5 text-brand-hover-700" /> + <span>Instagram Feed Block</span> + </li> + <li className="flex items-center space-x-2 text-field-label text-sm"> + <Check className="size-3.5 text-brand-hover-700" /> + <span>Dynamic Content</span> + </li> + <li className="flex items-center space-x-2 text-field-label text-sm"> + <Check className="size-3.5 text-brand-hover-700" /> + <span>Popup Builder</span> + </li> + </ul> + <ul className="list-none pl-0 space-y-2"> + <li className="flex items-center space-x-2 text-field-label text-sm"> + <Check className="size-3.5 text-brand-hover-700" /> + <span>Global Block Styles</span> + </li> + <li className="flex items-center space-x-2 text-field-label text-sm"> + <Check className="size-3.5 text-brand-hover-700" /> + <span>Loop Builder</span> + </li> + <li className="flex items-center space-x-2 text-field-label text-sm"> + <Check className="size-3.5 text-brand-hover-700" /> + <span>And more...</span> + </li> + </ul> + </div> + <div className="flex gap-3 my-2"> + <Button variant="secondary"> + Upgrade now + </Button> + <Button variant="ghost">Free vs Pro</Button> + </div> + </Container.Item> + + <Container.Item colSpan={ 4 }> + <img + src="https://placehold.co/384x252" + alt="Unlock Pro Features" + className="w-full h-full object-cover rounded-lg" + /> + </Container.Item> + </Container> + </Container.Item> + + <Container.Item colSpan={ 4 } className="flex flex-col gap-8"> + { /* Extend Your Website card */ } + <Container + containerType="flex" + gap="xs" + direction="column" + className="bg-background-primary border border-solid rounded-xl border-border-subtle p-3" + > + <Container.Item className="md:w-full lg:w-full"> + <Container + className="p-1" + justify="between" + gap="xs" + > + <Container.Item> + <Label className="font-semibold text-text-primary"> + Extend Your Website + </Label> + </Container.Item> + <Container.Item + containerType="flex" + direction="row" + className="items-center" + gap="xs" + > + <Button + className="p-0 text-icon-secondary" + variant="ghost" + > + <ArrowUpRight /> + </Button> + </Container.Item> + </Container> + </Container.Item> + <Container.Item className="md:w-full lg:w-full bg-field-primary-background rounded-lg"> + <Container className="grid grid-cols-2 p-1 gap-1"> + { astraRadioButtonGroupData.map( ( card ) => ( + <Container.Item + key={ card.id } + className="md:w-full lg:w-full flex" + > + <Container + containerType="flex" + direction="column" + className="flex-1 gap-1 shadow-soft-shadow-inner p-2 rounded-md bg-background-primary" + > + <Container.Item> + <Container + align="start" + className="gap-0" + > + <Container.Item + className="[&>svg]:size-5" + grow={ 1 } + order="none" + shrink={ 1 } + > + { card.svg } + </Container.Item> + <Container.Item> + <Container + gap="xs" + align="center" + > + <Badge + label={ + card.badgeText + } + icon={ null } + variant="green" + closable={ + false + } + className="py-0" + /> + <Button + variant="link" + className="p-0 text-link-primary" + size="sm" + > + { + card.buttonText + } + </Button> + </Container> + </Container.Item> + { /* <Container.Item> + <Button + variant="link" + className="p-0 text-link-primary" + size="sm" + > + { + card.buttonText + } + </Button> + </Container.Item> */ } + </Container> + </Container.Item> + <Container.Item className="gap-0.5 p-1"> + <Label className="text-sm font-semibold"> + { card.title } + </Label> + <Label + variant="help" + className="text-sm" + > + { card.description } + </Label> + </Container.Item> + </Container> + </Container.Item> + ) ) } + </Container> + </Container.Item> + </Container> + { /* Build website with AI card */ } + <Container + direction="column" + gap="xs" + className="p-4 bg-background-primary shadow-sm rounded-xl" + > + <Container.Item className="w-full"> + <img + src="https://placehold.co/384x138" + alt="Build website with AI" + className="w-full h-full object-cover rounded-md" + /> + </Container.Item> + <Container.Item> + <div className="text-base font-semibold text-text-primary my-1"> + Build website 10x faster with AI + </div> + <p className="text-sm text-text-secondary my-1"> + Beautiful pages, persuasive content, and + custom code in seconds. The possibilities + are endless! + </p> + </Container.Item> + <Container.Item className="flex gap-4 my-1"> + <Button variant="secondary">Get Started</Button> + <p className="text-xs text-text-tertiary"> + Get 1000 free monthly credits + </p> + </Container.Item> + </Container> + { /* Quick Access card */ } + <Container + containerType="flex" + direction="column" + className="bg-background-primary border border-solid rounded-xl border-border-subtle p-3" + gap="xs" + > + <Container.Item className="md:w-full lg:w-full p-1"> + <Label className="font-semibold text-text-primary"> + Quick Access + </Label> + </Container.Item> + <Container.Item className="flex flex-col md:w-full lg:w-full bg-field-primary-background gap-1 p-1 rounded-lg"> + { containerRowButtons.map( ( button ) => ( + <div + key={ button.id } + className='p-2 gap-1 className="items-cente bg-background-primary rounded-md shadow-soft-shadow-inner' + > + <Container + key={ button.id } + containerType="flex" + direction="row" + className="gap-1 p-1" + align="center" + > + <Container.Item> + { button.icon } + </Container.Item> + <Container.Item> + <Button + variant="ghost" + className="py-0 font-medium text-text-primary" + > + { button.label } + </Button> + </Container.Item> + <Container.Item> + { button.bagde } + </Container.Item> + </Container> + </div> + ) ) } + </Container.Item> + </Container> + </Container.Item> + </Container> + </div> + </> + ); +}; diff --git a/src/theme/default-config.js b/src/theme/default-config.js index cce20f0c..a3fcd93d 100644 --- a/src/theme/default-config.js +++ b/src/theme/default-config.js @@ -20,6 +20,7 @@ const defaultTheme = { 'background-secondary': '#F3F4F6', 'background-inverse': '#111827', 'background-brand': '#2563EB', + 'background-important': '#DC2626', // field 'field-primary-background': '#F9FAFB', 'field-secondary-background': '#FFFFFF', diff --git a/tailwind.config.js b/tailwind.config.js index da894f5f..ed7c8821 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,4 +2,7 @@ const withTW = require('./src/utilities/withTW'); module.exports = withTW({ content: ['./src/**/*.{js,jsx}'], + plugins: [ + require('@tailwindcss/container-queries'), + ], });