Add Style Reducer And Small Button Refactor

.prettierrc

@@ -1,4 +1,4 @@
 {
-	"semi": false,
-	"trailingComma": "none"
+	"semi": true,
+	"trailingComma": "es5"
 }

packages/components/package.json

@@ -49,9 +49,11 @@
     "@storybook/addon-storysource": "^5.3.17",
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
+    "@svgr/rollup": "^5.4.0",
     "babel-jest": "^25.4.0",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-export-extensions": "^6.22.0",
+    "csstype": "^2.6.10",
     "react": "^16.13.0",
     "react-docgen-typescript-loader": "^3.7.1",
     "react-dom": "^16.13.0",

packages/components/src/components/Button/Button.style.ts

@@ -1,157 +1,226 @@
-import { css } from "@emotion/core"
-import { typography, colors } from "../../theme"
+import { css } from "@emotion/core";
+import { typography, colors } from "../../theme";
+import { Reducer, StyleFn, stripInline } from "../../utils";
 
 export type ButtonStyleProps = {
-  text?: string
-  type?: "primary" | "secondary"
-  width?: "normal" | "full"
-  size?: "regular" | "small" | "smaller"
-  disabled?: boolean
-}
+	text?: string;
+	type?: "primary" | "secondary";
+	width?: "normal" | "full";
+	size?: "regular" | "small" | "smaller";
+	disabled?: boolean;
+};
+
+const baseStyles: StyleFn = () => ({
+	borderWidth: "1px",
+	borderStyle: "solid",
+	display: "inline-flex",
+	justifyContent: "center",
+	alignItems: "center",
+	color: colors.white,
+	"&::selected": {
+		background: "transparent",
+	},
+});
+
+const colorFromType: StyleFn = (styles, { type }: ButtonStyleProps) => {
+	switch (type) {
+		case "primary":
+			return {
+				...styles,
+				backgroundColor: colors.blue[500],
+				borderColor: colors.blue[500],
+
+				"&:hover": {
+					backgroundColor: colors.blue[700],
+					borderColor: colors.blue[700],
+					color: colors.white,
+				},
+				"&:active": {
+					backgroundColor: colors.blue[900],
+					borderColor: colors.blue[900],
+					color: colors.white,
+				},
+			};
+
+		case "secondary":
+			return {
+				...styles,
+				backgroundColor: colors.blue[500],
+				borderColor: colors.blue[500],
+
+				"&:hover": {
+					backgroundColor: colors.black,
+					borderColor: colors.blue[700],
+					color: colors.blue[300],
+				},
+
+				"&:active": {
+					backgroundColor: colors.black,
+					borderColor: colors.blue[700],
+					color: colors.blue[700],
+				},
+			};
+	}
+};
+const widthFromSize: StyleFn = (styles, { width }) => ({
+	...styles,
+	display:
+		width === "full" && styles.display.includes("inline") ? stripInline(styles.display as string) : styles.display,
+	width: width === "full" ? "100%" : styles.width,
+});
 
 export let makeStyles = ({
-  text,
-  type = "primary",
-  width = "normal",
-  size = "regular",
-  disabled = false
+	text,
+	type = "primary",
+	width = "normal",
+	size = "regular",
+	disabled = false,
 }: ButtonStyleProps) => {
-
-  const buttonHeight = size === "regular" ? "20px" : size === "small" ? "15px" : "10px";
-
-  const primaryButton = {
-    container: css`
-      border: 1px solid ${colors.blue[500]};
-      color: ${colors.white};
-      background-color: ${colors.blue[500]};
-      justify-content:center;
-      padding: ${size === "regular" ? (!!text ? "14px 17px" : "14px") :
-        size === "small" ? (!!text ? "12px 14px" : "12px") : "10px"
-      };
-      display: ${width === "normal" ? "inline-flex" : "flex"};
-      align-items: center;
-      cursor: default;
-      font-family: ${typography.fonts.base};
-      font-weight: ${typography.weights.medium};
-      font-size: ${size === "regular" ? typography.sizes.button.large :
-        size === "small" ? typography.sizes.button.medium : 
-        typography.sizes.button.small
-      };
-      margin: 0 ${width === "normal" ? "15px" : "0"} 0 0;
-      height: ${buttonHeight};
-      max-height: ${buttonHeight};
-
-      &:hover {
-        background-color: ${colors.blue[700]};
-        border-color: ${colors.blue[700]};
-        color: ${colors.white};
-      }
-
-      &:active {
-        background-color: ${colors.blue[900]};
-        border-color: ${colors.blue[900]};
-        color: ${colors.white};
-      }
-
-      &::selection {
-        background: transparent;
-      }
-    `
-  }
-
-  const secondaryButton = {
-    container: css`
-      border: 1px solid ${colors.blue[500]};
-      color: ${colors.white};
-      background-color: ${colors.black};
-      justify-content:center;
-      padding: ${size === "regular" ? (!!text ? "14px 17px" : "14px") :
-        size === "small" ? (!!text ? "12px 14px" : "12px") : "10px"
-      };
-      display: ${width === "normal" ? "inline-flex" : "flex"};
-      align-items: center;
-      cursor: default;
-      font-family: ${typography.fonts.base};
-      font-weight: ${typography.weights.medium};
-      font-size: ${size === "regular" ? typography.sizes.button.large :
-        size === "small" ? typography.sizes.button.medium : 
-        typography.sizes.button.small
-      };
-      margin: 0 ${width === "normal" ? "15px" : "0"} 0 0;
-      height: ${buttonHeight};
-      max-height: ${buttonHeight};
-
-      &:hover {
-        background-color: ${colors.black};
-        border-color: ${colors.blue[700]};
-        color: ${colors.blue[300]};
-      }
-
-      &:active {
-        background-color: ${colors.black};
-        border-color: ${colors.blue[700]};
-        color: ${colors.blue[700]};
-      }
-
-      &::selection {
-        background: transparent;
-      }
-    `
-  }
-
-  const disabledButton = {
-    container: css`
-      border: 1px solid ${colors.white};
-      color: ${colors.white};
-      background-color: ${colors.gray[100]};
-      justify-content:center;
-      padding: ${size === "regular" ? (!!text ? "14px 17px" : "14px") :
-        size === "small" ? (!!text ? "12px 14px" : "12px") : "10px"
-      };
-      display: ${width === "normal" ? "inline-flex" : "flex"};
-      align-items: center;
-      cursor: ${disabled ? "not-allowed" : "default"};
-      font-family: ${typography.fonts.base};
-      font-weight: ${typography.weights.medium};
-      font-size: ${size === "regular" ? typography.sizes.button.large :
-        size === "small" ? typography.sizes.button.medium : 
-        typography.sizes.button.small
-      };
-      margin: 0 ${width === "normal" ? "15px" : "0"} 0 0;
-      height: ${buttonHeight};
-      max-height: ${buttonHeight};
-
-      &:hover {
-        background-color: ${colors.gray[100]};
-        border-color: ${colors.white};
-        color: ${colors.white};
-      }
-
-      &:active {
-        background-color: ${colors.gray[100]};
-        border-color: ${colors.white};
-        color: ${colors.white};
-      }
-
-      &::selection {
-        background: transparent;
-      }
-    `
-  }
-
-  const icon = css`
-    margin-right: ${!!text ? "10px" : "0"};
-    font-size: ${size === "regular" ? typography.sizes.icon.large :
-        size === "small" ? typography.sizes.icon.medium : 
-        typography.sizes.icon.small
-      };
-
-    & > path:nth-of-type(1) {	
-      color: inherit;	
-      flex-shrink: 0;
-    }
-  `
-
-  const result = disabled ? disabledButton : type === "primary" ? primaryButton : secondaryButton
-  return { icon, ...result }
-}
+	const colorReducer = Reducer(colorFromType);
+	const widthReducer = Reducer(widthFromSize);
+	const baseReducer = Reducer(baseStyles);
+
+	let finalStyles = baseReducer
+		.concat(colorReducer)
+		.concat(widthReducer)
+		.run({}, { text, type, width, size, disabled });
+
+	return css(finalStyles);
+};
+// export let makeStyles = ({
+// 	text,
+// 	type = "primary",
+// 	width = "normal",
+// 	size = "regular",
+// 	disabled = false,
+// }: ButtonStyleProps) => {
+// 	const buttonHeight = size === "regular" ? "20px" : size === "small" ? "15px" : "10px";
+
+// 	const primaryButton = {
+// 		container: css`
+// 			border: 1px solid ${colors.blue[500]};
+// 			color: ${colors.white};
+// 			background-color: ${colors.blue[500]};
+
+// 			padding: ${size === "regular"
+// 				? !!text
+// 					? "14px 17px"
+// 					: "14px"
+// 				: size === "small"
+// 				? !!text
+// 					? "12px 14px"
+// 					: "12px"
+// 				: "10px"};
+// 			font-size: ${size === "regular"
+// 				? typography.sizes.button.large
+// 				: size === "small"
+// 				? typography.sizes.button.medium
+// 				: typography.sizes.button.small};
+// 			margin: 0 ${width === "normal" ? "15px" : "0"} 0 0;
+// 			height: ${buttonHeight};
+// 			max-height: ${buttonHeight};
+// 		`,
+// 	};
+
+// 	const secondaryButton = {
+// 		container: css`
+// 			border: 1px solid ${colors.blue[500]};
+
+// 			background-color: ${colors.black};
+// 			justify-content: center;
+// 			padding: ${size === "regular"
+// 				? !!text
+// 					? "14px 17px"
+// 					: "14px"
+// 				: size === "small"
+// 				? !!text
+// 					? "12px 14px"
+// 					: "12px"
+// 				: "10px"};
+// 			font-size: ${size === "regular"
+// 				? typography.sizes.button.large
+// 				: size === "small"
+// 				? typography.sizes.button.medium
+// 				: typography.sizes.button.small};
+// 			margin: 0 ${width === "normal" ? "15px" : "0"} 0 0;
+// 			height: ${buttonHeight};
+// 			max-height: ${buttonHeight};
+
+// 			&:hover {
+// 				background-color: ${colors.black};
+// 				border-color: ${colors.blue[700]};
+// 				color: ${colors.blue[300]};
+// 			}
+
+// 			&:active {
+// 				background-color: ${colors.black};
+// 				border-color: ${colors.blue[700]};
+// 				color: ${colors.blue[700]};
+// 			}
+// 		`,
+// 	};
+
+// 	const disabledButton = {
+// 		container: css`
+// 			border: 1px solid ${colors.white};
+// 			color: ${colors.white};
+// 			background-color: ${colors.gray[100]};
+// 			justify-content: center;
+// 			padding: ${size === "regular"
+// 				? !!text
+// 					? "14px 17px"
+// 					: "14px"
+// 				: size === "small"
+// 				? !!text
+// 					? "12px 14px"
+// 					: "12px"
+// 				: "10px"};
+// 			display: ${width === "normal" ? "inline-flex" : "flex"};
+// 			align-items: center;
+// 			cursor: ${disabled ? "not-allowed" : "default"};
+// 			font-family: ${typography.fonts.base};
+// 			font-weight: ${typography.weights.medium};
+// 			font-size: ${size === "regular"
+// 				? typography.sizes.button.large
+// 				: size === "small"
+// 				? typography.sizes.button.medium
+// 				: typography.sizes.button.small};
+// 			margin: 0 ${width === "normal" ? "15px" : "0"} 0 0;
+// 			height: ${buttonHeight};
+// 			max-height: ${buttonHeight};
+
+// 			&:hover {
+// 				background-color: ${colors.gray[100]};
+// 				border-color: ${colors.white};
+// 				color: ${colors.white};
+// 			}
+
+// 			&:active {
+// 				background-color: ${colors.gray[100]};
+// 				border-color: ${colors.white};
+// 				color: ${colors.white};
+// 			}
+
+// 			&::selection {
+// 				background: transparent;
+// 			}
+// 		`,
+// 	};
+
+// 	const icon = css`
+// 		margin-right: ${!!text ? "10px" : "0"};
+// 		font-size: ${size === "regular"
+// 			? typography.sizes.icon.large
+// 			: size === "small"
+// 			? typography.sizes.icon.medium
+// 			: typography.sizes.icon.small};
+
+// 		& > path:nth-of-type(1) {
+// 			color: inherit;
+// 			flex-shrink: 0;
+// 		}
+// 	`;
+
+// 	const result = disabled ? disabledButton : type === "primary" ? primaryButton : secondaryButton;
+// 	return { icon, ...result };
+// };

packages/components/src/components/Button/Button.tsx

@@ -1,29 +1,21 @@
-import React from "react"
-import { makeStyles, ButtonStyleProps } from "./Button.style"
-import { IconProp } from "@fortawesome/fontawesome-svg-core"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import React from "react";
+import { makeStyles, ButtonStyleProps } from "./Button.style";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type ButtonProps = {
-  text?: string
-  icon?: IconProp
-  disabled?: boolean
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
-} & ButtonStyleProps
+	text?: string;
+	icon?: IconProp;
+	disabled?: boolean;
+	onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+} & ButtonStyleProps;
 
-export default function Button({
-  text = "",
-  icon,
-  disabled = false,
-  onClick,
-  ...styleProps
-}: ButtonProps) {
-  let styles = makeStyles({text, disabled, ...styleProps})
-  return (
-    <div css={styles.container} onClick={disabled ? null : onClick}>
-      {!!icon &&
-        <FontAwesomeIcon icon={icon} css={styles.icon} />
-      }
-      {text}
-    </div>
-  )
+export default function Button({ text = "", icon, disabled = false, onClick, ...styleProps }: ButtonProps) {
+	let styles = makeStyles({ text, disabled, ...styleProps });
+	console.log("styles", styles);
+	return (
+		<div css={styles} onClick={disabled ? null : onClick}>
+			{text}
+		</div>
+	);
 }

packages/components/src/utils/helpers.ts

@@ -0,0 +1,3 @@
+export function stripInline(str: string) {
+	return str.replace(/inline-?/gi, "") || "block";
+}

packages/components/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./style-reducer";
+export * from "./helpers";

packages/components/src/utils/style-reducer.ts

@@ -0,0 +1,21 @@
+import * as CSS from "csstype";
+
+type StyleObj = { [k in keyof CSS.Properties]: number | string };
+export type StyleFn = (style: StyleObj, x: any) => StyleObj;
+
+// TODO: Properly type this
+type StyleMonad = (
+	run: StyleFn
+) => {
+	run: StyleFn;
+	map: (f: (args: any) => any) => StyleMonad;
+	contramap: (f: (args: any) => any) => StyleMonad;
+	concat: (other: StyleMonad) => StyleMonad;
+};
+
+export const Reducer = (run: StyleFn) => ({
+	run,
+	concat: (other: any) => Reducer((styles: StyleObj, props: any) => other.run(run(styles, props), props)),
+	map: (f: (x: any) => any) => Reducer((styles: StyleObj, props: any) => f(run(styles, props))),
+	contramap: (f: (x: any) => any) => Reducer((styles: StyleObj, props: any) => run(styles, f(props))),
+});

yarn.lock

@@ -743,7 +743,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0", "@babel/plugin-transform-react-constant-elements@^7.6.3":
+"@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0", "@babel/plugin-transform-react-constant-elements@^7.6.3", "@babel/plugin-transform-react-constant-elements@^7.7.4":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.9.0.tgz#a75abc936a3819edec42d3386d9f1c93f28d9d9e"
   integrity sha512-wXMXsToAUOxJuBBEHajqKLFWcCkOSLshTI2ChCFFj1zDd7od4IOxiwLCOObNUvOpkxLpjIuaIdBMmNt6ocCPAw==
@@ -869,7 +869,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.8.7":
+"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.8.7", "@babel/preset-env@^7.9.5":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.6.tgz#df063b276c6455ec6fcfc6e53aacc38da9b0aea6"
   integrity sha512-0gQJ9RTzO0heXOhzftog+a/WyOuqMrAIugVYxMYf83gh1CQaQDjMtsOpqOwXyDL/5JcWsrCm8l4ju8QC97O7EQ==
@@ -954,7 +954,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.8.3":
+"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.8.3", "@babel/preset-react@^7.9.4":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.4.tgz#c6c97693ac65b6b9c0b4f25b948a8f665463014d"
   integrity sha512-AxylVB3FXeOTQXNXyiuAQJSvss62FEotbX2Pzx3K/7c+MKJMdSg6Ose6QYllkdCFA8EInCJVw7M/o5QbLuA4ZQ==
@@ -2756,41 +2756,81 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
   integrity sha512-j7KnilGyZzYr/jhcrSYS3FGWMZVaqyCG0vzMCwzvei0coIkczuYMcniK07nI0aHJINciujjH11T72ICW5eL5Ig==
 
+"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
+  integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
+
 "@svgr/babel-plugin-remove-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz#297550b9a8c0c7337bea12bdfc8a80bb66f85abc"
   integrity sha512-3XHLtJ+HbRCH4n28S7y/yZoEQnRpl0tvTZQsHqvaeNXPra+6vE5tbRliH3ox1yZYPCxrlqaJT/Mg+75GpDKlvQ==
 
+"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
+  integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
+
 "@svgr/babel-plugin-remove-jsx-empty-expression@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz#c196302f3e68eab6a05e98af9ca8570bc13131c7"
   integrity sha512-yTr2iLdf6oEuUE9MsRdvt0NmdpMBAkgK8Bjhl6epb+eQWk6abBaX3d65UZ3E3FWaOwePyUgNyNCMVG61gGCQ7w==
 
+"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
+  integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
+
 "@svgr/babel-plugin-replace-jsx-attribute-value@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz#310ec0775de808a6a2e4fd4268c245fd734c1165"
   integrity sha512-U9m870Kqm0ko8beHawRXLGLvSi/ZMrl89gJ5BNcT452fAjtF2p4uRzXkdzvGJJJYBgx7BmqlDjBN/eCp5AAX2w==
 
+"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
+  integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
+
 "@svgr/babel-plugin-svg-dynamic-title@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz#2cdedd747e5b1b29ed4c241e46256aac8110dd93"
   integrity sha512-w3Be6xUNdwgParsvxkkeZb545VhXEwjGMwExMVBIdPQJeyMQHqm9Msnb2a1teHBqUYL66qtwfhNkbj1iarCG7w==
 
+"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
+  integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
+
 "@svgr/babel-plugin-svg-em-dimensions@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz#9a94791c9a288108d20a9d2cc64cac820f141391"
   integrity sha512-C0Uy+BHolCHGOZ8Dnr1zXy/KgpBOkEUYY9kI/HseHVPeMbluaX3CijJr7D4C5uR8zrc1T64nnq/k63ydQuGt4w==
 
+"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
+  integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
+
 "@svgr/babel-plugin-transform-react-native-svg@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz#151487322843359a1ca86b21a3815fd21a88b717"
   integrity sha512-7YvynOpZDpCOUoIVlaaOUU87J4Z6RdD6spYN4eUb5tfPoKGSF9OG2NuhgYnq4jSkAxcpMaXWPf1cePkzmqTPNw==
 
+"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
+  integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
+
 "@svgr/babel-plugin-transform-svg-component@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz#5f1e2f886b2c85c67e76da42f0f6be1b1767b697"
   integrity sha512-hYfYuZhQPCBVotABsXKSCfel2slf/yvJY8heTVX1PCTaq/IgASq1IyxPPKJ0chWREEKewIU/JMSsIGBtK1KKxw==
 
+"@svgr/babel-plugin-transform-svg-component@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.4.0.tgz#a2212b4d018e6075a058bb7e220a66959ef7a03c"
+  integrity sha512-zLl4Fl3NvKxxjWNkqEcpdSOpQ3LGVH2BNFQ6vjaK6sFo2IrSznrhURIPI0HAphKiiIwNYjAfE0TNoQDSZv0U9A==
+
 "@svgr/babel-preset@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.3.tgz#a75d8c2f202ac0e5774e6bfc165d028b39a1316c"
@@ -2805,6 +2845,20 @@
     "@svgr/babel-plugin-transform-react-native-svg" "^4.2.0"
     "@svgr/babel-plugin-transform-svg-component" "^4.2.0"
 
+"@svgr/babel-preset@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.4.0.tgz#da21854643e1c4ad2279239baa7d5a8b128c1f15"
+  integrity sha512-Gyx7cCxua04DBtyILTYdQxeO/pwfTBev6+eXTbVbxe4HTGhOUW6yo7PSbG2p6eJMl44j6XSequ0ZDP7bl0nu9A==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
+    "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
+    "@svgr/babel-plugin-transform-svg-component" "^5.4.0"
+
 "@svgr/core@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.3.tgz#b37b89d5b757dc66e8c74156d00c368338d24293"
@@ -2814,6 +2868,15 @@
     camelcase "^5.3.1"
     cosmiconfig "^5.2.1"
 
+"@svgr/core@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.4.0.tgz#655378ee43679eb94fee3d4e1976e38252dff8e7"
+  integrity sha512-hWGm1DCCvd4IEn7VgDUHYiC597lUYhFau2lwJBYpQWDirYLkX4OsXu9IslPgJ9UpP7wsw3n2Ffv9sW7SXJVfqQ==
+  dependencies:
+    "@svgr/plugin-jsx" "^5.4.0"
+    camelcase "^6.0.0"
+    cosmiconfig "^6.0.0"
+
 "@svgr/hast-util-to-babel-ast@^4.3.2":
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz#1d5a082f7b929ef8f1f578950238f630e14532b8"
@@ -2821,6 +2884,13 @@
   dependencies:
     "@babel/types" "^7.4.4"
 
+"@svgr/hast-util-to-babel-ast@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.4.0.tgz#bb5d002e428f510aa5b53ec0a02377a95b367715"
+  integrity sha512-+U0TZZpPsP2V1WvVhqAOSTk+N+CjYHdZx+x9UBa1eeeZDXwH8pt0CrQf2+SvRl/h2CAPRFkm+Ey96+jKP8Bsgg==
+  dependencies:
+    "@babel/types" "^7.9.5"
+
 "@svgr/plugin-jsx@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz#e2ba913dbdfbe85252a34db101abc7ebd50992fa"
@@ -2831,6 +2901,16 @@
     "@svgr/hast-util-to-babel-ast" "^4.3.2"
     svg-parser "^2.0.0"
 
+"@svgr/plugin-jsx@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.4.0.tgz#ab47504c55615833c6db70fca2d7e489f509787c"
+  integrity sha512-SGzO4JZQ2HvGRKDzRga9YFSqOqaNrgLlQVaGvpZ2Iht2gwRp/tq+18Pvv9kS9ZqOMYgyix2LLxZMY1LOe9NPqw==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@svgr/babel-preset" "^5.4.0"
+    "@svgr/hast-util-to-babel-ast" "^5.4.0"
+    svg-parser "^2.0.2"
+
 "@svgr/plugin-svgo@^4.3.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
@@ -2840,6 +2920,29 @@
     merge-deep "^3.0.2"
     svgo "^1.2.2"
 
+"@svgr/plugin-svgo@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.4.0.tgz#45d9800b7099a6f7b4d85ebac89ab9abe8592f64"
+  integrity sha512-3Cgv3aYi1l6SHyzArV9C36yo4kgwVdF3zPQUC6/aCDUeXAofDYwE5kk3e3oT5ZO2a0N3lB+lLGvipBG6lnG8EA==
+  dependencies:
+    cosmiconfig "^6.0.0"
+    merge-deep "^3.0.2"
+    svgo "^1.2.2"
+
+"@svgr/rollup@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/rollup/-/rollup-5.4.0.tgz#b1946c8d2c13870397af014a105d40945b7371e5"
+  integrity sha512-hwYjrTddW6mFU9vwqRr1TULNvxiIxGdIbqrD5J7vtoATSfWazq/2JSnT4BmiH+/4kFXLEtjKuSKoDUotkOIAkg==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@babel/plugin-transform-react-constant-elements" "^7.7.4"
+    "@babel/preset-env" "^7.9.5"
+    "@babel/preset-react" "^7.9.4"
+    "@svgr/core" "^5.4.0"
+    "@svgr/plugin-jsx" "^5.4.0"
+    "@svgr/plugin-svgo" "^5.4.0"
+    rollup-pluginutils "^2.8.2"
+
 "@svgr/webpack@^4.0.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.3.tgz#13cc2423bf3dff2d494f16b17eb7eacb86895017"
@@ -4760,6 +4863,11 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelcase@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
+  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
+
 can-use-dom@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
@@ -5577,7 +5685,7 @@ csstype@^2.2.0, csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
   integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
 
-csstype@^2.6.7:
+csstype@^2.6.10, csstype@^2.6.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -11788,7 +11896,7 @@ rollup-plugin-typescript2@^0.26.0:
     rollup-pluginutils "2.8.2"
     tslib "1.10.0"
 
-rollup-pluginutils@2.8.2, rollup-pluginutils@^2.8.1:
+rollup-pluginutils@2.8.2, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
@@ -12685,7 +12793,7 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svg-parser@^2.0.0:
+svg-parser@^2.0.0, svg-parser@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==