Upgrade dependencies

package.json

@@ -3,34 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@monaco-editor/react": "^4.5.1",
+    "@monaco-editor/react": "^4.6.0",
-    "copy-to-clipboard": "^3.3.1",
+    "copy-to-clipboard": "^3.3.3",
-    "history": "^5.0.0",
+    "history": "^5.3.0",
     "local-storage": "^2.0.0",
     "monaco-themes": "^0.4.4",
-    "pako": "^2.0.3",
+    "pako": "^2.1.0",
     "react": "^18.2.0",
-    "react-device-detect": "^2.1.2",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "styled-components": "^5.2.1",
+    "styled-components": "^6.1.1",
-    "typescript": "^4.8.4",
+    "typescript": "^4.4.2",
     "whatwg-mimetype": "^3.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^14.2.0",
+    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^29.2.2",
+    "@types/jest": "^27.0.1",
     "@types/node": "^18.11.9",
-    "@types/pako": "^2.0.0",
+    "@types/pako": "^2.0.3",
-    "@types/react": "^18.0.25",
+    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.0.8",
+    "@types/react-dom": "^18.2.0",
-    "@types/styled-components": "^5.1.26",
+    "@types/whatwg-mimetype": "^3.0.2",
-    "@types/whatwg-mimetype": "^3.0.0",
+    "monaco-editor": "^0.44.0",
-    "monaco-editor": "^0.34.1",
+    "prettier": "^3.1.0",
-    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^3.2.4"
-    "prettier-plugin-organize-imports": "^3.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/EditorGlobalStyle.tsx

@@ -1,7 +1,6 @@
-import { createGlobalStyle, ThemeProps } from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
-import { Theme } from '../style/themes';
 
-const EditorGlobalStyle = createGlobalStyle<ThemeProps<Theme>>`
+const EditorGlobalStyle = createGlobalStyle`
   html, body {
     color-scheme: ${props => props.theme.lightOrDark};
     scrollbar-color: ${props => props.theme.lightOrDark};

src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import './style/base.css';
+import type {} from './style/styled';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement

src/style/styled.d.ts

@@ -0,0 +1,6 @@
+import 'styled-components';
+import { Theme } from './themes';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}