diff --git a/.changeset/config.json b/.changeset/config.json index b71f00a3c4..e61d0f1474 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -16,6 +16,7 @@ "@contentful/f36-layout", "@contentful/f36-progress-stepper", "@contentful/f36-navlist", + "@contentful/f36-navbar", "@contentful/f36-website" ], "commit": false, diff --git a/package-lock.json b/package-lock.json index a9ee63f181..9baa461691 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3605,7 +3605,8 @@ "node_modules/@contentful/f36-icon-alpha": { "name": "@contentful/f36-icon", "version": "5.0.0-alpha.20", - "license": "MIT", + "resolved": "https://registry.npmjs.org/@contentful/f36-icon/-/f36-icon-5.0.0-alpha.20.tgz", + "integrity": "sha512-kI7HJggp/H8whiUL/RrG988nEvQq2SuZVyQn4kyiWYSlMWBRqQXZRvXfsM/RILWMgz2LxryXaT1YGVy2E4UfJA==", "dependencies": { "@contentful/f36-core": "^4.65.4", "@contentful/f36-tokens": "^4.0.4", @@ -3624,11 +3625,31 @@ "resolved": "packages/components/icons", "link": true }, + "node_modules/@contentful/f36-icons-alpha": { + "name": "@contentful/f36-icons", + "version": "5.0.0-alpha.26", + "license": "MIT", + "dependencies": { + "@contentful/f36-core": "^4.63.0", + "@contentful/f36-icon-alpha": "npm:@contentful/f36-icon@alpha", + "@contentful/f36-tokens": "^4.0.1", + "@phosphor-icons/react": "^2.1.4", + "emotion": "^10.0.17" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/@contentful/f36-icons-v4": { "name": "@contentful/f36-icons", "version": "4.28.2", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icons/4.28.2/8297da32e9d8e60e09550e365f24a74a8e12326c", + "integrity": "sha512-p7oWbQ5ITlMMuEl/6t/6JLVrCVhDE2nA8mv1VR4DHjXPm0y9w14533rCKxNIREZX8iVmyBoaqI3vdPsjUs1CAw==", "dev": true, - "license": "MIT", "dependencies": { "@contentful/f36-core": "^4.65.0", "@contentful/f36-icon": "^4.65.0", @@ -3641,11 +3662,12 @@ } }, "node_modules/@contentful/f36-icons-v4/node_modules/@contentful/f36-icon": { - "version": "4.67.1", + "version": "4.67.2", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icon/4.67.2/0e7f709f8dce85a62c3d484973dda796963d65c3", + "integrity": "sha512-vJAk6KO88GVnHdPSXurUA67F4wl01sZHaaE5eHGvt/s+YuI47dstgROr5+z66qmncKpcMWOTv4/+jqYV1Ko56A==", "dev": true, - "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.67.1", + "@contentful/f36-core": "^4.67.2", "@contentful/f36-tokens": "^4.0.4", "emotion": "^10.0.17" }, @@ -3912,17 +3934,6 @@ "version": "0.8.0", "license": "MIT" }, - "node_modules/@emotion/is-prop-valid": { - "version": "1.2.2", - "license": "MIT", - "dependencies": { - "@emotion/memoize": "^0.8.1" - } - }, - "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": { - "version": "0.8.1", - "license": "MIT" - }, "node_modules/@emotion/memoize": { "version": "0.7.4", "license": "MIT" @@ -3958,6 +3969,70 @@ "version": "0.2.5", "license": "MIT" }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", + "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", + "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", + "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", + "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/@esbuild/darwin-arm64": { "version": "0.18.20", "cpu": [ @@ -3973,6 +4048,294 @@ "node": ">=12" } }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", + "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", + "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", + "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", + "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", + "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", + "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", + "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", + "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", + "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", + "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", + "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", + "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", + "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", + "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", + "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", + "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", + "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", + "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "dev": true, @@ -3987,8 +4350,19 @@ "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, + "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { + "version": "3.4.1", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/@eslint-community/regexpp": { - "version": "4.10.0", + "version": "4.5.1", "dev": true, "license": "MIT", "engines": { @@ -3996,7 +4370,7 @@ } }, "node_modules/@eslint/eslintrc": { - "version": "2.1.4", + "version": "2.1.0", "dev": true, "license": "MIT", "dependencies": { @@ -4023,7 +4397,7 @@ "license": "Python-2.0" }, "node_modules/@eslint/eslintrc/node_modules/globals": { - "version": "13.24.0", + "version": "13.20.0", "dev": true, "license": "MIT", "dependencies": { @@ -4059,7 +4433,7 @@ } }, "node_modules/@eslint/js": { - "version": "8.57.0", + "version": "8.44.0", "dev": true, "license": "MIT", "engines": { @@ -4085,12 +4459,12 @@ } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.14", + "version": "0.11.10", "dev": true, "license": "Apache-2.0", "dependencies": { - "@humanwhocodes/object-schema": "^2.0.2", - "debug": "^4.3.1", + "@humanwhocodes/object-schema": "^1.2.1", + "debug": "^4.1.1", "minimatch": "^3.0.5" }, "engines": { @@ -4110,7 +4484,7 @@ } }, "node_modules/@humanwhocodes/object-schema": { - "version": "2.0.3", + "version": "1.2.1", "dev": true, "license": "BSD-3-Clause" }, @@ -5385,36 +5759,6 @@ "version": "12.3.4", "license": "MIT" }, - "node_modules/@next/swc-android-arm-eabi": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.4.tgz", - "integrity": "sha512-cM42Cw6V4Bz/2+j/xIzO8nK/Q3Ly+VSlZJTa1vHzsocJRYz8KT6MrreXaci2++SIZCF1rVRCDgAg5PpqRibdIA==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-android-arm64": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.4.tgz", - "integrity": "sha512-5jf0dTBjL+rabWjGj3eghpLUxCukRhBcEJgwLedewEA/LJk2HyqCvGIwj5rH+iwmq1llCWbOky2dO3pVljrapg==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 10" - } - }, "node_modules/@next/swc-darwin-arm64": { "version": "12.3.4", "cpu": [ @@ -5429,156 +5773,6 @@ "node": ">= 10" } }, - "node_modules/@next/swc-darwin-x64": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.4.tgz", - "integrity": "sha512-PPF7tbWD4k0dJ2EcUSnOsaOJ5rhT3rlEt/3LhZUGiYNL8KvoqczFrETlUx0cUYaXe11dRA3F80Hpt727QIwByQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-freebsd-x64": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.4.tgz", - "integrity": "sha512-KM9JXRXi/U2PUM928z7l4tnfQ9u8bTco/jb939pdFUHqc28V43Ohd31MmZD1QzEK4aFlMRaIBQOWQZh4D/E5lQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm-gnueabihf": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.4.tgz", - "integrity": "sha512-3zqD3pO+z5CZyxtKDTnOJ2XgFFRUBciOox6EWkoZvJfc9zcidNAQxuwonUeNts6Xbm8Wtm5YGIRC0x+12YH7kw==", - "cpu": [ - "arm" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-gnu": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.4.tgz", - "integrity": "sha512-kiX0vgJGMZVv+oo1QuObaYulXNvdH/IINmvdZnVzMO/jic/B8EEIGlZ8Bgvw8LCjH3zNVPO3mGrdMvnEEPEhKA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-musl": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.4.tgz", - "integrity": "sha512-EETZPa1juczrKLWk5okoW2hv7D7WvonU+Cf2CgsSoxgsYbUCZ1voOpL4JZTOb6IbKMDo6ja+SbY0vzXZBUMvkQ==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-gnu": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.4.tgz", - "integrity": "sha512-4csPbRbfZbuWOk3ATyWcvVFdD9/Rsdq5YHKvRuEni68OCLkfy4f+4I9OBpyK1SKJ00Cih16NJbHE+k+ljPPpag==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-musl": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.4.tgz", - "integrity": "sha512-YeBmI+63Ro75SUiL/QXEVXQ19T++58aI/IINOyhpsRL1LKdyfK/35iilraZEFz9bLQrwy1LYAR5lK200A9Gjbg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-arm64-msvc": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.4.tgz", - "integrity": "sha512-Sd0qFUJv8Tj0PukAYbCCDbmXcMkbIuhnTeHm9m4ZGjCf6kt7E/RMs55Pd3R5ePjOkN7dJEuxYBehawTR/aPDSQ==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-ia32-msvc": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.4.tgz", - "integrity": "sha512-rt/vv/vg/ZGGkrkKcuJ0LyliRdbskQU+91bje+PgoYmxTZf/tYs6IfbmgudBJk6gH3QnjHWbkphDdRQrseRefQ==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-x64-msvc": { - "version": "12.3.4", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.4.tgz", - "integrity": "sha512-DQ20JEfTBZAgF8QCjYfJhv2/279M6onxFjdG/+5B0Cyj00/EdBxiWb2eGGFgQhrBbNv/lsvzFbbi0Ptf8Vw/bg==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "license": "MIT", @@ -6078,7 +6272,7 @@ } }, "node_modules/@popperjs/core": { - "version": "2.11.5", + "version": "2.11.8", "license": "MIT", "funding": { "type": "opencollective", @@ -6298,8 +6492,9 @@ }, "node_modules/@sindresorhus/merge-streams": { "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz", + "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==", "dev": true, - "license": "MIT", "engines": { "node": ">=18" }, @@ -6350,8 +6545,9 @@ }, "node_modules/@size-limit/preset-big-lib/node_modules/@size-limit/file": { "version": "8.2.6", + "resolved": "https://registry.npmjs.org/@size-limit/file/-/file-8.2.6.tgz", + "integrity": "sha512-B7ayjxiJsbtXdIIWazJkB5gezi5WBMecdHTFPMDhI3NwEML1RVvUjAkrb1mPAAkIpt2LVHPnhdCUHjqDdjugwg==", "dev": true, - "license": "MIT", "dependencies": { "semver": "7.5.3" }, @@ -6364,8 +6560,9 @@ }, "node_modules/@size-limit/preset-big-lib/node_modules/@size-limit/time": { "version": "8.2.6", + "resolved": "https://registry.npmjs.org/@size-limit/time/-/time-8.2.6.tgz", + "integrity": "sha512-fUEPvz7Uq6+oUQxSYbNlJt3tTgQBl1VY21USi/B7ebdnVKLnUx1JyPI9v7imN6XEkB2VpJtnYgjFeLgNrirzMA==", "dev": true, - "license": "MIT", "dependencies": { "estimo": "^2.3.6", "react": "^17.0.2" @@ -6379,8 +6576,9 @@ }, "node_modules/@size-limit/preset-big-lib/node_modules/@size-limit/webpack": { "version": "8.2.6", + "resolved": "https://registry.npmjs.org/@size-limit/webpack/-/webpack-8.2.6.tgz", + "integrity": "sha512-y2sB66m5sJxIjZ8SEAzpWbiw3/+bnQHDHfk9cSbV5ChKklq02AlYg8BS5KxGWmMpdyUo4TzpjSCP9oEudY+hxQ==", "dev": true, - "license": "MIT", "dependencies": { "nanoid": "^3.3.6", "webpack": "^5.88.0" @@ -6394,8 +6592,9 @@ }, "node_modules/@size-limit/preset-big-lib/node_modules/semver": { "version": "7.5.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz", + "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==", "dev": true, - "license": "ISC", "dependencies": { "lru-cache": "^6.0.0" }, @@ -6408,8 +6607,9 @@ }, "node_modules/@size-limit/preset-big-lib/node_modules/size-limit": { "version": "8.2.6", + "resolved": "https://registry.npmjs.org/size-limit/-/size-limit-8.2.6.tgz", + "integrity": "sha512-zpznim/tX/NegjoQuRKgWTF4XiB0cn2qt90uJzxYNTFAqexk4b94DOAkBD3TwhC6c3kw2r0KcnA5upziVMZqDg==", "dev": true, - "license": "MIT", "dependencies": { "bytes-iec": "^3.1.1", "chokidar": "^3.5.3", @@ -11854,6 +12054,13 @@ "magic-string": "^0.25.0" } }, + "node_modules/@swc/helpers": { + "version": "0.4.11", + "license": "MIT", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@testing-library/dom": { "version": "8.10.1", "dev": true, @@ -12141,15 +12348,6 @@ "@types/unist": "*" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/html-minifier-terser": { "version": "5.1.2", "dev": true, @@ -12786,6 +12984,14 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@typescript-eslint/scope-manager/node_modules/eslint-visitor-keys": { + "version": "3.3.0", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, "node_modules/@typescript-eslint/type-utils": { "version": "5.47.1", "dev": true, @@ -12904,6 +13110,14 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/eslint-visitor-keys": { + "version": "3.3.0", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, "node_modules/@typescript-eslint/utils": { "version": "5.47.1", "dev": true, @@ -13011,10 +13225,13 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@ungap/structured-clone": { - "version": "1.2.0", + "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { + "version": "3.3.0", "dev": true, - "license": "ISC" + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } }, "node_modules/@webassemblyjs/ast": { "version": "1.12.1", @@ -15623,6 +15840,10 @@ "node": ">=0.10.0" } }, + "node_modules/classnames": { + "version": "2.3.1", + "license": "MIT" + }, "node_modules/clean-css": { "version": "4.2.4", "dev": true, @@ -18742,6 +18963,342 @@ "@esbuild/win32-x64": "0.18.20" } }, + "node_modules/esbuild/node_modules/@esbuild/android-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/android-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/android-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/darwin-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/freebsd-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/freebsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-loong64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-mips64el": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-ppc64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-riscv64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-s390x": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/linux-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/netbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/openbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/sunos-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/win32-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/win32-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/esbuild/node_modules/@esbuild/win32-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/escalade": { "version": "3.1.1", "license": "MIT", @@ -18811,27 +19368,26 @@ } }, "node_modules/eslint": { - "version": "8.57.0", + "version": "8.44.0", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", - "@eslint-community/regexpp": "^4.6.1", - "@eslint/eslintrc": "^2.1.4", - "@eslint/js": "8.57.0", - "@humanwhocodes/config-array": "^0.11.14", + "@eslint-community/regexpp": "^4.4.0", + "@eslint/eslintrc": "^2.1.0", + "@eslint/js": "8.44.0", + "@humanwhocodes/config-array": "^0.11.10", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", - "@ungap/structured-clone": "^1.2.0", - "ajv": "^6.12.4", + "ajv": "^6.10.0", "chalk": "^4.0.0", "cross-spawn": "^7.0.2", "debug": "^4.3.2", "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.2.2", - "eslint-visitor-keys": "^3.4.3", - "espree": "^9.6.1", + "eslint-scope": "^7.2.0", + "eslint-visitor-keys": "^3.4.1", + "espree": "^9.6.0", "esquery": "^1.4.2", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -18841,6 +19397,7 @@ "globals": "^13.19.0", "graphemer": "^1.4.0", "ignore": "^5.2.0", + "import-fresh": "^3.0.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "is-path-inside": "^3.0.3", @@ -18852,6 +19409,7 @@ "natural-compare": "^1.4.0", "optionator": "^0.9.3", "strip-ansi": "^6.0.1", + "strip-json-comments": "^3.1.0", "text-table": "^0.2.0" }, "bin": { @@ -19005,7 +19563,7 @@ } }, "node_modules/eslint-plugin-jest-dom": { - "version": "5.4.0", + "version": "5.0.1", "dev": true, "license": "MIT", "dependencies": { @@ -19018,13 +19576,8 @@ "yarn": ">=1" }, "peerDependencies": { - "@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0", - "eslint": "^6.8.0 || ^7.0.0 || ^8.0.0 || ^9.0.0" - }, - "peerDependenciesMeta": { - "@testing-library/dom": { - "optional": true - } + "@testing-library/dom": "^8.0.0 || ^9.0.0", + "eslint": "^6.8.0 || ^7.0.0 || ^8.0.0" } }, "node_modules/eslint-plugin-jsx-a11y": { @@ -19286,6 +19839,17 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/eslint-plugin-testing-library/node_modules/eslint-visitor-keys": { + "version": "3.4.1", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/eslint-plugin-you-dont-need-lodash-underscore": { "version": "6.12.0", "dev": true, @@ -19340,17 +19904,6 @@ "node": ">=10" } }, - "node_modules/eslint-visitor-keys": { - "version": "3.4.3", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, "node_modules/eslint/node_modules/argparse": { "version": "2.0.1", "dev": true, @@ -19368,7 +19921,7 @@ } }, "node_modules/eslint/node_modules/eslint-scope": { - "version": "7.2.2", + "version": "7.2.0", "dev": true, "license": "BSD-2-Clause", "dependencies": { @@ -19382,6 +19935,17 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint/node_modules/eslint-visitor-keys": { + "version": "3.4.1", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/eslint/node_modules/glob-parent": { "version": "6.0.2", "dev": true, @@ -19447,7 +20011,7 @@ "license": "ISC" }, "node_modules/espree": { - "version": "9.6.1", + "version": "9.6.0", "dev": true, "license": "BSD-2-Clause", "dependencies": { @@ -19462,6 +20026,17 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/espree/node_modules/eslint-visitor-keys": { + "version": "3.4.1", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/esprima": { "version": "4.0.1", "license": "BSD-2-Clause", @@ -20603,7 +21178,7 @@ } }, "node_modules/formik": { - "version": "2.4.6", + "version": "2.4.2", "dev": true, "funding": [ { @@ -20613,7 +21188,6 @@ ], "license": "Apache-2.0", "dependencies": { - "@types/hoist-non-react-statics": "^3.3.1", "deepmerge": "^2.1.1", "hoist-non-react-statics": "^3.3.0", "lodash": "^4.17.21", @@ -20750,8 +21324,10 @@ }, "node_modules/fsevents": { "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "dev": true, - "license": "MIT", + "hasInstallScript": true, "optional": true, "os": [ "darwin" @@ -20888,9 +21464,10 @@ } }, "node_modules/get-tsconfig": { - "version": "4.7.3", + "version": "4.7.5", + "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.5.tgz", + "integrity": "sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==", "dev": true, - "license": "MIT", "dependencies": { "resolve-pkg-maps": "^1.0.0" }, @@ -25270,16 +25847,16 @@ } }, "node_modules/jest-resolve": { - "version": "29.7.0", + "version": "29.6.1", "dev": true, "license": "MIT", "dependencies": { "chalk": "^4.0.0", "graceful-fs": "^4.2.9", - "jest-haste-map": "^29.7.0", + "jest-haste-map": "^29.6.1", "jest-pnp-resolver": "^1.2.2", - "jest-util": "^29.7.0", - "jest-validate": "^29.7.0", + "jest-util": "^29.6.1", + "jest-validate": "^29.6.1", "resolve": "^1.20.0", "resolve.exports": "^2.0.0", "slash": "^3.0.0" @@ -25310,11 +25887,11 @@ } }, "node_modules/jest-resolve/node_modules/@jest/types": { - "version": "29.6.3", + "version": "29.6.1", "dev": true, "license": "MIT", "dependencies": { - "@jest/schemas": "^29.6.3", + "@jest/schemas": "^29.6.0", "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", "@types/node": "*", @@ -25326,7 +25903,7 @@ } }, "node_modules/jest-resolve/node_modules/@types/yargs": { - "version": "17.0.32", + "version": "17.0.24", "dev": true, "license": "MIT", "dependencies": { @@ -25356,7 +25933,7 @@ } }, "node_modules/jest-resolve/node_modules/jest-get-type": { - "version": "29.6.3", + "version": "29.4.3", "dev": true, "license": "MIT", "engines": { @@ -25364,19 +25941,19 @@ } }, "node_modules/jest-resolve/node_modules/jest-haste-map": { - "version": "29.7.0", + "version": "29.6.1", "dev": true, "license": "MIT", "dependencies": { - "@jest/types": "^29.6.3", + "@jest/types": "^29.6.1", "@types/graceful-fs": "^4.1.3", "@types/node": "*", "anymatch": "^3.0.3", "fb-watchman": "^2.0.0", "graceful-fs": "^4.2.9", - "jest-regex-util": "^29.6.3", - "jest-util": "^29.7.0", - "jest-worker": "^29.7.0", + "jest-regex-util": "^29.4.3", + "jest-util": "^29.6.1", + "jest-worker": "^29.6.1", "micromatch": "^4.0.4", "walker": "^1.0.8" }, @@ -25388,11 +25965,11 @@ } }, "node_modules/jest-resolve/node_modules/jest-util": { - "version": "29.7.0", + "version": "29.6.1", "dev": true, "license": "MIT", "dependencies": { - "@jest/types": "^29.6.3", + "@jest/types": "^29.6.1", "@types/node": "*", "chalk": "^4.0.0", "ci-info": "^3.2.0", @@ -25404,28 +25981,28 @@ } }, "node_modules/jest-resolve/node_modules/jest-validate": { - "version": "29.7.0", + "version": "29.6.1", "dev": true, "license": "MIT", "dependencies": { - "@jest/types": "^29.6.3", + "@jest/types": "^29.6.1", "camelcase": "^6.2.0", "chalk": "^4.0.0", - "jest-get-type": "^29.6.3", + "jest-get-type": "^29.4.3", "leven": "^3.1.0", - "pretty-format": "^29.7.0" + "pretty-format": "^29.6.1" }, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, "node_modules/jest-resolve/node_modules/jest-worker": { - "version": "29.7.0", + "version": "29.6.1", "dev": true, "license": "MIT", "dependencies": { "@types/node": "*", - "jest-util": "^29.7.0", + "jest-util": "^29.6.1", "merge-stream": "^2.0.0", "supports-color": "^8.0.0" }, @@ -25434,11 +26011,11 @@ } }, "node_modules/jest-resolve/node_modules/pretty-format": { - "version": "29.7.0", + "version": "29.6.1", "dev": true, "license": "MIT", "dependencies": { - "@jest/schemas": "^29.6.3", + "@jest/schemas": "^29.6.0", "ansi-styles": "^5.0.0", "react-is": "^18.0.0" }, @@ -25447,7 +26024,7 @@ } }, "node_modules/jest-resolve/node_modules/react-is": { - "version": "18.3.1", + "version": "18.2.0", "dev": true, "license": "MIT" }, @@ -25926,8 +26503,9 @@ }, "node_modules/jest-watch-typeahead": { "version": "2.2.2", + "resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-2.2.2.tgz", + "integrity": "sha512-+QgOFW4o5Xlgd6jGS5X37i08tuuXNW8X0CV9WNFi+3n8ExCIP+E1melYhvYLjv5fE6D0yyzk74vsSO8I6GqtvQ==", "dev": true, - "license": "MIT", "dependencies": { "ansi-escapes": "^6.0.0", "chalk": "^5.2.0", @@ -25946,8 +26524,9 @@ }, "node_modules/jest-watch-typeahead/node_modules/ansi-escapes": { "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.1.tgz", + "integrity": "sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==", "dev": true, - "license": "MIT", "engines": { "node": ">=14.16" }, @@ -25968,8 +26547,9 @@ }, "node_modules/jest-watch-typeahead/node_modules/chalk": { "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", "dev": true, - "license": "MIT", "engines": { "node": "^12.17.0 || ^14.13 || >=16.0.0" }, @@ -25987,8 +26567,9 @@ }, "node_modules/jest-watch-typeahead/node_modules/slash": { "version": "5.1.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", "dev": true, - "license": "MIT", "engines": { "node": ">=14.16" }, @@ -29715,13 +30296,13 @@ } }, "node_modules/next-auth": { - "version": "4.24.7", + "version": "4.24.5", "license": "ISC", "dependencies": { "@babel/runtime": "^7.20.13", "@panva/hkdf": "^1.0.2", "cookie": "^0.5.0", - "jose": "^4.15.5", + "jose": "^4.11.4", "oauth": "^0.9.15", "openid-client": "^5.4.0", "preact": "^10.6.3", @@ -29783,13 +30364,6 @@ "version": "1.1.0", "license": "ISC" }, - "node_modules/next/node_modules/@swc/helpers": { - "version": "0.4.11", - "license": "MIT", - "dependencies": { - "tslib": "^2.4.0" - } - }, "node_modules/next/node_modules/postcss": { "version": "8.4.14", "funding": [ @@ -30128,17 +30702,6 @@ "node": ">=0.10.0" } }, - "node_modules/normalize-url": { - "version": "6.1.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/npm-run-path": { "version": "2.0.2", "dev": true, @@ -31870,6 +32433,17 @@ "postcss": "^8.2.15" } }, + "node_modules/postcss-normalize-url/node_modules/normalize-url": { + "version": "6.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/postcss-normalize-whitespace": { "version": "5.1.1", "dev": true, @@ -32607,8 +33181,11 @@ } }, "node_modules/react-animate-height": { - "version": "3.2.3", + "version": "3.0.4", "license": "MIT", + "dependencies": { + "classnames": "^2.3.1" + }, "engines": { "node": ">= 12.0.0" }, @@ -32639,14 +33216,14 @@ } }, "node_modules/react-day-picker": { - "version": "8.10.1", + "version": "8.8.0", "license": "MIT", "funding": { "type": "individual", "url": "https://github.com/sponsors/gpbl" }, "peerDependencies": { - "date-fns": "^2.28.0 || ^3.0.0", + "date-fns": "^2.28.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, @@ -34016,16 +34593,18 @@ }, "node_modules/resolve-pkg-maps": { "version": "1.0.0", + "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz", + "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==", "dev": true, - "license": "MIT", "funding": { "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1" } }, "node_modules/resolve-tsconfig": { "version": "1.3.0", + "resolved": "https://registry.npmjs.org/resolve-tsconfig/-/resolve-tsconfig-1.3.0.tgz", + "integrity": "sha512-Ba5mo3soshb2CnIcNFz75F/80H/2eMVxrlmdgoSDNH7Lr6UAoT3BvxNtc7+VXqKSBlC0SJk2qSXOTcy0/p7cFw==", "dev": true, - "license": "MIT", "engines": { "node": ">=16", "pnpm": ">=7" @@ -34755,8 +35334,9 @@ } }, "node_modules/semver": { - "version": "7.6.1", - "license": "ISC", + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", "bin": { "semver": "bin/semver.js" }, @@ -35091,8 +35671,9 @@ }, "node_modules/size-limit": { "version": "10.0.3", + "resolved": "https://registry.npmjs.org/size-limit/-/size-limit-10.0.3.tgz", + "integrity": "sha512-5k1k2Kykueq5K/PJQclKx2GS1prz4WNNvm+x5CQ2oWLHwmuFnb1z1g412O9aoOFqafXicJTZgZHXRyIe2GZQfA==", "dev": true, - "license": "MIT", "dependencies": { "bytes-iec": "^3.1.1", "chokidar": "^3.5.3", @@ -35109,9 +35690,10 @@ } }, "node_modules/size-limit/node_modules/globby": { - "version": "14.0.1", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz", + "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==", "dev": true, - "license": "MIT", "dependencies": { "@sindresorhus/merge-streams": "^2.1.0", "fast-glob": "^3.3.2", @@ -35129,8 +35711,9 @@ }, "node_modules/size-limit/node_modules/path-type": { "version": "5.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz", + "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==", "dev": true, - "license": "MIT", "engines": { "node": ">=12" }, @@ -35140,8 +35723,9 @@ }, "node_modules/size-limit/node_modules/slash": { "version": "5.1.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", "dev": true, - "license": "MIT", "engines": { "node": ">=14.16" }, @@ -36978,8 +37562,9 @@ }, "node_modules/tsconfig-to-dual-package": { "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tsconfig-to-dual-package/-/tsconfig-to-dual-package-1.2.0.tgz", + "integrity": "sha512-UtMinqTLfWr9fX6KidLsEcCJoA/jSLPIS00ohpQybMSxA3LlJCRf2DsGPw4AJJ8AP4FOHfbQJFJ5XgLoL7RoLw==", "dev": true, - "license": "MIT", "dependencies": { "resolve-tsconfig": "^1.3.0" }, @@ -37146,12 +37731,13 @@ "license": "0BSD" }, "node_modules/tsx": { - "version": "4.7.2", + "version": "4.16.2", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.16.2.tgz", + "integrity": "sha512-C1uWweJDgdtX2x600HjaFaucXTilT7tgUZHbOE4+ypskZ1OP8CRCSDkCxG6Vya9EwaFIVagWwpaVAn5wzypaqQ==", "dev": true, - "license": "MIT", "dependencies": { - "esbuild": "~0.19.10", - "get-tsconfig": "^4.7.2" + "esbuild": "~0.21.5", + "get-tsconfig": "^4.7.5" }, "bin": { "tsx": "dist/cli.mjs" @@ -37164,12 +37750,13 @@ } }, "node_modules/tsx/node_modules/@esbuild/darwin-arm64": { - "version": "0.19.12", + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz", + "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==", "cpu": [ "arm64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "darwin" @@ -37179,10 +37766,11 @@ } }, "node_modules/tsx/node_modules/esbuild": { - "version": "0.19.12", + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", + "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", "dev": true, "hasInstallScript": true, - "license": "MIT", "bin": { "esbuild": "bin/esbuild" }, @@ -37190,29 +37778,29 @@ "node": ">=12" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.19.12", - "@esbuild/android-arm": "0.19.12", - "@esbuild/android-arm64": "0.19.12", - "@esbuild/android-x64": "0.19.12", - "@esbuild/darwin-arm64": "0.19.12", - "@esbuild/darwin-x64": "0.19.12", - "@esbuild/freebsd-arm64": "0.19.12", - "@esbuild/freebsd-x64": "0.19.12", - "@esbuild/linux-arm": "0.19.12", - "@esbuild/linux-arm64": "0.19.12", - "@esbuild/linux-ia32": "0.19.12", - "@esbuild/linux-loong64": "0.19.12", - "@esbuild/linux-mips64el": "0.19.12", - "@esbuild/linux-ppc64": "0.19.12", - "@esbuild/linux-riscv64": "0.19.12", - "@esbuild/linux-s390x": "0.19.12", - "@esbuild/linux-x64": "0.19.12", - "@esbuild/netbsd-x64": "0.19.12", - "@esbuild/openbsd-x64": "0.19.12", - "@esbuild/sunos-x64": "0.19.12", - "@esbuild/win32-arm64": "0.19.12", - "@esbuild/win32-ia32": "0.19.12", - "@esbuild/win32-x64": "0.19.12" + "@esbuild/aix-ppc64": "0.21.5", + "@esbuild/android-arm": "0.21.5", + "@esbuild/android-arm64": "0.21.5", + "@esbuild/android-x64": "0.21.5", + "@esbuild/darwin-arm64": "0.21.5", + "@esbuild/darwin-x64": "0.21.5", + "@esbuild/freebsd-arm64": "0.21.5", + "@esbuild/freebsd-x64": "0.21.5", + "@esbuild/linux-arm": "0.21.5", + "@esbuild/linux-arm64": "0.21.5", + "@esbuild/linux-ia32": "0.21.5", + "@esbuild/linux-loong64": "0.21.5", + "@esbuild/linux-mips64el": "0.21.5", + "@esbuild/linux-ppc64": "0.21.5", + "@esbuild/linux-riscv64": "0.21.5", + "@esbuild/linux-s390x": "0.21.5", + "@esbuild/linux-x64": "0.21.5", + "@esbuild/netbsd-x64": "0.21.5", + "@esbuild/openbsd-x64": "0.21.5", + "@esbuild/sunos-x64": "0.21.5", + "@esbuild/win32-arm64": "0.21.5", + "@esbuild/win32-ia32": "0.21.5", + "@esbuild/win32-x64": "0.21.5" } }, "node_modules/tty-table": { @@ -37292,33 +37880,100 @@ } }, "node_modules/turbo": { - "version": "1.10.13", + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.13.4.tgz", + "integrity": "sha512-1q7+9UJABuBAHrcC4Sxp5lOqYS5mvxRrwa33wpIyM18hlOCpRD/fTJNxZ0vhbMcJmz15o9kkVm743mPn7p6jpQ==", "dev": true, - "license": "MPL-2.0", "bin": { "turbo": "bin/turbo" }, "optionalDependencies": { - "turbo-darwin-64": "1.10.13", - "turbo-darwin-arm64": "1.10.13", - "turbo-linux-64": "1.10.13", - "turbo-linux-arm64": "1.10.13", - "turbo-windows-64": "1.10.13", - "turbo-windows-arm64": "1.10.13" - } + "turbo-darwin-64": "1.13.4", + "turbo-darwin-arm64": "1.13.4", + "turbo-linux-64": "1.13.4", + "turbo-linux-arm64": "1.13.4", + "turbo-windows-64": "1.13.4", + "turbo-windows-arm64": "1.13.4" + } + }, + "node_modules/turbo-darwin-64": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.13.4.tgz", + "integrity": "sha512-A0eKd73R7CGnRinTiS7txkMElg+R5rKFp9HV7baDiEL4xTG1FIg/56Vm7A5RVgg8UNgG2qNnrfatJtb+dRmNdw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] }, "node_modules/turbo-darwin-arm64": { - "version": "1.10.13", + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.13.4.tgz", + "integrity": "sha512-eG769Q0NF6/Vyjsr3mKCnkG/eW6dKMBZk6dxWOdrHfrg6QgfkBUk0WUUujzdtVPiUIvsh4l46vQrNVd9EOtbyA==", "cpu": [ "arm64" ], "dev": true, - "license": "MPL-2.0", "optional": true, "os": [ "darwin" ] }, + "node_modules/turbo-linux-64": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.13.4.tgz", + "integrity": "sha512-Bq0JphDeNw3XEi+Xb/e4xoKhs1DHN7OoLVUbTIQz+gazYjigVZvtwCvgrZI7eW9Xo1eOXM2zw2u1DGLLUfmGkQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/turbo-linux-arm64": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.13.4.tgz", + "integrity": "sha512-BJcXw1DDiHO/okYbaNdcWN6szjXyHWx9d460v6fCHY65G8CyqGU3y2uUTPK89o8lq/b2C8NK0yZD+Vp0f9VoIg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/turbo-windows-64": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.13.4.tgz", + "integrity": "sha512-OFFhXHOFLN7A78vD/dlVuuSSVEB3s9ZBj18Tm1hk3aW1HTWTuAw0ReN6ZNlVObZUHvGy8d57OAGGxf2bT3etQw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/turbo-windows-arm64": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.13.4.tgz", + "integrity": "sha512-u5A+VOKHswJJmJ8o8rcilBfU5U3Y1TTAfP9wX8bFh8teYF1ghP0EhtMRLjhtp6RPa+XCxHHVA2CiC3gbh5eg5g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, "node_modules/tweetnacl": { "version": "0.14.5", "license": "Unlicense" @@ -37565,8 +38220,9 @@ }, "node_modules/unicorn-magic": { "version": "0.1.0", + "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz", + "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==", "dev": true, - "license": "MIT", "engines": { "node": ">=18" }, @@ -39601,7 +40257,7 @@ }, "packages/components/layout": { "name": "@contentful/f36-layout", - "version": "5.0.0-alpha.5", + "version": "5.0.0-alpha.8", "license": "MIT", "dependencies": { "@contentful/f36-core": "^4.68.1", @@ -39785,10 +40441,11 @@ } }, "packages/components/multiselect/node_modules/@contentful/f36-icon": { - "version": "4.67.0", - "license": "MIT", + "version": "4.67.2", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icon/4.67.2/0e7f709f8dce85a62c3d484973dda796963d65c3", + "integrity": "sha512-vJAk6KO88GVnHdPSXurUA67F4wl01sZHaaE5eHGvt/s+YuI47dstgROr5+z66qmncKpcMWOTv4/+jqYV1Ko56A==", "dependencies": { - "@contentful/f36-core": "^4.67.0", + "@contentful/f36-core": "^4.67.2", "@contentful/f36-tokens": "^4.0.4", "emotion": "^10.0.17" }, @@ -39799,7 +40456,8 @@ }, "packages/components/multiselect/node_modules/@contentful/f36-icons": { "version": "4.28.2", - "license": "MIT", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icons/4.28.2/8297da32e9d8e60e09550e365f24a74a8e12326c", + "integrity": "sha512-p7oWbQ5ITlMMuEl/6t/6JLVrCVhDE2nA8mv1VR4DHjXPm0y9w14533rCKxNIREZX8iVmyBoaqI3vdPsjUs1CAw==", "dependencies": { "@contentful/f36-core": "^4.65.0", "@contentful/f36-icon": "^4.65.0", @@ -39844,13 +40502,14 @@ }, "packages/components/navbar": { "name": "@contentful/f36-navbar", - "version": "4.68.1", + "version": "5.0.0-alpha.25", "license": "MIT", "dependencies": { "@contentful/f36-avatar": "4.68.1", + "@contentful/f36-button": "^4.67.1", "@contentful/f36-core": "^4.68.1", - "@contentful/f36-icon": "^4.68.1", - "@contentful/f36-icons": "^4.29.0", + "@contentful/f36-icon": "5.0.0-alpha.20", + "@contentful/f36-icons": "5.0.0-alpha.25", "@contentful/f36-menu": "^4.68.1", "@contentful/f36-skeleton": "^4.68.1", "@contentful/f36-tokens": "^4.0.1", @@ -39862,30 +40521,20 @@ "react-dom": ">=16.8" } }, - "packages/components/navbar/node_modules/@contentful/f36-icon": { - "version": "4.68.1", - "resolved": "https://registry.npmjs.org/@contentful/f36-icon/-/f36-icon-4.68.1.tgz", - "integrity": "sha512-Tu7ILUcIuVr7VnnxZUhbOXRJ/z5GvnsTRpTGiiX//wibB2zQPwbsnFBQZaa/jfldgPLKwKNt371PpG2/JH4Z8A==", - "dependencies": { - "@contentful/f36-core": "^4.68.1", - "@contentful/f36-tokens": "^4.0.4", - "emotion": "^10.0.17" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" - } - }, "packages/components/navbar/node_modules/@contentful/f36-icons": { - "version": "4.29.0", - "resolved": "https://registry.npmjs.org/@contentful/f36-icons/-/f36-icons-4.29.0.tgz", - "integrity": "sha512-oo/e2UhugDuSw5AXp7aDPMaUMIJEuWTAk0UaYSqaDh3+cv/7yctyvhcU0mrolmhC8HDKBHXK4Z0/QZkvqNb+Mw==", + "version": "5.0.0-alpha.25", + "resolved": "https://registry.npmjs.org/@contentful/f36-icons/-/f36-icons-5.0.0-alpha.25.tgz", + "integrity": "sha512-K0fHaSeetuINpjoUSE/9HrVinE+Iq9fo+w6U3LkQo6iCWAH1kq/ILYhFyvVHXej5yfCrWPiSGbiQ+gDN5ZZplw==", "dependencies": { - "@contentful/f36-core": "^4.67.3", - "@contentful/f36-icon": "^4.67.3", + "@contentful/f36-core": "^4.63.0", + "@contentful/f36-icon-alpha": "npm:@contentful/f36-icon@alpha", "@contentful/f36-tokens": "^4.0.1", + "@phosphor-icons/react": "^2.1.4", "emotion": "^10.0.17" }, + "engines": { + "node": ">=16" + }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" @@ -40445,11 +41094,12 @@ } }, "packages/components/text-link/node_modules/@contentful/f36-icon": { - "version": "4.67.1", + "version": "4.67.2", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icon/4.67.2/0e7f709f8dce85a62c3d484973dda796963d65c3", + "integrity": "sha512-vJAk6KO88GVnHdPSXurUA67F4wl01sZHaaE5eHGvt/s+YuI47dstgROr5+z66qmncKpcMWOTv4/+jqYV1Ko56A==", "dev": true, - "license": "MIT", "dependencies": { - "@contentful/f36-core": "^4.67.1", + "@contentful/f36-core": "^4.67.2", "@contentful/f36-tokens": "^4.0.4", "emotion": "^10.0.17" }, @@ -40460,8 +41110,9 @@ }, "packages/components/text-link/node_modules/@contentful/f36-icons": { "version": "4.28.2", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icons/4.28.2/8297da32e9d8e60e09550e365f24a74a8e12326c", + "integrity": "sha512-p7oWbQ5ITlMMuEl/6t/6JLVrCVhDE2nA8mv1VR4DHjXPm0y9w14533rCKxNIREZX8iVmyBoaqI3vdPsjUs1CAw==", "dev": true, - "license": "MIT", "dependencies": { "@contentful/f36-core": "^4.65.0", "@contentful/f36-icon": "^4.65.0", @@ -40537,10 +41188,11 @@ } }, "packages/components/workbench/node_modules/@contentful/f36-icon": { - "version": "4.67.0", - "license": "MIT", + "version": "4.67.2", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icon/4.67.2/0e7f709f8dce85a62c3d484973dda796963d65c3", + "integrity": "sha512-vJAk6KO88GVnHdPSXurUA67F4wl01sZHaaE5eHGvt/s+YuI47dstgROr5+z66qmncKpcMWOTv4/+jqYV1Ko56A==", "dependencies": { - "@contentful/f36-core": "^4.67.0", + "@contentful/f36-core": "^4.67.2", "@contentful/f36-tokens": "^4.0.4", "emotion": "^10.0.17" }, @@ -40551,7 +41203,8 @@ }, "packages/components/workbench/node_modules/@contentful/f36-icons": { "version": "4.28.2", - "license": "MIT", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icons/4.28.2/8297da32e9d8e60e09550e365f24a74a8e12326c", + "integrity": "sha512-p7oWbQ5ITlMMuEl/6t/6JLVrCVhDE2nA8mv1VR4DHjXPm0y9w14533rCKxNIREZX8iVmyBoaqI3vdPsjUs1CAw==", "dependencies": { "@contentful/f36-core": "^4.65.0", "@contentful/f36-icon": "^4.65.0", @@ -40579,6 +41232,17 @@ "react-dom": ">=16.8" } }, + "packages/core/node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "packages/core/node_modules/@emotion/memoize": { + "version": "0.8.0", + "license": "MIT" + }, "packages/f36-docs-utils": { "name": "@contentful/f36-docs-utils", "version": "4.0.2", @@ -40595,10 +41259,11 @@ } }, "packages/f36-docs-utils/node_modules/@contentful/f36-icon": { - "version": "4.67.0", - "license": "MIT", + "version": "4.67.2", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icon/4.67.2/0e7f709f8dce85a62c3d484973dda796963d65c3", + "integrity": "sha512-vJAk6KO88GVnHdPSXurUA67F4wl01sZHaaE5eHGvt/s+YuI47dstgROr5+z66qmncKpcMWOTv4/+jqYV1Ko56A==", "dependencies": { - "@contentful/f36-core": "^4.67.0", + "@contentful/f36-core": "^4.67.2", "@contentful/f36-tokens": "^4.0.4", "emotion": "^10.0.17" }, @@ -40609,7 +41274,8 @@ }, "packages/f36-docs-utils/node_modules/@contentful/f36-icons": { "version": "4.28.2", - "license": "MIT", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-icons/4.28.2/8297da32e9d8e60e09550e365f24a74a8e12326c", + "integrity": "sha512-p7oWbQ5ITlMMuEl/6t/6JLVrCVhDE2nA8mv1VR4DHjXPm0y9w14533rCKxNIREZX8iVmyBoaqI3vdPsjUs1CAw==", "dependencies": { "@contentful/f36-core": "^4.65.0", "@contentful/f36-icon": "^4.65.0", @@ -40965,6 +41631,26 @@ "react-dom": ">=16.8" } }, + "packages/forma-36-react-components/node_modules/@contentful/f36-navbar": { + "version": "4.68.1", + "resolved": "https://registry.npmjs.org/@contentful/f36-navbar/-/f36-navbar-4.68.1.tgz", + "integrity": "sha512-kYQKNpNn24ItHu5jFTToY9OrTK2cgW1q3mvfzYTfnYb0a+Ne8v8+a6qC0IH5B8IKSCC/SsYYBeuHboQK1dkm7w==", + "dependencies": { + "@contentful/f36-avatar": "4.68.1", + "@contentful/f36-core": "^4.68.1", + "@contentful/f36-icon": "^4.68.1", + "@contentful/f36-icons": "^4.29.0", + "@contentful/f36-menu": "^4.68.1", + "@contentful/f36-skeleton": "^4.68.1", + "@contentful/f36-tokens": "^4.0.1", + "@contentful/f36-utils": "^4.23.2", + "emotion": "^10.0.17" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "packages/forma-36-react-components/node_modules/@octokit/core": { "version": "4.0.5", "dev": true, @@ -41352,6 +42038,17 @@ "lodash": "^4.17.21" } }, + "packages/forma-36-react-components/node_modules/normalize-url": { + "version": "6.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "packages/forma-36-react-components/node_modules/npm": { "version": "8.19.2", "bundleDependencies": [ @@ -44125,6 +44822,7 @@ "@contentful/f36-header": "^4.68.1", "@contentful/f36-icon": "^4.68.1", "@contentful/f36-icons": "^4.29.0", + "@contentful/f36-icons-alpha": "npm:@contentful/f36-icons@5.0.0-alpha.26", "@contentful/f36-image": "4.68.1", "@contentful/f36-layout": "^4.0.0-alpha.1", "@contentful/f36-multiselect": "^4.24.0", @@ -44211,9 +44909,10 @@ }, "packages/website/node_modules/@contentful/f36-layout": { "version": "4.0.0-alpha.1", - "license": "MIT", + "resolved": "https://npm.pkg.github.com/download/@contentful/f36-layout/4.0.0-alpha.1/d87c7cd985d4c44549408794171ae52c35efb26b", + "integrity": "sha512-L0hymR90E9xbATemsNhKe/E6RvnoIXf7HcF+iYvc0Ayce8RxdrB29ouoErWN/+cpi+kj0ru4dCm4OjadrlxMow==", "dependencies": { - "@contentful/f36-core": "^4.0.0", + "@contentful/f36-core": "^4.56.0", "@contentful/f36-tokens": "^4.0.0", "emotion": "^10.0.17" }, diff --git a/packages/components/navbar/README.mdx b/packages/components/navbar/README.mdx index fad10c72c5..f2be6b5445 100644 --- a/packages/components/navbar/README.mdx +++ b/packages/components/navbar/README.mdx @@ -6,7 +6,7 @@ isNew: true slug: /components/navbar/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/navbar' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-navbar' -typescript: ./src/Navbar.tsx,./src/NavbarItem/NavbarItem.tsx,./src/NavbarMenuItem/NavbarMenuItem.tsx,./src/NavbarSwitcher/NavbarSwitcher.tsx,./src/NavbarSwitcherItem/NavbarSwitcherItem.tsx,./src/NavbarSearch/NavbarSearch.tsx,./src/NavbarHelp/NavbarHelp.tsx,./src/NavbarAccount/NavbarAccount.tsx,./src/NavbarBadge/NavbarBadge.tsx,./src/NavbarTopbarItem/NavbarTopbarItem.tsx +typescript: ./src/Navbar.tsx,./src/NavbarItem/NavbarItem.tsx,./src/NavbarMenuItem/NavbarMenuItem.tsx,./src/NavbarSwitcher/NavbarSwitcher.tsx,./src/NavbarSearch/NavbarSearch.tsx,./src/NavbarHelp/NavbarHelp.tsx,./src/NavbarAccount/NavbarAccount.tsx,./src/NavbarBadge/NavbarBadge.tsx,./src/NavbarTopbarItem/NavbarTopbarItem.tsx --- The Navbar component offers a unified navigation experience across all of Contentful's products. @@ -31,8 +31,7 @@ You can use following components to build a menu: 1. ``: Represents a menu item used to create dropdown menus. Use it as a child of the ``, ``, or `` components. 1. ``: A visual separator for menu items. Use it before or after a ``. 1. ``: A title that can be used in the menu list. Use it before or after a ``. -1. ``: Wrapper component for the logotype, organization, space, and environment information. Use it as a child of the Navbar `switcher` prop. -1. ``: Represents an item within the ``. Use it to render organization, space, and environment information in different states. Use it as a child of the ``. +1. ``: Wrapper component for the space and environment information. Use it as a child of the Navbar `switcher` prop. 1. ``: Trigger for the global search. Use it as a child of the Navbar `search` prop. 1. ``: Trigger for the help menu. Use it as a child of the Navbar `help` prop. 1. ``: Trigger for the account menu. Use it as a child of the Navbar `account` prop. @@ -95,10 +94,6 @@ You can use following components to build a menu: -### Navbar.SwitcherItem - - - ### Navbar.Search diff --git a/packages/components/navbar/examples/BasicNavbarExample.tsx b/packages/components/navbar/examples/BasicNavbarExample.tsx index 48e816194a..cfcdc5b452 100644 --- a/packages/components/navbar/examples/BasicNavbarExample.tsx +++ b/packages/components/navbar/examples/BasicNavbarExample.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Navbar } from '@contentful/f36-components'; -import { EntryIcon, AssetIcon } from '@contentful/f36-icons'; +import { EntryIcon, ImageSquareIcon } from '@contentful/f36-icons'; export default function BasicNavbarExample() { return ( @@ -31,7 +31,7 @@ export default function BasicNavbarExample() { } /> - } /> + } /> } /> - } /> + } /> } /> - } /> + } /> } /> - } /> + } /> ({ - containerTop: css({ +export const getNavbarStyles = (maxWidth: string, variant: string) => ({ + container: css({ justifyContent: 'center', - backgroundColor: '#0C141C', + backgroundColor: tokens.gray100, + width: '100%', }), - containerBottom: css({ - justifyContent: 'center', - borderTop: `1px solid #21262D`, - backgroundColor: '#161B22', + logo: css({ + display: 'none', + [mqs.small]: { + display: 'block', + height: '28px', + width: '28px', + }, }), - containerTopContent: css({ + + navigation: css({ width: '100%', - maxWidth: maxWidth, - padding: `${tokens.spacingXs}`, - minHeight: '2.5rem', - [mqs.medium]: { - padding: `${tokens.spacingXs} ${tokens.spacingM}`, + maxWidth: variant === 'wide' ? '1524px' : maxWidth, + padding: `${tokens.spacingS} ${tokens.spacingM}`, + minHeight: tokens.spacingL, + [mqs.small]: { + padding: `${tokens.spacingM} ${tokens.spacingL}`, }, }), - containerBottomContent: css({ - width: '100%', - maxWidth: maxWidth, - padding: 0, - minHeight: '2.5rem', - overflow: 'auto', - [mqs.medium]: { - padding: `0 ${tokens.spacing2Xs}`, + + mainNavigation: css({ + display: 'none', + [mqs.small]: { + display: 'flex', + }, + }), + + mobileNavigationButton: css({ + display: 'flex', + height: '36px', + borderRadius: '10px', + [mqs.small]: { + display: 'none', + }, + }), + mobileNavigationIcon: css({ + heigt: '20px', + width: '20px', + }), + + secondaryNavigationWrapper: css({ + '> *:not(:first-child)': { + display: 'none', + [mqs.xsmall]: { + display: 'flex', + }, + }, + }), + + account: css({ + display: 'none', + [mqs.xsmall]: { + display: 'flex', }, }), }); diff --git a/packages/components/navbar/src/Navbar.tsx b/packages/components/navbar/src/Navbar.tsx index 7f25efcc85..fad11e4ebb 100644 --- a/packages/components/navbar/src/Navbar.tsx +++ b/packages/components/navbar/src/Navbar.tsx @@ -1,34 +1,45 @@ -import { - Box, - type CommonProps, - type ExpandProps, - Flex, -} from '@contentful/f36-core'; +import { type CommonProps, type ExpandProps, Flex } from '@contentful/f36-core'; import React from 'react'; import { getNavbarStyles } from './Navbar.styles'; +import { ContentfulLogoIcon } from './icons'; +import { cx } from 'emotion'; +import { Button } from '@contentful/f36-button'; +import { ListIcon } from '@contentful/f36-icons'; +import { NavbarMenu } from './NavbarMenu/NavbarMenu'; type NavbarOwnProps = CommonProps & { - children?: React.ReactNode; - account?: React.ReactNode; - search?: React.ReactNode; - switcher?: React.ReactNode; - help?: React.ReactNode; - badge?: React.ReactNode; - /** - * Items that will be rendered on the bottom-right of the navbar. - * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items). - */ - bottomRightItems?: React.ReactNode; /** - * Items that will be rendered on the top-right of the navbar. - * Useful for providing additional context or actions to the user (e.g. a Feedback form link). + * Accepts a React Component that will be displayed + * instead of the Contentful Logo */ - topRightItems?: React.ReactNode; + logo?: React.ReactNode; + + /** Environment Switcher component */ + switcher?: React.ReactNode; + + /** Main Navigation Elements */ + mainNavigation?: React.ReactNode; + + /** Secondary Navigation Elements, displayed in the right side */ + secondaryNavigation?: React.ReactNode; + + /** User Account Component */ + account?: React.ReactNode; + + /** Navigation displayed on mobile versions */ + mobileNavigation?: React.ReactNode; + /** * Defines the max-width of the content inside the navbar. * @default '100%' */ contentMaxWidth?: string; + + /** + * Describes the size variation of the Navbar + * Variant wide will set the contentMaxWidth to 1524px + */ + variant?: 'wide' | 'fullscreen'; }; // expose only the HTML props that are needed to not pollute the API @@ -38,50 +49,84 @@ export type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps; function _Navbar(props: ExpandProps, ref: React.Ref) { const { - children, - account, - search, + logo, switcher, - help, - badge, - bottomRightItems, - topRightItems, + mainNavigation, + secondaryNavigation, + account, + mobileNavigation, + className, contentMaxWidth = '100%', testId = 'cf-ui-navbar', + variant = 'wide', ...otherProps } = props; - const styles = getNavbarStyles(contentMaxWidth); + const styles = getNavbarStyles(contentMaxWidth, variant); return ( - - - - {switcher} - - {topRightItems} - {badge} - {search} - {help} - {account} - + + + + {logo || } + {mobileNavigation && ( + } + > + Menu + + } + > + {mobileNavigation} + + )} + {mainNavigation && ( + + {mainNavigation} + + )} - - - - - - {children} + + {switcher} + + {secondaryNavigation && ( + + {secondaryNavigation} + + )} + {account && ( + + {account} + + )} - {bottomRightItems && {bottomRightItems}} - + ); } diff --git a/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts b/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts index 64e1226200..2ab51ad693 100644 --- a/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts +++ b/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts @@ -1,7 +1,8 @@ import { css } from 'emotion'; import tokens from '@contentful/f36-tokens'; import { NavbarAccountProps } from './NavbarAccount'; -import { getGlowOnFocusStyles } from '../utils.styles'; +import { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles'; +import { hexToRGBA } from '@contentful/f36-utils'; const notificationVarianColorMap: Record< NavbarAccountProps['notificationVariant'], @@ -13,23 +14,33 @@ const notificationVarianColorMap: Record< }; export const getNavbarAccountStyles = () => ({ - root: css( + navbarAccount: css( { // default button reset styles margin: 0, padding: 0, - background: 'none', - border: 'none', - + border: 0, cursor: 'pointer', + background: 'none', position: 'relative', - alignItems: 'center', - justifyContent: 'center', - gap: tokens.spacing2Xs, outline: 'none', + overflow: 'visible', borderRadius: '50%', + '&:before': css({ + content: '""', + display: 'block', + position: 'absolute', + height: '24px', + width: '24px', + backgroundColor: 'transparent', + borderRadius: '50%', + }), + '&:hover:before': css({ + backgroundColor: hexToRGBA(tokens.gray300, 0.15), + }), }, getGlowOnFocusStyles(), + increaseHitArea(), ), avatar: css({ borderRadius: '50%', @@ -45,7 +56,7 @@ export const getNavbarAccountStyles = () => ({ height: tokens.spacingS, width: tokens.spacingS, borderRadius: '50%', - border: `2px solid ${tokens.gray900}`, + border: `2px solid ${tokens.gray100}`, backgroundColor: notificationVarianColorMap[variant], transform: 'translate(30%, -30%)', }), diff --git a/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx b/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx index 98049d8ae5..8342c18367 100644 --- a/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx +++ b/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { cx } from 'emotion'; import { getNavbarAccountStyles } from './NavbarAccount.styles'; import { - Flex, type PropsWithHTMLElement, type CommonProps, type ExpandProps, } from '@contentful/f36-core'; import { NavbarMenu } from '../NavbarMenu/NavbarMenu'; import { Avatar } from '@contentful/f36-avatar'; +import { Flex } from '@contentful/f36-core'; type NavbarAccountOwnProps = CommonProps & { children: React.ReactNode; @@ -48,11 +48,13 @@ function _NavbarAccount( diff --git a/packages/components/navbar/src/NavbarBadge/NavbarBadge.styles.ts b/packages/components/navbar/src/NavbarBadge/NavbarBadge.styles.ts index 8bda0dea13..724d667ddb 100644 --- a/packages/components/navbar/src/NavbarBadge/NavbarBadge.styles.ts +++ b/packages/components/navbar/src/NavbarBadge/NavbarBadge.styles.ts @@ -2,12 +2,12 @@ import { css } from 'emotion'; import tokens from '@contentful/f36-tokens'; export const getNavbarBadgeStyles = () => ({ - root: css({ + navbarBadge: css({ display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'none', - border: `1px solid ${tokens.purple400}`, + border: `1px solid ${tokens.purple600}`, margin: 0, outline: 'none', fontSize: tokens.fontSizeS, @@ -16,7 +16,8 @@ export const getNavbarBadgeStyles = () => ({ textAlign: 'center', padding: `0 ${tokens.spacingXs}`, textDecoration: 'none', - color: `${tokens.purple400}!important`, + color: `${tokens.purple600}!important`, borderRadius: '1.75rem', + userSelect: 'none', }), }); diff --git a/packages/components/navbar/src/NavbarBadge/NavbarBadge.tsx b/packages/components/navbar/src/NavbarBadge/NavbarBadge.tsx index 0b04626e72..e507df595c 100644 --- a/packages/components/navbar/src/NavbarBadge/NavbarBadge.tsx +++ b/packages/components/navbar/src/NavbarBadge/NavbarBadge.tsx @@ -36,7 +36,7 @@ function _NavbarBadge( {children} diff --git a/packages/components/navbar/src/NavbarHelp/NavbarHelp.styles.ts b/packages/components/navbar/src/NavbarHelp/NavbarHelp.styles.ts deleted file mode 100644 index 6a463d0d16..0000000000 --- a/packages/components/navbar/src/NavbarHelp/NavbarHelp.styles.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { css } from 'emotion'; -import tokens from '@contentful/f36-tokens'; -import { getGlowOnFocusStyles, mqs } from '../utils.styles'; - -export const getNavbarHelpStyles = () => ({ - root: css( - { - // default button reset styles - margin: 0, - padding: 0, - background: 'none', - border: 'none', - - cursor: 'pointer', - alignItems: 'center', - justifyContent: 'center', - color: tokens.gray300, - fontSize: 0, - gap: 0, - minWidth: tokens.spacingL, - transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`, - outline: 'none', - borderRadius: tokens.borderRadiusMedium, - - [mqs.medium]: { - fontSize: tokens.fontSizeS, - gap: tokens.spacing2Xs, - fontWeight: tokens.fontWeightMedium, - marginRight: tokens.spacingXs, - }, - '&:hover, &:hover svg': { - color: tokens.gray100, - fill: tokens.gray100, - }, - '& svg': { - fill: tokens.gray300, - transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`, - }, - }, - getGlowOnFocusStyles(), - ), -}); diff --git a/packages/components/navbar/src/NavbarHelp/NavbarHelp.tsx b/packages/components/navbar/src/NavbarHelp/NavbarHelp.tsx deleted file mode 100644 index 3047c1fe58..0000000000 --- a/packages/components/navbar/src/NavbarHelp/NavbarHelp.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { cx } from 'emotion'; -import { getNavbarHelpStyles } from './NavbarHelp.styles'; -import { HelpIcon } from '../icons'; -import { - Flex, - type CommonProps, - type PropsWithHTMLElement, - type ExpandProps, -} from '@contentful/f36-core'; -import { NavbarMenu } from '../NavbarMenu/NavbarMenu'; - -type NavbarHelpOwnProps = CommonProps & { - children: React.ReactNode; -}; - -export type NavbarHelpProps = PropsWithHTMLElement< - NavbarHelpOwnProps, - 'button' ->; - -function _NavbarHelp( - props: ExpandProps, - ref: React.Ref, -) { - const { - children, - className, - testId = 'cf-ui-navbar-help-trigger', - ...otherProps - } = props; - const styles = getNavbarHelpStyles(); - - return ( - - - Help - - } - > - {children} - - ); -} - -export const NavbarHelp = React.forwardRef(_NavbarHelp); diff --git a/packages/components/navbar/src/NavbarItem/NavbarItem.styles.ts b/packages/components/navbar/src/NavbarItem/NavbarItem.styles.ts index 371216af9d..72fd5e592c 100644 --- a/packages/components/navbar/src/NavbarItem/NavbarItem.styles.ts +++ b/packages/components/navbar/src/NavbarItem/NavbarItem.styles.ts @@ -1,50 +1,38 @@ import { css } from 'emotion'; import tokens from '@contentful/f36-tokens'; import { hexToRGBA } from '@contentful/f36-utils'; -import { getGlowOnFocusStyles, mqs } from '../utils.styles'; +import { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles'; export const getNavbarItemActiveStyles = () => css({ - '&': { - color: tokens.colorWhite, - '& svg': { - fill: tokens.colorWhite, - }, - }, - - '&::after': { - content: '""', - position: 'absolute', - width: `calc(100% - ${tokens.spacingM})`, - height: '2px', - bottom: '0.5px', - left: 0, - right: 0, - margin: 'auto', - backgroundColor: tokens.colorWhite, - zIndex: 0, + backgroundColor: tokens.blue100, + border: `1px solid ${tokens.blue400}`, + color: tokens.blue600, + '&:hover': { + backgroundColor: tokens.blue100, }, }); const commonItemStyles = { display: 'flex', justifyContent: 'center', - padding: `10px ${tokens.spacingS}`, + padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`, alignItems: 'center', background: 'none', + gap: tokens.spacing2Xs, }; -export const getNavbarItemStyles = () => ({ - root: css( +export const getNavbarItemStyles = ({ title }) => ({ + navbarItem: css( commonItemStyles, { - alignItems: 'center', + appearance: 'none', background: 'none', - border: 0, + border: '1px solid transparent', margin: 0, outline: 'none', fontSize: tokens.fontSizeM, - lineHeight: tokens.lineHeightM, + lineHeight: tokens.lineHeightS, fontWeight: tokens.fontWeightMedium, position: 'relative', textAlign: 'left', @@ -52,26 +40,14 @@ export const getNavbarItemStyles = () => ({ cursor: 'pointer', hyphens: 'auto', textDecoration: 'none', - color: hexToRGBA(tokens.gray300, 0.8), + color: tokens.gray800, boxSizing: 'border-box', transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`, borderRadius: tokens.borderRadiusMedium, + minWidth: '44px', - '&::before': { - content: '""', - position: 'absolute', - width: `calc(100% - ${tokens.spacingXs})`, - height: `calc(100% - ${tokens.spacingS})`, - top: `calc(${tokens.spacingS} / 2)`, - left: 0, - right: 0, - margin: 'auto', - borderRadius: tokens.borderRadiusSmall, - backgroundColor: hexToRGBA(tokens.colorWhite, 0.08), - opacity: 0, - zIndex: 0, - scale: 0, - transition: `all ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`, + '&:hover': { + backgroundColor: hexToRGBA(tokens.gray900, 0.05), }, '&:hover::before': { @@ -87,28 +63,33 @@ export const getNavbarItemStyles = () => ({ }, '& svg': { - fill: hexToRGBA(tokens.gray300, 0.8), transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`, - - '&:first-child': { - display: 'none', - [mqs.large]: { - display: 'block', - }, - }, }, '& > svg, & > span': { zIndex: tokens.zIndexDefault, }, }, - getGlowOnFocusStyles(`inset ${tokens.glowPrimary}`), + getGlowOnFocusStyles(), + increaseHitArea(), ), + navbarItemMenuTrigger: css({ + paddingRight: tokens.spacingXs, + }), isActive: getNavbarItemActiveStyles(), - dropdownIcon: css({ - paddingLeft: tokens.spacing2Xs, + icon: css({ + height: '20px', + width: '20px', + display: !title ? 'block' : 'none', + [mqs.small]: { + height: '16px', + width: '16px', + }, + [mqs.large]: { + display: 'block', + }, }), }); export const getNavbarItemSkeletonStyles = () => ({ - root: css(commonItemStyles), + itemSkeleton: css(commonItemStyles), }); diff --git a/packages/components/navbar/src/NavbarItem/NavbarItem.tsx b/packages/components/navbar/src/NavbarItem/NavbarItem.tsx index 63bdf0c84c..9ba2cf2d7d 100644 --- a/packages/components/navbar/src/NavbarItem/NavbarItem.tsx +++ b/packages/components/navbar/src/NavbarItem/NavbarItem.tsx @@ -6,7 +6,7 @@ import { NavbarItemIcon, type NavbarItemIconProps, } from '../NavbarItemIcon/NavbarItemIcon'; -import { ArrowDownIcon } from '../icons'; +import { CaretIcon } from '../icons'; import type { CommonProps, ExpandProps, @@ -17,7 +17,8 @@ import type { const NAVBAR_ITEM_DEFAULT_TAG = 'button'; type NavbarItemTriggerProps = CommonProps & { - title: string; + label?: string; + title?: string; icon?: NavbarItemIconProps['icon']; isActive?: boolean; as?: React.ElementType; @@ -45,6 +46,7 @@ function _NavbarItem( const { as: Comp = NAVBAR_ITEM_DEFAULT_TAG, icon, + label, title, children, className, @@ -54,24 +56,34 @@ function _NavbarItem( onClose, ...otherProps } = props; - const styles = getNavbarItemStyles(); - + const styles = getNavbarItemStyles({ title }); + const isMenuTrigger = isNavbarItemHasMenu(props); const item = ( - {icon ? : null} - {title} - {isNavbarItemHasMenu(props) && ( - + {icon && ( + )} + {title && {title}} + {title && isMenuTrigger && } ); - if (isNavbarItemHasMenu(props)) { + if (isMenuTrigger) { return ( diff --git a/packages/components/navbar/src/NavbarItemIcon/NavbarItemIcon.styles.ts b/packages/components/navbar/src/NavbarItemIcon/NavbarItemIcon.styles.ts index e250629032..3cb5e01b81 100644 --- a/packages/components/navbar/src/NavbarItemIcon/NavbarItemIcon.styles.ts +++ b/packages/components/navbar/src/NavbarItemIcon/NavbarItemIcon.styles.ts @@ -2,11 +2,8 @@ import { css } from 'emotion'; import tokens from '@contentful/f36-tokens'; export const getNavbarItemIconStyles = () => ({ - root: css({ - '&:first-child': { - marginRight: tokens.spacing2Xs, - }, - '&:last-child': { + navbarItemIcon: css({ + '&:last-child&:not(:only-child)': { marginLeft: tokens.spacing2Xs, }, 'img&': { diff --git a/packages/components/navbar/src/NavbarItemIcon/NavbarItemIcon.tsx b/packages/components/navbar/src/NavbarItemIcon/NavbarItemIcon.tsx index b61332966d..079de19fac 100644 --- a/packages/components/navbar/src/NavbarItemIcon/NavbarItemIcon.tsx +++ b/packages/components/navbar/src/NavbarItemIcon/NavbarItemIcon.tsx @@ -5,15 +5,21 @@ import { cx } from 'emotion'; export type NavbarItemIconProps = { icon: React.ReactElement; -} & Pick; + className?: string; +} & Partial>; -export const NavbarItemIcon = (props: NavbarItemIconProps) => { - const { icon, variant } = props; +export const NavbarItemIcon = ({ + icon, + isActive, + className, +}: NavbarItemIconProps) => { + const { className: iconClassName, size, ...rest } = icon.props; const styles = getNavbarItemIconStyles(); return React.cloneElement(icon, { - className: cx(icon.props.className, styles.root), - size: icon.props.size ?? 'tiny', - variant: icon.props.variant ?? variant, + className: cx(iconClassName, styles.navbarItemIcon, className), + size: size || 'small', + isActive, + ...rest, }); }; diff --git a/packages/components/navbar/src/NavbarMenu/NavbarMenu.styles.ts b/packages/components/navbar/src/NavbarMenu/NavbarMenu.styles.ts index d3a8249a34..be2240d26a 100644 --- a/packages/components/navbar/src/NavbarMenu/NavbarMenu.styles.ts +++ b/packages/components/navbar/src/NavbarMenu/NavbarMenu.styles.ts @@ -1,7 +1,11 @@ import { css } from 'emotion'; +import { mqs } from '../utils.styles'; export const getNavbarMenuStyles = () => ({ menuList: css({ - minWidth: '250px', + minWidth: 0, + [mqs.xsmall]: { + minWidth: '250px', + }, }), }); diff --git a/packages/components/navbar/src/NavbarMenuItem/NavbarMenuItem.styles.ts b/packages/components/navbar/src/NavbarMenuItem/NavbarMenuItem.styles.ts index 7f9ad6db43..1a0be41564 100644 --- a/packages/components/navbar/src/NavbarMenuItem/NavbarMenuItem.styles.ts +++ b/packages/components/navbar/src/NavbarMenuItem/NavbarMenuItem.styles.ts @@ -1,7 +1,6 @@ import { css } from 'emotion'; - export const getNavbarMenuItemStyles = () => ({ - root: css({ + navbarMenuItem: css({ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', diff --git a/packages/components/navbar/src/NavbarMenuItem/NavbarMenuItem.tsx b/packages/components/navbar/src/NavbarMenuItem/NavbarMenuItem.tsx index ba394f9895..bb6160c505 100644 --- a/packages/components/navbar/src/NavbarMenuItem/NavbarMenuItem.tsx +++ b/packages/components/navbar/src/NavbarMenuItem/NavbarMenuItem.tsx @@ -6,7 +6,7 @@ import { NavbarItemIcon, type NavbarItemIconProps, } from '../NavbarItemIcon/NavbarItemIcon'; -import { ExternalLinkIcon } from '@contentful/f36-icons'; +import { ArrowSquareOutIcon } from '@contentful/f36-icons'; import type { ExpandProps, PolymorphicComponent, @@ -48,10 +48,10 @@ function _NavbarMenuItem( {...otherProps} ref={ref} as={Comp as MenuItemProps['as']} - className={cx(styles.root, className)} + className={cx(styles.navbarMenuItem, className)} > {icon ? ( - + ) : ( itemIsExternalLink && externalIcon )} @@ -61,9 +61,7 @@ function _NavbarMenuItem( ); } -const externalIcon = ( - } variant="muted" /> -); +const externalIcon = } />; const isExternalLink = (props: NavbarMenuItemProps<'a'>) => props.as === 'a' && props.target === '_blank'; diff --git a/packages/components/navbar/src/NavbarSearch/NavbarSearch.styles.ts b/packages/components/navbar/src/NavbarSearch/NavbarSearch.styles.ts deleted file mode 100644 index 52cb6a7904..0000000000 --- a/packages/components/navbar/src/NavbarSearch/NavbarSearch.styles.ts +++ /dev/null @@ -1,33 +0,0 @@ -import tokens from '@contentful/f36-tokens'; -import { css } from 'emotion'; -import { getGlowOnFocusStyles } from '../utils.styles'; - -export const getNavbarSearchStyles = () => ({ - root: css( - { - // default button reset styles - margin: 0, - padding: 0, - background: 'none', - border: 'none', - - cursor: 'pointer', - alignItems: 'center', - justifyContent: 'center', - minWidth: tokens.spacingL, - transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`, - outline: 'none', - borderRadius: tokens.borderRadiusMedium, - - '& svg': { - fill: tokens.gray300, - transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`, - }, - '&:hover, & svg:hover': { - color: tokens.gray100, - fill: tokens.gray100, - }, - }, - getGlowOnFocusStyles(), - ), -}); diff --git a/packages/components/navbar/src/NavbarSearch/NavbarSearch.tsx b/packages/components/navbar/src/NavbarSearch/NavbarSearch.tsx deleted file mode 100644 index 14f4fb3a65..0000000000 --- a/packages/components/navbar/src/NavbarSearch/NavbarSearch.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { cx } from 'emotion'; -import React from 'react'; -import { getNavbarSearchStyles } from './NavbarSearch.styles'; -import { SearchIcon } from '../icons'; -import { - type CommonProps, - type ExpandProps, - Flex, - type PropsWithHTMLElement, -} from '@contentful/f36-core'; - -type NavbarSearchOwnProps = CommonProps; - -export type NavbarSearchProps = PropsWithHTMLElement< - NavbarSearchOwnProps, - 'button' ->; - -function _NavbarSearch( - props: ExpandProps, - ref: React.Ref, -) { - const { className, testId = 'cf-ui-navbar-search', ...otherProps } = props; - const styles = getNavbarSearchStyles(); - - return ( - - - - ); -} - -export const NavbarSearch = React.forwardRef(_NavbarSearch); diff --git a/packages/components/navbar/src/NavbarSubmenu/NavbarMenu.styles.ts b/packages/components/navbar/src/NavbarSubmenu/NavbarMenu.styles.ts new file mode 100644 index 0000000000..04bd772eb3 --- /dev/null +++ b/packages/components/navbar/src/NavbarSubmenu/NavbarMenu.styles.ts @@ -0,0 +1,21 @@ +import tokens from '@contentful/f36-tokens'; +import { css } from 'emotion'; +import { mqs } from '../utils.styles'; + +export const getNavbarSubmenuStyles = () => ({ + navbarMenuItem: css({ + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + gap: tokens.spacingXs, + }), + menuList: css({ + minWidth: 0, + marginLeft: '-24px', + marginTop: '10px', + [mqs.xsmall]: { + minWidth: '250px', + margin: 0, + }, + }), +}); diff --git a/packages/components/navbar/src/NavbarSubmenu/NavbarSubmenu.tsx b/packages/components/navbar/src/NavbarSubmenu/NavbarSubmenu.tsx new file mode 100644 index 0000000000..bd26c5eba3 --- /dev/null +++ b/packages/components/navbar/src/NavbarSubmenu/NavbarSubmenu.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu'; +import { getNavbarSubmenuStyles } from './NavbarMenu.styles'; +import { + NavbarItemIcon, + type NavbarItemIconProps, +} from '../NavbarItemIcon/NavbarItemIcon'; +import { Flex } from '@contentful/f36-core'; + +export type NavbarSubmenuProps = { + title: string; + icon?: NavbarItemIconProps['icon']; + children?: React.ReactNode; +} & Pick & + Pick; + +export const NavbarSubmenu = (props: NavbarSubmenuProps) => { + const { + title, + icon, + children, + testId = 'cf-ui-navbar-submenu-list', + onOpen, + onClose, + } = props; + const styles = getNavbarSubmenuStyles(); + + return ( + + + + {icon && } + {title} + + + + {children} + + + ); +}; diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarEnvVariant.tsx b/packages/components/navbar/src/NavbarSwitcher/NavbarEnvVariant.tsx new file mode 100644 index 0000000000..e6cf436cc6 --- /dev/null +++ b/packages/components/navbar/src/NavbarSwitcher/NavbarEnvVariant.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { NavbarSwitcherProps } from '../NavbarSwitcher/NavbarSwitcher'; +import { EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons'; +import tokens from '@contentful/f36-tokens'; + +export type NavbarEnvVariantProps = Pick< + NavbarSwitcherProps, + 'isAlias' | 'envVariant' +> & { + className?: string; +}; + +export function NavbarEnvVariant({ + isAlias, + envVariant, + className, +}: NavbarEnvVariantProps) { + const color = envVariant === 'master' ? tokens.green600 : tokens.orange500; + + return isAlias ? ( + + ) : ( + + ); +} diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts index 08af3377f4..38420fb9dd 100644 --- a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts +++ b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts @@ -1,55 +1,54 @@ import { css } from 'emotion'; import tokens from '@contentful/f36-tokens'; import { hexToRGBA } from '@contentful/f36-utils'; -import { getGlowOnFocusStyles, mqs } from '../utils.styles'; + +import { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles'; export const getNavbarSwitcherStyles = () => ({ - root: css( + navbarSwitcher: css( { - // default button reset styles - margin: 0, - padding: 0, - background: 'none', - border: 'none', - - color: tokens.gray300, - cursor: 'pointer', - fontSize: tokens.fontSizeS, + color: tokens.gray600, + flexShrink: 1, fontWeight: tokens.fontWeightMedium, - position: 'relative', - outline: 'none', - borderRadius: tokens.borderRadiusMedium, - - '&:after': { - content: '""', - border: '1px solid #353A41', - boxSizing: 'border-box', - height: '16px', - right: '-1px', - position: 'absolute', - width: 0, - }, - '&:last-child:after': { - display: 'none', - }, - '&:hover li': { - backgroundColor: hexToRGBA(tokens.colorWhite, 0.15), + maxWidth: '100%', + minHeight: 'unset', + padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`, + '&:hover': { + backgroundColor: hexToRGBA(tokens.gray900, 0.05), }, }, - getGlowOnFocusStyles( - `0px 0px 0px 2px ${tokens.colorBlack}, 0px 0px 0px 5px ${tokens.blue300}`, - ), + getGlowOnFocusStyles(), + increaseHitArea(), ), - breadcrumbs: css({ - listStyleType: 'none', - margin: 0, - padding: 0, - position: 'relative', - }), - menuIcon: css({ - display: 'none', + + switcherSpaceName: css({ + // Set min-width only when there are three span children + '&:has(> span:last-child:nth-child(3))': { + minWidth: '12ch', + }, + maxWidth: '15vw', + [mqs.xsmall]: { + maxWidth: '50vw', + }, + [mqs.small]: { + maxWidth: '10vw', + }, [mqs.medium]: { - display: 'block', + maxWidth: '50vw', }, }), + + switcherEnvIcon: css({ + [mqs.small]: { + width: '16px', + height: '16px', + }, + }), + + switcherSpaceNameTruncation: css({ + flexShrink: 1, + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }), }); diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx index 72b994cca9..7797be6202 100644 --- a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx +++ b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx @@ -1,21 +1,52 @@ -import React from 'react'; +import React, { type ReactNode } from 'react'; import { getNavbarSwitcherStyles } from './NavbarSwitcher.styles'; +import { Button } from '@contentful/f36-button'; import { Flex, type CommonProps, type PropsWithHTMLElement, type ExpandProps, } from '@contentful/f36-core'; -import { MenuIcon } from '@contentful/f36-icons'; import { cx } from 'emotion'; -import { ContentfulLogoIcon } from '../icons'; +import { NavbarEnvVariant } from './NavbarEnvVariant'; -type NavbarSwitcherOwnProps = CommonProps & { - children?: React.ReactNode; +type TruncateOptions = { + /** + * Number of characters to keep at the start of the string + * @default 5 + */ + start?: number; /** - * Will be displayed instead of the default Contentful logo + * Number of characters to keep at the end of the string + * @default 6 */ - logo?: React.ReactNode; + end?: number; +}; + +function splitSpaceName( + string: string, + { + start: startLength = 5, + end: endLength = 6, + }: TruncateOptions | undefined = {}, +) { + if (string.length <= startLength + endLength) { + return [string, undefined, undefined]; + } + + const start = startLength > 0 ? string.slice(0, startLength) : ''; + const end = endLength > 0 ? string.slice(-endLength) : ''; + const remainder = string.slice(startLength, string.length - endLength); + + return [start, remainder, end]; +} + +type NavbarSwitcherOwnProps = CommonProps & { + children: ReactNode; + isCircle?: boolean; + envVariant?: 'master' | 'non-master'; + isAlias?: boolean; + ariaLabel?: string; }; export type NavbarSwitcherProps = PropsWithHTMLElement< @@ -30,29 +61,54 @@ function _NavbarSwitcher( const { children, className, - logo, + envVariant, + isAlias, testId = 'cf-ui-navbar-switcher', + ariaLabel = 'Space and Environment Navigation', ...otherProps } = props; const styles = getNavbarSwitcherStyles(); + const [start, middle, end] = + typeof children === 'string' ? splitSpaceName(children) : []; return ( - + ) + } ref={ref} - className={cx(styles.root, className)} testId={testId} - alignItems="center" - fullHeight - gap="spacingXs" + variant="transparent" > - {logo || } - - - {children} + + {start !== undefined ? ( + <> + {start} + {middle && ( + + {middle} + + )} + {end && {end}} + + ) : ( + children + )} - + ); } diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx index 79bba96b67..e24952f860 100644 --- a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx +++ b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx @@ -13,8 +13,8 @@ export const NavbarSwitcherSkeleton = ({ ; - -export function NavbarEnvVariant({ isAlias }: NavbarEnvVariantProps) { - return ( - <> - - {isAlias ? ( - - ) : ( - - )} - - ); -} diff --git a/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts b/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts deleted file mode 100644 index e39b294f00..0000000000 --- a/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { css } from 'emotion'; -import tokens from '@contentful/f36-tokens'; -import { hexToRGBA } from '@contentful/f36-utils'; -import { mqs } from '../utils.styles'; - -const mobileIcon = { - display: 'none', - '&:first-child': { - display: 'block', - }, - - [mqs.medium]: { - display: 'block', - '&:first-child': { - display: 'none', - }, - }, -}; - -export const getNavbarSwitcherItemStyles = () => ({ - breadcrumbsItem: css({ - position: 'relative', - alignItems: 'center', - justifyContent: 'center', - backgroundColor: hexToRGBA(tokens.gray100, 0.1), - boxShadow: `0px 0px 0px 2px ${tokens.colorBlack}`, - display: 'inline-flex', - margin: 0, - minWidth: 0, - padding: `0 ${tokens.spacingXs}`, - height: tokens.spacingL, - borderRadius: '3rem', - zIndex: 2, - transition: `background-color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`, - whiteSpace: 'nowrap', - '&:not(:first-child)': { - clipPath: `path('M0 24C6 24 10 18 10 10C10 5 6 0 0 0H400C400 0 400 5 400 24H0Z')`, - }, - '&:first-child': { - minWidth: '24px', - }, - '&:nth-child(2)': { - zIndex: 1, - left: `-${tokens.spacingXs}`, - paddingLeft: tokens.spacingM, - borderRadius: `0 3rem 3rem 0`, - span: { - maxWidth: '80px', - textOverflow: 'ellipsis', - overflow: 'hidden', - [mqs.large]: { - maxWidth: '100%', - }, - }, - }, - '&:nth-child(3)': { - left: `-${tokens.spacingM}`, - paddingLeft: tokens.spacingM, - borderRadius: `0 3rem 3rem 0`, - fontFamily: tokens.fontStackMonospace, - fontSize: tokens.fontSizeS, - fontWeight: tokens.fontWeightMedium, - zIndex: 0, - span: { - maxWidth: '40px', - textOverflow: 'ellipsis', - overflow: 'hidden', - [mqs.large]: { - maxWidth: '100%', - }, - }, - '> div': { - [mqs.medium]: { - gap: tokens.spacing2Xs, - }, - }, - }, - }), - breadcrumbsItemCircle: css({ - borderRadius: '50%', - color: tokens.gray400, - padding: 0, - display: 'flex', - justifyContent: 'center', - fontSize: '11px', - width: tokens.spacingL, - height: tokens.spacingL, - }), - breadcrumbsItemEnvMaster: css({ - color: tokens.green400, - ' svg': { - ...mobileIcon, - fill: tokens.green400, - }, - }), - breadcrumbsItemEnvNonMaster: css({ - color: tokens.orange400, - svg: { - ...mobileIcon, - fill: tokens.orange400, - }, - }), -}); diff --git a/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.tsx b/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.tsx deleted file mode 100644 index 5ee281424b..0000000000 --- a/packages/components/navbar/src/NavbarSwitcherItem/NavbarSwitcherItem.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { cx } from 'emotion'; -import { getNavbarSwitcherItemStyles } from './NavbarSwitcherItem.styles'; -import { NavbarEnvVariant } from './NavbarEnvVariant'; -import { - Flex, - type CommonProps, - type ExpandProps, - type PropsWithHTMLElement, -} from '@contentful/f36-core'; - -type NavbarSwitcherItemOwnProps = CommonProps & { - children?: React.ReactNode; - isCircle?: boolean; - envVariant?: 'master' | 'non-master'; - isAlias?: boolean; -}; - -export type NavbarSwitcherItemProps = PropsWithHTMLElement< - NavbarSwitcherItemOwnProps, - 'li' ->; - -function _NavbarSwitcherItem( - props: ExpandProps, - ref: React.Ref, -) { - const { - children, - isCircle, - className, - envVariant, - isAlias, - testId = 'cf-ui-navbar-switcher-item', - ...otherProps - } = props; - const styles = getNavbarSwitcherItemStyles(); - const classes = cx(styles.breadcrumbsItem, className, { - [styles.breadcrumbsItemCircle]: isCircle, - [styles.breadcrumbsItemEnvMaster]: envVariant === 'master', - [styles.breadcrumbsItemEnvNonMaster]: envVariant === 'non-master', - }); - - return ( -
  • - - {envVariant && } - {children} - -
    • - ); -} - -export const NavbarSwitcherItem = React.forwardRef(_NavbarSwitcherItem); diff --git a/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.styles.ts b/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.styles.ts deleted file mode 100644 index 542da6549d..0000000000 --- a/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.styles.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { css } from 'emotion'; -import tokens from '@contentful/f36-tokens'; -import { getGlowOnFocusStyles } from '../utils.styles'; - -export const getNavbarTopbarItemStyles = () => ({ - root: css( - { - // default button reset styles - margin: 0, - background: 'none', - border: 'none', - - cursor: 'pointer', - display: 'flex', - gap: tokens.spacing2Xs, - alignItems: 'center', - color: tokens.gray300, - padding: `0 ${tokens.spacing2Xs}`, - minHeight: tokens.spacingL, - fontSize: tokens.fontSizeS, - fontWeight: tokens.fontWeightMedium, - outline: 'none', - borderRadius: tokens.borderRadiusMedium, - - '&:hover': { - color: tokens.gray100, - }, - svg: { - fill: 'currentColor', - }, - }, - getGlowOnFocusStyles(), - ), -}); diff --git a/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.tsx b/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.tsx deleted file mode 100644 index 73a9dc832f..0000000000 --- a/packages/components/navbar/src/NavbarTopbarItem/NavbarTopbarItem.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { cx } from 'emotion'; -import { getNavbarTopbarItemStyles } from './NavbarTopbarItem.styles'; -import type { - CommonProps, - ExpandProps, - PolymorphicComponent, - PolymorphicProps, -} from '@contentful/f36-core'; - -const NAVBAR_BADGE_DEFAULT_TAG = 'button'; - -type NavbarTopbarItemOwnProps = CommonProps & { - children?: React.ReactNode; -}; - -export type NavbarTopbarItemProps< - E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG, -> = PolymorphicProps; - -function _NavbarTopbarItem< - E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG, ->(props: NavbarTopbarItemProps, ref: React.Ref) { - const { - as: Comp = NAVBAR_BADGE_DEFAULT_TAG, - children, - className, - testId = 'cf-ui-navbar-topbar-item', - ...otherProps - } = props; - const styles = getNavbarTopbarItemStyles(); - - return ( - - {children} - - ); -} - -export const NavbarTopbarItem: PolymorphicComponent< - ExpandProps, - typeof NAVBAR_BADGE_DEFAULT_TAG -> = React.forwardRef(_NavbarTopbarItem); diff --git a/packages/components/navbar/src/icons/ArrowDownIcon.tsx b/packages/components/navbar/src/icons/ArrowDownIcon.tsx deleted file mode 100644 index dc3dd0fcdd..0000000000 --- a/packages/components/navbar/src/icons/ArrowDownIcon.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { generateIcon } from '@contentful/f36-icon'; - -export const ArrowDownIcon = /*#__PURE__*/ generateIcon({ - name: 'ArrowDownIcon', - viewBox: '0 0 12 20', - path: ( - - ), -}); diff --git a/packages/components/navbar/src/icons/CaretIcon.tsx b/packages/components/navbar/src/icons/CaretIcon.tsx new file mode 100644 index 0000000000..d4243922e4 --- /dev/null +++ b/packages/components/navbar/src/icons/CaretIcon.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import tokens from '@contentful/f36-tokens'; +import { + generateComponentWithVariants, + generateIconComponent, + IconVariant, +} from '@contentful/f36-icon'; + +export const CaretIcon = generateComponentWithVariants({ + variants: { + [IconVariant.Active]: generateIconComponent({ + path: ( + <> + + + ), + viewBox: '0 0 12 12', + }), + [IconVariant.Default]: generateIconComponent({ + path: ( + <> + + + ), + viewBox: '0 0 12 12', + }), + }, +}); diff --git a/packages/components/navbar/src/icons/CircleIcon.tsx b/packages/components/navbar/src/icons/CircleIcon.tsx index 67bda6bdc7..95c52a845a 100644 --- a/packages/components/navbar/src/icons/CircleIcon.tsx +++ b/packages/components/navbar/src/icons/CircleIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { generateIcon } from '@contentful/f36-icon'; +import { generateIconComponent } from '@contentful/f36-icon'; -export const CircleIcon = /*#__PURE__*/ generateIcon({ +export const CircleIcon = /*#__PURE__*/ generateIconComponent({ name: 'CircleIcon', viewBox: '0 0 24 24', path: ( diff --git a/packages/components/navbar/src/icons/ContentfulLogoIcon.tsx b/packages/components/navbar/src/icons/ContentfulLogoIcon.tsx index 0c0cb4f159..33f0ec4983 100644 --- a/packages/components/navbar/src/icons/ContentfulLogoIcon.tsx +++ b/packages/components/navbar/src/icons/ContentfulLogoIcon.tsx @@ -1,38 +1,31 @@ import React from 'react'; -import { generateIcon } from '@contentful/f36-icon'; +import { generateIconComponent } from '@contentful/f36-icon'; -export const ContentfulLogoIcon = /*#__PURE__*/ generateIcon({ +export const ContentfulLogoIcon = /*#__PURE__*/ generateIconComponent({ name: 'ContentfulLogoIcon', - viewBox: '0 0 24 24', + viewBox: '0 0 28 28', path: ( <> - - - - - - - - - - - - + + + + + ), }); diff --git a/packages/components/navbar/src/icons/HelpIcon.tsx b/packages/components/navbar/src/icons/HelpIcon.tsx index 85c40711df..2127379350 100644 --- a/packages/components/navbar/src/icons/HelpIcon.tsx +++ b/packages/components/navbar/src/icons/HelpIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { generateIcon } from '@contentful/f36-icon'; +import { generateIconComponent } from '@contentful/f36-icon'; -export const HelpIcon = /*#__PURE__*/ generateIcon({ +export const HelpIcon = /*#__PURE__*/ generateIconComponent({ name: 'HelpIcon', viewBox: '0 0 24 24', path: ( diff --git a/packages/components/navbar/src/icons/SearchIcon.tsx b/packages/components/navbar/src/icons/SearchIcon.tsx index b853ec4c63..681d356e2d 100644 --- a/packages/components/navbar/src/icons/SearchIcon.tsx +++ b/packages/components/navbar/src/icons/SearchIcon.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { generateIcon } from '@contentful/f36-icon'; +import { generateIconComponent } from '@contentful/f36-icon'; -export const SearchIcon = /*#__PURE__*/ generateIcon({ +export const SearchIcon = /*#__PURE__*/ generateIconComponent({ name: 'SearchIcon', viewBox: '0 0 24 24', path: ( diff --git a/packages/components/navbar/src/icons/index.ts b/packages/components/navbar/src/icons/index.ts index fb9e7df18f..b13438bcc7 100644 --- a/packages/components/navbar/src/icons/index.ts +++ b/packages/components/navbar/src/icons/index.ts @@ -1,5 +1,5 @@ export * from './CircleIcon'; -export * from './ArrowDownIcon'; +export * from './CaretIcon'; export * from './HelpIcon'; export * from './SearchIcon'; export * from './ContentfulLogoIcon'; diff --git a/packages/components/navbar/src/utils.styles.ts b/packages/components/navbar/src/utils.styles.ts index b43ae99db9..eb130e67e5 100644 --- a/packages/components/navbar/src/utils.styles.ts +++ b/packages/components/navbar/src/utils.styles.ts @@ -1,14 +1,19 @@ import tokens from '@contentful/f36-tokens'; +import type { CSSObject } from '@emotion/serialize'; -type screens = 'medium' | 'large' | 'xlarge'; +type screens = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'; type mediaqueries = Record; export const mqs: mediaqueries = { - medium: '@media (min-width: 480px)', - large: '@media (min-width: 768px)', + xsmall: '@media (min-width: 576px)', + small: '@media (min-width: 867px)', + medium: '@media (min-width: 1024px)', + large: '@media (min-width: 1200px)', xlarge: '@media (min-width: 1920px)', }; -export const getGlowOnFocusStyles = (shadow: string = tokens.glowPrimary) => ({ +export const getGlowOnFocusStyles = ( + shadow: string = tokens.glowPrimary, +): CSSObject => ({ '&:focus': { boxShadow: shadow, }, @@ -19,3 +24,18 @@ export const getGlowOnFocusStyles = (shadow: string = tokens.glowPrimary) => ({ boxShadow: shadow, }, }); + +export const increaseHitArea = (minSize = '44px'): CSSObject => ({ + overflow: 'visible', + position: 'relative', + '&:after': { + minHeight: minSize, + minWidth: minSize, + position: 'absolute', + width: '100%', + content: '""', + left: '50%', + top: '50%', + transform: 'translate(-50%, -50%)', + }, +}); diff --git a/packages/components/navbar/stories/Navbar.stories.tsx b/packages/components/navbar/stories/Navbar.stories.tsx index 3ffac7c61a..9d62caa8a7 100644 --- a/packages/components/navbar/stories/Navbar.stories.tsx +++ b/packages/components/navbar/stories/Navbar.stories.tsx @@ -1,12 +1,21 @@ import React from 'react'; import type { Meta, Story } from '@storybook/react/types-6-0'; -import { Navbar } from '../src'; -import { AssetIcon, EntryIcon } from '@contentful/f36-icons'; +import { Navbar, NavbarProps } from '../src'; +import { + ImageSquareIcon, + PaintBrushIcon, + PenNibIcon, + PuzzlePieceIcon, + WrenchIcon, + MagnifyingGlassIcon, + QuestionIcon, + GearSixIcon, +} from '@contentful/f36-icons'; import { SectionHeading } from '@contentful/f36-typography'; import { Flex } from '@contentful/f36-core'; -import { NavbarSwitcherItemProps } from '../src/NavbarSwitcherItem/NavbarSwitcherItem'; import { NavbarAccountProps } from '../src/NavbarAccount/NavbarAccount'; +import { NavbarSwitcherProps } from '../src/NavbarSwitcher/NavbarSwitcher'; export default { component: Navbar, @@ -14,20 +23,12 @@ export default { } as Meta; const Switcher = ({ + children = 'Our super long space name', isAlias = false, envVariant = 'master', - children = 'master', -}: Partial) => ( - - - - ⚡️ - - - Space - - {children} - +}: Partial) => ( + + {children} ); @@ -44,40 +45,86 @@ const Account = ({ hasNotification={hasNotification} notificationVariant={notificationVariant} > - + } /> + +     ); -const MainItems = () => ( - <> - - - } /> - } /> - - - } - /> - - - -); +const MainItems = () => { + const [activeItem, setActiveItem] = React.useState('Content model'); + + const items = [ + { + title: 'Content model', + icon: , + isActive: activeItem === 'Content model', + onClick: () => setActiveItem('Content model'), + }, + { + title: 'Content', + icon: , + isActive: activeItem === 'Content', + onClick: () => setActiveItem('Content'), + }, + { + title: 'Experiences', + icon: , + isActive: activeItem === 'Experiences', + onClick: () => setActiveItem('Experiences'), + }, + { + title: 'Media', + icon: , + isActive: activeItem === 'Media', + onClick: () => setActiveItem('Media'), + }, + ]; + + return ( + <> + {items.map(({ title, icon, isActive, onClick }) => ( + + ))} + + }> + + } + /> + + + + ); +}; export const Basic: Story<{ initials?: string; avatar?: string }> = (args) => { return (
    - } account={}> - - + } + switcher={} + account={} + />
    ); }; @@ -88,15 +135,38 @@ Basic.args = { 'https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100', }; +export const SizeVariants: Story = () => { + return ( + + Fullscreen + } + account={} + variant="fullscreen" + mainNavigation={} + /> + + Wide + } + account={} + mainNavigation={} + /> + + ); +}; + export const WithInitialsAvatar: Story<{ initials?: string; avatar?: string; }> = (args) => { return (
    - } account={}> - - + } + account={} + mainNavigation={} + />
    ); }; @@ -108,25 +178,123 @@ WithInitialsAvatar.args = { export const WithFallbackAvatar: Story<{}> = (args) => { return (
    - } account={}> - - + } + account={} + mainNavigation={} + />
    ); }; WithFallbackAvatar.args = {}; +export const WithShortSpaceName = () => { + return ( + } + switcher={Space} + account={} + /> + ); +}; + +const MobileMenu = () => ( + <> + } /> + } /> + } /> + } /> + }> + + } + /> + + + + + + + + + + + General + + + Space + + + + + } /> + + + + + + + +); + export const Complete: Story<{ initials?: string; avatar?: string }> = ( args, ) => { return ( -
    - } - account={} - help={ - + } + switcher={} + mainNavigation={} + account={ + <> + Trial + + + } + secondaryNavigation={ + <> + + } /> + }> = ( testId="cf-ui-navbar-help-support" href="https://support.contentful.com" /> - - } - search={} - badge={Trial} - topRightItems={Feedback} - bottomRightItems={ - + + }> General @@ -174,11 +337,9 @@ export const Complete: Story<{ initials?: string; avatar?: string }> = ( - } - > - - -
    + + } + /> ); }; @@ -188,6 +349,71 @@ Complete.args = { 'https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100', }; +export const WithResponsiveness: Story<{ + initials?: string; + avatar?: string; +}> = (args) => { + return ( + } + switcher={} + mainNavigation={} + account={} + secondaryNavigation={ + <> + } /> + }> + + + + + + + }> + General + + + Space + + + + + } + /> + ); +}; +WithResponsiveness.parameters = { + layout: 'fullscreen', +}; + export const WithDifferentEnvironments: Story<{ initials?: string; avatar?: string; @@ -199,9 +425,12 @@ export const WithDifferentEnvironments: Story<{ Master - } account={}> - - + } + mainNavigation={} + switcher={} + account={} + /> @@ -210,11 +439,11 @@ export const WithDifferentEnvironments: Story<{ } + mainNavigation={} switcher={development} account={} - > - - + /> @@ -223,11 +452,11 @@ export const WithDifferentEnvironments: Story<{ staging} + mobileNavigation={} + mainNavigation={} + switcher={} account={} - > - - + /> @@ -236,15 +465,11 @@ export const WithDifferentEnvironments: Story<{ - dev - - } + mobileNavigation={} + mainNavigation={} + switcher={} account={} - > - - + /> ); @@ -268,11 +493,11 @@ export const WithAccountNotification: Story<{ } switcher={} account={} - > - - + mainNavigation={} + /> @@ -281,13 +506,13 @@ export const WithAccountNotification: Story<{ } switcher={} account={ } - > - - + mainNavigation={} + /> @@ -296,13 +521,13 @@ export const WithAccountNotification: Story<{ } switcher={} account={ } - > - - + mainNavigation={} + /> ); @@ -316,21 +541,24 @@ WithAccountNotification.args = { export const LoadingSkeleton: Story<{}> = () => { return ( -
    +
    } account={} switcher={ } - bottomRightItems={} - > - - - - - + mainNavigation={ + <> + + + + + + } + />
    ); }; diff --git a/packages/core/stories/GridItem.stories.tsx b/packages/core/stories/GridItem.stories.tsx index d68894f6dc..7568c7acf1 100644 --- a/packages/core/stories/GridItem.stories.tsx +++ b/packages/core/stories/GridItem.stories.tsx @@ -58,7 +58,7 @@ export const Basic = ({ rows={args.rows} columnGap={args.columnGap} rowGap={args.rowGap} - style={{ height: exampleGridHeight }} + style={{ height: exampleGridHeight, width: '90vw' }} > ( -
    + <> -
    + ), ];