Upgrade to Node 22 and Dart-Sass (npm version) (#1323)

Incurs a lot of warnings due to changes between node-sass and sass-dart, mostly related to deprecations coming for Sass 3.0, but keeps things to just enough updates to get to Node 22. 

Skipping the Bootstrap upgrade, which hosed this last time.

Author: jeffbax

package.json

@@ -28,7 +28,7 @@
     "react-select": "^5.10.0",
     "react-toggle": "^4.1.3",
     "react-transition-group": "^4.4.5",
-    "sanitize-html": "^2.14.0",
+    "sanitize-html": "^2.15.0",
     "tippy.js": "^6.3.7",
     "uuid": "^11.1.0"
   },
@@ -81,38 +81,38 @@
     "react-tracking": "^9.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.26.4",
+    "@babel/cli": "^7.27.0",
     "@babel/core": "^7.26.10",
-    "@babel/eslint-parser": "^7.26.10",
-    "@babel/eslint-plugin": "^7.26.10",
+    "@babel/eslint-parser": "^7.27.0",
+    "@babel/eslint-plugin": "^7.27.0",
     "@babel/plugin-transform-class-properties": "^7.25.9",
     "@babel/plugin-transform-object-rest-spread": "^7.25.9",
     "@babel/plugin-transform-private-methods": "^7.25.9",
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@babel/plugin-transform-runtime": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
-    "@babel/runtime": "^7.26.10",
-    "@eslint/compat": "^1.2.7",
+    "@babel/preset-typescript": "^7.27.0",
+    "@babel/runtime": "^7.27.0",
+    "@eslint/compat": "^1.2.8",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/pro-regular-svg-icons": "^6.5.2",
     "@fortawesome/pro-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-a11y": "^8.6.4",
-    "@storybook/addon-actions": "^8.6.4",
-    "@storybook/addon-backgrounds": "^8.6.4",
-    "@storybook/addon-controls": "^8.6.4",
-    "@storybook/addon-docs": "^8.6.4",
-    "@storybook/addon-jest": "^8.6.4",
-    "@storybook/addon-links": "^8.6.4",
-    "@storybook/addon-storysource": "^8.6.4",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-backgrounds": "^8.6.12",
+    "@storybook/addon-controls": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-jest": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-storysource": "^8.6.12",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-webpack5": "^8.6.4",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -122,8 +122,8 @@
     "@types/react-dom": "^18.3.5",
     "@types/react-toggle": "^4.0.5",
     "@types/react-transition-group": "^4.4.12",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -133,7 +133,7 @@
     "chromatic": "^11.27.0",
     "classnames": "^2.5.1",
     "css-loader": "^7.1.2",
-    "eslint": "^9.22.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-local-rules": "^3.0.2",
@@ -145,7 +145,6 @@
     "jest": "^29.7.0",
     "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^29.7.0",
-    "node-sass": "^9.0.0",
     "nodemon": "^3.1.9",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
@@ -156,8 +155,9 @@
     "react-popper": "^2.3.0",
     "react-test-renderer": "^18.3.1",
     "react-tracking": "^9.3.2",
+    "sass": "^1.86.1",
     "sass-loader": "^16.0.5",
-    "storybook": "^8.6.4",
+    "storybook": "^8.6.12",
     "storybook-addon-designs": "6.3.1",
     "style-loader": "^4.0.0",
     "typescript": "^5.8.2",
@@ -176,8 +176,8 @@
     "scss"
   ],
   "engines": {
-    "node": "^ 20.12",
-    "yarn": "^ 4.2"
+    "node": "^ 22.14",
+    "yarn": "^ 4.6"
   },
   "main": "lib/index",
   "types": "lib/index",
@@ -200,7 +200,7 @@
   "homepage": "https://github.com/user-interviews/ui-design-system",
   "_id": "@user-interviews/[email protected]",
   "volta": {
-    "node": "20.12.1",
+    "node": "22.14.0",
     "yarn": "4.6.0"
   },
   "packageManager": "[email protected]"

stories/Spacing/Spacing.scss

@@ -1,5 +1,5 @@
-@import 'scss/colors';
-@import 'scss/spacing';
+@import '../../scss/colors';
+@import '../../scss/spacing';
 
 .spacing-example {
   background-color: var(--synth-accent-green);

stories/Typography/Typography.scss

@@ -1,4 +1,4 @@
-@import 'scss/typography';
+@import '../../scss/typography';
 
 .TypographyRow {
   background-color: #ffffff;