refactor: start using emotion for styling (#9909)

site/package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "@emoji-mart/data": "1.1.2",
     "@emoji-mart/react": "1.0.1",
+    "@emotion/css": "11.11.2",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@fastly/performance-observer-polyfill": "2.0.0",
@@ -45,11 +46,6 @@
     "@mui/styles": "5.14.0",
     "@mui/system": "5.14.0",
     "@tanstack/react-query": "4.35.3",
-    "@types/color-convert": "2.0.0",
-    "@types/lodash": "4.14.196",
-    "@types/react-color": "3.0.6",
-    "@types/react-date-range": "1.4.4",
-    "@types/semver": "7.5.0",
     "@vitejs/plugin-react": "4.0.1",
     "@xstate/inspect": "0.8.0",
     "@xstate/react": "3.2.1",
@@ -121,15 +117,20 @@
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.1",
     "@types/chroma-js": "2.4.0",
+    "@types/color-convert": "2.0.0",
     "@types/express": "4.17.17",
     "@types/jest": "29.5.2",
+    "@types/lodash": "4.14.196",
     "@types/node": "18.17.0",
     "@types/react": "18.2.6",
+    "@types/react-color": "3.0.6",
+    "@types/react-date-range": "1.4.4",
     "@types/react-dom": "18.2.4",
     "@types/react-helmet": "6.1.5",
     "@types/react-syntax-highlighter": "15.5.5",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.5",
+    "@types/semver": "7.5.0",
     "@types/ssh2": "1.11.13",
     "@types/ua-parser-js": "0.7.36",
     "@types/uuid": "9.0.2",