diff --git a/web/.babelrc b/web/.babelrc index 26132259d1f6..4133323fba06 100644 --- a/web/.babelrc +++ b/web/.babelrc @@ -18,6 +18,7 @@ "src": "./src" } } - ] + ], + "babel-plugin-styled-components" ] } diff --git a/web/package.json b/web/package.json index 5e063add5f73..445ba2b1cdab 100644 --- a/web/package.json +++ b/web/package.json @@ -4,17 +4,22 @@ "private": true, "dependencies": { "@hammerframework/hammer-web": "0.0.0", + "immer": "^3.1.3", "prop-types": "^15.7.2", "react": "^16.8.6", "react-dom": "^16.8.6", - "styled-components": "^4.3.2" + "react-textarea-autosize": "^7.1.0", + "rebass": "^3.1.1", + "rebass-extend": "^1.0.1", + "styled-components": "^4.3.2", + "styled-system": "^5.0.12" }, "devDependencies": { - "directory-named-webpack-plugin": "^4.0.1", "babel-loader": "^8.0.6", "babel-plugin-module-resolver": "^3.2.0", - "babel-plugin-styled-components": "^1.10.5", + "babel-plugin-styled-components": "^1.10.6", "css-loader": "^3.0.0", + "directory-named-webpack-plugin": "^4.0.1", "file-loader": "^4.0.0", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.1", diff --git a/web/src/App.js b/web/src/App.js index 9f4e2f4d3a78..751ca4d2d769 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -1,13 +1,17 @@ import ReactDOM from "react-dom"; -import { GraphQLProvider, Query } from "@hammerframework/hammer-web"; +import { GraphQLProvider } from "@hammerframework/hammer-web"; +import { ThemeProvider } from "styled-components"; import "./global.css"; -import Help from "src/components/Help"; +import theme from "src/lib/theme"; +import InvoicePage from "src/pages"; // TODO: Add Router ReactDOM.render( - + + + , document.getElementById("hammer-app") ); diff --git a/web/src/components/AppBar.js b/web/src/components/AppBar.js new file mode 100644 index 000000000000..8aff967da274 --- /dev/null +++ b/web/src/components/AppBar.js @@ -0,0 +1,23 @@ +import { Box } from "src/lib/primitives"; + +export default () => ( + + + Billable + + +); diff --git a/web/src/components/InvoiceInfo.js b/web/src/components/InvoiceInfo.js new file mode 100644 index 000000000000..ecfd521b0920 --- /dev/null +++ b/web/src/components/InvoiceInfo.js @@ -0,0 +1,41 @@ +import React from 'react' +import produce from 'immer' + +import { Box } from 'src/lib/primitives' +import { TextInput } from 'src/components' + +const InvoiceInfo = ({ value, onChange, ...rest }) => { + const handleChange = (rowIndex, colIndex) => newValue => + onChange( + produce(value, draft => { + draft[rowIndex][colIndex].value = newValue + }) + ) + + return ( + + + {value.map((row, rowIndex) => ( + + + + + + + + + ))} + + + ) +} + +export default InvoiceInfo diff --git a/web/src/components/LineItems.js b/web/src/components/LineItems.js new file mode 100644 index 000000000000..5e931e62953d --- /dev/null +++ b/web/src/components/LineItems.js @@ -0,0 +1,128 @@ +import React from 'react' +import produce from 'immer' + +import { Box, Button } from 'src/lib/primitives' +import { TextInput } from 'src/components' + +const LineItems = ({ value, onChange, ...rest }) => { + const handleChange = (rowIndex, colIndex) => newValue => + onChange( + produce(value, draft => { + draft[rowIndex][colIndex].value = newValue + }) + ) + + return ( + + + {value.map((row, rowIndex) => ( + + + + + + + + + + + {rowIndex !== 0 && ( + + + + )} + + ))} + + + + + + + + + + + + ) +} + +export default LineItems diff --git a/web/src/components/Summary.js b/web/src/components/Summary.js new file mode 100644 index 000000000000..2ce6f026c338 --- /dev/null +++ b/web/src/components/Summary.js @@ -0,0 +1,114 @@ +import React from 'react' +import produce from 'immer' + +import { Box } from 'src/lib/primitives' +import { TextInput } from 'src/components' + +const calculateSubtotal = lineItems => { + return lineItems + .slice(1) // remove heading items + .map(([_, { value: quantity }, { value: price }]) => [ + Number(quantity), + Number(price), + ]) + .reduce((subtotal, [quantity, price]) => (subtotal += quantity * price), 0) +} + +const calculatePercentage = (subtotal, row) => { + const percentage = Number(row[1].value) + return subtotal * (percentage / 100) +} + +const calculateTotal = (subtotal, rows) => { + // we only have 1 value at the moment + const percentage = Number(rows[0][1].value) + return subtotal + subtotal * (percentage / 100) +} + +const Summary = ({ value, onChange, lineItems, ...rest }) => { + calculateSubtotal(lineItems) + + const handleChange = (rowIndex, colIndex) => newValue => + onChange( + produce(value, draft => { + draft[rowIndex][colIndex].value = newValue + }) + ) + + const subtotalRow = value.slice(0, 1)[0] + const subtotal = calculateSubtotal(lineItems) + const rows = value.slice(1, -1) + const totalRow = value.slice(-1)[0] + + return ( + + + + + + + +   + + {subtotal.toFixed(2)} + + + {rows.map((row, rowIndex) => ( + + + + + + {row[1] && ( + + )} + + {calculatePercentage(subtotal, row).toFixed(2)} + + ))} + + + + + + + + + {calculateTotal(subtotal, rows).toFixed(2)} + + + + ) +} + +export default Summary diff --git a/web/src/components/TextInput.js b/web/src/components/TextInput.js new file mode 100644 index 000000000000..449865eef570 --- /dev/null +++ b/web/src/components/TextInput.js @@ -0,0 +1,44 @@ +import React from 'react' +import TextareaAutosize from 'react-textarea-autosize' + +import { Box } from 'src/lib/primitives' + +const Textarea = ({ value, onChange, rows, type, ...rest }) => { + return ( + + onChange(e.target.value)} + type={type} + style={{ + width: '100%', + display: 'block', + textAlign: 'inherit', + }} + /> + + ) +} + +const Input = ({ value, onChange, type = 'text', ...rest }) => { + return ( + onChange(e.target.value)} + {...rest} + /> + ) +} + +const TextInput = ({ multiline, ...rest }) => { + const InputComponent = multiline ? Textarea : Input + return +} + +TextInput.defaultProps = { + rows: 3, +} + +export default TextInput diff --git a/web/src/components/index.js b/web/src/components/index.js new file mode 100644 index 000000000000..cb4fd3f02066 --- /dev/null +++ b/web/src/components/index.js @@ -0,0 +1,5 @@ +export { default as AppBar } from "./AppBar"; +export { default as TextInput } from "./TextInput"; +export { default as InvoiceInfo } from "./InvoiceInfo"; +export { default as LineItems } from "./LineItems"; +export { default as Summary } from "./Summary"; diff --git a/web/src/global.css b/web/src/global.css index 7be123fc1465..218316dcba7f 100644 --- a/web/src/global.css +++ b/web/src/global.css @@ -3,3 +3,87 @@ *:after { box-sizing: border-box; } + +@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:400,700"); + +html { + font-size: 62.5%; +} + +body { + margin: 0; + padding: 0; + background: #fafbfb; + font-family: "Roboto Slab", serif; + color: #303030; +} + +* { + font-size: 1.6rem; + line-height: 1.5; +} + +input, +textarea { + font-family: inherit; + font-size: 1.6rem; + background: transparent; + outline: none; + border: 0; + padding: 0; + resize: none; + box-sizing: border-box; + padding: 8px; + border: 1px solid transparent; +} +textarea { + height: 100%; +} + +input:hover, +textarea:hover { + background-color: #f8f5c6; +} +input:focus, +textarea:focus { + background-color: #f9f3a7; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; +} + +table { + padding: 0; + margin: 0; + border-spacing: 0; + border-collapse: collapse; +} + +table tr { + height: 48px; + outline: none; + vertical-align: middle; +} + +tbody th, +tbody td { + height: 48px; + border: 1px solid #d4d6d9; +} + +th input, +th textarea { + font-weight: 700; +} + +table input, +table textarea { + height: 100%; + min-height: 47px; +} diff --git a/web/src/lib/primitives.js b/web/src/lib/primitives.js new file mode 100644 index 000000000000..12a4e3f60ae9 --- /dev/null +++ b/web/src/lib/primitives.js @@ -0,0 +1,34 @@ +import { extend } from 'rebass-extend' +import { + display, + height, + maxWidth, + textAlign, + fontStyle, + borders, +} from 'styled-system' +import styled from 'styled-components' + +const { + Box, + Flex, + Text, + Heading, + Button: RealButton, + Link, + Image, + Card, +} = extend({ + Box: [display, textAlign, maxWidth, height, borders], + Text: [fontStyle], +}) + +const Button = styled(RealButton)` + padding: 0 4px; + border-radius: 3px; + line-height: 22px; + height: 24px; + background: #88898b; +` + +export { Box, Flex, Text, Heading, Button, Link, Image, Card } diff --git a/web/src/lib/theme.js b/web/src/lib/theme.js new file mode 100644 index 000000000000..849240a1b35a --- /dev/null +++ b/web/src/lib/theme.js @@ -0,0 +1,35 @@ +const fontSizes = [12, 14, 16, 20, 24, 32] + +const colors = { + white: '#fff', + blues: [ + '#B4C0BD', + '#2F5756', + '#9DACA9', + '#394353', + '#537171', + '#3D6362', + '#718A8A', + '#9EC0BB', + '#657F7F', + '#A0C1BC', + ], +} + +const radii = [3] + +const space = [4, 8, 16, 24, 32, 48, 64] + +const breakpoints = ['40em', '64em', '80em'] +breakpoints.sm = breakpoints[0] +breakpoints.md = breakpoints[1] +breakpoints.lg = breakpoints[2] + +export default { + fontSizes, + //fontWeights, + colors, + radii, + space, + breakpoints, +} diff --git a/web/src/pages/index.js b/web/src/pages/index.js new file mode 100644 index 000000000000..bd0bcfad25c8 --- /dev/null +++ b/web/src/pages/index.js @@ -0,0 +1,150 @@ +import { useState } from "react"; +import { Query } from "@hammerframework/hammer-web"; +import { Box, Flex } from "src/lib/primitives"; + +import { + AppBar, + TextInput, + InvoiceInfo, + LineItems, + Summary +} from "src/components"; +import Help from "src/components/Help"; + +const MARGIN_BOTTOM = 5; + +const Page = () => { + const [title, setTitle] = useState("I N V O I C E"); + const [companyName, setCompanyName] = useState("Lolsoft Inc."); + const [companyInfo, setCompanyInfo] = useState( + "Peter Pistorius\nBusiness Address\n101010\nBerlin, Germany" + ); + const [recipient, setRecipient] = useState( + "Reliable customer\nBusiness address\n12345\nUnited Kingdom" + ); + const [invoiceInfo, setInvoiceInfo] = useState([ + [{ value: "Invoice #" }, { value: "001" }], + [{ value: "Date" }, { value: new Intl.DateTimeFormat().format(new Date()) }] + ]); + + const [lineItems, setLineItems] = useState([ + [{ value: "Description" }, { value: "Quantity" }, { value: "Price" }], + [{ value: "x" }, { value: 2 }, { value: 100 }], + [{ value: "x" }, { value: 1 }, { value: 200 }], + [{ value: "x" }, { value: 2 }, { value: 300 }] + ]); + + const [summary, setSummary] = useState([ + [{ value: "Subtotal" }, undefined, "0.0"], + [{ value: "VAT" }, { value: 14 }, "0.0"], + [{ value: "Total" }, { value: "$" }, "0.0"] + ]); + + const [notesA, setNotesA] = useState(""); + const [notesB, setNotesB] = useState("Invoice by Billable.me"); + + return ( + <> + + + + Example Query Component +
+ +
+ 
+        
+        
+
+        
+          
+          
+        
+
+        
+          
+          
+        
+
+        
+
+        
+
+        
+          
+          
+        
+      
+    
+  );
+};
+
+export default Page;
diff --git a/yarn.lock b/yarn.lock
index 79c2f05ef1d1..ba315fe8f5df 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -755,6 +755,13 @@
     pirates "^4.0.0"
     source-map-support "^0.5.9"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.0.tgz#49dcbcd637099a55d3a61e590a00d6861393b1b5"
+  integrity sha512-2xsuyZ0R0RBFwjgae5NpXk8FcfH4qovj5cEM5VEeB7KXnKqzaisIu2HSV/mCEISolJJuR4wkViUGYujA8MH9tw==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -871,6 +878,90 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
 
+"@styled-system/background@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.0.12.tgz#f95fb1f5a688138b268b3a021e5d614bd07053e8"
+  integrity sha512-CFDLrq6KwZgVwBOMaDnEDJWMELsg4slmjFGHvpxU3bi/JHbEepzksGoY/j2QroIh1lm8sS7vIzl1a6xMtMoytQ==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/border@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.0.12.tgz#3b0ad3054c72a6f00012602a5170092c54780c6c"
+  integrity sha512-jU8Xz5ZXipEtVJsPAKmpO1tCZSymXr2gyYW9ZVQKztDIn4SFortNqkhIiBEZ528qowVYZte7OQWpecTIOYB5wQ==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/color@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/color/-/color-5.0.12.tgz#9fe22743ae39a387edd7d50eb9dc76788aaa65de"
+  integrity sha512-bNh1a10CzarHj5rrPyJsVq+WRRdnv7H4SEEngNt07HV6Iq/ds7Gcrp+QJzGtqmF2u3BPSFRLhj9tNQGhFhPq7A==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/core@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/core/-/core-5.0.12.tgz#02ac750be8cdaa2220c95edc35ae5f3ae602a272"
+  integrity sha512-AScxlT6JQ5bQ4XS5pYmDgv3rGCJtTxK9gEfDtmOU2d+7gGhzG/7DtoxnOlXufUn6xNIm9GL0izyOLti73e9YHg==
+  dependencies:
+    object-assign "^4.1.1"
+
+"@styled-system/flexbox@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/flexbox/-/flexbox-5.0.12.tgz#932decdd0c0de22d1d845f6daa255270b58c5360"
+  integrity sha512-2EETVEFHK+HYeHEcxwJ0UXxyQWF4WX0JuP1KwsS/yLzMQ20O1PGnaj6RxGxHpGWnWNl5XNEvAUcUIvktH4Yfvw==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/grid@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/grid/-/grid-5.0.12.tgz#fb71510a4a9d42efa7314f9aa97df2f08e0035bd"
+  integrity sha512-sZ+JWJANSrBCn9U9ZSfw3qWLvNjJc9MQLW662M+M37RG+FZg+lzgzXhnhuS4iBVV3UK1YsMFdGMs+VKdMN3N3A==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/layout@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/layout/-/layout-5.0.12.tgz#0f5888d92f9867e8887590511bd4142a19c66894"
+  integrity sha512-5FlVI95S0JkWBSl3X9uCS/wv+laBaXalTqCoWC6XM4bwh3vN5LjSR6KSwRUvV6+CVEHb272lR3Kkjxn+OUcv1Q==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/position@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/position/-/position-5.0.12.tgz#b1a3ec2461454993a03f90ba0be995663e2e2aa5"
+  integrity sha512-TRnmp+xrwvcUa45kb9t+u+2L7ImjM+xqlTjtUyCk9K0FhBdE0jqSwUuh/LnnAbM6pSHeije31XKtbZXF1XeG/w==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/shadow@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/shadow/-/shadow-5.0.12.tgz#160174749a52ff14a72ade26d91f336096025480"
+  integrity sha512-ErOTpAUrITYsqNb6j/qq8NZAoWORq/JkwQ56OS02n/B7K4eA79CwMsOLhs5E6bspgw5Gdg10CVrDnm1p1fquhw==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/space@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/space/-/space-5.0.12.tgz#d311163b50ee3659b32956641b69513bcaa66c91"
+  integrity sha512-Mv+YJGIjuzq0yi1GWuKj9zAZtGg01wF/VdP4E0XMZpnR4spqD4pMlLRK+iuiBMbN1mHPy1iymEQP8Epe5S8euQ==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/typography@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/typography/-/typography-5.0.12.tgz#8c81e215de5f9485b6572d26d4bcb51fd1e51a95"
+  integrity sha512-PbEDVNnVWie82B6ot0lozmwKkZGGlhWGH+kVx4kXzpgKRD518qVc2fTPtwidCC11s/T/+p1teCkxa6Rbsv9rjg==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
+"@styled-system/variant@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.0.12.tgz#74ee2d35b7e0b2cdbf80d37d518b0c8d9296dda3"
+  integrity sha512-X0pH3Bf7YEyZmUYE8kTX1cFDjHKIBhkZfkO7POB7WKN1qqVz+k3ioPIhZm9u1QWr4XYZ6bvmqAzZJ/W0cQIZ7A==
+  dependencies:
+    "@styled-system/core" "^5.0.12"
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -1477,7 +1568,7 @@ babel-plugin-module-resolver@^3.2.0:
     reselect "^3.0.1"
     resolve "^1.4.0"
 
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.5:
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.6:
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
   integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==
@@ -3443,6 +3534,11 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+immer@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-3.1.3.tgz#59bc742b2aab6e2c676445edb653e588a23c70fc"
+  integrity sha512-HG5SXTXTTVy9lGNwS075cNhQoV375jHsIJO3UtMjuUWJOuwlMr0u42FlsKTJcppt5AzsFAsmj9r4kHvsSHh3hQ==
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -5196,6 +5292,14 @@ react-reconciler@^0.20.0:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+react-textarea-autosize@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.0.tgz#3132cb77e65d94417558d37c0bfe415a5afd3445"
+  integrity sha512-c2FlR/fP0qbxmlrW96SdrbgP/v0XZMTupqB90zybvmDVDutytUgPl7beU35klwcTeMepUIQEpQUn3P3bdshGPg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    prop-types "^15.6.0"
+
 react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
@@ -5237,6 +5341,20 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
+rebass-extend@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rebass-extend/-/rebass-extend-1.0.1.tgz#9b13c43f1b9aab8de26786bd221b8a37ad64ec00"
+  integrity sha512-i2e5JnR+Qtd6nYdl/7Wraie02k/rwuhSyEIcRiuw5FV3traRNzOailw+SSzRoNNxPCV5+BgsCHO5FtMOiaQ+vQ==
+  dependencies:
+    rebass "^3.1.0"
+
+rebass@^3.1.0, rebass@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/rebass/-/rebass-3.1.1.tgz#b318d2f4ed1bb35532392a97e0984474f160122a"
+  integrity sha512-c/mFtt5luxoVHwsRSx5sD27DzLoEIO1gQKSal1RPsj+cf4jfkei3l00eULTm2HA0er0r8fRNZJKTE8AJVc+GRQ==
+  dependencies:
+    styled-system "^4.0.8"
+
 regenerate-unicode-properties@^8.0.2:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -5915,6 +6033,33 @@ styled-components@^4.3.2:
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"
 
+styled-system@^4.0.8:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-4.2.4.tgz#8909f91396c30b92295b4eddec5f7b89f8c8d767"
+  integrity sha512-44X7n09gDvwx7yjquEXsjiNALK0dxGgAJdpO5cb/PdL+D4mhSLKWig4/EhH4vHJLbwu/kumURHyvKxygaBfg0A==
+  dependencies:
+    "@babel/runtime" "^7.4.2"
+    prop-types "^15.7.2"
+
+styled-system@^5.0.12:
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.0.12.tgz#dc1b61ad1268df90e58f0090d4daefd40e3a9cba"
+  integrity sha512-QWtzon68s0Igbo9cGnNv1BBjfWw6SKXyLDRmXbzwiCd5d93b5Yzzfrx9FM2emy1Up012TU3h4vGj/q++uAYafQ==
+  dependencies:
+    "@styled-system/background" "^5.0.12"
+    "@styled-system/border" "^5.0.12"
+    "@styled-system/color" "^5.0.12"
+    "@styled-system/core" "^5.0.12"
+    "@styled-system/flexbox" "^5.0.12"
+    "@styled-system/grid" "^5.0.12"
+    "@styled-system/layout" "^5.0.12"
+    "@styled-system/position" "^5.0.12"
+    "@styled-system/shadow" "^5.0.12"
+    "@styled-system/space" "^5.0.12"
+    "@styled-system/typography" "^5.0.12"
+    "@styled-system/variant" "^5.0.12"
+    object-assign "^4.1.1"
+
 stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"