Update example to Chakra v2 + react 18

Author: zoontek

website/package.json

@@ -7,23 +7,23 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^1.1.7",
-    "@chakra-ui/react": "^1.8.8",
-    "@chakra-ui/system": "^1.12.1",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
+    "@chakra-ui/icons": "^2.0.19",
+    "@chakra-ui/react": "^2.6.0",
+    "@chakra-ui/system": "^2.5.6",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "card-validator": "^8.1.1",
-    "framer-motion": "^6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "framer-motion": "^10.12.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-ux-form": "file:../",
     "rifm": "^0.12.1",
     "validator": "^13.9.0",
     "wouter": "^2.10.1"
   },
   "devDependencies": {
-    "@types/react": "^17.0.58",
-    "@types/react-dom": "^17.0.20",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
     "@types/validator": "^13.7.15",
     "@vitejs/plugin-react-swc": "^3.3.0",
     "typescript": "^5.0.4",

website/src/index.tsx

@@ -1,11 +1,16 @@
 import { ChakraProvider } from "@chakra-ui/react";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { App } from "./App";
 
-ReactDOM.render(
-  <ChakraProvider>
-    <App />
-  </ChakraProvider>,
-  document.getElementById("root"),
-);
+const container = document.getElementById("root");
+
+if (container != null) {
+  const root = createRoot(container);
+
+  root.render(
+    <ChakraProvider>
+      <App />
+    </ChakraProvider>,
+  );
+}