From 46ed24ada1567c9c380e41d2e5d49657a8b68d32 Mon Sep 17 00:00:00 2001 From: Simon Howe Date: Wed, 4 Sep 2019 12:50:27 +0200 Subject: [PATCH] feat: updates to styled-components 4 --- docs/js/main.js | 11 +- package.json | 4 +- src/components/Code/Code.js | 2 +- src/components/GraphEdge/GraphEdge.js | 12 +- src/components/GraphNode/_GraphNodeStatic.js | 26 +-- src/components/GraphNode/tags/_TagCamera.js | 36 ++-- src/components/PrometheusGraph/_AxesGrid.js | 12 +- src/components/PrometheusGraph/_Chart.js | 10 +- .../PrometheusGraph/_DeploymentAnnotations.js | 2 +- src/components/PrometheusGraph/_HoverInfo.js | 12 +- src/components/TimeTravel/_RangeSelector.js | 2 +- src/components/TimeTravel/_Timeline.js | 2 +- src/components/TimeTravel/_TimelineLabel.js | 6 +- src/components/TimeTravel/_TimelineLoader.js | 8 +- .../TimeTravel/_TimelinePeriodLabels.js | 8 +- src/components/TimeTravel/_TimelineRange.js | 8 +- .../DeploymentAnnotation.js | 14 +- .../_TimestampTooltip/TimestampTooltip.js | 8 +- yarn.lock | 163 +++++++++++++++--- 19 files changed, 237 insertions(+), 109 deletions(-) diff --git a/docs/js/main.js b/docs/js/main.js index 172f0e5d..a0d9938c 100644 --- a/docs/js/main.js +++ b/docs/js/main.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { ThemeProvider, injectGlobal } from 'styled-components'; +import { ThemeProvider, createGlobalStyle } from 'styled-components'; import styledNormalize from 'styled-normalize'; import '@fortawesome/fontawesome-free/css/all.css'; @@ -14,7 +14,7 @@ import Root from './Root'; import '../css/demo.scss'; import '../img/favicon.ico'; -(() => injectGlobal` +const GlobalStyle = createGlobalStyle` ${styledNormalize} /* https://github.com/necolas/normalize.css/issues/694 */ @@ -27,11 +27,14 @@ import '../img/favicon.ico'; font-family: inherit; /* stylelint-enable sh-waqar/declaration-use-variable */ } -`)(); +`; ReactDOM.render( - + <> + + + , document.getElementById('demo') ); diff --git a/package.json b/package.json index 23022b1d..16f9b255 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "moment": "^2.0.0", "react": "^16.3.0", "react-dom": "^16.3.0", - "styled-components": "^3.4.0" + "styled-components": "^4.3.2" }, "dependencies": { "classnames": "2.2.5", @@ -127,7 +127,7 @@ "sass-loader": "7.1.0", "standard-version": "^4.4.0", "style-loader": "0.23.0", - "styled-components": "3.4.10", + "styled-components": "^4.3.2", "styled-normalize": "^2.2.1", "stylelint": "9.1.1", "stylelint-config-recommended": "2.1.0", diff --git a/src/components/Code/Code.js b/src/components/Code/Code.js index 9b35b042..5ca1d95d 100644 --- a/src/components/Code/Code.js +++ b/src/components/Code/Code.js @@ -217,7 +217,7 @@ class Code extends Component { 
 {
+              ref={e => {
                 this.preNode = e;
               }}
             >
diff --git a/src/components/GraphEdge/GraphEdge.js b/src/components/GraphEdge/GraphEdge.js
index 37e18a16..5a1c988f 100644
--- a/src/components/GraphEdge/GraphEdge.js
+++ b/src/components/GraphEdge/GraphEdge.js
@@ -16,10 +16,10 @@ const spline = line()
   .x(d => d.x)
   .y(d => d.y);
 
-const EdgeShadow = styled.path.attrs({
+const EdgeShadow = styled.path.attrs(({ thickness }) => ({
   // Animation optimization.
-  style: ({ thickness }) => ({ strokeWidth: 10 * thickness }),
-})`
+  style: { strokeWidth: 10 * thickness },
+}))`
   stroke: ${props => props.theme.colors.blue400};
   stroke-opacity: 0;
   fill: none;
@@ -42,10 +42,10 @@ const EdgeDotted = styled.path`
   fill: none;
 `;
 
-const EdgeLine = styled.path.attrs({
+const EdgeLine = styled.path.attrs(({ thickness }) => ({
   // Animation optimization.
-  style: ({ thickness }) => ({ strokeWidth: thickness }),
-})`
+  style: { strokeWidth: thickness },
+}))`
   stroke: ${props =>
     props.contrastMode
       ? props.theme.colors.black
diff --git a/src/components/GraphNode/_GraphNodeStatic.js b/src/components/GraphNode/_GraphNodeStatic.js
index da69fad2..ef9ae525 100644
--- a/src/components/GraphNode/_GraphNodeStatic.js
+++ b/src/components/GraphNode/_GraphNodeStatic.js
@@ -46,20 +46,24 @@ const GraphNodeWrapper = styled.g`
   cursor: ${props => props.cursorType};
 `;
 
-const SvgTextContainer = styled.g.attrs({
-  transform: props => `translate(0, ${props.y + 85})`,
-})`
+const SvgTextContainer = styled.g.attrs(({ y }) => ({
+  transform: `translate(0, ${y + 85})`,
+}))`
   pointer-events: all;
 `;
 
-const LabelSvg = styled.text.attrs({
-  fill: props =>
-    props.contrastMode
-      ? props.theme.colors.black
-      : props.theme.colors.purple800,
-  textAnchor: 'middle',
-  y: -38,
-})`
+const LabelSvg = styled.text.attrs(
+  ({
+    contrastMode,
+    theme: {
+      colors: { black, purple800 },
+    },
+  }) => ({
+    fill: contrastMode ? black : purple800,
+    textAnchor: 'middle',
+    y: -38,
+  })
+)`
   font-size: ${props => props.theme.fontSizes.normal};
 `;
 
diff --git a/src/components/GraphNode/tags/_TagCamera.js b/src/components/GraphNode/tags/_TagCamera.js
index 1aefc390..275ee4d1 100644
--- a/src/components/GraphNode/tags/_TagCamera.js
+++ b/src/components/GraphNode/tags/_TagCamera.js
@@ -1,21 +1,29 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const Rect = styled.rect.attrs({
-  fill: props =>
-    props.contrastMode
-      ? props.theme.colors.black
-      : props.theme.colors.purple800,
-  rx: 5,
-})``;
+const Rect = styled.rect.attrs(
+  ({
+    contrastMode,
+    theme: {
+      colors: { black, purple800 },
+    },
+  }) => ({
+    fill: contrastMode ? black : purple800,
+    rx: 5,
+  })
+)``;
 
-const Circle = styled.circle.attrs({
-  fill: props =>
-    props.contrastMode
-      ? props.theme.colors.black
-      : props.theme.colors.purple800,
-  stroke: props => props.theme.colors.white,
-})``;
+const Circle = styled.circle.attrs(
+  ({
+    contrastMode,
+    theme: {
+      colors: { black, purple800, white },
+    },
+  }) => ({
+    fill: contrastMode ? black : purple800,
+    stroke: white,
+  })
+)``;
 
 export default class TagCamera extends React.Component {
   render() {
diff --git a/src/components/PrometheusGraph/_AxesGrid.js b/src/components/PrometheusGraph/_AxesGrid.js
index 8828d5b6..6d7bf923 100644
--- a/src/components/PrometheusGraph/_AxesGrid.js
+++ b/src/components/PrometheusGraph/_AxesGrid.js
@@ -6,9 +6,9 @@ import { find, range, round, flatMap, last } from 'lodash';
 
 const AxesGridContainer = styled.div``;
 
-const AxisLine = styled.div.attrs({
-  style: ({ width = 0, height = 0 }) => ({ height, width }),
-})`
+const AxisLine = styled.div.attrs(({ width = 0, height = 0 }) => ({
+  style: { height, width },
+}))`
   border-style: dashed;
   border-color: ${props => props.theme.colors.gray200};
   position: absolute;
@@ -24,9 +24,9 @@ const VerticalLine = styled(AxisLine)`
   border-width: 0 0 0 1px;
 `;
 
-const TickContainer = styled.div.attrs({
-  style: ({ left = 0, top = 0 }) => ({ left, top }),
-})`
+const TickContainer = styled.div.attrs(({ left = 0, top = 0 }) => ({
+  style: { left, top },
+}))`
   position: absolute;
 `;
 
diff --git a/src/components/PrometheusGraph/_Chart.js b/src/components/PrometheusGraph/_Chart.js
index b62d80a4..f0578903 100644
--- a/src/components/PrometheusGraph/_Chart.js
+++ b/src/components/PrometheusGraph/_Chart.js
@@ -23,13 +23,13 @@ const SeriesLineChart = styled.path.attrs({
   pointer-events: none;
 `;
 
-const SeriesAreaChart = styled.path.attrs({
-  stroke: ({ fill }) => fill,
+const SeriesAreaChart = styled.path.attrs(({ fill, focused }) => ({
+  stroke: fill,
   // Use strokeWidth only on focused area graphs to make sure ultra-thin ones
   // still get visible, but don't use it when multiple series are visible so
   // that it doesn't look like it's other series' border.
-  strokeWidth: ({ focused }) => (focused ? 1 : 0),
-})`
+  strokeWidth: focused ? 1 : 0,
+}))`
   opacity: ${props => (props.faded ? 0.05 : 0.75)};
   pointer-events: none;
 `;
@@ -157,7 +157,7 @@ class Chart extends React.PureComponent {
       
diff --git a/src/components/PrometheusGraph/_DeploymentAnnotations.js b/src/components/PrometheusGraph/_DeploymentAnnotations.js
index dd72a763..46a0ed83 100644
--- a/src/components/PrometheusGraph/_DeploymentAnnotations.js
+++ b/src/components/PrometheusGraph/_DeploymentAnnotations.js
@@ -60,7 +60,7 @@ class DeploymentAnnotations extends React.PureComponent {
             containerHeight={this.props.chartHeight}
             linkTo={this.props.linkBuilder(deployment)}
             onClick={this.props.onClick}
-            onAxis
+            isOnAxis
           />
         ))}
       
diff --git a/src/components/PrometheusGraph/_HoverInfo.js b/src/components/PrometheusGraph/_HoverInfo.js
index 66e7d6a8..b2d11d97 100644
--- a/src/components/PrometheusGraph/_HoverInfo.js
+++ b/src/components/PrometheusGraph/_HoverInfo.js
@@ -44,18 +44,18 @@ const TooltipRowValue = styled.span`
   white-space: nowrap;
 `;
 
-const HoverLine = styled.div.attrs({
-  style: ({ left, height }) => ({ height, left }),
-})`
+const HoverLine = styled.div.attrs(({ left, height }) => ({
+  style: { height, left },
+}))`
   border-left: 1px solid ${props => props.theme.colors.gray600};
   pointer-events: none;
   position: absolute;
   top: 0;
 `;
 
-const FocusPoint = styled.span.attrs({
-  style: ({ top }) => ({ top }),
-})`
+const FocusPoint = styled.span.attrs(({ top }) => ({
+  style: { top },
+}))`
   border: 2.5px solid ${props => props.color};
   border-radius: ${props => props.theme.borderRadius.circle};
   background-color: ${props => props.theme.colors.white};
diff --git a/src/components/TimeTravel/_RangeSelector.js b/src/components/TimeTravel/_RangeSelector.js
index 83c74ba4..4993b990 100644
--- a/src/components/TimeTravel/_RangeSelector.js
+++ b/src/components/TimeTravel/_RangeSelector.js
@@ -126,7 +126,7 @@ class RangeSelector extends React.Component {
       : {};
 
     return (
-      
+      
         
           {selectedRangeLabel}
           
diff --git a/src/components/TimeTravel/_Timeline.js b/src/components/TimeTravel/_Timeline.js
index 6d8ea423..dc8ac038 100644
--- a/src/components/TimeTravel/_Timeline.js
+++ b/src/components/TimeTravel/_Timeline.js
@@ -298,7 +298,7 @@ class Timeline extends React.PureComponent {
         >
           
             {this.state.isAnimated ? (
diff --git a/src/components/TimeTravel/_TimelineLabel.js b/src/components/TimeTravel/_TimelineLabel.js
index 9c27034f..1ef6c9e3 100644
--- a/src/components/TimeTravel/_TimelineLabel.js
+++ b/src/components/TimeTravel/_TimelineLabel.js
@@ -3,9 +3,9 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-const TimelineLabelWrapper = styled.span.attrs({
-  style: ({ x }) => ({ transform: `translateX(${x}px)` }),
-})`
+const TimelineLabelWrapper = styled.span.attrs(({ x }) => ({
+  style: { transform: `translateX(${x}px)` },
+}))`
   position: absolute;
 `;
 
diff --git a/src/components/TimeTravel/_TimelineLoader.js b/src/components/TimeTravel/_TimelineLoader.js
index 0153ed18..aa4a6484 100644
--- a/src/components/TimeTravel/_TimelineLoader.js
+++ b/src/components/TimeTravel/_TimelineLoader.js
@@ -19,12 +19,12 @@ const blinking = keyframes`
 `;
 /* stylelint-enable color-no-hex */
 
-const TimelineLoaderOverlay = styled.div.attrs({
-  style: ({ x, width }) => ({
+const TimelineLoaderOverlay = styled.div.attrs(({ x, width }) => ({
+  style: {
     left: `${x}px`,
     width,
-  }),
-})`
+  },
+}))`
   animation: ${blinking} 2s linear infinite;
   pointer-events: none;
   position: absolute;
diff --git a/src/components/TimeTravel/_TimelinePeriodLabels.js b/src/components/TimeTravel/_TimelinePeriodLabels.js
index 89d07977..8084ff72 100644
--- a/src/components/TimeTravel/_TimelinePeriodLabels.js
+++ b/src/components/TimeTravel/_TimelinePeriodLabels.js
@@ -44,12 +44,12 @@ function linearGradientValue(x, [a, b]) {
   return (x - a) / (b - a);
 }
 
-const TimelineLabels = styled.div.attrs({
-  style: ({ y, opacity }) => ({
+const TimelineLabels = styled.div.attrs(({ y, opacity }) => ({
+  style: {
     opacity,
     transform: `translateY(${y}px)`,
-  }),
-})``;
+  },
+}))``;
 
 // TODO: Tidy up this component.
 class TimelinePeriodLabels extends React.PureComponent {
diff --git a/src/components/TimeTravel/_TimelineRange.js b/src/components/TimeTravel/_TimelineRange.js
index 5d854751..05f2d101 100644
--- a/src/components/TimeTravel/_TimelineRange.js
+++ b/src/components/TimeTravel/_TimelineRange.js
@@ -3,12 +3,12 @@ import moment from 'moment';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-const TimelineRangeOverlay = styled.div.attrs({
-  style: ({ x, width }) => ({
+const TimelineRangeOverlay = styled.div.attrs(({ x, width }) => ({
+  style: {
     transform: `translateX(${x}px)`,
     width,
-  }),
-})`
+  },
+}))`
   background-color: ${props => props.color};
   position: absolute;
   opacity: 0.15;
diff --git a/src/components/_DeploymentAnnotation/DeploymentAnnotation.js b/src/components/_DeploymentAnnotation/DeploymentAnnotation.js
index 64033433..1b38990a 100644
--- a/src/components/_DeploymentAnnotation/DeploymentAnnotation.js
+++ b/src/components/_DeploymentAnnotation/DeploymentAnnotation.js
@@ -13,9 +13,9 @@ const DeploymentAnnotationWrapper = styled.div.attrs({
   height: 100%;
 `;
 
-const DeploymentAnnotationContainer = styled.div.attrs({
-  style: ({ x }) => ({ left: x }),
-})`
+const DeploymentAnnotationContainer = styled.div.attrs(({ x }) => ({
+  style: { left: x },
+}))`
   pointer-events: all;
   position: absolute;
   height: 100%;
@@ -33,7 +33,7 @@ const FocusPoint = styled.span`
     margin-top: ${props.radius}px;
     width: ${2 * props.radius}px;
     height: ${2 * props.radius}px;
-    bottom: -${props.onAxis ? props.radius : 0}px;
+    bottom: -${props.isOnAxis ? props.radius : 0}px;
   `};
 `;
 
@@ -99,7 +99,7 @@ class DeploymentAnnotations extends React.PureComponent {
              ({
   // Using attrs prevents extensive styled components
   // generation every time the tooltip is repositioned.
-  style: ({ offsetX, offsetY }) => ({ left: offsetX, top: offsetY }),
-})`
+  style: { left: offsetX, top: offsetY },
+}))`
   color: ${props => props.theme.colors.purple900};
   background-color: ${props => props.theme.colors.gray50};
   border: 1px solid ${props => props.theme.colors.gray200};
@@ -76,7 +76,7 @@ class TimestampTooltip extends React.PureComponent {
         offsetX={clampedX}
         offsetY={offsetY}
         visible={this.state.prerendered}
-        innerRef={this.saveTooltipRef}
+        ref={this.saveTooltipRef}
       >
         
           
diff --git a/yarn.lock b/yarn.lock
index 043cbb8c..4569b39f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -38,6 +38,13 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
 "@babel/core@^7.0.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.0.tgz#08958f1371179f62df6966d8a614003d11faeb04"
@@ -77,6 +84,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.5.tgz#873a7f936a3c89491b43536d12245b626664e3cf"
+  integrity sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==
+  dependencies:
+    "@babel/types" "^7.5.5"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -252,6 +270,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-split-export-declaration@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
+  integrity sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==
+  dependencies:
+    "@babel/types" "^7.4.4"
+
 "@babel/helper-wrap-function@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.1.0.tgz#8cf54e9190706067f016af8f75cb3df829cc8c66"
@@ -293,6 +318,11 @@
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.0.tgz#a7cd42cb3c12aec52e24375189a47b39759b783e"
 
+"@babel/parser@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.5.tgz#02f077ac8817d3df4a832ef59de67565e71cca4b"
+  integrity sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==
+
 "@babel/plugin-proposal-async-generator-functions@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.1.0.tgz#41c1a702e10081456e23a7b74d891922dd1bb6ce"
@@ -714,6 +744,21 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
+"@babel/traverse@^7.0.0":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.5.tgz#f664f8f368ed32988cd648da9f72d5ca70f165bb"
+  integrity sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.5.5"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/parser" "^7.5.5"
+    "@babel/types" "^7.5.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/traverse@^7.0.0-beta.40":
   version "7.0.0-beta.53"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.53.tgz#00d32cd8d0b58f4c01d31157be622c662826d344"
@@ -767,6 +812,15 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.4.4", "@babel/types@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.5.tgz#97b9f728e182785909aa4ab56264f090a028d18a"
+  integrity sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@commitlint/cli@^7.2.1":
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-7.2.1.tgz#dbb9eeb1f5015a129bb0801fbc1115eb1dcd513b"
@@ -891,6 +945,23 @@
   dependencies:
     find-up "^2.1.0"
 
+"@emotion/is-prop-valid@^0.8.1":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc"
+  integrity sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==
+  dependencies:
+    "@emotion/memoize" "0.7.2"
+
+"@emotion/memoize@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
+  integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w==
+
+"@emotion/unitless@^0.7.0":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
+  integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
+
 "@fortawesome/fontawesome-free@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.5.0.tgz#0c6c53823d04457ae669cd19567b8a21dbb4fcfd"
@@ -1528,6 +1599,16 @@ babel-plugin-lodash@^3.3.2:
     lodash "^4.17.10"
     require-package-name "^2.0.1"
 
+"babel-plugin-styled-components@>= 1":
+  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==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
 babel-plugin-styled-components@^1.5.0:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.7.1.tgz#c291d2a48ec77bb0828275b87696b6594a2f80f9"
@@ -1535,6 +1616,11 @@ babel-plugin-styled-components@^1.5.0:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     lodash "^4.17.10"
 
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.13.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -1857,13 +1943,6 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.0.3:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.1.0.tgz#c913e43678c7cb7c8bd16afbcddb6c5505e8f9fe"
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
 builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -1983,6 +2062,11 @@ camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000864:
   version "1.0.30000865"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz#70026616e8afe6e1442f8bb4e1092987d81a2f25"
@@ -2650,12 +2734,13 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
-css-to-react-native@^2.0.3:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.1.tgz#7f3f4c95de65501b8720c87bf0caf1f39073b88e"
+css-to-react-native@^2.2.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
+  integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
   dependencies:
+    camelize "^1.0.0"
     css-color-keywords "^1.0.0"
-    fbjs "^0.8.5"
     postcss-value-parser "^3.3.0"
 
 css-what@2.1:
@@ -3759,7 +3844,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.16, fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -5089,6 +5174,11 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
+is-what@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.3.1.tgz#79502181f40226e2d8c09226999db90ef7c1bcbe"
+  integrity sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA==
+
 is-whitespace-character@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz#ede53b4c6f6fb3874533751ec9280d01928d03ed"
@@ -5901,6 +5991,11 @@ lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5,
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
+lodash@^4.17.11, lodash@^4.17.13:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+
 log-symbols@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -6035,6 +6130,11 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^1.1.0"
 
+memoize-one@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memory-fs@^0.4.0, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -6085,6 +6185,13 @@ meow@^4.0.0:
     redent "^2.0.0"
     trim-newlines "^2.0.0"
 
+merge-anything@^2.2.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.1.tgz#e9bccaec1e49ec6cb5f77ca78c5770d1a35315e6"
+  integrity sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==
+  dependencies:
+    is-what "^3.3.1"
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -7497,10 +7604,6 @@ react-input-autosize@2.2.1:
   dependencies:
     prop-types "^15.5.8"
 
-react-is@^16.3.1:
-  version "16.6.3"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
-
 react-is@^16.4.1:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
@@ -7509,6 +7612,11 @@ react-is@^16.4.2, react-is@^16.5.0:
   version "16.5.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.0.tgz#2ec7c192709698591efe13722fab3ef56144ba55"
 
+react-is@^16.6.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
+  integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -8748,19 +8856,24 @@ style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
 
-styled-components@3.4.10:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.10.tgz#9a654c50ea2b516c36ade57ddcfa296bf85c96e1"
+styled-components@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.2.tgz#4ca81918c812d3006f60ac5fdec7d6b64a9509cc"
+  integrity sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==
   dependencies:
-    buffer "^5.0.3"
-    css-to-react-native "^2.0.3"
-    fbjs "^0.8.16"
-    hoist-non-react-statics "^2.5.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.8.1"
+    "@emotion/unitless" "^0.7.0"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^2.2.2"
+    memoize-one "^5.0.0"
+    merge-anything "^2.2.4"
     prop-types "^15.5.4"
-    react-is "^16.3.1"
+    react-is "^16.6.0"
     stylis "^3.5.0"
     stylis-rule-sheet "^0.0.10"
-    supports-color "^3.2.3"
+    supports-color "^5.5.0"
 
 styled-normalize@^2.2.1:
   version "2.3.0"