New JSX transform

29 files changed, 367 insertions, 241 deletions

diff --git a/vnext/.eslintrc b/vnext/.eslintrc
index 5ba7add9..c348dbaf 100644
--- a/vnext/.eslintrc
+++ b/vnext/.eslintrc
@@ -70,6 +70,8 @@
     "jest/valid-expect": "error",
 
     "react/prop-types": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn"
   }
diff --git a/vnext/package-lock.json b/vnext/package-lock.json
index 7aa8eb51..f39e3521 100644
--- a/vnext/package-lock.json
+++ b/vnext/package-lock.json
@@ -14,30 +14,25 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.11.0.tgz",
-      "integrity": "sha512-TPSvJfv73ng0pfnEOh17bYMPQbI95+nGWc71Ss4vZdRBHTDqmM9Z8ZV4rYz8Ks7sfzc95n30k6ODIq5UGnXcYQ==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.12.0",
-        "invariant": "^2.2.4",
-        "semver": "^5.5.0"
-      }
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.12.0.tgz",
+      "integrity": "sha512-jAbCtMANC9ptXxbSVXIqV/3H0bkh7iyyv6JS5lu10av45bcc2QmDNJXkASZCFwbBt75Q0AEq/BB+bNa3x1QgYQ==",
+      "dev": true
     },
     "@babel/core": {
-      "version": "7.11.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.11.6.tgz",
-      "integrity": "sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.0.tgz",
+      "integrity": "sha512-iV7Gwg0DePKvdDZZWRTkj4MW+6/AbVWd4ZCg+zk8H1RVt5xBpUZS6vLQWwb3pyLg4BFTaGiQCPoJ4Ibmbne4fA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
-        "@babel/generator": "^7.11.6",
-        "@babel/helper-module-transforms": "^7.11.0",
+        "@babel/generator": "^7.12.0",
+        "@babel/helper-module-transforms": "^7.12.0",
         "@babel/helpers": "^7.10.4",
-        "@babel/parser": "^7.11.5",
+        "@babel/parser": "^7.12.0",
         "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.11.5",
-        "@babel/types": "^7.11.5",
+        "@babel/traverse": "^7.12.0",
+        "@babel/types": "^7.12.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.1",
@@ -48,6 +43,51 @@
         "source-map": "^0.5.0"
       },
       "dependencies": {
+        "@babel/generator": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.0.tgz",
+          "integrity": "sha512-8lnf4QcyiQMf5XQp47BltuMTocsOh6P0z/vueEh8GzhmWWlDbdvOoI5Ziddg0XYhmnx35HyByUW51/9NprF8cA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.12.0",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.0.tgz",
+          "integrity": "sha512-dYmySMYnlus2jwl7JnnajAj11obRStZoW9cG04wh4ZuhozDn11tDUrhHcUZ9iuNHqALAhh60XqNaYXpvuuE/Gg==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.0.tgz",
+          "integrity": "sha512-ZU9e79xpOukCNPkQ1UzR4gJKCruGckr6edd8v8lmKpSk8iakgUIvb+5ZtaKKV9f7O+x5r+xbMDDIbzVpUoiIuw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.12.0",
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.11.0",
+            "@babel/parser": "^7.12.0",
+            "@babel/types": "^7.12.0",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.0.tgz",
+          "integrity": "sha512-ggIyFmT2zMaYRheOfPDQ4gz7QqV3B+t2rjqjbttDJxMcb7/LukvWCmlIl1sWcOxrvwpTDd+z0OytzqsbGeb3/g==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -116,15 +156,14 @@
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz",
-      "integrity": "sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.0.tgz",
+      "integrity": "sha512-NbDFJNjDgxE7IkrHp5gq2+Tr8bEdCLKYN90YDQEjMiTMUAFAcShNkaH8kydcmU0mEQTiQY0Ydy/+1xfS2OCEnw==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.10.4",
+        "@babel/compat-data": "^7.12.0",
+        "@babel/helper-validator-option": "^7.12.0",
         "browserslist": "^4.12.0",
-        "invariant": "^2.2.4",
-        "levenary": "^1.1.1",
         "semver": "^5.5.0"
       }
     },
@@ -143,14 +182,14 @@
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz",
-      "integrity": "sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.0.tgz",
+      "integrity": "sha512-YBqH+3wLcom+tko8/JLgRcG8DMqORgmjqNRNI751gTioJSZHWFybO1mRoLtJtWIlYSHY+zT9LqqnbbK1c3KIVQ==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.10.4",
         "@babel/helper-regex": "^7.10.4",
-        "regexpu-core": "^4.7.0"
+        "regexpu-core": "^4.7.1"
       }
     },
     "@babel/helper-define-map": {
@@ -221,18 +260,94 @@
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz",
-      "integrity": "sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.0.tgz",
+      "integrity": "sha512-1ZTMoCiLSzTJLbq7mSaTHki4oIrBIf/dUbzdhwTrvtMU3ZNVKwQmGae3gSiqppo7G8HAgnXmc43rfEaD8yYLLQ==",
       "dev": true,
       "requires": {
         "@babel/helper-module-imports": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.0",
         "@babel/helper-simple-access": "^7.10.4",
         "@babel/helper-split-export-declaration": "^7.11.0",
+        "@babel/helper-validator-identifier": "^7.10.4",
         "@babel/template": "^7.10.4",
-        "@babel/types": "^7.11.0",
+        "@babel/traverse": "^7.12.0",
+        "@babel/types": "^7.12.0",
         "lodash": "^4.17.19"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.0.tgz",
+          "integrity": "sha512-8lnf4QcyiQMf5XQp47BltuMTocsOh6P0z/vueEh8GzhmWWlDbdvOoI5Ziddg0XYhmnx35HyByUW51/9NprF8cA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.12.0",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.0.tgz",
+          "integrity": "sha512-I0d/bgzgzgLsJMk7UZ0TN2KV3OGjC/t/9Saz8PKb9jrcEAXhgjGysOgp4PDKydIKjUv/gj2St4ae+ov8l+T9Xg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.12.0"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.0.tgz",
+          "integrity": "sha512-9kycFdq2c9e7PXZOr2z/ZqTFF9OzFu287iFwYS+CiDVPuoTCfY8hoTsIqNQNetQjlqoRsRyJFrMG1uhGAR4EEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.12.0",
+            "@babel/helper-optimise-call-expression": "^7.10.4",
+            "@babel/traverse": "^7.12.0",
+            "@babel/types": "^7.12.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.0.tgz",
+          "integrity": "sha512-dYmySMYnlus2jwl7JnnajAj11obRStZoW9cG04wh4ZuhozDn11tDUrhHcUZ9iuNHqALAhh60XqNaYXpvuuE/Gg==",
+          "dev": true
+        },
+        "@babel/traverse": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.0.tgz",
+          "integrity": "sha512-ZU9e79xpOukCNPkQ1UzR4gJKCruGckr6edd8v8lmKpSk8iakgUIvb+5ZtaKKV9f7O+x5r+xbMDDIbzVpUoiIuw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.12.0",
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.11.0",
+            "@babel/parser": "^7.12.0",
+            "@babel/types": "^7.12.0",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.0.tgz",
+          "integrity": "sha512-ggIyFmT2zMaYRheOfPDQ4gz7QqV3B+t2rjqjbttDJxMcb7/LukvWCmlIl1sWcOxrvwpTDd+z0OytzqsbGeb3/g==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        }
       }
     },
     "@babel/helper-optimise-call-expression": {
@@ -317,6 +432,12 @@
       "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
       "dev": true
     },
+    "@babel/helper-validator-option": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.0.tgz",
+      "integrity": "sha512-NRfKaAQw/JCMsTFUdJI6cp4MoJGGVBRQTRSiW1nwlGldNqzjB9jqWI0SZqQksC724dJoKqwG+QqfS9ib7SoVsw==",
+      "dev": true
+    },
     "@babel/helper-wrap-function": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz",
@@ -389,9 +510,9 @@
       }
     },
     "@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz",
-      "integrity": "sha512-aNdf0LY6/3WXkhh0Fdb6Zk9j1NMD8ovj3F6r0+3j837Pn1S1PdNtcwJ5EG9WkVPNHPxyJDaxMaAOVq4eki0qbg==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.0.tgz",
+      "integrity": "sha512-ao43U2ptSe+mIZAQo2nBV5Wx2Ie3i2XbLt8jCXZpv+bvLY1Twv0lak4YZ1Ps5OwbeLMAl3iOVScgGMOImBae1g==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -409,9 +530,9 @@
       }
     },
     "@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.11.0.tgz",
-      "integrity": "sha512-/f8p4z+Auz0Uaf+i8Ekf1iM7wUNLcViFUGiPxKeXvxTSl63B875YPiVdUDdem7hREcI0E0kSpEhS8tF5RphK7Q==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.0.tgz",
+      "integrity": "sha512-dssjXHzdMQal4q6GCSwDTVPEbyBLdd9+7aSlzAkQbrGEKq5xG8pvhQ7u2ktUrCLRmzQphZnSzILBL5ta4xSRlA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -419,9 +540,9 @@
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz",
-      "integrity": "sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.0.tgz",
+      "integrity": "sha512-JpNWix2VP2ue31r72fKytTE13nPX1fxl1mudfTaTwcDhl3iExz5NZjQBq012b/BQ6URWoc/onI73pZdYlAfihg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -429,9 +550,9 @@
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.0.tgz",
+      "integrity": "sha512-iON65YmIy/IpEgteYJ4HfO2q30SLdIxiyjNNlsSjSl0tUxLhSH9PljE5r6sczwdW64ZZzznYNcezdcROB+rDDw==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -460,9 +581,9 @@
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz",
-      "integrity": "sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.0.tgz",
+      "integrity": "sha512-CXu9aw32FH/MksqdKvhpiH8pSvxnXJ33E7I7BGNE9VzNRpWgpNzvPpds/tW9E0pjmX9+D1zAHRyHbtyeTboo2g==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.10.4",
@@ -815,14 +936,15 @@
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz",
-      "integrity": "sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.0.tgz",
+      "integrity": "sha512-h2fDMnwRwBiNMmTGAWqUo404Z3oLbrPE6hyATecyIbsEsrbM5gjLbfKQLb6hjiouMlGHH+yliYBbc4NPgWKE/g==",
       "dev": true,
       "requires": {
         "@babel/helper-hoist-variables": "^7.10.4",
-        "@babel/helper-module-transforms": "^7.10.5",
+        "@babel/helper-module-transforms": "^7.12.0",
         "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-validator-identifier": "^7.10.4",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
@@ -1042,26 +1164,27 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.11.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.11.5.tgz",
-      "integrity": "sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==",
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.0.tgz",
+      "integrity": "sha512-jSIHvHSuF+hBUIrvA2/61yIzhH+ceLOXGLTH1nwPvQlso/lNxXsoE/nvrCzY5M77KRzhKegB1CvdhWPZmYDZ5A==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.11.0",
-        "@babel/helper-compilation-targets": "^7.10.4",
+        "@babel/compat-data": "^7.12.0",
+        "@babel/helper-compilation-targets": "^7.12.0",
         "@babel/helper-module-imports": "^7.10.4",
         "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-validator-option": "^7.12.0",
         "@babel/plugin-proposal-async-generator-functions": "^7.10.4",
         "@babel/plugin-proposal-class-properties": "^7.10.4",
         "@babel/plugin-proposal-dynamic-import": "^7.10.4",
-        "@babel/plugin-proposal-export-namespace-from": "^7.10.4",
+        "@babel/plugin-proposal-export-namespace-from": "^7.12.0",
         "@babel/plugin-proposal-json-strings": "^7.10.4",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.11.0",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
-        "@babel/plugin-proposal-numeric-separator": "^7.10.4",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.12.0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.0",
+        "@babel/plugin-proposal-numeric-separator": "^7.12.0",
         "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
         "@babel/plugin-proposal-optional-catch-binding": "^7.10.4",
-        "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.12.0",
         "@babel/plugin-proposal-private-methods": "^7.10.4",
         "@babel/plugin-proposal-unicode-property-regex": "^7.10.4",
         "@babel/plugin-syntax-async-generators": "^7.8.0",
@@ -1092,7 +1215,7 @@
         "@babel/plugin-transform-member-expression-literals": "^7.10.4",
         "@babel/plugin-transform-modules-amd": "^7.10.4",
         "@babel/plugin-transform-modules-commonjs": "^7.10.4",
-        "@babel/plugin-transform-modules-systemjs": "^7.10.4",
+        "@babel/plugin-transform-modules-systemjs": "^7.12.0",
         "@babel/plugin-transform-modules-umd": "^7.10.4",
         "@babel/plugin-transform-named-capturing-groups-regex": "^7.10.4",
         "@babel/plugin-transform-new-target": "^7.10.4",
@@ -1109,12 +1232,23 @@
         "@babel/plugin-transform-unicode-escapes": "^7.10.4",
         "@babel/plugin-transform-unicode-regex": "^7.10.4",
         "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.11.5",
+        "@babel/types": "^7.12.0",
         "browserslist": "^4.12.0",
         "core-js-compat": "^3.6.2",
-        "invariant": "^2.2.2",
-        "levenary": "^1.1.1",
         "semver": "^5.5.0"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.12.0",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.0.tgz",
+          "integrity": "sha512-ggIyFmT2zMaYRheOfPDQ4gz7QqV3B+t2rjqjbttDJxMcb7/LukvWCmlIl1sWcOxrvwpTDd+z0OytzqsbGeb3/g==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/preset-flow": {
@@ -4460,22 +4594,22 @@
       }
     },
     "css-loader": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.3.0.tgz",
-      "integrity": "sha512-rdezjCjScIrsL8BSYszgT4s476IcNKt6yX69t0pHjJVnPUTDpn4WfIpDQTN3wCJvUvfsz/mFjuGOekf3PY3NUg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.0.0.tgz",
+      "integrity": "sha512-9g35eXRBgjvswyJWoqq/seWp+BOxvUl8IinVNTsUBFFxtwfEYvlmEn6ciyn0liXGbGh5HyJjPGCuobDSfqMIVg==",
       "dev": true,
       "requires": {
-        "camelcase": "^6.0.0",
+        "camelcase": "^6.1.0",
         "cssesc": "^3.0.0",
-        "icss-utils": "^4.1.1",
+        "icss-utils": "^5.0.0",
         "loader-utils": "^2.0.0",
-        "postcss": "^7.0.32",
-        "postcss-modules-extract-imports": "^2.0.0",
-        "postcss-modules-local-by-default": "^3.0.3",
-        "postcss-modules-scope": "^2.2.0",
-        "postcss-modules-values": "^3.0.0",
+        "postcss": "^8.1.1",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.1.0",
-        "schema-utils": "^2.7.1",
+        "schema-utils": "^3.0.0",
         "semver": "^7.3.2"
       },
       "dependencies": {
@@ -4496,6 +4630,29 @@
             "json5": "^2.1.2"
           }
         },
+        "postcss": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.1.tgz",
+          "integrity": "sha512-9DGLSsjooH3kSNjTZUOt2eIj2ZTW0VI2PZ/3My+8TC7KIbH2OKwUlISfDsf63EP4aiRUt3XkEWMWvyJHvJelEg==",
+          "dev": true,
+          "requires": {
+            "colorette": "^1.2.1",
+            "line-column": "^1.0.2",
+            "nanoid": "^3.1.12",
+            "source-map": "^0.6.1"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
         "semver": {
           "version": "7.3.2",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
@@ -7149,13 +7306,10 @@
       }
     },
     "icss-utils": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz",
-      "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.14"
-      }
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.0.0.tgz",
+      "integrity": "sha512-aF2Cf/CkEZrI/vsu5WI/I+akFgdbwQHVE9YRZxATrhH4PVIe6a3BIjwjEcW+z+jP/hNh+YvM3lAAn1wJQ6opSg==",
+      "dev": true
     },
     "ignore": {
       "version": "3.3.10",
@@ -7328,15 +7482,6 @@
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
       "dev": true
     },
-    "invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "ip-regex": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
@@ -9477,15 +9622,6 @@
       "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
       "dev": true
     },
-    "levenary": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.1.tgz",
-      "integrity": "sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==",
-      "dev": true,
-      "requires": {
-        "leven": "^3.1.0"
-      }
-    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -9496,6 +9632,33 @@
         "type-check": "~0.4.0"
       }
     },
+    "line-column": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/line-column/-/line-column-1.0.2.tgz",
+      "integrity": "sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI=",
+      "dev": true,
+      "requires": {
+        "isarray": "^1.0.0",
+        "isobject": "^2.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "isobject": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+          "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+          "dev": true,
+          "requires": {
+            "isarray": "1.0.0"
+          }
+        }
+      }
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -10139,6 +10302,12 @@
         "stylis": "3.5.0"
       }
     },
+    "nanoid": {
+      "version": "3.1.12",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.12.tgz",
+      "integrity": "sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==",
+      "dev": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -11684,44 +11853,38 @@
       }
     },
     "postcss-modules-extract-imports": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
-      "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.5"
-      }
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true
     },
     "postcss-modules-local-by-default": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz",
-      "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
       "dev": true,
       "requires": {
-        "icss-utils": "^4.1.1",
-        "postcss": "^7.0.32",
+        "icss-utils": "^5.0.0",
         "postcss-selector-parser": "^6.0.2",
         "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-modules-scope": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
-      "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.6",
-        "postcss-selector-parser": "^6.0.0"
+        "postcss-selector-parser": "^6.0.4"
       }
     },
     "postcss-modules-values": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz",
-      "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
       "dev": true,
       "requires": {
-        "icss-utils": "^4.0.0",
-        "postcss": "^7.0.6"
+        "icss-utils": "^5.0.0"
       }
     },
     "postcss-nesting": {
@@ -12381,9 +12544,9 @@
       }
     },
     "react": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12545,9 +12708,9 @@
       }
     },
     "react-dom": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
-      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12604,9 +12767,9 @@
       }
     },
     "react-test-renderer": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz",
-      "integrity": "sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==",
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.14.0.tgz",
+      "integrity": "sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==",
       "dev": true,
       "requires": {
         "object-assign": "^4.1.1",
@@ -15103,20 +15266,17 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-4.2.3.tgz",
-      "integrity": "sha512-jTgXh40RnvOrLQNgIkwEKnQ8rmHjHK4u+6UBEi+W+FPmvb+uo+chJXntKe7/3lW5mNysgSWD60KyesnhW8D6MQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.0.0.tgz",
+      "integrity": "sha512-rf7l5a9xamIVX3enQeTl0MY2MNeZClo5yPX/tVPy22oY0nzu0b45h7JqyFi/bygqKWtzXMnml0u12mArhQPsBQ==",
       "dev": true,
       "requires": {
-        "cacache": "^15.0.5",
-        "find-cache-dir": "^3.3.1",
         "jest-worker": "^26.5.0",
         "p-limit": "^3.0.2",
         "schema-utils": "^3.0.0",
         "serialize-javascript": "^5.0.1",
         "source-map": "^0.6.1",
-        "terser": "^5.3.4",
-        "webpack-sources": "^1.4.3"
+        "terser": "^5.3.5"
       },
       "dependencies": {
         "commander": {
@@ -15125,26 +15285,6 @@
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
           "dev": true
         },
-        "find-cache-dir": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
-          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^3.0.2",
-            "pkg-dir": "^4.1.0"
-          }
-        },
-        "make-dir": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-          "dev": true,
-          "requires": {
-            "semver": "^6.0.0"
-          }
-        },
         "p-limit": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.0.2.tgz",
@@ -15154,15 +15294,6 @@
             "p-try": "^2.0.0"
           }
         },
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        },
         "schema-utils": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
@@ -15174,16 +15305,10 @@
             "ajv-keywords": "^3.5.2"
           }
         },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
         "terser": {
-          "version": "5.3.4",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.3.4.tgz",
-          "integrity": "sha512-dxuB8KQo8Gt6OVOeLg/rxfcxdNZI/V1G6ze1czFUzPeCFWZRtvZMgSzlZZ5OYBZ4HoG607F6pFPNLekJyV+yVw==",
+          "version": "5.3.5",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-5.3.5.tgz",
+          "integrity": "sha512-Qw3CZAMmmfU824AoGKalx+riwocSI5Cs0PoGp9RdSLfmxkmJgyBxqLBP/isDNtFyhHnitikvRMZzyVgeq+U+Tg==",
           "dev": true,
           "requires": {
             "commander": "^2.20.0",
@@ -15769,9 +15894,9 @@
       }
     },
     "url-polyfill": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.10.tgz",
-      "integrity": "sha512-vSaPpaRgBrf41+Uky1myiSh6gpcbw8FpwHYnEy0abxndojOBnIs+yh/49gKYFLtUMP9qoNWjn6j9aUVy23Ie2A=="
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.11.tgz",
+      "integrity": "sha512-p3Vw21dz901xeu++K6db2CZgfwMZjzVAH2buek66I0HKY+DHSh/AXz+p9B/+RhhZ9l3xDMBviwe99Eeu+UJB3g=="
     },
     "use": {
       "version": "3.1.1",
@@ -15989,9 +16114,9 @@
       "dev": true
     },
     "webpack": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.0.0.tgz",
-      "integrity": "sha512-OK+Q9xGgda3idw/DgCf75XsVFxRLPu48qPwygqI3W9ls5sDdKif5Ay4SM/1UVob0w4juJy14Zv9nNv0WeyV0aA==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.1.2.tgz",
+      "integrity": "sha512-R0DKsyNS9/jkzOTkEZ7gzEKhEQZtkD5wcHGL5Z8cwpb0l+f5PgaxLlmh60od0fSu9Wk/9w+5SIJ6sZrWyzyg9w==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
@@ -16015,7 +16140,7 @@
         "pkg-dir": "^4.2.0",
         "schema-utils": "^3.0.0",
         "tapable": "^2.0.0",
-        "terser-webpack-plugin": "^4.1.0",
+        "terser-webpack-plugin": "^5.0.0",
         "watchpack": "^2.0.0",
         "webpack-sources": "^2.0.1"
       },
diff --git a/vnext/package.json b/vnext/package.json
index d012bfcd..06cab90d 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -11,16 +11,16 @@
   "author": "",
   "license": "AGPL-3.0-or-later",
   "devDependencies": {
-    "@babel/core": "7.11.6",
+    "@babel/core": "7.12.0",
     "@babel/plugin-proposal-class-properties": "7.10.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "7.11.5",
+    "@babel/preset-env": "7.12.0",
     "@babel/preset-react": "7.10.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.5.2",
     "babel-loader": "^8.1.0",
-    "css-loader": "^4.3.0",
+    "css-loader": "^5.0.0",
     "css-minimizer-webpack-plugin": "^1.1.5",
     "error-overlay-webpack-plugin": "^0.4.1",
     "eslint": "^7.11.0",
@@ -39,11 +39,11 @@
     "postcss-preset-env": "^6.7.0",
     "react-cookie": "^4.0.3",
     "react-refresh": "^0.8.3",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^16.14.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.7.2",
     "stylelint-config-standard": "^20.0.0",
-    "webpack": "^5.0.0",
+    "webpack": "^5.1.2",
     "webpack-cli": "^4.0.0"
   },
   "babel": {
@@ -66,7 +66,12 @@
           "shippedProposals": true
         }
       ],
-      "@babel/preset-react"
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ]
     ]
   },
   "jest": {
@@ -84,14 +89,14 @@
     "evil-icons": "^1.10.1",
     "moment": "^2.29.1",
     "qs": "^6.9.4",
-    "react": "16.13.1",
+    "react": "16.14.0",
     "react-content-loader": "^5.1.2",
-    "react-dom": "16.13.1",
+    "react-dom": "16.14.0",
     "react-router-dom": "^5.2.0",
     "react-use": "^15.3.4",
     "react-use-form-state": "^0.13.2",
     "regenerator-runtime": "^0.13.7",
     "svg4everybody": "^2.1.9",
-    "url-polyfill": "^1.1.10"
+    "url-polyfill": "^1.1.11"
   }
-}
+}
\ No newline at end of file
diff --git a/vnext/src/App.js b/vnext/src/App.js
index ccdae78e..91adf0b9 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Route, Link, Switch } from 'react-router-dom';
 import { useScroll, useRafState } from 'react-use';
 import qs from 'qs';
diff --git a/vnext/src/index.js b/vnext/src/index.js
index c9b9373a..cdb592e8 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from 'react';
+import { StrictMode, lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import { CookiesProvider } from 'react-cookie';
@@ -16,7 +16,7 @@ function LoadingView() {
 const Juick = lazy(() => import('./App'));
 
 const JuickApp = () => (
-    <React.StrictMode>
+    <StrictMode>
         <Suspense fallback={LoadingView()}>
             <CookiesProvider>
                 <BrowserRouter>
@@ -24,7 +24,7 @@ const JuickApp = () => (
                 </BrowserRouter>
             </CookiesProvider>
         </Suspense>
-    </React.StrictMode>
+    </StrictMode>
 );
 
 ReactDOM.hydrate(<JuickApp />, document.getElementById('app'));
diff --git a/vnext/src/ui/Avatar.js b/vnext/src/ui/Avatar.js
index e08c1ba4..b7ffb102 100644
--- a/vnext/src/ui/Avatar.js
+++ b/vnext/src/ui/Avatar.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
 import Icon from './Icon';
diff --git a/vnext/src/ui/Button.js b/vnext/src/ui/Button.js
index 033c972c..62e772b9 100644
--- a/vnext/src/ui/Button.js
+++ b/vnext/src/ui/Button.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 import './Button.css';
 
@@ -11,4 +11,4 @@ function Button(props) {
     );
 }
 
-export default React.memo(Button);
+export default memo(Button);
diff --git a/vnext/src/ui/Chat.js b/vnext/src/ui/Chat.js
index 21f02635..5ecb9c0f 100644
--- a/vnext/src/ui/Chat.js
+++ b/vnext/src/ui/Chat.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import moment from 'moment';
 
diff --git a/vnext/src/ui/Contact.js b/vnext/src/ui/Contact.js
index 9e6416bb..2d009738 100644
--- a/vnext/src/ui/Contact.js
+++ b/vnext/src/ui/Contact.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 import Avatar from './Avatar';
 
@@ -21,4 +21,4 @@ function Contact({ user, style }) {
     );
 }
 
-export default React.memo(Contact);
+export default memo(Contact);
diff --git a/vnext/src/ui/Contacts.js b/vnext/src/ui/Contacts.js
index 8160a24e..2a727b82 100644
--- a/vnext/src/ui/Contacts.js
+++ b/vnext/src/ui/Contacts.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { getChats } from '../api';
 
diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js
index 9bbecf89..7c51f3e7 100644
--- a/vnext/src/ui/Feeds.js
+++ b/vnext/src/ui/Feeds.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Link, useLocation, useHistory, useParams } from 'react-router-dom';
 
 import qs from 'qs';
diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js
index d8fe23e0..1574a489 100644
--- a/vnext/src/ui/Header.js
+++ b/vnext/src/ui/Header.js
@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 
 import Icon from './Icon';
diff --git a/vnext/src/ui/Icon.js b/vnext/src/ui/Icon.js
index af9a0944..c959e2d1 100644
--- a/vnext/src/ui/Icon.js
+++ b/vnext/src/ui/Icon.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { createElement, memo } from 'react';
 import PropTypes from 'prop-types';
 
 // @ts-ignore
@@ -23,8 +23,8 @@ function IconElement(props) {
 
     var name = '#' + props.name + '-icon';
     var useTag = `<use xlink:href='${evilIcons}${name}' />`;
-    var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } });
-    return React.createElement(
+    var Icon = createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } });
+    return createElement(
         'div',
         { className: klass },
         wrapSpinner(Icon, klass)
@@ -37,7 +37,7 @@ function IconElement(props) {
  */
 function wrapSpinner(Html, klass) {
     if (klass.indexOf('spinner') > -1) {
-        return React.createElement(
+        return createElement(
             'div',
             { className: 'icon__spinner' },
             Html
diff --git a/vnext/src/ui/Input.js b/vnext/src/ui/Input.js
index e4fdefa0..2f01f0c6 100644
--- a/vnext/src/ui/Input.js
+++ b/vnext/src/ui/Input.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 import './Input.css';
 
@@ -20,4 +20,4 @@ function Input({ name, value, ...rest }) {
     );
 }
 
-export default React.memo(Input);
+export default memo(Input);
diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js
index b5fbc700..774664c0 100644
--- a/vnext/src/ui/Login.js
+++ b/vnext/src/ui/Login.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 
 import Icon from './Icon';
diff --git a/vnext/src/ui/Message.js b/vnext/src/ui/Message.js
index 83c6fcab..620fe017 100644
--- a/vnext/src/ui/Message.js
+++ b/vnext/src/ui/Message.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { memo, useEffect, useRef } from 'react';
 
 import { Link } from 'react-router-dom';
 import moment from 'moment';
@@ -130,7 +130,7 @@ function Tags({ data, user }) {
     );
 }
 
-const TagsList = React.memo(Tags);
+const TagsList = memo(Tags);
 
 function Recommends({ forMessage }) {
     const { likes, recommendations } = forMessage;
@@ -148,4 +148,4 @@ function Recommends({ forMessage }) {
     ) || null;
 }
 
-const Recommendations = React.memo(Recommends);
+const Recommendations = memo(Recommends);
diff --git a/vnext/src/ui/MessageInput.js b/vnext/src/ui/MessageInput.js
index e20d5100..6003a15c 100644
--- a/vnext/src/ui/MessageInput.js
+++ b/vnext/src/ui/MessageInput.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 import Icon from './Icon';
 import Button from './Button';
diff --git a/vnext/src/ui/PM.js b/vnext/src/ui/PM.js
index 9903b4e5..8885153d 100644
--- a/vnext/src/ui/PM.js
+++ b/vnext/src/ui/PM.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 
 import Avatar from './Avatar';
 import { format } from '../utils/embed';
@@ -18,7 +18,7 @@ function PM(props) {
     );
 }
 
-export default React.memo(PM);
+export default memo(PM);
 /*
 PM.propTypes = {
     chat: MessageType.isRequired,
diff --git a/vnext/src/ui/Post.js b/vnext/src/ui/Post.js
index 7c5c07cd..d8d841e1 100644
--- a/vnext/src/ui/Post.js
+++ b/vnext/src/ui/Post.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 
 import qs from 'qs';
diff --git a/vnext/src/ui/SearchBox.js b/vnext/src/ui/SearchBox.js
index 005739d8..c79c9e8f 100644
--- a/vnext/src/ui/SearchBox.js
+++ b/vnext/src/ui/SearchBox.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useFormState } from 'react-use-form-state';
 
 /**
@@ -6,9 +5,9 @@ import { useFormState } from 'react-use-form-state';
  * @property {function} onSearch
  */
 
- /**
- * @typedef {SearchBoxPropsFields} SearchBoxProps
- */
+/**
+* @typedef {SearchBoxPropsFields} SearchBoxProps
+*/
 
 /**
  * @param {SearchBoxProps} props
diff --git a/vnext/src/ui/Settings.js b/vnext/src/ui/Settings.js
index 4b9dc2e9..ccafffa3 100644
--- a/vnext/src/ui/Settings.js
+++ b/vnext/src/ui/Settings.js
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import { Fragment, useState, useRef } from 'react';
 
 import { me, updateAvatar } from '../api';
 
@@ -134,9 +134,9 @@ export default function Settings({ visitor, onChange }) {
                             <p>
                                 {
                                     visitor.jids.map(jid =>
-                                        <React.Fragment key={jid}>
+                                        <Fragment key={jid}>
                                             <label><input type="radio" name="delete" value={jid} />{jid}</label><br />
-                                        </React.Fragment>
+                                        </Fragment>
                                     )
                                 }
                             </p>
@@ -163,12 +163,12 @@ export default function Settings({ visitor, onChange }) {
                     <p>
                         {
                             visitor.emails ? visitor.emails.map(email =>
-                                <React.Fragment key={email}>
+                                <Fragment key={email}>
                                     <label>
                                         <input type="radio" name="account" value={email} />{email}
                                     </label>
                                     <br />
-                                </React.Fragment>
+                                </Fragment>
                             ) : '-'
                         }
                     </p>
diff --git a/vnext/src/ui/Spinner.js b/vnext/src/ui/Spinner.js
index e866369f..b5027c08 100644
--- a/vnext/src/ui/Spinner.js
+++ b/vnext/src/ui/Spinner.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 import ContentLoader from 'react-content-loader';
 
 function Spinner(props) {
@@ -23,7 +23,7 @@ function Spinner(props) {
     );
 }
 
-export default React.memo(Spinner);
+export default memo(Spinner);
 
 export function ChatSpinner(props) {
     return (
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index f5cab72f..92638104 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 
 import Message from './Message';
diff --git a/vnext/src/ui/UploadButton.js b/vnext/src/ui/UploadButton.js
index 28a1f340..78991340 100644
--- a/vnext/src/ui/UploadButton.js
+++ b/vnext/src/ui/UploadButton.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Icon from './Icon';
 
 /**
diff --git a/vnext/src/ui/UserInfo.js b/vnext/src/ui/UserInfo.js
index f44fb77c..cb6ad792 100644
--- a/vnext/src/ui/UserInfo.js
+++ b/vnext/src/ui/UserInfo.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import { memo, useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 
 import { info, fetchUserUri, update } from '../api';
@@ -87,7 +87,7 @@ function Summary({ user }) {
     );
 }
 
-const UserSummary = React.memo(Summary);
+const UserSummary = memo(Summary);
 
 
 /**
diff --git a/vnext/src/ui/Users.js b/vnext/src/ui/Users.js
index 4dd929fb..2672c9cd 100644
--- a/vnext/src/ui/Users.js
+++ b/vnext/src/ui/Users.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import UserInfo from './UserInfo';
diff --git a/vnext/src/ui/__tests__/Avatar.test.js b/vnext/src/ui/__tests__/Avatar.test.js
index e7221871..f454f6c7 100644
--- a/vnext/src/ui/__tests__/Avatar.test.js
+++ b/vnext/src/ui/__tests__/Avatar.test.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
 import Avatar from '../Avatar';
diff --git a/vnext/src/ui/__tests__/MessageInput-test.js b/vnext/src/ui/__tests__/MessageInput-test.js
index 9603d1fe..261786d0 100644
--- a/vnext/src/ui/__tests__/MessageInput-test.js
+++ b/vnext/src/ui/__tests__/MessageInput-test.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { create, act } from 'react-test-renderer';
 
 import MessageInput from '../MessageInput';
diff --git a/vnext/src/ui/__tests__/UserLink.test.js b/vnext/src/ui/__tests__/UserLink.test.js
index a75344b0..30c35928 100644
--- a/vnext/src/ui/__tests__/UserLink.test.js
+++ b/vnext/src/ui/__tests__/UserLink.test.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { MemoryRouter, Switch, Route } from 'react-router-dom';
 
 import { UserLink } from '../UserInfo';