chore: Bump to React 19

- Update React to v19.0.0
- Adapt sass @import to new syntax
- Update dependencies

package.json

@@ -3,20 +3,11 @@
     "version": "1.0.0",
     "private": true,
     "dependencies": {
-        "@testing-library/jest-dom": "^6.1.4",
-        "@testing-library/react": "^14.1.2",
-        "@testing-library/user-event": "^14.5.1",
-        "axios": "^0.28.0",
-        "eslint-plugin-prettier": "^5.0.1",
-        "nth-check": "2.1.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-router-dom": "^6.19.0",
-        "react-scripts": "5.0.1",
-        "sass": "^1.69.5",
-        "sass-loader": "^13.3.2",
-        "semver": "7.5.4",
-        "webpack": "5.94.0"
+        "axios": "^1.7.9",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-router-dom": "^7.1.1",
+        "react-scripts": "5.0.1"
     },
     "scripts": {
         "start": "react-scripts start",
@@ -33,20 +24,18 @@
         "not IE 11"
     ],
     "devDependencies": {
-        "@types/jest": "^29.5.8",
-        "@types/node": "^20.9.2",
-        "@types/react": "^18.2.37",
-        "@types/react-dom": "^18.2.15",
-        "typescript": "^5.2.2"
-    },
-    "resolutions": {
-        "axios": "1.7.4",
-        "follow-redirects": "1.15.6",
-        "nth-check": "2.1.1",
-        "postcss": "8.4.31",
-        "semver": "7.5.4",
-        "tough-cookie": "4.1.3",
-        "webpack": "5.94.0"
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.1.0",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jest": "^29.5.14",
+        "@types/node": "^22.10.2",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
+        "eslint-plugin-prettier": "^5.2.1",
+        "typescript": "^5.7.2",
+        "sass": "^1.83.0",
+        "sass-loader": "^16.0.1"
     },
     "homepage": ".",
     "postcss": {

src/styles/Components.sass

@@ -1,5 +1,5 @@
-@import 'mixins'
-@import 'variables'
+@use 'mixins' as *
+@use 'variables' as *
 
 .o-main-header
     position: relative

src/styles/_mixins.sass

@@ -1,4 +1,4 @@
-@import './_variables'
+@use './_variables' as *
 
 =flexbox($justify, $align, $direction, $wrap)
   display: flex

src/styles/main.sass

@@ -1,5 +1,6 @@
-@import './_variables'
-@import './_mixins'
+@use './_variables' as *
+@use './_mixins' as *
+@use "sass:color"
 
 *
   box-sizing: border-box
@@ -87,10 +88,10 @@ textarea
   color: $white
 
   &:hover
-    background-color: lighten($blue, 4%)
+    background-color: color.adjust($blue, $lightness: 4%)
 
   &:active
-    background-color: lighten($blue, 10%)
+    background-color: color.adjust($blue, $lightness: 10%)
 
   &:disabled,
   &:disabled:hover
@@ -103,15 +104,15 @@ textarea
   color: $black
 
   &:hover
-    background-color: darken($white, 6%)
+    background-color: color.adjust($white, $lightness: -6%)
 
   &:active
-    background-color: darken($white, 10%)
+    background-color: color.adjust($white, $lightness: -10%)
 
 .o-error-text-container
   font-weight: bold
   letter-spacing: 0.6px
-  color: darken($red, 14%)
+  color: color.adjust($red, $lightness: -14%)
   background: rgba($red, 0.16)
   border: 1px solid $red
   border-radius: $main-border-radius