Update dependencies

Author: cyderize

package-lock.json

@@ -12,35 +12,35 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@headlessui/react": "^2.2.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.0.3",
-    "@next/third-parties": "^15.0.3",
-    "@tailwindcss/forms": "^0.5.9",
-    "@tailwindcss/typography": "^0.5.15",
+    "@next/mdx": "^15.1.6",
+    "@next/third-parties": "^15.1.6",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.0.6",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/mdx": "^2.0.13",
-    "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "focus-visible": "^5.2.1",
-    "framer-motion": "^11.11",
-    "next": "15.0.3",
+    "framer-motion": "^12.4",
+    "next": "15.1.6",
     "postcss-focus-visible": "^10.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "rehype-slug": "^6.0.0",
-    "remark-gfm": "^4.0.0",
-    "tailwindcss": "^3.4.14",
+    "remark-gfm": "^4.0.1",
+    "tailwindcss": "^4.0.6",
     "use-debounce": "10.0.4"
   },
   "devDependencies": {
-    "eslint": "9.14",
-    "eslint-config-next": "15.0",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8"
+    "eslint": "9.20",
+    "eslint-config-next": "15.1",
+    "prettier": "^3.5.0",
+    "prettier-plugin-tailwindcss": "^0.6.11"
   }
 }

package.json

@@ -1,9 +1,8 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     'postcss-focus-visible': {
       replaceWith: '[data-focus-visible-added]',
     },
-    autoprefixer: {},
   },
 }

postcss.config.js

@@ -6,7 +6,7 @@ const baseStyles = {
   solid:
     'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors',
   outline:
-    'inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm outline-2 outline-offset-2 transition-colors',
+    'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm outline-2 outline-offset-2 transition-colors',
 }
 
 const variantStyles = {

src/components/Button.jsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 
 const formClasses =
-  'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm'
+  'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-hidden focus:ring-cyan-500 sm:text-sm'
 
 function Label({ id, children }) {
   return (

src/components/Fields.jsx

@@ -65,7 +65,7 @@ export function Header() {
               {({ open }) => (
                 <>
                   <Popover.Button
-                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
+                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 not-focus-visible:focus:outline-hidden"
                     aria-label="Toggle site navigation"
                   >
                     {({ open }) =>
@@ -85,7 +85,7 @@ export function Header() {
                           initial={{ opacity: 0 }}
                           animate={{ opacity: 1 }}
                           exit={{ opacity: 0 }}
-                          className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur"
+                          className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur-sm"
                         />
                         <Popover.Panel
                           static

src/components/Header.jsx

@@ -121,7 +121,7 @@ export function Rostering() {
                 <td key={i}>
                   <div
                     className={clsx(
-                      'rounded text-center transition-colors duration-300',
+                      'rounded-sm text-center transition-colors duration-300',
                       bgColors[s] || '',
                     )}
                   >

src/components/showreel/Rostering.jsx

@@ -1,35 +1,54 @@
-@font-face {
-  font-family: 'Inter';
-  font-weight: 100 900;
-  font-display: block;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  src: url('/fonts/Inter-roman.var.woff2') format('woff2');
-}
-@font-face {
-  font-family: 'Inter';
-  font-weight: 100 900;
-  font-display: block;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  src: url('/fonts/Inter-italic.var.woff2') format('woff2');
-}
+@import 'tailwindcss';
+
+@config '../../tailwind.config.js';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-#__next {
-  min-height: 100%;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
 }
 
-@layer utilities {
-  .hide-scrollbar::-webkit-scrollbar {
+@utility hide-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
 
-  .hide-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+@layer base {
+  @font-face {
+    font-family: 'Inter';
+    font-weight: 100 900;
+    font-display: block;
+    font-style: normal;
+    font-named-instance: 'Regular';
+    src: url('/fonts/Inter-roman.var.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-weight: 100 900;
+    font-display: block;
+    font-style: italic;
+    font-named-instance: 'Italic';
+    src: url('/fonts/Inter-italic.var.woff2') format('woff2');
+  }
+}
+
+@layer utilities {
+  #__next {
+    min-height: 100%;
   }
 }