[Fix] Update dependencies

.circleci/config.yml

@@ -3,12 +3,15 @@ version: 2.1
 executors:
   build-executor:
     docker:
-      - image: circleci/node:lts
+      - image: cimg/node:lts
 
 commands:
   checkout_and_cache:
     steps:
       - checkout
+      - run: 
+          name: Node version
+          command: node --version
       - restore_cache: # special step to restore the dependency cache
           # Read about caching dependencies: https://circleci.com/docs/2.0/caching/
           name: Restore Yarn Package Cache

.styleguidist/styleguidist.require.axe.js

@@ -2,6 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 if (process.env.NODE_ENV !== 'production') {
-  var axe = require('react-axe');
+  var axe = require('@axe-core/react');
   axe(React, ReactDOM, 1000);
 }

.styleguidist/webpack.config.js

@@ -4,9 +4,6 @@ const webpack = require('webpack');
 module.exports = (env) => ({
   mode: env.production ? 'production' : 'development',
   devtool: env.production ? 'inline-source-map' : 'eval',
-  devServer: {
-    injectClient: true,
-  },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
     fallback: {

.stylelintrc

@@ -1,16 +1,10 @@
 {
   "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
+    "stylelint-config-recommended"
   ],
+  "customSyntax": "postcss-styled-syntax",
   "rules": {
     "no-extra-semicolons": null,
     "function-no-unknown": null
-  },
-  "overrides": [
-    {
-      "files": ["**/*.{ts,tsx}"],
-      "customSyntax": "@stylelint/postcss-css-in-js"
-    }
-  ]
+  }
 }

package.json

@@ -70,97 +70,91 @@
     "deploy-dev": "gh-pages -d styleguide -e dev -m \"[skip ci] Updates\""
   },
   "devDependencies": {
-    "@babel/core": "7.18.9",
-    "@babel/plugin-transform-runtime": "7.18.9",
-    "@babel/preset-env": "7.18.9",
-    "@babel/preset-react": "7.18.6",
+    "@axe-core/react": "4.7.3",
+    "@babel/core": "7.22.10",
+    "@babel/plugin-transform-runtime": "7.22.10",
+    "@babel/preset-env": "7.22.10",
+    "@babel/preset-react": "7.22.5",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.1",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "@stylelint/postcss-css-in-js": "0.38.0",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "12.1.5",
     "@types/classnames": "2.3.1",
-    "@types/jest": "28.1.6",
-    "@types/jest-axe": "3.5.4",
+    "@types/jest": "29.5.3",
+    "@types/jest-axe": "3.5.5",
     "@types/react": "17.0.40",
     "@types/react-dom": "17.0.13",
-    "@types/styled-components": "5.1.25",
+    "@types/styled-components": "5.1.26",
     "@types/warning": "3.0.0",
-    "@typescript-eslint/eslint-plugin": "5.30.7",
-    "@typescript-eslint/parser": "5.30.7",
-    "autoprefixer": "10.4.7",
-    "babel-jest": "28.1.3",
-    "clean-css": "5.3.1",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "autoprefixer": "10.4.14",
+    "babel-jest": "29.6.2",
     "clipboard-copy": "4.0.1",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
-    "css-loader": "6.7.1",
-    "cssnano": "5.1.12",
-    "eslint": "8.20.0",
+    "css-loader": "6.8.1",
+    "cssnano": "6.0.1",
+    "eslint": "8.46.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "8.8.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.28.0",
     "eslint-plugin-jest": "26.6.0",
-    "eslint-plugin-jsx-a11y": "6.6.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-react": "7.33.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-tree-shaking": "1.10.0",
     "fs-extra": "11.1.1",
-    "gh-pages": "4.0.0",
-    "husky": "8.0.1",
-    "jest": "28.1.3",
-    "jest-axe": "6.0.0",
-    "jest-environment-jsdom": "28.1.3",
-    "jest-styled-components": "7.0.8",
-    "lint-staged": "13.0.3",
-    "node-sass": "7.0.1",
+    "gh-pages": "5.0.0",
+    "husky": "8.0.3",
+    "jest": "29.6.2",
+    "jest-axe": "8.0.0",
+    "jest-environment-jsdom": "29.6.2",
+    "jest-styled-components": "7.1.1",
+    "lint-staged": "13.2.3",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.14",
-    "postcss-import": "14.1.0",
-    "postcss-syntax": "0.36.2",
-    "prettier": "2.7.1",
+    "postcss": "8.4.27",
+    "postcss-import": "15.1.0",
+    "postcss-styled-syntax": "0.4.0",
+    "prettier": "3.0.1",
     "prettier-eslint": "15.0.1",
     "prop-types": "15.8.1",
     "react": "17.0.2",
-    "react-axe": "3.5.4",
     "react-docgen": "5.4.3",
     "react-docgen-typescript": "2.2.2",
     "react-dom": "17.0.2",
-    "react-styleguidist": "11.2.0",
-    "rimraf": "3.0.2",
-    "rollup": "2.77.0",
+    "react-is": "17.0.2",
+    "react-styleguidist": "13.0.0",
+    "rimraf": "5.0.1",
+    "rollup": "2.79.1",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-progress": "1.1.2",
     "rollup-plugin-ts": "2.0.7",
-    "sass": "1.53.0",
-    "sass-loader": "13.0.2",
+    "sass": "1.64.2",
+    "sass-loader": "13.3.2",
     "size-limit": "7.0.8",
-    "style-loader": "3.3.1",
+    "style-loader": "3.3.3",
     "styled-components": "5.3.5",
-    "stylelint": "14.9.1",
-    "stylelint-config-recommended": "8.0.0",
-    "stylelint-config-styled-components": "0.1.1",
-    "stylelint-custom-processor-loader": "0.6.0",
-    "stylelint-processor-styled-components": "1.10.0",
-    "ts-jest": "28.0.7",
-    "ts-loader": "9.3.1",
-    "tslib": "2.4.0",
-    "typescript": "4.6.2",
-    "webpack": "5.73.0"
+    "stylelint": "15.10.2",
+    "stylelint-config-recommended": "13.0.0",
+    "ts-jest": "29.1.1",
+    "ts-loader": "9.4.3",
+    "tslib": "2.6.1",
+    "typescript": "4.6.4",
+    "webpack": "5.88.2"
   },
   "dependencies": {
-    "@babel/runtime": "7.18.9",
-    "@popperjs/core": "2.11.5",
-    "@types/react-modal": "3.13.1",
-    "classnames": "2.3.1",
-    "date-fns": "2.29.3",
+    "@babel/runtime": "7.22.10",
+    "@popperjs/core": "2.11.8",
+    "@types/react-modal": "3.16.0",
+    "classnames": "2.3.2",
+    "date-fns": "2.30.0",
     "polished": "4.2.2",
-    "react-modal": "3.15.1",
+    "react-modal": "3.16.1",
     "react-popper": "2.3.0",
-    "react-svg": "15.1.3",
     "suomifi-design-tokens": "5.1.0",
     "suomifi-icons": "7.0.1"
   },
@@ -181,8 +175,5 @@
     {
       "path": "dist/suomifi-ui-components.esm.js"
     }
-  ],
-  "resolutions": {
-    "babel-plugin-styled-components": "2.0.7"
-  }
+  ]
 }

src/core/Form/DateInput/DatePicker/DatePicker.baseStyles.tsx

@@ -48,7 +48,8 @@ export const baseStyles = (theme: SuomifiTheme) => css`
 
   &.fi-date-picker--small-screen-hidden {
     transform: translateZ(0) translateY(100%);
-    transition: transform 200ms ${theme.transitions.basicTimingFunction},
+    transition:
+      transform 200ms ${theme.transitions.basicTimingFunction},
       visibility 200ms ${theme.transitions.basicTimingFunction};
   }
 

src/core/Form/DateInput/datePickerTexts.ts

@@ -1,6 +1,6 @@
 export const languages = ['fi', 'en', 'sv'] as const;
 
-export type Language = typeof languages[number];
+export type Language = (typeof languages)[number];
 
 export const defaultLanguage: Language = 'fi';
 

src/core/theme/reset/index.ts

@@ -14,11 +14,10 @@ const fontBase = css`
 `;
 
 export const font =
-  (theme: SuomifiTheme) => (typographyToken: TypographyProp) =>
-    css`
-      ${fontBase}
-      ${theme.typography[typographyToken]}
-    `;
+  (theme: SuomifiTheme) => (typographyToken: TypographyProp) => css`
+    ${fontBase}
+    ${theme.typography[typographyToken]}
+  `;
 
 export const input = (theme: SuomifiTheme) => css`
   ${element(theme)}