From 90a54a8c92de3b68bb68ebd04daa1aa2793df429 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 26 Mar 2019 00:09:15 +0100
Subject: [PATCH 1/8] Add mui styles

---
 package.json                                  |   6 +-
 packages/benchmarks/package.json              |   5 +-
 .../src/implementations/material-ui/Box.js    |  54 +++++
 .../src/implementations/material-ui/Dot.js    |  31 +++
 .../implementations/material-ui/Provider.js   |   2 +
 .../src/implementations/material-ui/View.js   |  29 +++
 .../src/implementations/material-ui/index.js  |  11 +
 yarn.lock                                     | 204 +++++++++++++++++-
 8 files changed, 333 insertions(+), 9 deletions(-)
 create mode 100644 packages/benchmarks/src/implementations/material-ui/Box.js
 create mode 100644 packages/benchmarks/src/implementations/material-ui/Dot.js
 create mode 100644 packages/benchmarks/src/implementations/material-ui/Provider.js
 create mode 100644 packages/benchmarks/src/implementations/material-ui/View.js
 create mode 100644 packages/benchmarks/src/implementations/material-ui/index.js

diff --git a/package.json b/package.json
index 3bb155988..0bf98be22 100644
--- a/package.json
+++ b/package.json
@@ -57,9 +57,9 @@
     "metro-react-native-babel-preset": "^0.51.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.12.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-test-renderer": "^16.7.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "react-test-renderer": "^16.8.0"
   },
   "workspaces": [
     "packages/*"
diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json
index fd810f547..0f6508df8 100644
--- a/packages/benchmarks/package.json
+++ b/packages/benchmarks/package.json
@@ -7,13 +7,14 @@
     "release": "NODE_ENV=production yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
+    "@material-ui/styles": "^4.0.0-alpha.6",
     "aphrodite": "^2.3.1",
     "classnames": "^2.2.6",
     "d3-scale-chromatic": "^1.3.3",
     "emotion": "^10.0.9",
     "fela": "^10.2.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-fela": "^10.2.1",
     "react-jss": "^8.6.1",
     "react-native-web": "0.11.2",
diff --git a/packages/benchmarks/src/implementations/material-ui/Box.js b/packages/benchmarks/src/implementations/material-ui/Box.js
new file mode 100644
index 000000000..04e44cd69
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui/Box.js
@@ -0,0 +1,54 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import classnames from 'classnames';
+import View from './View';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  outer: {
+    alignSelf: 'flex-start',
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#14171A'
+  },
+  color1: {
+    backgroundColor: '#AAB8C2'
+  },
+  color2: {
+    backgroundColor: '#E6ECF0'
+  },
+  color3: {
+    backgroundColor: '#FFAD1F'
+  },
+  color4: {
+    backgroundColor: '#F45D22'
+  },
+  color5: {
+    backgroundColor: '#E0245E'
+  },
+  fixed: {
+    width: 6,
+    height: 6
+  }
+});
+
+function Box({ color, fixed = false, layout = 'column', outer = false, ...other }) {
+  const classes = useStyles();
+
+  return (
+    <View
+      {...other}
+      className={classnames(classes[`color${color}`], {
+        [classes.fixed]: fixed,
+        [classes.outer]: outer,
+        [classes.row]: layout === 'row'
+      })}
+    />
+  );
+}
+
+export default Box;
diff --git a/packages/benchmarks/src/implementations/material-ui/Dot.js b/packages/benchmarks/src/implementations/material-ui/Dot.js
new file mode 100644
index 000000000..c03c5cf97
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui/Dot.js
@@ -0,0 +1,31 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: {
+    position: 'absolute',
+    cursor: 'pointer',
+    width: 0,
+    height: 0,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 0,
+    transform: 'translate(50%, 50%)'
+  },
+  dynamic: ({ size, x, y, children, color }) => ({
+    borderBottomColor: color,
+    borderRightWidth: `${size / 2}px`,
+    borderBottomWidth: `${size / 2}px`,
+    borderLeftWidth: `${size / 2}px`,
+    marginLeft: `${x}px`,
+    marginTop: `${y}px`
+  })
+});
+
+function Dot(props) {
+  const classes = useStyles(props);
+  return <div className={`${classes.root} ${classes.dynamic}`}>{props.children}</div>;
+}
+
+export default Dot;
diff --git a/packages/benchmarks/src/implementations/material-ui/Provider.js b/packages/benchmarks/src/implementations/material-ui/Provider.js
new file mode 100644
index 000000000..864fc43a7
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui/Provider.js
@@ -0,0 +1,2 @@
+import View from './View';
+export default View;
diff --git a/packages/benchmarks/src/implementations/material-ui/View.js b/packages/benchmarks/src/implementations/material-ui/View.js
new file mode 100644
index 000000000..b37d93a44
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui/View.js
@@ -0,0 +1,29 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    position: 'relative',
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+
+function View(props) {
+  const classes = useStyles();
+  return <div {...props} className={`${classes.root} ${props.className}`} />;
+}
+
+export default View;
diff --git a/packages/benchmarks/src/implementations/material-ui/index.js b/packages/benchmarks/src/implementations/material-ui/index.js
new file mode 100644
index 000000000..f32ff155d
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui/index.js
@@ -0,0 +1,11 @@
+import Box from './Box';
+import Dot from './Dot';
+import Provider from './Provider';
+import View from './View';
+
+export default {
+  Box,
+  Dot,
+  Provider,
+  View
+};
diff --git a/yarn.lock b/yarn.lock
index 6c8abf15d..9f0ec7832 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -671,6 +671,13 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
+"@babel/runtime@^7.3.1":
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.2.tgz#f5ab6897320f16decd855eed70b705908a313fe8"
+  integrity sha512-7Bl2rALb7HpvXFL7TETNzKSAeBVCPHELzc0C//9FCxN8nsiueWSJBqaF+2oIJScyILStASR/Cx5WMkXGYTiJFA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.0.0", "@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
@@ -711,7 +718,7 @@
     "@emotion/utils" "0.11.1"
     "@emotion/weak-memoize" "0.2.2"
 
-"@emotion/hash@0.7.1":
+"@emotion/hash@0.7.1", "@emotion/hash@^0.7.1":
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
 
@@ -756,6 +763,37 @@
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
 
+"@material-ui/styles@^4.0.0-alpha.6":
+  version "4.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.0.0-alpha.6.tgz#f6ec3655865bbb9a8439cb70f620e0260b32508e"
+  integrity sha512-h6BDQb/F212xNwAjq6FCyJji6GLd5NJH8JdzO1/ZAE3LWMS3EH0Fs65pKMb1oq6daLCksSsB3UFwAU0cd6uLwQ==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    "@emotion/hash" "^0.7.1"
+    "@material-ui/utils" "^4.0.0-alpha.4"
+    clsx "^1.0.2"
+    deepmerge "^3.0.0"
+    hoist-non-react-statics "^3.2.1"
+    jss "^10.0.0-alpha.16"
+    jss-plugin-camel-case "^10.0.0-alpha.16"
+    jss-plugin-default-unit "^10.0.0-alpha.16"
+    jss-plugin-global "^10.0.0-alpha.16"
+    jss-plugin-nested "^10.0.0-alpha.16"
+    jss-plugin-props-sort "^10.0.0-alpha.16"
+    jss-plugin-rule-value-function "^10.0.0-alpha.16"
+    jss-plugin-vendor-prefixer "^10.0.0-alpha.16"
+    prop-types "^15.7.2"
+    warning "^4.0.1"
+
+"@material-ui/utils@^4.0.0-alpha.4":
+  version "4.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.0.0-alpha.4.tgz#3966ec0c7fc2d42594092799bf464faf3d6d8633"
+  integrity sha512-bS94IM50JL6ujmNv4cOMOcYv9CYkLwCXvkcJ0rXN/EDsx9qHq8Oir7yxEn8iBd8LMi92dDwiCazsln8/eYMBNw==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -3123,6 +3161,11 @@ clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
 
+clsx@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.3.tgz#e164004f4064b372888f20fdafbd436fb960bac9"
+  integrity sha512-xLoSw6DMp7YvbEeLrQJBcWWRRerdHrU1WHoL1hYJOKUeDpVMRq7pv7NI2JHQbCRAe5ptINNzhdYmtfN6MsdCUw==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3516,6 +3559,14 @@ css-vendor@^0.3.8:
   dependencies:
     is-in-browser "^1.0.2"
 
+css-vendor@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.1.tgz#1bfaad119b545287f358bdc62875c26d44b6aae0"
+  integrity sha512-Go50HBA9EDfbrSDjkTrugD0hESQuoJp1yU0iZZMFhySMpb8XJDxr1KVsrm6jvRhjT/vL/20YPqdM3WLHkJ+oMQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    is-in-browser "^1.0.2"
+
 css-what@2.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
@@ -3702,6 +3753,11 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
+deepmerge@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.2.0.tgz#58ef463a57c08d376547f8869fdc5bcee957f44e"
+  integrity sha512-6+LuZGU7QCNUnAJyX8cIrlzoEgggTM6B7mm+znKOX4t5ltluT9KLjN6g61ECMS0LTsLW7yDpNoxhix5FZcrIow==
+
 default-require-extensions@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-2.0.0.tgz#f5f8fbb18a7d6d50b21f641f649ebb522cfe24f7"
@@ -5227,6 +5283,13 @@ hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
 
+hoist-non-react-statics@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
+  integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
+  dependencies:
+    react-is "^16.7.0"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -5360,6 +5423,11 @@ hyphenate-style-name@^1.0.1, hyphenate-style-name@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
+  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
+
 iconv-lite@0.4.23:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@@ -6462,6 +6530,65 @@ jss-nested@^6.0.1:
   dependencies:
     warning "^3.0.0"
 
+jss-plugin-camel-case@^10.0.0-alpha.16:
+  version "10.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.16.tgz#36023c9aa35fd2e898f117be136f31dfa76ffef9"
+  integrity sha512-nki+smHEsFyoZ0OlOYtaxVqcQA0ZHVJCE1slRnk+1TklbmxbBiO4TwITMTEaNIDv0U0Uyb0Z8wVgFgRwCCIFog==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.0.0-alpha.16"
+
+jss-plugin-default-unit@^10.0.0-alpha.16:
+  version "10.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.16.tgz#ef96b529fcb9f8d730c14a489a1d7e71e243447e"
+  integrity sha512-jjGW4F/r9yKvoyUk22M8nWhdMfvoWzJw/oFO2cDRXCk2onnWFiRALfqeUsEDyocwdZbyVF9WhZbSHn4GL03kSw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.16"
+
+jss-plugin-global@^10.0.0-alpha.16:
+  version "10.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.16.tgz#6da34ad63e0a4669a35412d716d39820bd10ede4"
+  integrity sha512-B1mm2ZF9OEsWPmzkG5ZUXqV88smDqpc4unILLXhWVuj0U5JeT0DNitH+QbXFrSueDJzkWVfvqyckvWDR/0qeDg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.16"
+
+jss-plugin-nested@^10.0.0-alpha.16:
+  version "10.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.16.tgz#282ce431cc6c7c4b2e2509b80dc5cc1de7f7102f"
+  integrity sha512-3l/MB6COnIpq4GOXQFae6UydoaIPa81UxhuBTEQuiAojgTeUla9L7nB3h18Q4zAhQQpjxaEsyppAKuEzIP7kPQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.16"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.0.0-alpha.16:
+  version "10.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.16.tgz#d91566d6c73ebd906ff81fdfb93135d16bbfb067"
+  integrity sha512-+Yn9nugHAH58nf/d43H2uxMvlCFPDgLKRSmKO4Q4m1IGYjMbHsWt1Rk2HfC9IiCanqcqpc8hstwtzf+HG7PWFQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.16"
+
+jss-plugin-rule-value-function@^10.0.0-alpha.16:
+  version "10.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.16.tgz#42bf684dae0a73a02df0a3297b747becf9854449"
+  integrity sha512-MQap9ne6ZGZH0NlpSQTMSm6QalBTF0hYpd2uaGQwam+GlT7IKeO+sTjd46I1WgO3kyOmwb0pIY6CnuLQGXKtSA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.0.0-alpha.16"
+
+jss-plugin-vendor-prefixer@^10.0.0-alpha.16:
+  version "10.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.16.tgz#f59d92db7331d6615b33aa108ee54cbf1ab6ce84"
+  integrity sha512-70yJ6QE5dN8VlPUGKld5jK2SKyrteheEL/ismexpybIufunMs6iJgkhDndbOfv8ia13yZgUVqeakMdhRKYwK1A==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.1"
+    jss "10.0.0-alpha.16"
+
 jss-preset-default@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.5.0.tgz#d3a457012ccd7a551312014e394c23c4b301cadd"
@@ -6493,6 +6620,15 @@ jss-vendor-prefixer@^7.0.0:
   dependencies:
     css-vendor "^0.3.8"
 
+jss@10.0.0-alpha.16, jss@^10.0.0-alpha.16:
+  version "10.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0-alpha.16.tgz#0555e8b667e08dbd2cc94f6125be5a8b8b022833"
+  integrity sha512-HmKNNnr82TR5jkWjBcbrx/uim2ief588pWp7zsf4GQpL125zRkEaWYL1SXv5bR6bBvAoTtvJsTAOxDIlLxUNZg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 jss@^9.7.0:
   version "9.8.7"
   resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05"
@@ -8642,7 +8778,7 @@ react-docgen@^3.0.0-beta11:
     node-dir "^0.1.10"
     recast "^0.16.0"
 
-react-dom@^16.5.1, react-dom@^16.6.3, react-dom@^16.7.0:
+react-dom@^16.5.1, react-dom@^16.6.3:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0.tgz#a17b2a7ca89ee7390bc1ed5eb81783c7461748b8"
   dependencies:
@@ -8651,6 +8787,16 @@ react-dom@^16.5.1, react-dom@^16.6.3, react-dom@^16.7.0:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
+react-dom@^16.8.0:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.5.tgz#b3e37d152b49e07faaa8de41fdf562be3463335e"
+  integrity sha512-VIEIvZLpFafsfu4kgmftP5L8j7P1f0YThfVTrANMhZUFMDOsA6e0kfR6wxw/8xxKs4NB59TZYbxNdPCDW34x4w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.5"
+
 react-error-overlay@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
@@ -8701,6 +8847,11 @@ react-is@^16.6.0, react-is@^16.6.1, react-is@^16.7.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
 
+react-is@^16.8.0, react-is@^16.8.5:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.5.tgz#c54ac229dd66b5afe0de5acbe47647c3da692ff8"
+  integrity sha512-sudt2uq5P/2TznPV4Wtdi+Lnq3yaYW8LfvPKLM9BKD8jJNBkxMVyB0C9/GmVhLw7Jbdmndk/73n7XQGeN9A3QQ==
+
 react-is@^16.8.1:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
@@ -8752,7 +8903,7 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.7.0:
+react-test-renderer@^16.0.0-0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.7.0.tgz#1ca96c2b450ab47c36ba92cd8c03fcefc52ea01c"
   dependencies:
@@ -8761,6 +8912,16 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.7.0:
     react-is "^16.7.0"
     scheduler "^0.12.0"
 
+react-test-renderer@^16.8.0:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.5.tgz#4cba7a8aad73f7e8a0bc4379a0fe21632886a563"
+  integrity sha512-/pFpHYQH4f35OqOae/DgOCXJDxBqD3K3akVfDhLgR0qYHoHjnICI/XS9QDwIhbrOFHWL7okVW9kKMaHuKvt2ng==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.5"
+    scheduler "^0.13.5"
+
 react-timer-mixin@^0.13.4:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
@@ -8792,7 +8953,7 @@ react-treebeard@^2.1.0:
     shallowequal "^0.2.2"
     velocity-react "^1.3.1"
 
-react@^16.5.1, react@^16.6.3, react@^16.7.0:
+react@^16.5.1, react@^16.6.3:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.7.0.tgz#b674ec396b0a5715873b350446f7ea0802ab6381"
   dependencies:
@@ -8801,6 +8962,16 @@ react@^16.5.1, react@^16.6.3, react@^16.7.0:
     prop-types "^15.6.2"
     scheduler "^0.12.0"
 
+react@^16.8.0:
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.5.tgz#49be3b655489d74504ad994016407e8a0445de66"
+  integrity sha512-daCb9TD6FZGvJ3sg8da1tRAtIuw29PbKZW++NN4wqkbEvxL+bZpaaYb4xuftW/SpXmgacf1skXl/ddX6CdOlDw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.5"
+
 reactxp@^1.6.0-rc.3:
   version "1.6.0-rc.3"
   resolved "https://registry.yarnpkg.com/reactxp/-/reactxp-1.6.0-rc.3.tgz#dc7be51ec47129780380fa1f77561d667cfad423"
@@ -9002,6 +9173,11 @@ regenerator-runtime@^0.12.0:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
 
+regenerator-runtime@^0.13.2:
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
+  integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -9342,6 +9518,14 @@ scheduler@^0.12.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.13.5:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.5.tgz#b7226625167041298af3b98088a9dbbf6d7733a8"
+  integrity sha512-K98vjkQX9OIt/riLhp6F+XtDPtMQhqNcf045vsh+pcuvHq+PHy1xCrH3pq1P40m6yR46lpVvVhKdEOtnimuUJw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
@@ -10125,6 +10309,11 @@ tiny-emitter@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
 
+tiny-warning@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
+  integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -10538,6 +10727,13 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
+warning@^4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watch@~0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"

From 6211ef50e3d0d5d88275038734d5b8f0c3e4e697 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 30 Jul 2020 18:14:53 +0200
Subject: [PATCH 2/8] wip

---
 packages/benchmarks/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json
index 0f6508df8..ad653a6b2 100644
--- a/packages/benchmarks/package.json
+++ b/packages/benchmarks/package.json
@@ -3,7 +3,7 @@
   "name": "benchmarks",
   "version": "0.11.2",
   "scripts": {
-    "build": "mkdir -p dist && cp -f index.html dist/index.html && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
+    "build": "rmdir /s dist && mkdir dist && copy \"index.html\" \"dist/index.html\" && ./node_modules/.bin/webpack-cli --config ./webpack.config.js",
     "release": "NODE_ENV=production yarn build && git checkout gh-pages && rm -rf ../../benchmarks && mv dist ../../benchmarks && git add -A && git commit -m \"Benchmarks deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {

From 98bfa0c397ab57980c0150b0963ec9780f7b3126 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 30 Jul 2020 20:03:46 +0200
Subject: [PATCH 3/8] removed precommit

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 46460851d..c217c4b00 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
     "jest": "jest --config ./scripts/jest/config.js",
     "lint": "yarn lint:check --fix",
     "lint:check": "eslint packages scripts",
-    // "precommit": "lint-staged",
     "prerelease": "yarn test && yarn compile && yarn compile:commonjs",
     "release": "node ./scripts/release/publish.js",
     "postrelease": "yarn benchmarks:release && yarn docs:release",

From f3983c97333df0cc149eb609ba34fecff23d48a1 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 30 Jul 2020 20:10:59 +0200
Subject: [PATCH 4/8] Update packages/benchmarks/src/impl.js

---
 packages/benchmarks/src/impl.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/benchmarks/src/impl.js b/packages/benchmarks/src/impl.js
index be99abdfc..4ac73d948 100644
--- a/packages/benchmarks/src/impl.js
+++ b/packages/benchmarks/src/impl.js
@@ -2,7 +2,6 @@
 
 import { type Component } from 'react';
 import packageJson from '../package.json';
-console.log(packageJson);
 const context = require.context('./implementations/', true, /index\.js$/);
 const { dependencies } = packageJson;
 

From 4a01d718cf9b6790e4cbbc0cacd563ef25fd82f4 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 30 Jul 2020 20:22:11 +0200
Subject: [PATCH 5/8] reverted some changes

---
 .../src/exports/ProgressBar/index.js          | 21 +++--
 .../src/exports/TextInput/index.js            | 23 +++---
 .../src/exports/TouchableHighlight/index.js   | 46 +++++------
 .../src/hooks/usePressEvents/index.js         | 24 +++---
 .../src/hooks/useResponderEvents/index.js     | 78 +++++++++----------
 5 files changed, 84 insertions(+), 108 deletions(-)

diff --git a/packages/react-native-web/src/exports/ProgressBar/index.js b/packages/react-native-web/src/exports/ProgressBar/index.js
index 92e0a98b3..4ac2b4e2c 100644
--- a/packages/react-native-web/src/exports/ProgressBar/index.js
+++ b/packages/react-native-web/src/exports/ProgressBar/index.js
@@ -35,17 +35,14 @@ const ProgressBar = forwardRef<ProgressBarProps, *>((props, ref) => {
   const percentageProgress = progress * 100;
 
   const progressRef = useRef(null);
-  useEffect(
-    () => {
-      const width = indeterminate ? '25%' : `${percentageProgress}%`;
-      if (progressRef.current != null) {
-        progressRef.current.setNativeProps({
-          style: { width }
-        });
-      }
-    },
-    [indeterminate, percentageProgress, progressRef]
-  );
+  useEffect(() => {
+    const width = indeterminate ? '25%' : `${percentageProgress}%`;
+    if (progressRef.current != null) {
+      progressRef.current.setNativeProps({
+        style: { width }
+      });
+    }
+  }, [indeterminate, percentageProgress, progressRef]);
 
   return (
     <View
@@ -93,4 +90,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default ProgressBar;
+export default ProgressBar;
\ No newline at end of file
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index 12364e382..f51e38a36 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -312,18 +312,15 @@ const TextInput = forwardRef<TextInputProps, *>((props, forwardedRef) => {
     }
   }
 
-  useLayoutEffect(
-    () => {
-      const node = hostRef.current;
-      if (node != null && selection != null) {
-        setSelection(node, selection);
-      }
-      if (document.activeElement === node) {
-        TextInputState._currentlyFocusedNode = node;
-      }
-    },
-    [hostRef, selection]
-  );
+  useLayoutEffect(() => {
+    const node = hostRef.current;
+    if (node != null && selection != null) {
+      setSelection(node, selection);
+    }
+    if (document.activeElement === node) {
+      TextInputState._currentlyFocusedNode = node;
+    }
+  }, [hostRef, selection]);
 
   const component = multiline ? 'textarea' : 'input';
   const classList = [classes.textinput];
@@ -396,4 +393,4 @@ const classes = css.create({
   }
 });
 
-export default TextInput;
+export default TextInput;
\ No newline at end of file
diff --git a/packages/react-native-web/src/exports/TouchableHighlight/index.js b/packages/react-native-web/src/exports/TouchableHighlight/index.js
index a76d4152f..f06713505 100644
--- a/packages/react-native-web/src/exports/TouchableHighlight/index.js
+++ b/packages/react-native-web/src/exports/TouchableHighlight/index.js
@@ -104,33 +104,27 @@ function TouchableHighlight(props: Props, forwardedRef): React.Node {
     testOnly_pressed === true ? createExtraStyles(activeOpacity, underlayColor) : null
   );
 
-  const showUnderlay = useCallback(
-    () => {
-      if (!hasPressHandler(props)) {
-        return;
-      }
-      setExtraStyles(createExtraStyles(activeOpacity, underlayColor));
-      if (onShowUnderlay != null) {
-        onShowUnderlay();
-      }
-    },
-    [activeOpacity, onShowUnderlay, props, underlayColor]
-  );
+  const showUnderlay = useCallback(() => {
+    if (!hasPressHandler(props)) {
+      return;
+    }
+    setExtraStyles(createExtraStyles(activeOpacity, underlayColor));
+    if (onShowUnderlay != null) {
+      onShowUnderlay();
+    }
+  }, [activeOpacity, onShowUnderlay, props, underlayColor]);
 
-  const hideUnderlay = useCallback(
-    () => {
-      if (testOnly_pressed === true) {
-        return;
-      }
-      if (hasPressHandler(props)) {
-        setExtraStyles(null);
-        if (onHideUnderlay != null) {
-          onHideUnderlay();
-        }
+  const hideUnderlay = useCallback(() => {
+    if (testOnly_pressed === true) {
+      return;
+    }
+    if (hasPressHandler(props)) {
+      setExtraStyles(null);
+      if (onHideUnderlay != null) {
+        onHideUnderlay();
       }
-    },
-    [onHideUnderlay, props, testOnly_pressed]
-  );
+    }
+  }, [onHideUnderlay, props, testOnly_pressed]);
 
   const pressConfig = useMemo(
     () => ({
@@ -217,4 +211,4 @@ MemoedTouchableHighlight.displayName = 'TouchableHighlight';
 export default (MemoedTouchableHighlight: React.AbstractComponent<
   Props,
   React.ElementRef<typeof View>
->);
+>);
\ No newline at end of file
diff --git a/packages/react-native-web/src/hooks/usePressEvents/index.js b/packages/react-native-web/src/hooks/usePressEvents/index.js
index d9f5547ba..fce33e19d 100644
--- a/packages/react-native-web/src/hooks/usePressEvents/index.js
+++ b/packages/react-native-web/src/hooks/usePressEvents/index.js
@@ -23,25 +23,19 @@ export default function usePressEvents(hostRef: any, config: PressResponderConfi
   const pressResponder = pressResponderRef.current;
 
   // Re-configure to use the current node and configuration.
-  useEffect(
-    () => {
-      pressResponder.configure(config);
-    },
-    [config, pressResponder]
-  );
+  useEffect(() => {
+    pressResponder.configure(config);
+  }, [config, pressResponder]);
 
   // Reset the `pressResponder` when cleanup needs to occur. This is
   // a separate effect because we do not want to rest the responder when `config` changes.
-  useEffect(
-    () => {
-      return () => {
-        pressResponder.reset();
-      };
-    },
-    [pressResponder]
-  );
+  useEffect(() => {
+    return () => {
+      pressResponder.reset();
+    };
+  }, [pressResponder]);
 
   useDebugValue(config);
 
   return pressResponder.getEventHandlers();
-}
+}
\ No newline at end of file
diff --git a/packages/react-native-web/src/hooks/useResponderEvents/index.js b/packages/react-native-web/src/hooks/useResponderEvents/index.js
index 8a0e15075..465e3187d 100644
--- a/packages/react-native-web/src/hooks/useResponderEvents/index.js
+++ b/packages/react-native-web/src/hooks/useResponderEvents/index.js
@@ -40,53 +40,47 @@ export default function useResponderEvents(hostRef: any, config: ResponderConfig
   // This is a separate effects so it doesn't run when the config changes.
   // On initial mount, attach global listeners if needed.
   // On unmount, remove node potentially attached to the Responder System.
-  React.useEffect(
-    () => {
-      ResponderSystem.attachListeners();
-      return () => {
-        ResponderSystem.removeNode(id);
-      };
-    },
-    [id]
-  );
+  React.useEffect(() => {
+    ResponderSystem.attachListeners();
+    return () => {
+      ResponderSystem.removeNode(id);
+    };
+  }, [id]);
 
   // Register and unregister with the Responder System as necessary
-  React.useEffect(
-    () => {
-      const {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture
-      } = config;
+  React.useEffect(() => {
+    const {
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture
+    } = config;
 
-      const requiresResponderSystem =
-        onMoveShouldSetResponder != null ||
-        onMoveShouldSetResponderCapture != null ||
-        onScrollShouldSetResponder != null ||
-        onScrollShouldSetResponderCapture != null ||
-        onSelectionChangeShouldSetResponder != null ||
-        onSelectionChangeShouldSetResponderCapture != null ||
-        onStartShouldSetResponder != null ||
-        onStartShouldSetResponderCapture != null;
+    const requiresResponderSystem =
+      onMoveShouldSetResponder != null ||
+      onMoveShouldSetResponderCapture != null ||
+      onScrollShouldSetResponder != null ||
+      onScrollShouldSetResponderCapture != null ||
+      onSelectionChangeShouldSetResponder != null ||
+      onSelectionChangeShouldSetResponderCapture != null ||
+      onStartShouldSetResponder != null ||
+      onStartShouldSetResponderCapture != null;
 
-      const node = hostRef.current;
+    const node = hostRef.current;
 
-      if (requiresResponderSystem) {
-        ResponderSystem.addNode(id, node, config);
-        isAttachedRef.current = true;
-      } else if (isAttachedRef.current) {
-        ResponderSystem.removeNode(id);
-        isAttachedRef.current = false;
-      }
-    },
-    [config, hostRef, id]
-  );
+    if (requiresResponderSystem) {
+      ResponderSystem.addNode(id, node, config);
+      isAttachedRef.current = true;
+    } else if (isAttachedRef.current) {
+      ResponderSystem.removeNode(id);
+      isAttachedRef.current = false;
+    }
+  }, [config, hostRef, id]);
 
   React.useDebugValue({ isResponder: hostRef.current === ResponderSystem.getResponderNode() });
   React.useDebugValue(config);
-}
+}
\ No newline at end of file

From 5adda94f3ab5047a62f09f026d1f08dc5af976c8 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 30 Jul 2020 21:11:40 +0200
Subject: [PATCH 6/8] wip

---
 packages/benchmarks/package.json              |   1 +
 .../src/implementations/@emotion/Box.js       |  14 +-
 .../material-ui-system-box/Box.js             |  54 +++++++
 .../material-ui-system-box/Dot.js             |  31 ++++
 .../material-ui-system-box/Provider.js        |   2 +
 .../material-ui-system-box/View.js            |  27 ++++
 .../material-ui-system-box/index.js           |  11 ++
 .../src/exports/Image/index.js                |  85 +++++------
 .../src/hooks/useElementLayout.js             |  31 ++--
 yarn.lock                                     | 143 +++++++++++++++---
 10 files changed, 310 insertions(+), 89 deletions(-)
 create mode 100644 packages/benchmarks/src/implementations/material-ui-system-box/Box.js
 create mode 100644 packages/benchmarks/src/implementations/material-ui-system-box/Dot.js
 create mode 100644 packages/benchmarks/src/implementations/material-ui-system-box/Provider.js
 create mode 100644 packages/benchmarks/src/implementations/material-ui-system-box/View.js
 create mode 100644 packages/benchmarks/src/implementations/material-ui-system-box/index.js

diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json
index b666abac4..64c3c3bdb 100644
--- a/packages/benchmarks/package.json
+++ b/packages/benchmarks/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@emotion/core": "^10.0.28",
+    "@material-ui/core": "^4.11.0",
     "@material-ui/styles": "^4.0.0-alpha.6",
     "aphrodite": "^2.4.0",
     "classnames": "^2.2.6",
diff --git a/packages/benchmarks/src/implementations/@emotion/Box.js b/packages/benchmarks/src/implementations/@emotion/Box.js
index f3af5dd06..3572095e0 100644
--- a/packages/benchmarks/src/implementations/@emotion/Box.js
+++ b/packages/benchmarks/src/implementations/@emotion/Box.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import View from './View';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
 const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
   <View
     {...other}
-    style={[
-      styles[`color${color}`],
-      fixed && styles.fixed,
-      layout === 'row' && styles.row,
-      outer && styles.outer
-    ]}
+    css={{
+      ...styles[`color${color}`],
+      ...(fixed && styles.fixed),
+      ...(layout === 'row' && styles.row),
+      ...(outer && styles.outer),
+    }}
   />
 );
 
diff --git a/packages/benchmarks/src/implementations/material-ui-system-box/Box.js b/packages/benchmarks/src/implementations/material-ui-system-box/Box.js
new file mode 100644
index 000000000..04e44cd69
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui-system-box/Box.js
@@ -0,0 +1,54 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import classnames from 'classnames';
+import View from './View';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  outer: {
+    alignSelf: 'flex-start',
+    padding: 4
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    backgroundColor: '#14171A'
+  },
+  color1: {
+    backgroundColor: '#AAB8C2'
+  },
+  color2: {
+    backgroundColor: '#E6ECF0'
+  },
+  color3: {
+    backgroundColor: '#FFAD1F'
+  },
+  color4: {
+    backgroundColor: '#F45D22'
+  },
+  color5: {
+    backgroundColor: '#E0245E'
+  },
+  fixed: {
+    width: 6,
+    height: 6
+  }
+});
+
+function Box({ color, fixed = false, layout = 'column', outer = false, ...other }) {
+  const classes = useStyles();
+
+  return (
+    <View
+      {...other}
+      className={classnames(classes[`color${color}`], {
+        [classes.fixed]: fixed,
+        [classes.outer]: outer,
+        [classes.row]: layout === 'row'
+      })}
+    />
+  );
+}
+
+export default Box;
diff --git a/packages/benchmarks/src/implementations/material-ui-system-box/Dot.js b/packages/benchmarks/src/implementations/material-ui-system-box/Dot.js
new file mode 100644
index 000000000..c03c5cf97
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui-system-box/Dot.js
@@ -0,0 +1,31 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: {
+    position: 'absolute',
+    cursor: 'pointer',
+    width: 0,
+    height: 0,
+    borderColor: 'transparent',
+    borderStyle: 'solid',
+    borderTopWidth: 0,
+    transform: 'translate(50%, 50%)'
+  },
+  dynamic: ({ size, x, y, children, color }) => ({
+    borderBottomColor: color,
+    borderRightWidth: `${size / 2}px`,
+    borderBottomWidth: `${size / 2}px`,
+    borderLeftWidth: `${size / 2}px`,
+    marginLeft: `${x}px`,
+    marginTop: `${y}px`
+  })
+});
+
+function Dot(props) {
+  const classes = useStyles(props);
+  return <div className={`${classes.root} ${classes.dynamic}`}>{props.children}</div>;
+}
+
+export default Dot;
diff --git a/packages/benchmarks/src/implementations/material-ui-system-box/Provider.js b/packages/benchmarks/src/implementations/material-ui-system-box/Provider.js
new file mode 100644
index 000000000..864fc43a7
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui-system-box/Provider.js
@@ -0,0 +1,2 @@
+import View from './View';
+export default View;
diff --git a/packages/benchmarks/src/implementations/material-ui-system-box/View.js b/packages/benchmarks/src/implementations/material-ui-system-box/View.js
new file mode 100644
index 000000000..b332d42ae
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui-system-box/View.js
@@ -0,0 +1,27 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
+
+const useStyles = makeStyles({
+  root: {
+    alignItems: 'stretch',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexBasis: 'auto',
+    flexDirection: 'column',
+    flexShrink: 0,
+    // fix flexbox bugs
+    minHeight: 0,
+    minWidth: 0
+  }
+});
+
+function View(props) {
+  const classes = useStyles();
+  return <Box {...props} m={0} p={0} position="relative" className={`${classes.root} ${props.className}`} />;
+}
+
+export default View;
diff --git a/packages/benchmarks/src/implementations/material-ui-system-box/index.js b/packages/benchmarks/src/implementations/material-ui-system-box/index.js
new file mode 100644
index 000000000..f32ff155d
--- /dev/null
+++ b/packages/benchmarks/src/implementations/material-ui-system-box/index.js
@@ -0,0 +1,11 @@
+import Box from './Box';
+import Dot from './Dot';
+import Provider from './Provider';
+import View from './View';
+
+export default {
+  Box,
+  Dot,
+  Provider,
+  View
+};
diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index ec2da1531..68affafd0 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -224,56 +224,53 @@ const Image = forwardRef<ImageProps, *>((props, ref) => {
   }
 
   // Image loading
-  useEffect(
-    () => {
-      abortPendingRequest();
+  useEffect(() => {
+    abortPendingRequest();
 
-      const uri = resolveAssetUri(source);
-
-      if (uri != null) {
-        updateState(LOADING);
-        if (onLoadStart) {
-          onLoadStart();
-        }
+    const uri = resolveAssetUri(source);
 
-        requestRef.current = ImageLoader.load(
-          uri,
-          function load(e) {
-            updateState(LOADED);
-            if (onLoad) {
-              onLoad();
-            }
-            if (onLoadEnd) {
-              onLoadEnd();
-            }
-          },
-          function error() {
-            updateState(ERRORED);
-            if (onError) {
-              onError({
-                nativeEvent: {
-                  error: `Failed to load resource ${uri} (404)`
-                }
-              });
-            }
-            if (onLoadEnd) {
-              onLoadEnd();
-            }
-          }
-        );
+    if (uri != null) {
+      updateState(LOADING);
+      if (onLoadStart) {
+        onLoadStart();
       }
 
-      function abortPendingRequest() {
-        if (requestRef.current != null) {
-          ImageLoader.abort(requestRef.current);
-          requestRef.current = null;
+      requestRef.current = ImageLoader.load(
+        uri,
+        function load(e) {
+          updateState(LOADED);
+          if (onLoad) {
+            onLoad();
+          }
+          if (onLoadEnd) {
+            onLoadEnd();
+          }
+        },
+        function error() {
+          updateState(ERRORED);
+          if (onError) {
+            onError({
+              nativeEvent: {
+                error: `Failed to load resource ${uri} (404)`
+              }
+            });
+          }
+          if (onLoadEnd) {
+            onLoadEnd();
+          }
         }
+      );
+    }
+
+    function abortPendingRequest() {
+      if (requestRef.current != null) {
+        ImageLoader.abort(requestRef.current);
+        requestRef.current = null;
       }
+    }
 
-      return abortPendingRequest;
-    },
-    [source, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]
-  );
+    return abortPendingRequest;
+  }, [source, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
 
   return (
     <View
@@ -375,4 +372,4 @@ const resizeModeStyles = StyleSheet.create({
   }
 });
 
-export default Image;
+export default Image;
\ No newline at end of file
diff --git a/packages/react-native-web/src/hooks/useElementLayout.js b/packages/react-native-web/src/hooks/useElementLayout.js
index b64b738cc..a91571417 100644
--- a/packages/react-native-web/src/hooks/useElementLayout.js
+++ b/packages/react-native-web/src/hooks/useElementLayout.js
@@ -65,22 +65,19 @@ export default function useElementLayout(
 ) {
   const observer = getResizeObserver();
 
-  useLayoutEffect(
-    () => {
-      const node = ref.current;
-      if (node != null && observer != null && typeof onLayout === 'function') {
-        observer.observe(node);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node != null && observer != null && typeof onLayout === 'function') {
+      observer.observe(node);
+      // $FlowFixMe
+      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
+    }
+    return () => {
+      if (node != null && observer != null) {
+        observer.unobserve(node);
         // $FlowFixMe
-        node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
+        delete node[DOM_LAYOUT_HANDLER_NAME];
       }
-      return () => {
-        if (node != null && observer != null) {
-          observer.unobserve(node);
-          // $FlowFixMe
-          delete node[DOM_LAYOUT_HANDLER_NAME];
-        }
-      };
-    },
-    [ref, onLayout, observer]
-  );
-}
+    };
+  }, [ref, onLayout, observer]);
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 7b09a4720..c6db4355d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2142,7 +2142,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.2.0", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.2.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.5.tgz#303d8bd440ecd5a491eae6117fd3367698674c5c"
   integrity sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==
@@ -2462,6 +2462,11 @@
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
 
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
 "@emotion/is-prop-valid@0.8.3":
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz#cbe62ddbea08aa022cdf72da3971570a33190d29"
@@ -2836,6 +2841,24 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
+"@material-ui/core@^4.11.0":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.0.tgz#b69b26e4553c9e53f2bfaf1053e216a0af9be15a"
+  integrity sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.10.0"
+    "@material-ui/system" "^4.9.14"
+    "@material-ui/types" "^5.1.0"
+    "@material-ui/utils" "^4.10.2"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+    react-transition-group "^4.4.0"
+
 "@material-ui/styles@^4.0.0-alpha.6":
   version "4.0.0-alpha.6"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.0.0-alpha.6.tgz#f6ec3655865bbb9a8439cb70f620e0260b32508e"
@@ -2858,6 +2881,43 @@
     prop-types "^15.7.2"
     warning "^4.0.1"
 
+"@material-ui/styles@^4.10.0":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"
+  integrity sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "^5.1.0"
+    "@material-ui/utils" "^4.9.6"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.0.3"
+    jss-plugin-camel-case "^10.0.3"
+    jss-plugin-default-unit "^10.0.3"
+    jss-plugin-global "^10.0.3"
+    jss-plugin-nested "^10.0.3"
+    jss-plugin-props-sort "^10.0.3"
+    jss-plugin-rule-value-function "^10.0.3"
+    jss-plugin-vendor-prefixer "^10.0.3"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.9.14":
+  version "4.9.14"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.9.14.tgz#4b00c48b569340cefb2036d0596b93ac6c587a5f"
+  integrity sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.9.6"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
 "@material-ui/utils@^4.0.0-alpha.4":
   version "4.0.0-alpha.4"
   resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.0.0-alpha.4.tgz#3966ec0c7fc2d42594092799bf464faf3d6d8633"
@@ -2867,6 +2927,15 @@
     prop-types "^15.7.2"
     react-is "^16.8.0"
 
+"@material-ui/utils@^4.10.2", "@material-ui/utils@^4.9.6":
+  version "4.10.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.10.2.tgz#3fd5470ca61b7341f1e0468ac8f29a70bf6df321"
+  integrity sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+
 "@mdx-js/loader@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.5.2.tgz#c263b52b645d416e641d0d4e749f4f75f031bf64"
@@ -3737,6 +3806,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
+  integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "16.7.18"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.18.tgz#f4ce0d539a893dd61e36cd11ae3a5e54f5a48337"
@@ -5823,6 +5899,11 @@ clsx@^1.0.2:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.3.tgz#e164004f4064b372888f20fdafbd436fb960bac9"
   integrity sha512-xLoSw6DMp7YvbEeLrQJBcWWRRerdHrU1WHoL1hYJOKUeDpVMRq7pv7NI2JHQbCRAe5ptINNzhdYmtfN6MsdCUw==
 
+clsx@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 cmd-shim@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-3.0.3.tgz#2c35238d3df37d98ecdd7d5f6b8dc6b21cadc7cb"
@@ -6426,6 +6507,11 @@ csstype@^2.2.0, csstype@^2.5.5, csstype@^2.5.7:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.0.tgz#6cf7b2fa7fc32aab3d746802c244d4eda71371a2"
 
+csstype@^2.5.2, csstype@^2.6.7:
+  version "2.6.13"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
+  integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
+
 csstype@^2.6.5:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
@@ -6771,6 +6857,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
+  integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^2.6.7"
+
 dom-serializer@0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -8645,7 +8739,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -8997,7 +9091,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -9006,11 +9100,6 @@ inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
 
-inherits@2.0.4, inherits@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-  
 inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
@@ -10359,7 +10448,7 @@ jss-plugin-camel-case@^10.0.0-alpha.16:
     hyphenate-style-name "^1.0.3"
     jss "10.0.0-alpha.16"
 
-jss-plugin-camel-case@^10.3.0:
+jss-plugin-camel-case@^10.0.3, jss-plugin-camel-case@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.3.0.tgz#ae4da53b39a6e3ea94b70a20fc41c11f0b87386a"
   integrity sha512-tadWRi/SLWqLK3EUZEdDNJL71F3ST93Zrl9JYMjV0QDqKPAl0Liue81q7m/nFUpnSTXczbKDy4wq8rI8o7WFqA==
@@ -10385,7 +10474,7 @@ jss-plugin-default-unit@^10.0.0-alpha.16:
     "@babel/runtime" "^7.3.1"
     jss "10.0.0-alpha.16"
 
-jss-plugin-default-unit@^10.3.0:
+jss-plugin-default-unit@^10.0.3, jss-plugin-default-unit@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.3.0.tgz#cd74cf5088542620a82591f76c62c6b43a7e50a6"
   integrity sha512-tT5KkIXAsZOSS9WDSe8m8lEHIjoEOj4Pr0WrG0WZZsMXZ1mVLFCSsD2jdWarQWDaRNyMj/I4d7czRRObhOxSuw==
@@ -10418,7 +10507,7 @@ jss-plugin-global@^10.0.0-alpha.16:
     "@babel/runtime" "^7.3.1"
     jss "10.0.0-alpha.16"
 
-jss-plugin-global@^10.3.0:
+jss-plugin-global@^10.0.3, jss-plugin-global@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.3.0.tgz#6b883e74900bb71f65ac2b19bea78f7d1e85af3f"
   integrity sha512-etYTG/y3qIR/vxZnKY+J3wXwObyBDNhBiB3l/EW9/pE3WHE//BZdK8LFvQcrCO48sZW1Z6paHo6klxUPP7WbzA==
@@ -10435,7 +10524,7 @@ jss-plugin-nested@^10.0.0-alpha.16:
     jss "10.0.0-alpha.16"
     tiny-warning "^1.0.2"
 
-jss-plugin-nested@^10.3.0:
+jss-plugin-nested@^10.0.3, jss-plugin-nested@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.3.0.tgz#ae8aceac95e09c3d40c991ea32403fb647d9e0a8"
   integrity sha512-qWiEkoXNEkkZ+FZrWmUGpf+zBsnEOmKXhkjNX85/ZfWhH9dfGxUCKuJFuOWFM+rjQfxV4csfesq4hY0jk8Qt0w==
@@ -10452,7 +10541,7 @@ jss-plugin-props-sort@^10.0.0-alpha.16:
     "@babel/runtime" "^7.3.1"
     jss "10.0.0-alpha.16"
 
-jss-plugin-props-sort@^10.3.0:
+jss-plugin-props-sort@^10.0.3, jss-plugin-props-sort@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.3.0.tgz#5b0625f87b6431a7969c56b0d8c696525969bfe4"
   integrity sha512-boetORqL/lfd7BWeFD3K+IyPqyIC+l3CRrdZr+NPq7Noqp+xyg/0MR7QisgzpxCEulk+j2CRcEUoZsvgPC4nTg==
@@ -10468,7 +10557,7 @@ jss-plugin-rule-value-function@^10.0.0-alpha.16:
     "@babel/runtime" "^7.3.1"
     jss "10.0.0-alpha.16"
 
-jss-plugin-rule-value-function@^10.3.0:
+jss-plugin-rule-value-function@^10.0.3, jss-plugin-rule-value-function@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.3.0.tgz#498b0e2bae16cb316a6bdb73fd783cf9604ba747"
   integrity sha512-7WiMrKIHH3rwxTuJki9+7nY11r1UXqaUZRhHvqTD4/ZE+SVhvtD5Tx21ivNxotwUSleucA/8boX+NF21oXzr5Q==
@@ -10504,7 +10593,7 @@ jss-plugin-vendor-prefixer@^10.0.0-alpha.16:
     css-vendor "^2.0.1"
     jss "10.0.0-alpha.16"
 
-jss-plugin-vendor-prefixer@^10.3.0:
+jss-plugin-vendor-prefixer@^10.0.3, jss-plugin-vendor-prefixer@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.3.0.tgz#b09c13a4d05a055429d8a24e19cc01ce049f0ed4"
   integrity sha512-sZQbrcZyP5V0ADjCLwUA1spVWoaZvM7XZ+2fSeieZFBj31cRsnV7X70FFDerMHeiHAXKWzYek+67nMDjhrZAVQ==
@@ -10542,7 +10631,7 @@ jss@10.0.0-alpha.16, jss@^10.0.0-alpha.16:
     is-in-browser "^1.1.3"
     tiny-warning "^1.0.2"
 
-jss@^10.3.0:
+jss@^10.0.3, jss@^10.3.0:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/jss/-/jss-10.3.0.tgz#2cf7be265f72b59c1764d816fdabff1c5dd18326"
   integrity sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q==
@@ -10924,12 +11013,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4:
-  version "4.17.19"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
-  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
-
-lodash@^4.17.19:
+lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
@@ -12609,6 +12693,11 @@ polished@^3.3.1:
   dependencies:
     "@babel/runtime" "^7.4.5"
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
@@ -13418,6 +13507,16 @@ react-timer-mixin@^0.13.4:
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
   integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
 
+react-transition-group@^4.4.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.10.2, react@^16.8.3:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"

From 21675baafab1b941fe7c3737579a211ce043aa39 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Thu, 30 Jul 2020 21:28:48 +0200
Subject: [PATCH 7/8] box

---
 .../src/implementations/material-ui-system-box/Dot.js      | 7 +++----
 .../src/implementations/material-ui-system-box/View.js     | 5 ++++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/benchmarks/src/implementations/material-ui-system-box/Dot.js b/packages/benchmarks/src/implementations/material-ui-system-box/Dot.js
index c03c5cf97..2f6b6e9a8 100644
--- a/packages/benchmarks/src/implementations/material-ui-system-box/Dot.js
+++ b/packages/benchmarks/src/implementations/material-ui-system-box/Dot.js
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { makeStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
 
 const useStyles = makeStyles({
   root: {
@@ -13,19 +14,17 @@ const useStyles = makeStyles({
     borderTopWidth: 0,
     transform: 'translate(50%, 50%)'
   },
-  dynamic: ({ size, x, y, children, color }) => ({
+  dynamic: ({ size, color }) => ({
     borderBottomColor: color,
     borderRightWidth: `${size / 2}px`,
     borderBottomWidth: `${size / 2}px`,
     borderLeftWidth: `${size / 2}px`,
-    marginLeft: `${x}px`,
-    marginTop: `${y}px`
   })
 });
 
 function Dot(props) {
   const classes = useStyles(props);
-  return <div className={`${classes.root} ${classes.dynamic}`}>{props.children}</div>;
+  return <Box ml={`${props.x}px`} mt={`${props.y}px`} className={`${classes.root} ${classes.dynamic}`}>{props.children}</Box>;
 }
 
 export default Dot;
diff --git a/packages/benchmarks/src/implementations/material-ui-system-box/View.js b/packages/benchmarks/src/implementations/material-ui-system-box/View.js
index b332d42ae..6fad2f33b 100644
--- a/packages/benchmarks/src/implementations/material-ui-system-box/View.js
+++ b/packages/benchmarks/src/implementations/material-ui-system-box/View.js
@@ -13,6 +13,9 @@ const useStyles = makeStyles({
     flexBasis: 'auto',
     flexDirection: 'column',
     flexShrink: 0,
+    margin: 0,
+    padding: 0,
+    position: 'relative',
     // fix flexbox bugs
     minHeight: 0,
     minWidth: 0
@@ -21,7 +24,7 @@ const useStyles = makeStyles({
 
 function View(props) {
   const classes = useStyles();
-  return <Box {...props} m={0} p={0} position="relative" className={`${classes.root} ${props.className}`} />;
+  return <Box {...props} className={`${classes.root} ${props.className}`} />;
 }
 
 export default View;

From 2431c2ee88449bca87a86ef6904d91012d705f47 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Sat, 1 Aug 2020 22:23:29 +0200
Subject: [PATCH 8/8] dynamic props

---
 .../src/implementations/material-ui/Box.js    | 44 +++++-----
 .../src/implementations/react-jss/Box.js      | 84 +++++++++----------
 2 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/packages/benchmarks/src/implementations/material-ui/Box.js b/packages/benchmarks/src/implementations/material-ui/Box.js
index 04e44cd69..88d267e5d 100644
--- a/packages/benchmarks/src/implementations/material-ui/Box.js
+++ b/packages/benchmarks/src/implementations/material-ui/Box.js
@@ -4,6 +4,25 @@ import classnames from 'classnames';
 import View from './View';
 import { makeStyles } from '@material-ui/styles';
 
+const getColor = color => {
+  switch (color) {
+    case 0:
+      return '#14171A';
+    case 1:
+      return '#AAB8C2';
+    case 2:
+      return '#E6ECF0';
+    case 3:
+      return '#FFAD1F';
+    case 4:
+      return '#F45D22';
+    case 5:
+      return '#E0245E';
+    default:
+      return 'transparent';
+  }
+};
+
 const useStyles = makeStyles({
   outer: {
     alignSelf: 'flex-start',
@@ -12,24 +31,9 @@ const useStyles = makeStyles({
   row: {
     flexDirection: 'row'
   },
-  color0: {
-    backgroundColor: '#14171A'
-  },
-  color1: {
-    backgroundColor: '#AAB8C2'
-  },
-  color2: {
-    backgroundColor: '#E6ECF0'
-  },
-  color3: {
-    backgroundColor: '#FFAD1F'
-  },
-  color4: {
-    backgroundColor: '#F45D22'
-  },
-  color5: {
-    backgroundColor: '#E0245E'
-  },
+  background: (props) => ({
+    backgroundColor: getColor(props.color),
+  }),
   fixed: {
     width: 6,
     height: 6
@@ -37,12 +41,12 @@ const useStyles = makeStyles({
 });
 
 function Box({ color, fixed = false, layout = 'column', outer = false, ...other }) {
-  const classes = useStyles();
+  const classes = useStyles({ color });
 
   return (
     <View
       {...other}
-      className={classnames(classes[`color${color}`], {
+      className={classnames(classes.background, {
         [classes.fixed]: fixed,
         [classes.outer]: outer,
         [classes.row]: layout === 'row'
diff --git a/packages/benchmarks/src/implementations/react-jss/Box.js b/packages/benchmarks/src/implementations/react-jss/Box.js
index e48d417f1..b17d30cf4 100644
--- a/packages/benchmarks/src/implementations/react-jss/Box.js
+++ b/packages/benchmarks/src/implementations/react-jss/Box.js
@@ -1,50 +1,48 @@
-import classnames from 'classnames';
-import injectSheet from 'react-jss';
+import { createUseStyles } from 'react-jss';
 import React from 'react';
 import View from './View';
 
-const Box = ({ classes, color, fixed = false, layout = 'column', outer = false, ...other }) => (
-  <View
+const useStyles = createUseStyles(theme => ({
+  root: (props) => ({
+    ...(props.outer && {
+      alignSelf: 'flex-start',
+      padding: 4
+    }),
+    ...(props.layout === 'row' && {
+      flexDirection: 'row'
+    }),
+    ...(props.color === 0 && {
+      backgroundColor: '#14171A'
+    }),
+    ...(props.color === 1 && {
+      backgroundColor: '#AAB8C2'
+    }),
+    ...(props.color === 2 && {
+      backgroundColor: '#E6ECF0'
+    }),
+    ...(props.color === 3 && {
+      backgroundColor: '#FFAD1F'
+    }),
+    ...(props.color === 4 && {
+      backgroundColor: '#F45D22'
+    }),
+    ...(props.color === 5 && {
+      backgroundColor: '#E0245E'
+    }),
+    ...(props.fixed && {
+      width: 6,
+      height: 6
+    }),
+  })
+}));
+
+const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => {
+  const classes = useStyles({ color, fixed, layout, outer, ...other });
+
+  return <View
     {...other}
-    className={classnames({
-      [classes[`color${color}`]]: true,
-      [classes.fixed]: fixed,
-      [classes.row]: layout === 'row',
-      [classes.outer]: outer
-    })}
+    className={classes.root}
   />
-);
-
-const styles = {
-  outer: {
-    alignSelf: 'flex-start',
-    padding: 4
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  color0: {
-    backgroundColor: '#14171A'
-  },
-  color1: {
-    backgroundColor: '#AAB8C2'
-  },
-  color2: {
-    backgroundColor: '#E6ECF0'
-  },
-  color3: {
-    backgroundColor: '#FFAD1F'
-  },
-  color4: {
-    backgroundColor: '#F45D22'
-  },
-  color5: {
-    backgroundColor: '#E0245E'
-  },
-  fixed: {
-    width: 6,
-    height: 6
-  }
 };
 
-export default injectSheet(styles)(Box);
+export default Box;