Styled components update to v5.0.1

.storybook/config.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { configure, addDecorator } from "@storybook/react";
 import { withInfo } from "@storybook/addon-info";
-import { ThemeProvider } from "../src/styled-components";
+import { ThemeProvider } from "styled-components";
 import { createTheme } from "../src/theme/createTheme";
 import { createPalette } from "../src/theme/createPalette";
 

package.json

@@ -37,6 +37,7 @@
     "@types/react-transition-group": "^2.0.11",
     "@types/storybook__addon-info": "^4.1.2",
     "@types/storybook__react": "^4.0.2",
+    "@types/styled-components": "^4.4.3",
     "babel-loader": "^8.0.6",
     "bignumber.js": "^8.0.1",
     "husky": "^1.0.0-rc.9",
@@ -47,7 +48,7 @@
     "react-dom": "^16.8.6",
     "react-scripts": "^3.0.1",
     "rimraf": "^2.6.2",
-    "styled-components": "^3.4.2",
+    "styled-components": "^5.0.1",
     "ts-loader": "^6.0.4",
     "tslib": "^1.9.3",
     "tslint": "^5.18.0",
@@ -74,6 +75,6 @@
     "mobx-react": ">=5.1.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "styled-components": "^3.4.2"
+    "styled-components": "^5.0.1"
   }
 }

src/ErrorBox.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { ErrorBox } from "./ErrorBox";
-import styled from "./styled-components";
+import styled from "styled-components";
 
 const PrimaryWrapper = styled.div`
     position: relative;

src/LoadingBox.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { LoadingBox } from "./LoadingBox";
-import styled from "./styled-components";
+import styled from "styled-components";
 
 const PrimaryWrapper = styled.div`
     position: relative;

src/MessageBox.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { MessageBox } from "./MessageBox";
 import { InfoIcon } from "./icon/InfoIcon";
-import styled from "./styled-components";
+import styled from "styled-components";
 
 const PrimaryWrapper = styled.div`
     position: relative;

src/MessageBox.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "./styled-components";
+import styled from "styled-components";
 import { ISvgIconProps } from "./util/react/SvgIcon";
 import { IBoxColorsThunk } from "./layout/content/box/IBoxColorsThunk";
 import { ITheme } from "./theme/ITheme";
@@ -17,7 +17,7 @@ const colorSets: Record<IMessageBoxColors, IBoxColorsThunk<ITheme>> = {
     })
 };
 
-const MessageBoxRoot = styled<IMessageBoxRootProps, "div">("div")`
+const MessageBoxRoot = styled.div<IMessageBoxRootProps>`
     position: absolute;
     top: 50%;
     left: 50%;

src/control/Button.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Button } from "./Button";
 import { ArrowForwardIcon } from "../icon/ArrowForwardIcon";
-import styled from "../styled-components";
+import styled from "styled-components";
 import { SpinnerLite } from "../fx/SpinnerLite";
 
 const ButtonContainer = styled.div`

src/control/Button.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled, { css } from "../styled-components";
+import styled, { css } from "styled-components";
 import { Box, IBoxProps } from "../layout/content/box/Box";
 import { IBoxColorsThunk } from "../layout/content/box/IBoxColorsThunk";
 import { HoverState } from "../util/react/HoverState";
@@ -14,7 +14,7 @@ interface IButtonRootProps {
     shadowColor(theme: ITheme): string | undefined;
 }
 
-const ButtonRoot = styled<IButtonRootProps, "button">("button")`
+const ButtonRoot = styled.button<IButtonRootProps>`
     ${props => !props.disabled ? css`
     cursor: pointer;
     ` : ``}

src/control/Checkbox.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Checkbox } from "./Checkbox";
-import styled from "../styled-components";
+import styled from "styled-components";
 
 const CheckboxContainer = styled.div`
     display: flex;

src/control/ExternalLink.tsx

@@ -1,5 +1,5 @@
 import React, { AnchorHTMLAttributes } from "react";
-import styled from "../styled-components";
+import styled from "styled-components";
 
 const ExternalLinkRoot = styled.a`
     text-decoration: none;

src/control/IconButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled, { withTheme } from "../styled-components";
+import styled, { withTheme } from "styled-components";
 import { ITheme } from "../theme/ITheme";
 
 interface IIconProps {
@@ -26,7 +26,7 @@ interface IIconButtonRootProps {
     onClick?(): void;
 }
 
-const IconButtonRoot = styled<IIconButtonRootProps, "button">("button")`
+const IconButtonRoot = styled.button<IIconButtonRootProps>`
     display: block;
     background-color: transparent;
     border: none; /* Remove borders */

src/control/Input.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Input } from "./Input";
-import styled from "../styled-components";
+import styled from "styled-components";
 
 const InputContainer = styled.div`
     display: flex;

src/control/Input.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "../styled-components";
+import styled, { css } from "styled-components";
 import Color from "color";
 
 const HEIGHT = 36;

src/control/Radio.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { Radio } from "./Radio";
 import { Button } from "./Button";
-import styled from "../styled-components";
+import styled from "styled-components";
 
 const RadioContainer = styled.div`
     display: flex;

src/control/Select.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import styled from "../styled-components";
+import styled from "styled-components";
 import { Select } from "./Select";
 import { GithubIcon } from "../icon/GithubIcon";
 import { Option } from "./Option";