From 31f8f9980b8a63d0a1fcb3c2ec4e0547cd79c293 Mon Sep 17 00:00:00 2001 From: Mariusz Klochowicz Date: Thu, 16 Oct 2025 01:59:54 +1030 Subject: [PATCH] chore: Upgrade flowbite-react from 0.10.2 to 0.12.9 (#10572) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Note: For this to work, we swapped to `bundler` for module resolution, which is recommended by TypeScript community. This upgrade addresses breaking changes in flowbite-react 0.12.x including the removal of compound components in favour of simple component imports. Breaking changes addressed: 1. Tailwind CSS configuration - Changed import from 'flowbite-react/tailwind' to 'flowbite-react/plugin/tailwindcss' - Updated plugin API: flowbite.plugin() → flowbite (direct export) - Replaced flowbite.content() with manual path './node_modules/flowbite-react/dist/**/*.js' 2. Component API changes (compound → simple components) - Accordion: Accordion.Panel → AccordionPanel, Accordion.Title → AccordionTitle, etc. - Tabs: Tabs.Item → TabItem - Sidebar: Sidebar.Item → SidebarItem, Sidebar.Items → SidebarItems, etc. - Clipboard: Clipboard.WithIcon → ClipboardWithIcon Additional fixes: - Adjusted clipboard icon positioning (increased top margin from top-2 to top-4) to properly align with code block borders as it was misaligned after the upgrade All components tested and verified working: - Accordion, Tabs, Sidebar, Clipboard, Tooltip, Navbar - Custom theming preserved and functioning correctly - No obvious regressions during side-by-side testing with online version --- website/package.json | 2 +- website/pnpm-lock.yaml | 354 ++++++++++++-------- website/src/app/pricing/_page.tsx | 135 ++++---- website/src/components/Clipboard/index.tsx | 23 +- website/src/components/RootNavbar/index.tsx | 10 +- website/src/components/Sidebar/index.tsx | 34 +- website/src/components/Tabs/index.tsx | 8 +- website/src/components/Tooltip/index.tsx | 2 +- website/tailwind.config.js | 7 +- website/tsconfig.json | 2 +- 10 files changed, 330 insertions(+), 247 deletions(-) diff --git a/website/package.json b/website/package.json index 860b9cf9f..6d416c91e 100644 --- a/website/package.json +++ b/website/package.json @@ -27,7 +27,7 @@ "asciinema-player": "^3.9.0", "autoprefixer": "10.4.21", "fast-xml-parser": "^5.2.5", - "flowbite-react": "^0.10.2", + "flowbite-react": "^0.12.9", "framer-motion": "^12.23.12", "highlight.js": "^11.11.1", "md5": "^2.3.0", diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml index 17bec8f41..bd3afc083 100644 --- a/website/pnpm-lock.yaml +++ b/website/pnpm-lock.yaml @@ -54,8 +54,8 @@ importers: specifier: ^5.2.5 version: 5.2.5 flowbite-react: - specifier: ^0.10.2 - version: 0.10.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.18(yaml@2.6.0)) + specifier: ^0.12.9 + version: 0.12.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.18(yaml@2.6.0))(typescript@5.9.2) framer-motion: specifier: ^12.23.12 version: 12.23.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -242,8 +242,8 @@ packages: '@emnapi/runtime@1.5.0': resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==} - '@floating-ui/core@1.6.6': - resolution: {integrity: sha512-Vkvsw6EcpMHjvZZdMkSY+djMGFbt7CRssW99Ne8tar2WLnZ/l3dbxeTShbLQj+/s35h+Qb4cmnob+EzwtjrXGQ==} + '@floating-ui/core@1.6.9': + resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==} '@floating-ui/dom@1.6.12': resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==} @@ -254,14 +254,17 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' - '@floating-ui/react@0.26.21': - resolution: {integrity: sha512-7P5ncDIiYd6RrwpCDbKyFzvabM014QlzlumtDbK3Bck0UueC+Rp8BLS34qcGBcN1pZCTodl4QNnCVmKv4tSxfQ==} + '@floating-ui/react@0.27.3': + resolution: {integrity: sha512-CLHnes3ixIFFKVQDdICjel8muhFLOBdQH7fgtHNPY8UbCNqbeKZ262G7K66lGQOUQWWnYocf7ZbUsLJgGfsLHg==} peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' + react: '>=17.0.0' + react-dom: '>=17.0.0' - '@floating-ui/utils@0.2.8': - resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@floating-ui/utils@0.2.10': + resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==} + + '@iarna/toml@2.2.5': + resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==} '@img/colour@1.0.0': resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==} @@ -528,27 +531,6 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} - '@popperjs/core@2.11.8': - resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} - - '@rollup/plugin-node-resolve@15.3.0': - resolution: {integrity: sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==} - engines: {node: '>=14.0.0'} - peerDependencies: - rollup: ^2.78.0||^3.0.0||^4.0.0 - peerDependenciesMeta: - rollup: - optional: true - - '@rollup/pluginutils@5.1.3': - resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==} - engines: {node: '>=14.0.0'} - peerDependencies: - rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 - peerDependenciesMeta: - rollup: - optional: true - '@swc/helpers@0.5.15': resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==} @@ -610,15 +592,26 @@ packages: '@types/react@18.3.11': resolution: {integrity: sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==} - '@types/resolve@1.20.2': - resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} - '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} '@types/unist@3.0.3': resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} + '@typescript-eslint/types@8.26.0': + resolution: {integrity: sha512-89B1eP3tnpr9A8L6PZlSjBvnJhWXtYfZhECqlBl1D9Lme9mHO6iWlsprBtVenQvY1HMhax1mWOjhtL3fh/u+pA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@typescript-eslint/typescript-estree@8.26.0': + resolution: {integrity: sha512-tiJ1Hvy/V/oMVRTbEOIeemA2XoylimlDQ03CgPPNaHYZbpsc78Hmngnt+WXZfJX1pjQ711V7g0H7cSJThGYfPQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <5.9.0' + + '@typescript-eslint/visitor-keys@8.26.0': + resolution: {integrity: sha512-2z8JQJWAzPdDd51dRQ/oqIJxe99/hoLIqmf8RMCAJQtYDc535W/Jt2+RTP4bP0aKeBG1F65yjIZuczOXCmbWwg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} @@ -760,9 +753,16 @@ packages: arg@5.0.2: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} + array-timsort@1.0.3: + resolution: {integrity: sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==} + asciinema-player@3.10.0: resolution: {integrity: sha512-shoOK6F606nDKZxDVM7JuGSCAyWLePoGRFNlV+FqiP5Sqvyn0BlE7wlbjZyd2X4P1iRhv/HKfVNtnQIxmgphRA==} + ast-types@0.16.1: + resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==} + engines: {node: '>=4'} + astring@1.9.0: resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==} hasBin: true @@ -853,6 +853,10 @@ packages: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} + chokidar@4.0.3: + resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} + engines: {node: '>= 14.16.0'} + chrome-trace-event@1.0.4: resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==} engines: {node: '>=6.0'} @@ -886,6 +890,13 @@ packages: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} + comment-json@4.2.5: + resolution: {integrity: sha512-bKw/r35jR3HGt5PEPm1ljsQQGyCrR8sFGNiN5L+ykDHdpO8Smxkrkla9Yi6NkQyUrb8V54PGhfMs6NrIwtxtdw==} + engines: {node: '>= 6'} + + core-util-is@1.0.3: + resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} + cross-spawn@7.0.6: resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} engines: {node: '>= 8'} @@ -901,8 +912,8 @@ packages: csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} - debounce@2.1.0: - resolution: {integrity: sha512-OkL3+0pPWCqoBc/nhO9u6TIQNTK44fnBnzuVtJAbp13Naxw9R6u21x+8tVTka87AhDZ3htqZ2pSSsZl9fqL2Wg==} + debounce@2.2.0: + resolution: {integrity: sha512-Xks6RUDLZFdz8LIdR6q0MTH44k7FikOmnh5xkSjMig6ch45afc8sjTjRQf3P6ax8dMgcQrYO/AR2RGWURrruqw==} engines: {node: '>=18'} debug@4.3.7: @@ -914,15 +925,24 @@ packages: supports-color: optional: true + debug@4.4.3: + resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + decode-named-character-reference@1.0.2: resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==} decode-named-character-reference@1.1.0: resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==} - deepmerge@4.3.1: - resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} - engines: {node: '>=0.10.0'} + deepmerge-ts@7.1.4: + resolution: {integrity: sha512-fxqo6nHGQ9zOVgI4KXqtWXJR/yCLtC7aXIVq+6jc8tHPFUxlFmuUcm2kC4vztQ+LJxQ3gER/XAWearGYQ8niGA==} + engines: {node: '>=16.0.0'} dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} @@ -981,6 +1001,15 @@ packages: resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==} engines: {node: '>=8.0.0'} + eslint-visitor-keys@4.2.1: + resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + esprima@4.0.1: + resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==} + engines: {node: '>=4'} + hasBin: true + esrecurse@4.3.0: resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} engines: {node: '>=4.0'} @@ -1011,9 +1040,6 @@ packages: estree-util-visit@2.0.0: resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==} - estree-walker@2.0.2: - resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} - estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} @@ -1055,22 +1081,17 @@ packages: resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} engines: {node: '>=8'} - flowbite-datepicker@1.3.0: - resolution: {integrity: sha512-CLVqzuoE2vkUvWYK/lJ6GzT0be5dlTbH3uuhVwyB67+PjqJWABm2wv68xhBf5BqjpBxvTSQ3mrmLHpPJ2tvrSQ==} - - flowbite-react@0.10.2: - resolution: {integrity: sha512-qkayK6IFmfH7zuuDnHmS0hJxLtL0KpW4vo4i/VQfZ6ZfaNlUsNLQxCGcmXwbZZtUm2WVw8x71aaDOAxftG9tmg==} + flowbite-react@0.12.9: + resolution: {integrity: sha512-8Zm0aOQn1ocTTzDVYARpzUGdBuXg4W2HYLPHXDHKUeNsVePIfYKQiQkh7JbqLbzvlKdYChmQEayljFVbZ1sU5A==} + hasBin: true peerDependencies: - react: '>=18' - react-dom: '>=18' - tailwindcss: ^3 + react: ^18 || ^19 + react-dom: ^18 || ^19 + tailwindcss: ^3 || ^4 flowbite-typography@1.0.5: resolution: {integrity: sha512-IqTwOYgGZkXTK/5ngx3A9oQwgOqnRyUKUfIiB+w6xDmiD8z3cKDIgYfFpHIMKbLVfg+QmJIPqEEPrGZbAwVT6g==} - flowbite@2.5.1: - resolution: {integrity: sha512-7jP1jy9c3QP7y+KU9lc8ueMkTyUdMDvRP+lteSWgY5TigSZjf9K1kqZxmqjhbx2gBnFQxMl1GAjVThCa8cEpKA==} - foreground-child@3.3.1: resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==} engines: {node: '>=14'} @@ -1129,6 +1150,10 @@ packages: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} + has-own-prop@2.0.0: + resolution: {integrity: sha512-Pq0h+hvsVm6dDEa8x82GnLSYHOzNDt7f0ddFa3FqcQlgzEiptPqL+XrOJNavjOzSYiYWIrgeVYYgGlLmnxwilQ==} + engines: {node: '>=8'} + hasown@2.0.2: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} @@ -1235,9 +1260,6 @@ packages: is-hexadecimal@2.0.1: resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==} - is-module@1.0.0: - resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==} - is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} @@ -1272,6 +1294,10 @@ packages: json-schema-traverse@1.0.0: resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==} + klona@2.0.6: + resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==} + engines: {node: '>= 8'} + lilconfig@3.1.3: resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==} engines: {node: '>=14'} @@ -1499,10 +1525,6 @@ packages: resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} engines: {node: '>= 0.6'} - mini-svg-data-uri@1.4.4: - resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==} - hasBin: true - minimatch@9.0.5: resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==} engines: {node: '>=16 || 14 >=14.17'} @@ -1600,6 +1622,9 @@ packages: package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + package-manager-detector@0.2.9: + resolution: {integrity: sha512-+vYvA/Y31l8Zk8dwxHhL3JfTuHPm6tlxM2A3GeQyl7ovYnSp1+mzAxClxaOr0qO1TtPxbQxetI7v5XqKLJZk7Q==} + parse-entities@2.0.0: resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==} @@ -1624,10 +1649,6 @@ packages: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} - picomatch@4.0.3: - resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==} - engines: {node: '>=12'} - pify@2.3.0: resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} engines: {node: '>=0.10.0'} @@ -1728,11 +1749,6 @@ packages: react: '>= 16.8.0 || ^18.0.0' react-dom: '>= 16.8.0 || ^18.0.0' - react-icons@5.2.1: - resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==} - peerDependencies: - react: '*' - react-icons@5.5.0: resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==} peerDependencies: @@ -1760,6 +1776,14 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} + readdirp@4.1.2: + resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} + engines: {node: '>= 14.18.0'} + + recast@0.23.11: + resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==} + engines: {node: '>= 4'} + recma-build-jsx@1.0.0: resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==} @@ -1813,6 +1837,10 @@ packages: remark-stringify@11.0.0: resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + repeat-string@1.6.1: + resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==} + engines: {node: '>=0.10'} + require-from-string@2.0.2: resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} engines: {node: '>=0.10.0'} @@ -1971,8 +1999,11 @@ packages: tabbable@6.2.0: resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} - tailwind-merge@2.4.0: - resolution: {integrity: sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==} + tailwind-merge@2.6.0: + resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==} + + tailwind-merge@3.0.1: + resolution: {integrity: sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==} tailwindcss@3.4.18: resolution: {integrity: sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==} @@ -2014,6 +2045,9 @@ packages: third-party-capital@1.0.20: resolution: {integrity: sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==} + tiny-invariant@1.3.3: + resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} + to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -2024,6 +2058,12 @@ packages: trough@2.2.0: resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==} + ts-api-utils@2.1.0: + resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==} + engines: {node: '>=18.12'} + peerDependencies: + typescript: '>=4.8.4' + ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} @@ -2266,14 +2306,14 @@ snapshots: tslib: 2.8.1 optional: true - '@floating-ui/core@1.6.6': + '@floating-ui/core@1.6.9': dependencies: - '@floating-ui/utils': 0.2.8 + '@floating-ui/utils': 0.2.10 '@floating-ui/dom@1.6.12': dependencies: - '@floating-ui/core': 1.6.6 - '@floating-ui/utils': 0.2.8 + '@floating-ui/core': 1.6.9 + '@floating-ui/utils': 0.2.10 '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: @@ -2281,15 +2321,17 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@floating-ui/react@0.26.21(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@floating-ui/react@0.27.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@floating-ui/utils': 0.2.8 + '@floating-ui/utils': 0.2.10 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) tabbable: 6.2.0 - '@floating-ui/utils@0.2.8': {} + '@floating-ui/utils@0.2.10': {} + + '@iarna/toml@2.2.5': {} '@img/colour@1.0.0': optional: true @@ -2533,22 +2575,6 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true - '@popperjs/core@2.11.8': {} - - '@rollup/plugin-node-resolve@15.3.0': - dependencies: - '@rollup/pluginutils': 5.1.3 - '@types/resolve': 1.20.2 - deepmerge: 4.3.1 - is-module: 1.0.0 - resolve: 1.22.10 - - '@rollup/pluginutils@5.1.3': - dependencies: - '@types/estree': 1.0.8 - estree-walker: 2.0.2 - picomatch: 4.0.3 - '@swc/helpers@0.5.15': dependencies: tslib: 2.8.1 @@ -2621,12 +2647,31 @@ snapshots: '@types/prop-types': 15.7.13 csstype: 3.1.3 - '@types/resolve@1.20.2': {} - '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} + '@typescript-eslint/types@8.26.0': {} + + '@typescript-eslint/typescript-estree@8.26.0(typescript@5.9.2)': + dependencies: + '@typescript-eslint/types': 8.26.0 + '@typescript-eslint/visitor-keys': 8.26.0 + debug: 4.4.3 + fast-glob: 3.3.3 + is-glob: 4.0.3 + minimatch: 9.0.5 + semver: 7.7.3 + ts-api-utils: 2.1.0(typescript@5.9.2) + typescript: 5.9.2 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/visitor-keys@8.26.0': + dependencies: + '@typescript-eslint/types': 8.26.0 + eslint-visitor-keys: 4.2.1 + '@ungap/structured-clone@1.2.0': {} '@ungap/structured-clone@1.3.0': {} @@ -2814,11 +2859,17 @@ snapshots: arg@5.0.2: {} + array-timsort@1.0.3: {} + asciinema-player@3.10.0: dependencies: '@babel/runtime': 7.27.0 solid-js: 1.9.5 + ast-types@0.16.1: + dependencies: + tslib: 2.8.1 + astring@1.9.0: {} autoprefixer@10.4.21(postcss@8.5.6): @@ -2905,6 +2956,10 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + chokidar@4.0.3: + dependencies: + readdirp: 4.1.2 + chrome-trace-event@1.0.4: optional: true @@ -2929,6 +2984,16 @@ snapshots: commander@4.1.1: {} + comment-json@4.2.5: + dependencies: + array-timsort: 1.0.3 + core-util-is: 1.0.3 + esprima: 4.0.1 + has-own-prop: 2.0.0 + repeat-string: 1.6.1 + + core-util-is@1.0.3: {} + cross-spawn@7.0.6: dependencies: path-key: 3.1.1 @@ -2941,12 +3006,16 @@ snapshots: csstype@3.1.3: {} - debounce@2.1.0: {} + debounce@2.2.0: {} debug@4.3.7: dependencies: ms: 2.1.3 + debug@4.4.3: + dependencies: + ms: 2.1.3 + decode-named-character-reference@1.0.2: dependencies: character-entities: 2.0.2 @@ -2955,7 +3024,7 @@ snapshots: dependencies: character-entities: 2.0.2 - deepmerge@4.3.1: {} + deepmerge-ts@7.1.4: {} dequal@2.0.3: {} @@ -3014,6 +3083,10 @@ snapshots: estraverse: 4.3.0 optional: true + eslint-visitor-keys@4.2.1: {} + + esprima@4.0.1: {} + esrecurse@4.3.0: dependencies: estraverse: 5.3.0 @@ -3054,8 +3127,6 @@ snapshots: '@types/estree-jsx': 1.0.5 '@types/unist': 3.0.3 - estree-walker@2.0.2: {} - estree-walker@3.0.3: dependencies: '@types/estree': 1.0.8 @@ -3106,27 +3177,28 @@ snapshots: dependencies: to-regex-range: 5.0.1 - flowbite-datepicker@1.3.0: + flowbite-react@0.12.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.18(yaml@2.6.0))(typescript@5.9.2): dependencies: - '@rollup/plugin-node-resolve': 15.3.0 - flowbite: 2.5.1 - transitivePeerDependencies: - - rollup - - flowbite-react@0.10.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.18(yaml@2.6.0)): - dependencies: - '@floating-ui/core': 1.6.6 - '@floating-ui/react': 0.26.21(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@floating-ui/core': 1.6.9 + '@floating-ui/react': 0.27.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@iarna/toml': 2.2.5 + '@typescript-eslint/typescript-estree': 8.26.0(typescript@5.9.2) + chokidar: 4.0.3 classnames: 2.5.1 - debounce: 2.1.0 - flowbite: 2.5.1 + comment-json: 4.2.5 + debounce: 2.2.0 + deepmerge-ts: 7.1.4 + klona: 2.0.6 + package-manager-detector: 0.2.9 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-icons: 5.2.1(react@18.3.1) - tailwind-merge: 2.4.0 + recast: 0.23.11 + tailwind-merge-v2: tailwind-merge@2.6.0 + tailwind-merge-v3: tailwind-merge@3.0.1 tailwindcss: 3.4.18(yaml@2.6.0) transitivePeerDependencies: - - rollup + - supports-color + - typescript flowbite-typography@1.0.5: dependencies: @@ -3134,14 +3206,6 @@ snapshots: lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 - flowbite@2.5.1: - dependencies: - '@popperjs/core': 2.11.8 - flowbite-datepicker: 1.3.0 - mini-svg-data-uri: 1.4.4 - transitivePeerDependencies: - - rollup - foreground-child@3.3.1: dependencies: cross-spawn: 7.0.6 @@ -3193,6 +3257,8 @@ snapshots: has-flag@4.0.0: optional: true + has-own-prop@2.0.0: {} + hasown@2.0.2: dependencies: function-bind: 1.1.2 @@ -3349,8 +3415,6 @@ snapshots: is-hexadecimal@2.0.1: {} - is-module@1.0.0: {} - is-number@7.0.0: {} is-plain-obj@4.1.0: {} @@ -3383,6 +3447,8 @@ snapshots: json-schema-traverse@1.0.0: optional: true + klona@2.0.6: {} + lilconfig@3.1.3: {} lines-and-columns@1.2.4: {} @@ -3898,8 +3964,6 @@ snapshots: mime-db: 1.52.0 optional: true - mini-svg-data-uri@1.4.4: {} - minimatch@9.0.5: dependencies: brace-expansion: 2.0.2 @@ -3984,6 +4048,8 @@ snapshots: package-json-from-dist@1.0.1: {} + package-manager-detector@0.2.9: {} + parse-entities@2.0.0: dependencies: character-entities: 1.2.4 @@ -4016,8 +4082,6 @@ snapshots: picomatch@2.3.1: {} - picomatch@4.0.3: {} - pify@2.3.0: {} pirates@4.0.7: {} @@ -4101,10 +4165,6 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-icons@5.2.1(react@18.3.1): - dependencies: - react: 18.3.1 - react-icons@5.5.0(react@18.3.1): dependencies: react: 18.3.1 @@ -4149,6 +4209,16 @@ snapshots: dependencies: picomatch: 2.3.1 + readdirp@4.1.2: {} + + recast@0.23.11: + dependencies: + ast-types: 0.16.1 + esprima: 4.0.1 + source-map: 0.6.1 + tiny-invariant: 1.3.3 + tslib: 2.8.1 + recma-build-jsx@1.0.0: dependencies: '@types/estree': 1.0.8 @@ -4274,6 +4344,8 @@ snapshots: mdast-util-to-markdown: 2.1.2 unified: 11.0.5 + repeat-string@1.6.1: {} + require-from-string@2.0.2: optional: true @@ -4313,8 +4385,7 @@ snapshots: search-insights@2.14.0: {} - semver@7.7.3: - optional: true + semver@7.7.3: {} serialize-javascript@6.0.2: dependencies: @@ -4379,8 +4450,7 @@ snapshots: source-map: 0.6.1 optional: true - source-map@0.6.1: - optional: true + source-map@0.6.1: {} source-map@0.7.4: {} @@ -4457,7 +4527,9 @@ snapshots: tabbable@6.2.0: {} - tailwind-merge@2.4.0: {} + tailwind-merge@2.6.0: {} + + tailwind-merge@3.0.1: {} tailwindcss@3.4.18(yaml@2.6.0): dependencies: @@ -4518,6 +4590,8 @@ snapshots: third-party-capital@1.0.20: {} + tiny-invariant@1.3.3: {} + to-regex-range@5.0.1: dependencies: is-number: 7.0.0 @@ -4526,6 +4600,10 @@ snapshots: trough@2.2.0: {} + ts-api-utils@2.1.0(typescript@5.9.2): + dependencies: + typescript: 5.9.2 + ts-interface-checker@0.1.13: {} tslib@2.8.1: {} diff --git a/website/src/app/pricing/_page.tsx b/website/src/app/pricing/_page.tsx index 9a69d3222..a9512d7b6 100644 --- a/website/src/app/pricing/_page.tsx +++ b/website/src/app/pricing/_page.tsx @@ -5,7 +5,12 @@ import Toggle from "@/components/Toggle"; import Link from "next/link"; import PlanTable from "./plan_table"; import { useState } from "react"; -import { Accordion } from "flowbite-react"; +import { + Accordion, + AccordionPanel, + AccordionTitle, + AccordionContent, +} from "flowbite-react"; import { FaCheck, FaCircleCheck } from "react-icons/fa6"; export default function _Page() { @@ -322,11 +327,11 @@ export default function _Page() { - - + + How long does it take to set up Firezone? - - + + A simple deployment takes{" "} {" "} for more information and step by step instructions. - - - - Is there a self-hosted plan? - + + + + Is there a self-hosted plan? + All of the source code for the entire Firezone product is available at our{" "} - - - + + + + Do I need to rip and replace my current VPN to use Firezone? - - + + No. As long they're set up to access different resources, you can run Firezone alongside your existing remote access solutions, and switch over whenever you’re ready. There’s no need for any downtime or unnecessary disruptions. - - - - + + + + Can I try Firezone before I buy it? - - + + Yes. The Starter plan is free to use without limitation. No credit card is required to get started. The Enterprise plan includes a free pilot period to evaluate whether Firezone is a @@ -398,13 +403,13 @@ export default function _Page() { Contact sales {" "} to request a demo. - - - - + + + + My seat counts have changed. Can I adjust my plan? - - + +

Yes.

For the Team plan, you can add or remove @@ -418,26 +423,26 @@ export default function _Page() { manager to request a seat increase. You'll then be billed for the prorated amount for the remainder of the billing cycle.

- - - - + + + + What happens to my data with Firezone enabled? - - + + Network traffic is always end-to-end encrypted, and by default, routes directly to Gateways running on your infrastructure. In rare circumstances, encrypted traffic can pass through our global relay network if a direct connection cannot be established. Firezone can never decrypt the contents of your traffic. - - - - + + + + How do I cancel or change my plan? - - + + For Starter and Team plans, you can downgrade by going to your Account settings in your Firezone admin portal. For Enterprise plans, contact your account manager for subscription updates. If @@ -449,31 +454,31 @@ export default function _Page() { contact support . - - - - When will I be billed? - + + + + When will I be billed? + The Team plan is billed monthly on the same day you start service until canceled. Enterprise plans are billed annually. - - - - + + + + What payment methods are available? - - + + The Starter plan is free and does not require a credit card to get started. Team and Enterprise plans can be paid via credit card, ACH, or wire transfer. - - - - + + + + Do you offer special pricing for nonprofits and educational institutions? - - + + Yes. Not-for-profit organizations and educational institutions are eligible for a 50% discount.{" "} {" "} to request the discount. - - - - + + + + What payment methods are available? - - + + The Starter plan is free and does not require a credit card to get started. Team and Enterprise plans can be paid via credit card, ACH, or wire transfer. - - + + diff --git a/website/src/components/Clipboard/index.tsx b/website/src/components/Clipboard/index.tsx index 2e43a71cd..7bfbee1d5 100644 --- a/website/src/components/Clipboard/index.tsx +++ b/website/src/components/Clipboard/index.tsx @@ -1,21 +1,14 @@ -import { Clipboard as FlowbiteClipboard } from "flowbite-react"; -import type { CustomFlowbiteTheme } from "flowbite-react"; +import { ClipboardWithIcon } from "flowbite-react"; +import type { ClipboardWithIconTheme } from "flowbite-react"; -const clipboardTheme: CustomFlowbiteTheme["clipboard"] = { - withIcon: { - base: "absolute end-2 top-2 inline-flex items-center justify-center rounded p-1.5 text-neutral-500 transition transform duration-200 hover:text-neutral-800 hover:bg-neutral-50", - icon: { - defaultIcon: "h-4 w-4", - successIcon: "h-4 w-4 text-accent-500", - }, +const clipboardTheme: ClipboardWithIconTheme = { + base: "absolute end-3 top-4 inline-flex items-center justify-center rounded p-2 text-neutral-500 transition transform duration-200 hover:text-neutral-800 hover:bg-neutral-50", + icon: { + defaultIcon: "h-4 w-4", + successIcon: "h-4 w-4 text-accent-500", }, }; export default function Clipboard({ valueToCopy }: { valueToCopy: string }) { - return ( - - ); + return ; } diff --git a/website/src/components/RootNavbar/index.tsx b/website/src/components/RootNavbar/index.tsx index 63e4c0381..dffc839d1 100644 --- a/website/src/components/RootNavbar/index.tsx +++ b/website/src/components/RootNavbar/index.tsx @@ -15,7 +15,7 @@ import { import { usePathname } from "next/navigation"; import Button from "@/components/Button"; import { HiChevronDown } from "react-icons/hi2"; -import type { CustomFlowbiteTheme } from "flowbite-react"; +import type { CustomFlowbiteTheme } from "flowbite-react/types"; import { HiBars3 } from "react-icons/hi2"; import { useDrawer } from "@/components/Providers/DrawerProvider"; import { useScrollPosition } from "@/hooks/useScrollPosition"; @@ -53,8 +53,8 @@ const navbarThemeLight: CustomFlowbiteTheme["navbar"] = { link: { base: "block py-2 pl-3 pr-4 md:p-0 border-t border-neutral-200 md:border-t-0 md:border-transparent", active: { - on: "bg-neutral-200 rounded text-white md:bg-transparent text-primary-450 font-semibold", - off: "text-neutral-700 hover:text-primary-450 hover:bg-neutral-100 transition transform duration-50 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-primary-450", + on: "bg-neutral-100 rounded md:bg-transparent font-semibold text-primary-450 md:text-primary-450", + off: "text-neutral-700 hover:text-primary-450 md:hover:text-primary-450 hover:bg-neutral-100 transition transform duration-50 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-primary-450", }, disabled: { on: "text-neutral-400 hover:cursor-not-allowed", @@ -100,8 +100,8 @@ const navbarThemeDark: CustomFlowbiteTheme["navbar"] = { link: { base: "block py-2 pl-3 pr-4 md:p-0 border-t border-neutral-700 md:border-t-0 md:border-transparent", active: { - on: "rounded text-white md:bg-transparent text-primary-450 font-semibold", - off: "text-neutral-200 hover:text-primary-450 hover:bg-primary-900 hover:text-primary-450 transition transform duration-50 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-primary-450", + on: "rounded bg-primary-900 md:bg-transparent font-semibold text-primary-450 md:text-primary-450", + off: "text-neutral-200 hover:text-primary-450 md:hover:text-primary-450 hover:bg-primary-900 transition transform duration-50 md:hover:bg-transparent md:hover:border-b-2 md:hover:border-primary-450", }, disabled: { on: "text-neutral-400 hover:cursor-not-allowed", diff --git a/website/src/components/Sidebar/index.tsx b/website/src/components/Sidebar/index.tsx index daa6ea3ba..5a8b65191 100644 --- a/website/src/components/Sidebar/index.tsx +++ b/website/src/components/Sidebar/index.tsx @@ -1,8 +1,14 @@ "use client"; import { Route } from "next"; import { usePathname } from "next/navigation"; -import type { CustomFlowbiteTheme } from "flowbite-react"; -import { Sidebar as FlowbiteSidebar } from "flowbite-react"; +import type { CustomFlowbiteTheme } from "flowbite-react/types"; +import { + Sidebar as FlowbiteSidebar, + SidebarItem as FlowbiteSidebarItem, + SidebarItems as FlowbiteSidebarItems, + SidebarItemGroup as FlowbiteSidebarItemGroup, + SidebarCollapse as FlowbiteSidebarCollapse, +} from "flowbite-react"; import Link from "next/link"; import { useDrawer } from "@/components/Providers/DrawerProvider"; @@ -20,7 +26,7 @@ const FlowbiteSidebarTheme: CustomFlowbiteTheme["sidebar"] = { off: "w-64", }, inner: - "h-full overflow-y-auto overflow-x-hidden rounded px-3 py-4 dark:bg-neutral-800", + "h-full overflow-y-auto overflow-x-hidden bg-white rounded px-3 py-4 dark:bg-neutral-800", }, collapse: { button: @@ -29,7 +35,7 @@ const FlowbiteSidebarTheme: CustomFlowbiteTheme["sidebar"] = { base: "h-6 w-6 text-neutral-500 transition duration-75 group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-white", open: { off: "", - on: "text-neutral-900", + on: "text-neutral-900 dark:text-white", }, }, label: { @@ -114,17 +120,17 @@ export function SidebarItem({ if (href) { return ( - + {children} - + ); } else { - return {children}; + return {children}; } } export function SidebarItems({ children }: { children: React.ReactNode }) { - return {children}; + return {children}; } export function SidebarItemGroup({ @@ -135,14 +141,14 @@ export function SidebarItemGroup({ children: React.ReactNode; }) { return ( - + {label && ( - + {label} - + )} {children} - + ); } @@ -158,9 +164,9 @@ export function SidebarCollapse({ const p = usePathname(); return ( - + {children} - + ); } diff --git a/website/src/components/Tabs/index.tsx b/website/src/components/Tabs/index.tsx index a4ceec768..65f15bc00 100644 --- a/website/src/components/Tabs/index.tsx +++ b/website/src/components/Tabs/index.tsx @@ -1,6 +1,6 @@ "use client"; -import { Tabs } from "flowbite-react"; -import type { CustomFlowbiteTheme } from "flowbite-react"; +import { Tabs, TabItem } from "flowbite-react"; +import type { CustomFlowbiteTheme } from "flowbite-react/types"; const customTheme: CustomFlowbiteTheme["tabs"] = { base: "flex flex-col gap-2", @@ -85,9 +85,9 @@ function TabsItem({ icon?: FlowbiteIcon; }) { return ( - + {children} - + ); } diff --git a/website/src/components/Tooltip/index.tsx b/website/src/components/Tooltip/index.tsx index 6e416fe71..f1912ccfa 100644 --- a/website/src/components/Tooltip/index.tsx +++ b/website/src/components/Tooltip/index.tsx @@ -1,6 +1,6 @@ "use client"; -import type { CustomFlowbiteTheme } from "flowbite-react"; +import type { CustomFlowbiteTheme } from "flowbite-react/types"; import { Tooltip as FlowbiteTooltip } from "flowbite-react"; export default function Tooltip({ diff --git a/website/tailwind.config.js b/website/tailwind.config.js index 7600d7fa0..d64bce57b 100644 --- a/website/tailwind.config.js +++ b/website/tailwind.config.js @@ -1,5 +1,5 @@ /** @type {import('tailwindcss').Config} */ -import flowbite from "flowbite-react/tailwind"; +import flowbite from "flowbite-react/plugin/tailwindcss"; const firezoneColors = { // See our brand palette in Figma. @@ -66,11 +66,12 @@ const firezoneColors = { /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: "class", content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", - flowbite.content(), + "./node_modules/flowbite-react/dist/**/*.js", ], theme: { extend: { @@ -135,5 +136,5 @@ module.exports = { }, }, }, - plugins: [flowbite.plugin(), require("flowbite-typography")], + plugins: [flowbite, require("flowbite-typography")], }; diff --git a/website/tsconfig.json b/website/tsconfig.json index 0c7555fa7..eb0b41d94 100644 --- a/website/tsconfig.json +++ b/website/tsconfig.json @@ -9,7 +9,7 @@ "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve",