web: migrate everything to react@18

apps/theme-builder/package-lock.json

@@ -21,15 +21,14 @@
         "clipboard-polyfill": "^4.0.0",
         "file-saver": "^2.0.5",
         "katex": "^0.16.2",
-        "react": "17.0.2",
+        "react": "18.2.0",
-        "react-dom": "17.0.2"
+        "react-dom": "18.2.0"
       },
       "devDependencies": {
         "@babel/core": "^7.22.5",
         "@types/babel__core": "^7.20.1",
         "@types/file-saver": "^2.0.5",
-        "@types/react": "17.0.2",
+        "@types/react": "^18.2.17",
-        "@types/react-dom": "17.0.2",
         "@vitejs/plugin-react-swc": "^3.3.2",
         "autoprefixer": "^10.4.14",
         "buffer": "^6.0.3",
@@ -143,11 +142,11 @@
       },
       "devDependencies": {
         "@notesnook/core": "file:../core",
-        "@types/react": "17.0.2",
+        "@types/react": "^18.2.39",
-        "react": "17.0.2"
+        "react": "18.2.0"
       },
       "peerDependencies": {
-        "react": ">=17.0.2",
+        "react": ">=18",
         "timeago.js": "4.0.2"
       }
     },
@@ -331,74 +330,31 @@
       "name": "@notesnook/theme",
       "version": "1.2.0",
       "license": "GPL-3.0-or-later",
-      "dependencies": {
-        "@emotion/react": "11.11.1",
-        "@theme-ui/color": "^0.16.0",
-        "@theme-ui/components": "0.14.7",
-        "@theme-ui/core": "0.14.7",
-        "tinycolor2": "^1.4.2",
-        "zustand": "^4.3.8"
-      },
       "devDependencies": {
+        "@theme-ui/color": "^0.16.1",
+        "@theme-ui/components": "^0.16.1",
+        "@theme-ui/core": "^0.16.1",
         "@trpc/server": "^10.31.0",
-        "@types/react": "17.0.2",
+        "@types/react": "^18.2.39",
         "@types/tinycolor2": "^1.4.3",
         "isomorphic-fetch": "^3.0.0",
-        "react": "17.0.2",
+        "react": "18.2.0",
-        "ts-json-schema-generator": "^1.2.0"
+        "ts-json-schema-generator": "^1.2.0",
+        "zustand": "4.4.7"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "@emotion/react": ">=11",
-      }
+        "@theme-ui/color": ">=0.16.0",
-    },
+        "@theme-ui/components": ">=0.16.0",
-    "../../packages/theme/node_modules/@babel/code-frame": {
+        "@theme-ui/core": ">=0.16.0",
-      "version": "7.22.5",
+        "react": ">=18",
-      "license": "MIT",
+        "tinycolor2": ">=1",
-      "dependencies": {
+        "zustand": ">=4"
-        "@babel/highlight": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "../../packages/theme/node_modules/@babel/helper-module-imports": {
-      "version": "7.22.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "../../packages/theme/node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "../../packages/theme/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.5",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "../../packages/theme/node_modules/@babel/highlight": {
-      "version": "7.22.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
       }
     },
     "../../packages/theme/node_modules/@babel/runtime": {
       "version": "7.22.6",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
@@ -407,52 +363,9 @@
         "node": ">=6.9.0"
       }
     },
-    "../../packages/theme/node_modules/@babel/types": {
-      "version": "7.22.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "../../packages/theme/node_modules/@emotion/babel-plugin": {
-      "version": "11.11.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.1",
-        "@emotion/memoize": "^0.8.1",
-        "@emotion/serialize": "^1.1.2",
-        "babel-plugin-macros": "^3.1.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.2.0"
-      }
-    },
-    "../../packages/theme/node_modules/@emotion/cache": {
-      "version": "11.11.0",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.8.1",
-        "@emotion/sheet": "^1.2.2",
-        "@emotion/utils": "^1.2.1",
-        "@emotion/weak-memoize": "^0.3.1",
-        "stylis": "4.2.0"
-      }
-    },
-    "../../packages/theme/node_modules/@emotion/hash": {
-      "version": "0.9.1",
-      "license": "MIT"
-    },
     "../../packages/theme/node_modules/@emotion/is-prop-valid": {
       "version": "0.8.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "0.7.4"
@@ -460,70 +373,12 @@
     },
     "../../packages/theme/node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": {
       "version": "0.7.4",
-      "license": "MIT"
+      "dev": true,
-    },
-    "../../packages/theme/node_modules/@emotion/memoize": {
-      "version": "0.8.1",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/@emotion/react": {
-      "version": "11.11.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.11.0",
-        "@emotion/cache": "^11.11.0",
-        "@emotion/serialize": "^1.1.2",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
-        "@emotion/utils": "^1.2.1",
-        "@emotion/weak-memoize": "^0.3.1",
-        "hoist-non-react-statics": "^3.3.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "../../packages/theme/node_modules/@emotion/serialize": {
-      "version": "1.1.2",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/hash": "^0.9.1",
-        "@emotion/memoize": "^0.8.1",
-        "@emotion/unitless": "^0.8.1",
-        "@emotion/utils": "^1.2.1",
-        "csstype": "^3.0.2"
-      }
-    },
-    "../../packages/theme/node_modules/@emotion/sheet": {
-      "version": "1.2.2",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/@emotion/unitless": {
-      "version": "0.8.1",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "../../packages/theme/node_modules/@emotion/utils": {
-      "version": "1.2.1",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/@emotion/weak-memoize": {
-      "version": "0.3.1",
       "license": "MIT"
     },
     "../../packages/theme/node_modules/@styled-system/background": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -531,6 +386,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/border": {
       "version": "5.1.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -538,6 +394,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/color": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -545,6 +402,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/core": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "object-assign": "^4.1.1"
@@ -552,10 +410,12 @@
     },
     "../../packages/theme/node_modules/@styled-system/css": {
       "version": "5.1.5",
+      "dev": true,
       "license": "MIT"
     },
     "../../packages/theme/node_modules/@styled-system/flexbox": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -563,6 +423,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/grid": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -570,6 +431,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/layout": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -577,6 +439,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/position": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -584,6 +447,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/shadow": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -591,6 +455,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/should-forward-prop": {
       "version": "5.1.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@emotion/is-prop-valid": "^0.8.1",
@@ -600,10 +465,12 @@
     },
     "../../packages/theme/node_modules/@styled-system/should-forward-prop/node_modules/@emotion/memoize": {
       "version": "0.7.5",
+      "dev": true,
       "license": "MIT"
     },
     "../../packages/theme/node_modules/@styled-system/space": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -611,6 +478,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/typography": {
       "version": "5.1.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2"
@@ -618,6 +486,7 @@
     },
     "../../packages/theme/node_modules/@styled-system/variant": {
       "version": "5.1.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/core": "^5.1.2",
@@ -626,6 +495,7 @@
     },
     "../../packages/theme/node_modules/@theme-ui/color": {
       "version": "0.16.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@theme-ui/css": "^0.16.0",
@@ -634,6 +504,7 @@
     },
     "../../packages/theme/node_modules/@theme-ui/color/node_modules/@theme-ui/css": {
       "version": "0.16.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.10"
@@ -644,6 +515,7 @@
     },
     "../../packages/theme/node_modules/@theme-ui/components": {
       "version": "0.14.7",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/color": "^5.1.2",
@@ -659,6 +531,7 @@
     },
     "../../packages/theme/node_modules/@theme-ui/core": {
       "version": "0.14.7",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@theme-ui/css": "0.14.7",
@@ -672,6 +545,7 @@
     },
     "../../packages/theme/node_modules/@theme-ui/css": {
       "version": "0.14.7",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.10"
@@ -682,6 +556,7 @@
     },
     "../../packages/theme/node_modules/@theme-ui/parse-props": {
       "version": "0.14.7",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@theme-ui/css": "0.14.7"
@@ -704,10 +579,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "../../packages/theme/node_modules/@types/parse-json": {
-      "version": "4.0.0",
-      "license": "MIT"
-    },
     "../../packages/theme/node_modules/@types/prop-types": {
       "version": "15.7.5",
       "dev": true,
@@ -724,6 +595,7 @@
     },
     "../../packages/theme/node_modules/@types/styled-system": {
       "version": "5.1.16",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -734,71 +606,11 @@
       "dev": true,
       "license": "MIT"
     },
-    "../../packages/theme/node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "../../packages/theme/node_modules/babel-plugin-macros": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "cosmiconfig": "^7.0.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      }
-    },
     "../../packages/theme/node_modules/balanced-match": {
       "version": "1.0.2",
       "dev": true,
       "license": "MIT"
     },
-    "../../packages/theme/node_modules/callsites": {
-      "version": "3.1.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "../../packages/theme/node_modules/chalk": {
-      "version": "2.4.2",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "../../packages/theme/node_modules/chalk/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "../../packages/theme/node_modules/color-convert": {
-      "version": "1.9.3",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "../../packages/theme/node_modules/color-name": {
-      "version": "1.1.3",
-      "license": "MIT"
-    },
     "../../packages/theme/node_modules/commander": {
       "version": "9.5.0",
       "dev": true,
@@ -807,103 +619,24 @@
         "node": "^12.20.0 || >=14"
       }
     },
-    "../../packages/theme/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "../../packages/theme/node_modules/csstype": {
       "version": "3.1.1",
+      "dev": true,
       "license": "MIT"
     },
     "../../packages/theme/node_modules/deepmerge": {
       "version": "4.2.2",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "../../packages/theme/node_modules/error-ex": {
-      "version": "1.3.2",
-      "license": "MIT",
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "../../packages/theme/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "../../packages/theme/node_modules/find-root": {
-      "version": "1.1.0",
-      "license": "MIT"
-    },
     "../../packages/theme/node_modules/fs.realpath": {
       "version": "1.0.0",
       "dev": true,
       "license": "ISC"
     },
-    "../../packages/theme/node_modules/function-bind": {
-      "version": "1.1.1",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/has": {
-      "version": "1.0.3",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "../../packages/theme/node_modules/has-flag": {
-      "version": "3.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "../../packages/theme/node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "../../packages/theme/node_modules/import-fresh": {
-      "version": "3.3.0",
-      "license": "MIT",
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "../../packages/theme/node_modules/inflight": {
       "version": "1.0.6",
       "dev": true,
@@ -918,20 +651,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "../../packages/theme/node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/is-core-module": {
-      "version": "2.12.0",
-      "license": "MIT",
-      "dependencies": {
-        "has": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "../../packages/theme/node_modules/isomorphic-fetch": {
       "version": "3.0.0",
       "dev": true,
@@ -941,14 +660,6 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
-    "../../packages/theme/node_modules/js-tokens": {
-      "version": "4.0.0",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "license": "MIT"
-    },
     "../../packages/theme/node_modules/json5": {
       "version": "2.2.3",
       "dev": true,
@@ -960,10 +671,6 @@
         "node": ">=6"
       }
     },
-    "../../packages/theme/node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "license": "MIT"
-    },
     "../../packages/theme/node_modules/node-fetch": {
       "version": "2.6.12",
       "dev": true,
@@ -993,6 +700,7 @@
     },
     "../../packages/theme/node_modules/object-assign": {
       "version": "4.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -1006,45 +714,9 @@
         "wrappy": "1"
       }
     },
-    "../../packages/theme/node_modules/parent-module": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "../../packages/theme/node_modules/parse-json": {
-      "version": "5.2.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "../../packages/theme/node_modules/path-parse": {
-      "version": "1.0.7",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/path-type": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "../../packages/theme/node_modules/polished": {
       "version": "4.2.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.17.8"
@@ -1053,36 +725,11 @@
         "node": ">=10"
       }
     },
-    "../../packages/theme/node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
-    },
     "../../packages/theme/node_modules/regenerator-runtime": {
       "version": "0.13.11",
+      "dev": true,
       "license": "MIT"
     },
-    "../../packages/theme/node_modules/resolve": {
-      "version": "1.22.2",
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.11.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "../../packages/theme/node_modules/resolve-from": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "../../packages/theme/node_modules/safe-stable-stringify": {
       "version": "2.4.3",
       "dev": true,
@@ -1091,15 +738,9 @@
         "node": ">=10"
       }
     },
-    "../../packages/theme/node_modules/source-map": {
-      "version": "0.5.7",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "../../packages/theme/node_modules/styled-system": {
       "version": "5.1.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@styled-system/background": "^5.1.2",
@@ -1117,44 +758,6 @@
         "object-assign": "^4.1.1"
       }
     },
-    "../../packages/theme/node_modules/stylis": {
-      "version": "4.2.0",
-      "license": "MIT"
-    },
-    "../../packages/theme/node_modules/supports-color": {
-      "version": "5.5.0",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "../../packages/theme/node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "../../packages/theme/node_modules/tinycolor2": {
-      "version": "1.4.2",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "../../packages/theme/node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "../../packages/theme/node_modules/tr46": {
       "version": "0.0.3",
       "dev": true,
@@ -1231,6 +834,7 @@
     },
     "../../packages/theme/node_modules/use-sync-external-store": {
       "version": "1.2.0",
+      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -1260,15 +864,9 @@
       "dev": true,
       "license": "ISC"
     },
-    "../../packages/theme/node_modules/yaml": {
-      "version": "1.10.2",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "../../packages/theme/node_modules/zustand": {
       "version": "4.3.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "use-sync-external-store": "1.2.0"
@@ -1382,9 +980,9 @@
       "dependencies": {
         "@aws-sdk/util-base64-browser": "^3.208.0",
         "@brixtol/currency-symbols": "^1.1.1",
-        "@dnd-kit/core": "^6.0.5",
+        "@dnd-kit/core": "^6.1.0",
-        "@dnd-kit/modifiers": "^6.0.0",
+        "@dnd-kit/modifiers": "^7.0.0",
-        "@dnd-kit/sortable": "^7.0.1",
+        "@dnd-kit/sortable": "^8.0.0",
         "@emotion/react": "11.11.1",
         "@hazae41/foras": "^2.1.4",
         "@mdi/js": "^7.2.96",
@@ -1405,13 +1003,13 @@
         "@react-pdf-viewer/toolbar": "^3.12.0",
         "@tanstack/react-query": "^4.29.19",
         "@tanstack/react-virtual": "^3.0.0-beta.68",
-        "@theme-ui/color": "^0.14.7",
+        "@theme-ui/color": "^0.16.1",
-        "@theme-ui/components": "^0.14.7",
+        "@theme-ui/components": "^0.16.1",
-        "@theme-ui/core": "^0.14.7",
+        "@theme-ui/core": "^0.16.1",
         "@trpc/client": "10.38.3",
         "@trpc/react-query": "10.38.3",
         "@zip.js/zip.js": "^2.7.32",
-        "allotment": "^1.19.0",
+        "allotment": "^1.19.3",
         "axios": "^1.3.4",
         "clipboard-polyfill": "4.0.0",
         "comlink": "^4.3.1",
@@ -1421,31 +1019,33 @@
         "event-source-polyfill": "^1.0.25",
         "fflate": "^0.8.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^6.5.1",
+        "framer-motion": "^10.16.8",
         "hash-wasm": "^4.9.0",
         "hotkeys-js": "^3.8.3",
-        "immer": "^9.0.6",
+        "immer": "^10.0.3",
         "katex": "0.16.2",
         "kysely": "^0.26.3",
-        "mac-scrollbar": "^0.10.3",
+        "mac-scrollbar": "^0.13.5",
         "marked": "^4.1.0",
         "pdfjs-dist": "3.6.172",
         "phone": "^3.1.14",
         "platform": "^1.3.6",
         "qclone": "^1.2.0",
-        "react-complex-tree": "^2.2.3",
+        "react": "18.2.0",
-        "react-dropzone": "^11.4.2",
+        "react-complex-tree": "^2.2.4",
-        "react-hot-toast": "^2.2.0",
+        "react-dom": "18.2.0",
-        "react-loading-skeleton": "^3.1.0",
+        "react-dropzone": "^14.2.3",
-        "react-modal": "3.13.1",
+        "react-hot-toast": "^2.4.1",
-        "react-qrcode-logo": "^2.2.1",
+        "react-loading-skeleton": "^3.3.1",
-        "react-scroll-sync": "^0.9.0",
+        "react-modal": "3.16.1",
+        "react-qrcode-logo": "^2.9.0",
+        "react-scroll-sync": "^0.11.2",
         "timeago.js": "4.0.2",
         "tinycolor2": "^1.6.0",
         "w3c-keyname": "^2.2.6",
         "web-streams-polyfill": "^3.1.1",
-        "wouter": "2.7.3",
+        "wouter": "2.12.1",
-        "zustand": "4.3.9"
+        "zustand": "4.4.7"
       },
       "devDependencies": {
         "@babel/core": "^7.22.5",
@@ -1458,9 +1058,9 @@
         "@types/marked": "^4.0.7",
         "@types/node-fetch": "^2.5.10",
         "@types/platform": "^1.3.4",
-        "@types/react": "17.0.2",
+        "@types/react": "^18.2.39",
-        "@types/react-dom": "17.0.2",
+        "@types/react-dom": "^18.2.17",
-        "@types/react-modal": "3.13.1",
+        "@types/react-modal": "3.16.3",
         "@types/tinycolor2": "^1.4.3",
         "@types/wicg-file-system-access": "^2020.9.6",
         "@vitejs/plugin-react-swc": "3.3.2",
@@ -1475,8 +1075,6 @@
         "ip": "^1.1.8",
         "lorem-ipsum": "^2.0.4",
         "otplib": "^12.0.1",
-        "react": "17.0.2",
-        "react-dom": "17.0.2",
         "rollup": "^3.29.4",
         "rollup-plugin-visualizer": "^5.9.2",
         "swc-plugin-react-remove-properties": "^0.1.4",
@@ -2489,21 +2087,21 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "17.0.2",
+      "version": "18.2.39",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
+      "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
+        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
+    "node_modules/@types/scheduler": {
-      "version": "17.0.2",
+      "version": "0.16.8",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "license": "MIT",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dependencies": {
+      "dev": true
-        "@types/react": "*"
-      }
     },
     "node_modules/@types/styled-system": {
       "version": "5.1.16",
@@ -4060,26 +3658,26 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
+        "scheduler": "^0.23.0"
-        "scheduler": "^0.20.2"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-is": {
@@ -4175,11 +3773,11 @@
       "license": "MIT"
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
+      "version": "0.23.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       }
     },
     "node_modules/semver": {

apps/theme-builder/package.json

@@ -20,15 +20,15 @@
     "clipboard-polyfill": "^4.0.0",
     "file-saver": "^2.0.5",
     "katex": "^0.16.2",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-dom": "17.0.2"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
     "@types/babel__core": "^7.20.1",
     "@types/file-saver": "^2.0.5",
-    "@types/react": "17.0.2",
+    "@types/react": "^18.2.39",
-    "@types/react-dom": "17.0.2",
+    "@types/react": "^18.2.17",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "buffer": "^6.0.3",
@@ -44,11 +44,6 @@
     "vitest": "^0.32.0"
   },
   "overrides": {
-    "react@>17": "17.0.2",
-    "react-dom@>17": "17.0.2",
-    "@types/react@>17": "17.0.2",
-    "@types/react-dom@>17": "17.0.2",
-    "@emotion/react@>11": "11.10.5",
     "@theme-ui/components@>0": "0.14.7",
     "@theme-ui/core@>0": "0.14.7"
   },

apps/vericrypt/package-lock.json

@@ -17,14 +17,13 @@
         "buffer": "^6.0.3",
         "clipboard-polyfill": "^4.0.0",
         "platform": "^1.3.6",
-        "react": "17.0.2",
+        "react": "18.2.0",
-        "react-dom": "17.0.2",
+        "react-dom": "18.2.0",
         "react-icons": "^4.10.1"
       },
       "devDependencies": {
         "@types/platform": "^1.3.4",
-        "@types/react": "17.0.2",
+        "@types/react": "^18.2.17",
-        "@types/react-dom": "17.0.2",
         "@vitejs/plugin-react-swc": "^3.3.2",
         "autoprefixer": "^10.4.14",
         "vite": "^4.3.9",
@@ -1550,23 +1549,21 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "17.0.2",
+      "version": "18.2.39",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
-      "integrity": "sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==",
+      "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
+        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
+    "node_modules/@types/scheduler": {
-      "version": "17.0.2",
+      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true,
+      "dev": true
-      "dependencies": {
-        "@types/react": "*"
-      }
     },
     "node_modules/@types/styled-system": {
       "version": "5.1.16",
@@ -2366,28 +2363,26 @@
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
     "node_modules/react": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
+        "scheduler": "^0.23.0"
-        "scheduler": "^0.20.2"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-icons": {
@@ -2454,12 +2449,11 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
+      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       }
     },
     "node_modules/semver": {

apps/vericrypt/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "devDependencies": {
     "@types/platform": "^1.3.4",
-    "@types/react": "17.0.2",
+    "@types/react": "^18.2.39",
-    "@types/react-dom": "17.0.2",
+    "@types/react": "^18.2.17",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "vite": "^4.3.9",
@@ -22,8 +22,8 @@
     "buffer": "^6.0.3",
     "clipboard-polyfill": "^4.0.0",
     "platform": "^1.3.6",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-icons": "^4.10.1"
   },
   "scripts": {

apps/web/package.json

@@ -10,9 +10,9 @@
   "dependencies": {
     "@aws-sdk/util-base64-browser": "^3.208.0",
     "@brixtol/currency-symbols": "^1.1.1",
-    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^6.0.0",
+    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/sortable": "^8.0.0",
     "@emotion/react": "11.11.1",
     "@hazae41/foras": "^2.1.4",
     "@mdi/js": "^7.2.96",
@@ -33,13 +33,13 @@
     "@react-pdf-viewer/toolbar": "^3.12.0",
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-virtual": "^3.0.0-beta.68",
-    "@theme-ui/color": "^0.14.7",
+    "@theme-ui/color": "^0.16.1",
-    "@theme-ui/components": "^0.14.7",
+    "@theme-ui/components": "^0.16.1",
-    "@theme-ui/core": "^0.14.7",
+    "@theme-ui/core": "^0.16.1",
     "@trpc/client": "10.38.3",
     "@trpc/react-query": "10.38.3",
     "@zip.js/zip.js": "^2.7.32",
-    "allotment": "^1.19.0",
+    "allotment": "^1.19.3",
     "axios": "^1.3.4",
     "clipboard-polyfill": "4.0.0",
     "comlink": "^4.3.1",
@@ -49,31 +49,33 @@
     "event-source-polyfill": "^1.0.25",
     "fflate": "^0.8.0",
     "file-saver": "^2.0.5",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^10.16.8",
     "hash-wasm": "^4.9.0",
     "hotkeys-js": "^3.8.3",
-    "immer": "^9.0.6",
+    "immer": "^10.0.3",
     "katex": "0.16.2",
     "kysely": "^0.26.3",
-    "mac-scrollbar": "^0.10.3",
+    "mac-scrollbar": "^0.13.5",
     "marked": "^4.1.0",
     "pdfjs-dist": "3.6.172",
     "phone": "^3.1.14",
     "platform": "^1.3.6",
     "qclone": "^1.2.0",
-    "react-complex-tree": "^2.2.3",
+    "react-complex-tree": "^2.2.4",
-    "react-dropzone": "^11.4.2",
+    "react-dropzone": "^14.2.3",
-    "react-hot-toast": "^2.2.0",
+    "react-hot-toast": "^2.4.1",
-    "react-loading-skeleton": "^3.1.0",
+    "react-loading-skeleton": "^3.3.1",
-    "react-modal": "3.13.1",
+    "react-modal": "3.16.1",
-    "react-qrcode-logo": "^2.2.1",
+    "react-qrcode-logo": "^2.9.0",
-    "react-scroll-sync": "^0.9.0",
+    "react-scroll-sync": "^0.11.2",
     "timeago.js": "4.0.2",
     "tinycolor2": "^1.6.0",
     "w3c-keyname": "^2.2.6",
     "web-streams-polyfill": "^3.1.1",
-    "wouter": "2.7.3",
+    "wouter": "2.12.1",
-    "zustand": "4.3.9"
+    "zustand": "4.4.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
@@ -86,9 +88,9 @@
     "@types/marked": "^4.0.7",
     "@types/node-fetch": "^2.5.10",
     "@types/platform": "^1.3.4",
-    "@types/react": "17.0.2",
+    "@types/react": "^18.2.39",
-    "@types/react-dom": "17.0.2",
+    "@types/react-dom": "^18.2.17",
-    "@types/react-modal": "3.13.1",
+    "@types/react-modal": "3.16.3",
     "@types/tinycolor2": "^1.4.3",
     "@types/wicg-file-system-access": "^2020.9.6",
     "@vitejs/plugin-react-swc": "3.3.2",
@@ -103,8 +105,6 @@
     "ip": "^1.1.8",
     "lorem-ipsum": "^2.0.4",
     "otplib": "^12.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
     "rollup": "^3.29.4",
     "rollup-plugin-visualizer": "^5.9.2",
     "swc-plugin-react-remove-properties": "^0.1.4",
@@ -119,15 +119,6 @@
     "workbox-routing": "^7.0.0",
     "workbox-strategies": "^7.0.0"
   },
-  "overrides": {
-    "react@>17": "17.0.2",
-    "react-dom@>17": "17.0.2",
-    "@types/react@>17": "17.0.2",
-    "@types/react-dom@>17": "17.0.2",
-    "@emotion/react@>11": "11.10.5",
-    "@theme-ui/components@>0": "0.14.7",
-    "@theme-ui/core@>0": "0.14.7"
-  },
   "scripts": {
     "start": "cross-env PLATFORM=web vite",
     "start:desktop": "cross-env PLATFORM=desktop vite",

apps/web/src/common/dialog-controller.tsx

@@ -17,7 +17,6 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import ReactDOM from "react-dom";
 import { Dialogs } from "../dialogs";
 import { store as notebookStore } from "../stores/notebook-store";
 import { store as tagStore } from "../stores/tag-store";
@@ -39,6 +38,7 @@ import { downloadUpdate } from "../utils/updater";
 import { ThemeMetadata } from "@notesnook/themes-server";
 import { Reminder } from "@notesnook/core";
 import { AuthenticatorType } from "@notesnook/core/dist/api/user-manager";
+import { createRoot } from "react-dom/client";
 
 type DialogTypes = typeof Dialogs;
 type DialogIds = keyof DialogTypes;
@@ -58,21 +58,21 @@ function showDialog<TId extends DialogIds, TReturnType>(
 
     const container = document.createElement("div");
     container.id = id;
+    const root = createRoot(container);
 
     const perform = (result: TReturnType) => {
       openDialogs[id] = false;
-      ReactDOM.unmountComponentAtNode(container);
+      root.unmount();
       container.remove();
       resolve(result);
     };
     const PropDialog = () => render(Dialogs[id], perform);
-    ReactDOM.render(
+    root.render(
       <Suspense fallback={<div />}>
         <PropDialog />
-      </Suspense>,
+      </Suspense>
-      container,
-      () => (openDialogs[id] = true)
     );
+    openDialogs[id] = true;
   });
 }
 

apps/web/src/components/theme-provider/index.tsx

@@ -34,6 +34,7 @@ export function BaseThemeProvider(
       injectCssVars?: boolean;
       addGlobalStyles?: boolean;
       scope?: keyof ThemeScopes;
+      onRender?: () => void;
     } & Omit<BoxProps, "variant">
   >
 ) {
@@ -41,6 +42,7 @@ export function BaseThemeProvider(
     children,
     addGlobalStyles = false,
     scope = "base",
+    onRender,
     ...restProps
   } = props;
 
@@ -71,6 +73,10 @@ export function BaseThemeProvider(
     }
   }, [theme]);
 
+  useEffect(() => {
+    onRender?.();
+  }, [onRender]);
+
   return (
     <>
       {addGlobalStyles && (

apps/web/src/hooks/use-status.ts

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { create } from "zustand";
-import produce from "immer";
+import { produce } from "immer";
 import { Icon } from "../components/icons";
 
 type Status = {

apps/web/src/index.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Routes, init } from "./bootstrap";
 import { logger } from "./utils/logger";
 import { loadDatabase } from "./hooks/use-database";
@@ -35,17 +35,18 @@ async function renderApp() {
   if (IS_DESKTOP_APP) await loadDatabase("db");
 
   const { default: Component } = await component();
-  logger.measure("app render");
+  const rootElement = document.getElementById("root");
-  render(
+  if (!rootElement) return;
-    <BaseThemeProvider addGlobalStyles sx={{ height: "100%" }}>
-      <Component route={props?.route || "login:email"} />
-    </BaseThemeProvider>,
-    document.getElementById("root"),
-    () => {
-      logger.measure("app render");
 
-      document.getElementById("splash")?.remove();
+  const root = createRoot(rootElement);
-    }
+  root.render(
+    <BaseThemeProvider
+      onRender={() => document.getElementById("splash")?.remove()}
+      addGlobalStyles
+      sx={{ height: "100%" }}
+    >
+      <Component route={props?.route || "login:email"} />
+    </BaseThemeProvider>
   );
 }
 

extensions/web-clipper/package.json

@@ -5,25 +5,23 @@
   "main": "./dist/index.js",
   "dependencies": {
     "@emotion/react": "11.11.1",
-    "@hot-loader/react-dom": "^17.0.2",
     "@mdi/js": "^6.9.96",
     "@mdi/react": "^1.6.0",
     "@notesnook/clipper": "file:../../packages/clipper",
     "@notesnook/theme": "file:../../packages/theme",
-    "@theme-ui/components": "^0.14.7",
+    "@theme-ui/components": "^0.16.1",
-    "@theme-ui/core": "^0.14.7",
+    "@theme-ui/core": "^0.16.1",
     "comlink": "^4.3.1",
     "hyperapp": "^2.0.22",
-    "mac-scrollbar": "0.10.3",
+    "mac-scrollbar": "0.13.5",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
-    "react-frame-component": "^5.2.1",
+    "react-frame-component": "^5.2.6",
-    "react-hot-loader": "^4.13.0",
+    "react-modal": "3.16.1",
-    "react-modal": "3.13.1",
     "react-scripts": "5.0.0",
     "svg-react-loader": "^0.4.6",
     "webextension-polyfill-ts": "^0.26.0",
-    "zustand": "4.3.9"
+    "zustand": "4.4.7"
   },
   "scripts": {
     "build:firefox": "cross-env MANIFEST_VERSION=2 node build-utils/build.js",
@@ -54,9 +52,9 @@
     "@types/inline-css": "^3.0.1",
     "@types/jest": "^26.0.14",
     "@types/postlight__mercury-parser": "^2.2.4",
-    "@types/react": "17.0.2",
+    "@types/react": "^18.2.39",
-    "@types/react-dom": "17.0.2",
+    "@types/react-dom": "^18.2.17",
-    "@types/react-modal": "3.13.1",
+    "@types/react-modal": "^3.16.3 ",
     "@types/sanitize-html": "^2.6.2",
     "@types/webextension-polyfill": "^0.8.3",
     "babel-eslint": "^10.1.0",
@@ -77,7 +75,7 @@
     "fs-extra": "^10.0.0",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
-    "node-sass": "^8.0.0",
+    "node-sass": "^9.0.0",
     "prettier": "^2.5.1",
     "sass-loader": "^13.2.0",
     "source-map-loader": "^3.0.1",

extensions/web-clipper/src/components/filtered-list/index.tsx

@@ -56,7 +56,7 @@ export function FilteredList<T>({
   }, [refresh]);
 
   const _filter = useCallback(
-    (query) => {
+    (query: string) => {
       if (!filter) return;
       setItems(() => {
         const items = getAll();
@@ -71,7 +71,7 @@ export function FilteredList<T>({
   );
 
   const _createNewItem = useCallback(
-    (title) => {
+    (title: string) => {
       onCreateNewItem?.(title);
       refresh();
       setQuery(null);

extensions/web-clipper/webpack.config.js

@@ -30,7 +30,6 @@ const ASSET_PATH = process.env.ASSET_PATH || "./public";
 const MANIFEST_VERSION = process.env.MANIFEST_VERSION || "2";
 
 var alias = {
-  "react-dom": "@hot-loader/react-dom",
   react: path.resolve(path.join(__dirname, "node_modules", "react")),
   "@emotion/react": path.resolve(
     path.join(__dirname, "node_modules", "@emotion", "react")

packages/common/package-lock.json

@@ -14,11 +14,11 @@
       },
       "devDependencies": {
         "@notesnook/core": "file:../core",
-        "@types/react": "17.0.2",
+        "@types/react": "^18.2.39",
-        "react": "17.0.2"
+        "react": "18.2.0"
       },
       "peerDependencies": {
-        "react": ">=17.0.2",
+        "react": ">=18",
         "timeago.js": "4.0.2"
       }
     },
@@ -92,15 +92,22 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "17.0.2",
+      "version": "18.2.39",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
-      "integrity": "sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==",
+      "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
+        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "dev": true
+    },
     "node_modules/csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -125,23 +132,13 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dev": true,
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -214,15 +211,22 @@
       "dev": true
     },
     "@types/react": {
-      "version": "17.0.2",
+      "version": "18.2.39",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
-      "integrity": "sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==",
+      "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
+        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
+      "dev": true
+    },
     "csstype": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
@@ -244,20 +248,13 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
-    },
     "react": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dev": true,
       "requires": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       }
     },
     "timeago.js": {

packages/common/package.json

@@ -30,12 +30,12 @@
   },
   "devDependencies": {
     "@notesnook/core": "file:../core",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "@types/react": "17.0.2"
+    "@types/react": "^18.2.39"
   },
   "peerDependencies": {
     "timeago.js": "4.0.2",
-    "react": ">=17.0.2"
+    "react": ">=18"
   },
   "dependencies": {
     "timeago.js": "4.0.2",

packages/editor-mobile/package.json

@@ -9,27 +9,18 @@
     "@notesnook/editor": "file:../editor",
     "@notesnook/theme": "file:../theme",
     "buffer": "^6.0.3",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^10.16.8",
     "mdi-react": "9.1.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "zustand": "^3.6.8"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@playwright/test": "^1.37.1",
-    "@testing-library/jest-dom": "^5.16.0",
+    "@types/react": "^18.2.39",
-    "@testing-library/react": "^11.2.7",
+    "@types/react-dom": "^18.2.17",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/ip": "^1.1.0",
-    "@types/jest": "^27.0.3",
-    "@types/node": "^16.11.11",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
     "env-cmd": "^10.1.0",
-    "ip": "^1.1.8",
+    "react-scripts": "^5.0.1"
-    "react-error-overlay": "6.0.9",
-    "react-scripts": "^5.0.1",
-    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "env-cmd -e all react-scripts start",

packages/editor-mobile/src/components/statusbar.tsx

@@ -41,8 +41,8 @@ function StatusBar({ container }: { container: RefObject<HTMLDivElement> }) {
   });
   globalThis.statusBar = statusBar;
 
-  const onScroll = React.useCallback((event) => {
+  const onScroll = React.useCallback((event: Event) => {
-    const currentOffset = event.target.scrollTop;
+    const currentOffset = (event.target as HTMLElement)?.scrollTop;
     if (currentOffset < 200) {
       if (stickyRef.current) {
         stickyRef.current = false;

packages/editor-mobile/src/hooks/useEditorController.ts

@@ -249,7 +249,7 @@ export function useEditorController(update: () => void): EditorController {
     };
   }, [onMessage]);
 
-  const openFilePicker = useCallback((type) => {
+  const openFilePicker = useCallback((type: "image" | "file" | "camera") => {
     post(EventTypes.filepicker, type);
   }, []);
 

packages/editor-mobile/src/index.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 global.Buffer = require("buffer").Buffer;
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import "@notesnook/editor/styles/katex.min.css";
@@ -26,9 +26,12 @@ import "@notesnook/editor/styles/fonts.mobile.css";
 import "@notesnook/editor/styles/katex-fonts.mobile.css";
 import "@notesnook/editor/styles/styles.css";
 
-ReactDOM.render(
+const rootElement = document.getElementById("root");
-  <React.StrictMode>
+if (rootElement) {
-    <App />
+  const root = createRoot(rootElement);
-  </React.StrictMode>,
+  root.render(
-  document.getElementById("root")
+    <React.StrictMode>
-);
+      <App />
+    </React.StrictMode>
+  );
+}

packages/editor/package.json

@@ -5,13 +5,10 @@
   "types": "dist/index.d.ts",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@emotion/react": "11.11.1",
     "@notesnook/core": "file:../core",
     "@notesnook/theme": "file:../theme",
     "@notesnook/ui": "file:../ui",
     "@social-embed/lib": "^0.0.2-next.1",
-    "@theme-ui/components": ">=0.14.0",
-    "@theme-ui/core": ">=0.14.0",
     "@tiptap/core": "2.1.12",
     "@tiptap/extension-character-count": "2.1.12",
     "@tiptap/extension-color": "2.1.12",
@@ -43,43 +40,50 @@
     "prism-themes": "^1.9.0",
     "prosemirror-codemark": "^0.4.2",
     "prosemirror-view": "1.32.2",
-    "re-resizable": "^6.9.9",
+    "re-resizable": "^6.9.11",
-    "react-colorful": "^5.5.1",
+    "react-colorful": "^5.6.1",
-    "react-modal": "3.13.1",
     "redent": "^4.0.0",
-    "refractor": "^4.8.0",
+    "refractor": "^4.8.1",
     "strip-indent": "^4.0.0",
-    "tinycolor2": "^1.4.2",
+    "unfurl.js": "^6.3.2"
-    "unfurl.js": "^5.7.0",
-    "zustand": "4.3.9"
   },
   "devDependencies": {
+    "react-modal": "3.16.1",
+    "tinycolor2": "^1.6.0",
+    "zustand": "4.4.7",
     "@mdi/js": "^7.2.96",
     "@mdi/react": "^1.6.1",
     "@types/katex": "^0.14.0",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "17.0.2",
+    "@types/react": "^18.2.39",
     "@types/react-color": "^3.0.6",
-    "@types/react-dom": "17.0.2",
+    "@types/react-dom": "^18.2.17",
-    "@types/react-modal": "3.13.1",
+    "@types/react-modal": "^3.16.3 ",
     "@types/tinycolor2": "^1.4.3",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^10.16.8",
     "happy-dom": "^8.9.0",
     "isomorphic-fetch": "^3.0.0",
     "prosemirror-test-builder": "^1.1.0",
-    "react": "17.0.2",
+    "@theme-ui/components": "^0.16.1",
-    "react-dom": "17.0.2",
+    "@theme-ui/core": "^0.16.1",
+    "@emotion/react": "11.11.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "vitest": "^0.29.2",
     "web-vitals": "^2.1.4"
   },
   "peerDependencies": {
-    "@emotion/react": "11.11.1",
+    "framer-motion": ">=10",
+    "@emotion/react": ">=11",
     "@mdi/js": ">=7.2.96",
     "@mdi/react": ">=1.6.1",
-    "@theme-ui/components": ">=0.14.0",
+    "@theme-ui/components": ">=0.16.0",
-    "@theme-ui/core": ">=0.14.0",
+    "@theme-ui/core": ">=0.16.0",
-    "react": ">=17.0.0",
+    "tinycolor2": ">=1.6",
-    "react-dom": ">=17.0.0"
+    "zustand": ">=4",
+    "react-modal": ">=3",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "scripts": {
     "test": "vitest run",

packages/editor/src/components/popup-presenter/index.tsx

@@ -24,8 +24,7 @@ import {
   PopupPresenterProps,
   PopupPresenter
 } from "@notesnook/ui";
-import ReactDOM from "react-dom";
+import { getPopupRoot, getToolbarElement } from "../../toolbar/utils/dom";
-import { getPopupContainer, getToolbarElement } from "../../toolbar/utils/dom";
 import {
   useIsMobile,
   useToolbarStore
@@ -117,10 +116,10 @@ export function showPopup(options: ShowPopupOptions) {
   const { popup, ...props } = options;
 
   function hide() {
-    ReactDOM.unmountComponentAtNode(getPopupContainer());
+    getPopupRoot().unmount();
   }
 
-  ReactDOM.render(
+  getPopupRoot().render(
     <ResponsivePresenter
       isOpen
       position={{
@@ -139,8 +138,7 @@ export function showPopup(options: ShowPopupOptions) {
       }}
     >
       {popup(hide)}
-    </ResponsivePresenter>,
+    </ResponsivePresenter>
-    getPopupContainer()
   );
 
   return hide;

packages/editor/src/toolbar/utils/dom.ts

@@ -17,6 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { createRoot, Root } from "react-dom/client";
+
 export function getToolbarElement() {
   return (
     (document.querySelector(".editor-toolbar") as HTMLElement) || undefined
@@ -38,3 +40,9 @@ export function getEditorDOM() {
   return (document.querySelector(".ProseMirror") ||
     getEditorContainer()) as HTMLElement; // ProseMirror
 }
+
+let popupRoot: Root | undefined = undefined;
+export function getPopupRoot() {
+  if (!popupRoot) popupRoot = createRoot(getPopupContainer());
+  return popupRoot;
+}

packages/theme/package.json

@@ -7,24 +7,26 @@
     "type": "git",
     "url": "git://github.com/streetwriters/themeprovider.git"
   },
-  "dependencies": {
-    "@emotion/react": "11.11.1",
-    "@theme-ui/color": "^0.16.0",
-    "@theme-ui/components": "0.14.7",
-    "@theme-ui/core": "0.14.7",
-    "tinycolor2": "^1.4.2",
-    "zustand": "^4.3.8"
-  },
   "devDependencies": {
+    "zustand": "4.4.7",
+    "@theme-ui/color": "^0.16.1",
+    "@theme-ui/components": "^0.16.1",
+    "@theme-ui/core": "^0.16.1",
     "@trpc/server": "^10.31.0",
-    "@types/react": "17.0.2",
+    "@types/react": "^18.2.39",
     "@types/tinycolor2": "^1.4.3",
     "isomorphic-fetch": "^3.0.0",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "ts-json-schema-generator": "^1.2.0"
   },
   "peerDependencies": {
-    "react": "17.0.2"
+    "@emotion/react": ">=11",
+    "tinycolor2": ">=1",
+    "zustand": ">=4",
+    "@theme-ui/color": ">=0.16.0",
+    "@theme-ui/components": ">=0.16.0",
+    "@theme-ui/core": ">=0.16.0",
+    "react": ">=18"
   },
   "scripts": {
     "prebuild": "node ./scripts/prebuild.mjs",

packages/ui/package.json

@@ -8,31 +8,34 @@
     "url": "git://github.com/streetwriters/notesnook.git"
   },
   "dependencies": {
-    "mac-scrollbar": "^0.10.3",
+    "@notesnook/theme": "file:../theme"
-    "@mdi/js": "^7.2.96",
-    "@mdi/react": "^1.6.1",
-    "@notesnook/theme": "file:../theme",
-    "@theme-ui/components": "^0.14.7",
-    "@theme-ui/core": "^0.14.7",
-    "framer-motion": "^6.5.1",
-    "react-modal": "^3.15.1",
-    "@emotion/react": "11.11.1"
   },
   "devDependencies": {
-    "@types/react": "17.0.2",
+    "mac-scrollbar": "^0.10.3",
-    "@types/react-dom": "17.0.2",
+    "framer-motion": "^10.6.8",
-    "@types/react-modal": "^3.15.1",
+    "@mdi/js": "^7.2.96",
-    "react": "17.0.2",
+    "@mdi/react": "^1.6.1",
-    "react-dom": "17.0.2"
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "@types/react-modal": "3.16.3",
+    "@theme-ui/components": "^0.16.1",
+    "@theme-ui/core": "^0.16.1",
+    "@emotion/react": "11.11.1",
+    "react-modal": "3.16.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "peerDependencies": {
-    "@mdi/js": ">=7.2.96",
+    "mac-scrollbar": ">=0.10",
-    "@mdi/react": ">=1.6.1",
+    "framer-motion": ">=10",
-    "@emotion/react": "11.11.1",
+    "react-modal": ">=3",
-    "@theme-ui/components": ">=0.14.0",
+    "@mdi/js": ">=7",
-    "@theme-ui/core": ">=0.14.0",
+    "@mdi/react": ">=1",
-    "react": ">=17.0.0",
+    "@emotion/react": ">=11",
-    "react-dom": ">=17.0.0"
+    "@theme-ui/components": ">=0.16",
+    "@theme-ui/core": ">=0.16",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "scripts": {
     "build": "tsc",

servers/themes/package-lock.json

@@ -20,7 +20,7 @@
         "@notesnook/theme": "file:../../packages/theme",
         "@types/cors": "^2.8.13",
         "@vitejs/plugin-react": "^4.0.3",
-        "react": "17.0.2",
+        "react": "18.2.0",
         "vite-node": "^0.33.0"
       }
     },
@@ -29,24 +29,26 @@
       "version": "1.2.0",
       "dev": true,
       "license": "GPL-3.0-or-later",
-      "dependencies": {
-        "@emotion/react": "11.11.1",
-        "@theme-ui/color": "^0.16.0",
-        "@theme-ui/components": "0.14.7",
-        "@theme-ui/core": "0.14.7",
-        "tinycolor2": "^1.4.2",
-        "zustand": "^4.3.8"
-      },
       "devDependencies": {
+        "@theme-ui/color": "^0.16.1",
+        "@theme-ui/components": "^0.16.1",
+        "@theme-ui/core": "^0.16.1",
         "@trpc/server": "^10.31.0",
-        "@types/react": "17.0.2",
+        "@types/react": "^18.2.39",
         "@types/tinycolor2": "^1.4.3",
         "isomorphic-fetch": "^3.0.0",
-        "react": "17.0.2",
+        "react": "18.2.0",
-        "ts-json-schema-generator": "^1.2.0"
+        "ts-json-schema-generator": "^1.2.0",
+        "zustand": "4.4.7"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "@emotion/react": ">=11",
+        "@theme-ui/color": ">=0.16.0",
+        "@theme-ui/components": ">=0.16.0",
+        "@theme-ui/core": ">=0.16.0",
+        "react": ">=18",
+        "tinycolor2": ">=1",
+        "zustand": ">=4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1439,13 +1441,12 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dev": true,
       "dependencies": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -2141,18 +2142,16 @@
     "@notesnook/theme": {
       "version": "file:../../packages/theme",
       "requires": {
-        "@emotion/react": "11.11.1",
+        "@theme-ui/color": "^0.16.1",
-        "@theme-ui/color": "^0.16.0",
+        "@theme-ui/components": "^0.16.1",
-        "@theme-ui/components": "0.14.7",
+        "@theme-ui/core": "^0.16.1",
-        "@theme-ui/core": "0.14.7",
         "@trpc/server": "^10.31.0",
-        "@types/react": "17.0.2",
+        "@types/react": "^18.2.39",
         "@types/tinycolor2": "^1.4.3",
         "isomorphic-fetch": "^3.0.0",
-        "react": "17.0.2",
+        "react": "18.2.0",
-        "tinycolor2": "^1.4.2",
         "ts-json-schema-generator": "^1.2.0",
-        "zustand": "^4.3.8"
+        "zustand": "4.4.7"
       }
     },
     "@orama/orama": {
@@ -2585,13 +2584,12 @@
       }
     },
     "react": {
-      "version": "17.0.2",
+      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dev": true,
       "requires": {
-        "loose-envify": "^1.1.0",
+        "loose-envify": "^1.1.0"
-        "object-assign": "^4.1.1"
       }
     },
     "react-refresh": {

servers/themes/package.json

@@ -21,7 +21,7 @@
     "@notesnook/theme": "file:../../packages/theme",
     "@types/cors": "^2.8.13",
     "@vitejs/plugin-react": "^4.0.3",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "vite-node": "^0.33.0"
   }
 }