diff --git a/package.json b/package.json
index b027272..8e68970 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"chai": "^4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
+ "framer-motion": "^2.9.4",
"lodash": "^4.17.20",
"polished": "^3.6.5",
"react": "^16.13.1",
diff --git a/src/assets/heart.svg b/src/assets/heart.svg
new file mode 100644
index 0000000..5628acb
--- /dev/null
+++ b/src/assets/heart.svg
@@ -0,0 +1,53 @@
+
diff --git a/src/assets/login.svg b/src/assets/login.svg
new file mode 100644
index 0000000..a50cc15
--- /dev/null
+++ b/src/assets/login.svg
@@ -0,0 +1,28 @@
+
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index 33e2182..b3d5853 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -50,6 +50,22 @@ export const Container = styled.button`
}
`}
+ ${props =>
+ props.variant === 'basic' &&
+ css`
+ border: 0;
+ color: ${getBackground(props.theme, props.color, Color.Fill)};
+ background: transparent;
+
+ &:hover {
+ background-color: ${`${getBackground(
+ props.theme,
+ props.color,
+ Color.Fill,
+ )}15`};
+ }
+ `}
+
${props =>
diff --git a/src/components/LoginAlert/index.tsx b/src/components/LoginAlert/index.tsx
new file mode 100644
index 0000000..f3808de
--- /dev/null
+++ b/src/components/LoginAlert/index.tsx
@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import Route from 'routes/enums';
+
+import { ReactComponent as HeartImage } from 'assets/heart.svg';
+import { useModal } from 'components/Modal/hooks';
+import { Button } from 'components';
+import {
+ Container,
+ ImageContainer,
+ MessageContainer,
+ Message,
+ ButtonsContainer,
+} from './styles';
+
+const LoginAlert: React.FC = () => {
+ const history = useHistory();
+ const { dismissModal } = useModal();
+
+ const handleClose = useCallback(() => {
+ dismissModal();
+ }, [dismissModal]);
+
+ return (
+
+
+
+
+
+ Entre com sua conta para adicionar aos favoritos.
+
+
+
+
+
+
+ );
+};
+
+export default LoginAlert;
diff --git a/src/components/LoginAlert/styles.ts b/src/components/LoginAlert/styles.ts
new file mode 100644
index 0000000..a41249b
--- /dev/null
+++ b/src/components/LoginAlert/styles.ts
@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { Size } from 'shared/enums';
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ padding: ${Size.Default};
+ padding-top: 0;
+ width: min(550px, calc(100vw - 5rem));
+`;
+
+export const ImageContainer = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ svg {
+ width: min(300px, 100%);
+ height: auto;
+ }
+`;
+
+export const MessageContainer = styled.div`
+ padding: ${Size.Large} ${Size.Default};
+ text-align: center;
+`;
+
+export const Message = styled.h3``;
+
+export const ButtonsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ @media (min-width: 715px) {
+ flex-direction: row;
+ }
+`;
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 39df8ba..21a59de 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,5 +1,6 @@
import React, { useCallback, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
import { useModal } from 'components/Modal/hooks';
import StyleProps from 'components/Modal/types/StyleProps';
@@ -43,27 +44,27 @@ const Modal: React.FC = ({
handleDismiss();
}, [location]); // eslint-disable-line
- if (!modalContent && !children && !show) {
- return null;
- }
-
return (
-
-
-
-
- {!hideCloseButton && (
-
-
-
- )}
+
+ {(modalContent || children || show) && (
+
+
+
+
+ {!hideCloseButton && (
+
+
+
+ )}
- {modalContent || children}
-
-
-
+ {modalContent || children}
+
+
+
+ )}
+
);
};
diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index 276f8be..80128ee 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -1,4 +1,5 @@
import styled, { css } from 'styled-components';
+import { motion } from 'framer-motion';
import { Color, Size } from 'shared/enums';
import StyleProps from 'components/Modal/types/StyleProps';
@@ -17,19 +18,26 @@ export const Container = styled.div`
} */
`;
-export const Backdrop = styled.div`
+export const Backdrop = styled(motion.div).attrs(() => ({
+ initial: { opacity: 0 },
+ animate: { opacity: 1 },
+ exit: { opacity: 0 },
+}))`
flex: 1;
background-color: rgba(0, 0, 0, 0.4);
`;
-export const ModalContainer = styled.div`
+export const ModalContainer = styled(motion.div).attrs((props: any) => ({
+ initial: { y: '-60%', x: '-50%', opacity: 0 },
+ animate: { y: props?.center ? '-50%' : 0, x: '-50%', opacity: 1 },
+ exit: { y: '-60%', x: '-50%', opacity: 0 },
+}))`
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
-
z-index: 15;
display: flex;
@@ -39,12 +47,10 @@ export const ModalContainer = styled.div`
max-height: 100%;
overflow: hidden;
- /* height: 100%; */
-
${props =>
props.center &&
css`
- top: 50% !important;
+ top: 50%;
transform: translate(-50%, -50%);
`}
@@ -53,28 +59,14 @@ export const ModalContainer = styled.div`
css`
height: ${props.height};
`}
-
-
-
-
- /* @media (max-width: 1280px) {
- width: calc(100% - ${Size.Medium} * 2);
- } */
-
- @media (max-width: 715px) {
- /* top: 0;
- left: 0;
- width: 100%;
- height: 100%; */
- }
-
-
`;
export const ModalContent = styled.div`
display: flex;
flex-direction: column;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 4px 7px 1px rgba(0, 0, 0, 0.3);
+ margin: 10px;
+ margin-top: 0;
background-color: ${Color.Fill};
border-radius: ${Size.Small};
diff --git a/src/components/index.ts b/src/components/index.ts
index 47aeebb..328d33f 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -7,6 +7,7 @@ export { default as AspectRatioLoading } from './AspectRatio/Loading';
export { default as Button } from './Button';
export { default as EnvironmentLabel } from './EnvironmentLabel';
export { default as Input } from './Input';
+export { default as LoginAlert } from './LoginAlert';
export { default as Media } from './Media';
export { default as Modal } from './Modal';
diff --git a/src/containers/EntityImage/index.tsx b/src/containers/EntityImage/index.tsx
index 585f470..c7ed9a9 100644
--- a/src/containers/EntityImage/index.tsx
+++ b/src/containers/EntityImage/index.tsx
@@ -1,5 +1,6 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
import { BsHeartFill } from 'react-icons/bs';
import { getEntityRoute } from 'shared/helpers';
@@ -8,7 +9,7 @@ import { useModal } from 'components/Modal/hooks';
import { useFavorite } from 'domains/Favorites/hooks';
import { Color } from 'shared/enums';
-import { Media } from 'components';
+import { LoginAlert, Media } from 'components';
import { EntityImageLoading } from 'containers';
import {
Container,
@@ -45,7 +46,7 @@ const EntityImage: React.FC = ({
const handleFavorite = useCallback(async () => {
try {
if (!user) {
- alert('Entre com sua conta para adicionar aos favoritos.');
+ setModalContent({ value: });
return;
}
@@ -53,7 +54,7 @@ const EntityImage: React.FC = ({
} catch (error) {
console.log('handleFavorite -> error', error);
}
- }, [user, UpdateFavorite, entity.id, entity.mediaType]);
+ }, [user, setModalContent, UpdateFavorite, entity.id, entity.mediaType]);
const handleRedirect = useCallback(() => {
if (!disabled) {
@@ -96,10 +97,6 @@ const EntityImage: React.FC = ({
}
}, [user, favoriteList, entity.id, entity.mediaType]);
- if (!entity.featuredImage && !entity.backdrop && !showEmpty) {
- return null;
- }
-
if (isLoading) {
return (
= ({
}
return (
-
- {!hideFavoriteButton && (
-
-
-
+
+ {(entity.featuredImage || entity.backdrop || showEmpty) && (
+
+ {!hideFavoriteButton && (
+
+
+
+ )}
+
+
+
+ {showInfo && (
+
+
+ {entity.title}
+
+ {!hideSubtitle && (
+ {entity?.subtitle}
+ )}
+
+ )}
+
+
)}
-
-
-
- {showInfo && (
-
- {entity.title}
- {!hideSubtitle && {entity?.subtitle}}
-
- )}
-
-
+
);
};
diff --git a/src/containers/EntityImage/styles.ts b/src/containers/EntityImage/styles.ts
index 1dda95f..9bcb356 100644
--- a/src/containers/EntityImage/styles.ts
+++ b/src/containers/EntityImage/styles.ts
@@ -75,6 +75,8 @@ export const IconButton = styled.button`
svg {
height: ${Size.Default};
width: ${Size.Default};
+
+ transition: fill 0.3s;
}
`;
diff --git a/src/containers/EntityImageList/index.tsx b/src/containers/EntityImageList/index.tsx
index 5981aae..7036bd6 100644
--- a/src/containers/EntityImageList/index.tsx
+++ b/src/containers/EntityImageList/index.tsx
@@ -1,4 +1,5 @@
import React, { useCallback, createRef, useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
@@ -9,6 +10,7 @@ import {
Title,
ListContainer,
ListContent,
+ EntityImageContainer,
PreviousButton,
NextButton,
MessageContainer,
@@ -73,65 +75,68 @@ const EntityImageList: React.FC = ({
}, [itemsContainer, checkButtons]);
return (
-
-
- {title && (
-
- {title}
-
- )}
-
- {isLoading && (
-
- )}
-
- {!isLoading && data.length > 0 && (
- <>
- {showPreviousButton && (
-
-
-
- )}
-
-
- {data.map(entity => (
-
- ))}
-
-
- {showNextButton && (
-
-
-
- )}
- >
- )}
-
- {!isLoading && data.length === 0 && (
- {message}
- )}
-
-
+
+
+
+ {title && (
+
+ {title}
+
+ )}
+
+ {isLoading && (
+
+ )}
+
+ {!isLoading && data.length > 0 && (
+ <>
+ {showPreviousButton && (
+
+
+
+ )}
+
+
+ {data.map(entity => (
+
+
+
+ ))}
+
+
+ {showNextButton && (
+
+
+
+ )}
+ >
+ )}
+
+ {!isLoading && data.length === 0 && (
+ {message}
+ )}
+
+
+
);
};
diff --git a/src/containers/EntityImageList/styles.ts b/src/containers/EntityImageList/styles.ts
index d5bdca5..5d027f1 100644
--- a/src/containers/EntityImageList/styles.ts
+++ b/src/containers/EntityImageList/styles.ts
@@ -1,4 +1,5 @@
import styled from 'styled-components';
+import { motion } from 'framer-motion';
import DefaultProps from 'shared/types';
import { Container as DefaultContainer, Button } from 'components';
@@ -61,7 +62,9 @@ export const ListContainer = styled.div`
}
`;
-export const ListContent = styled.div`
+export const ListContent = styled(motion.div).attrs(() => ({
+ // layout: true,
+}))`
display: inline-flex;
padding: 0 2px;
margin-top: 2px;
@@ -92,6 +95,12 @@ export const ListContent = styled.div`
}
`;
+export const EntityImageContainer = styled(motion.div).attrs(() => ({
+ initial: { x: 20, opacity: 0 },
+ animate: { x: 0, opacity: 1 },
+ exit: { x: -20, opacity: 0 },
+}))``;
+
export const PreviousButton = styled(Button)`
opacity: 0;
pointer-events: none;
diff --git a/src/containers/Filmography/index.tsx b/src/containers/Filmography/index.tsx
index 5129868..928f7c0 100644
--- a/src/containers/Filmography/index.tsx
+++ b/src/containers/Filmography/index.tsx
@@ -1,5 +1,6 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
import { getEntityRoute } from 'shared/helpers';
import { Color } from 'shared/enums';
@@ -51,55 +52,57 @@ const Filmography: React.FC = ({
}, [data]);
return (
-
-
- {title && (
-
- {title}
-
- )}
+
+
+
+ {title && (
+
+ {title}
+
+ )}
- {isLoading && }
+ {isLoading && }
- {!isLoading && data.length > 0 && (
- <>
-
- {parsedData.map((entity: any) => (
- handleRedirect(entity)}
- >
- {entity.year} -
- {entity.title || entity.name}
-
- {entity.character && ` como ${entity.character}`}
-
- {entity.episodeCount && (
-
- {entity.episodeCount > 1
- ? ` (${entity.episodeCount} episódios)`
- : ` (${entity.episodeCount} episódio)`}
-
- )}
-
- ))}
-
+ {!isLoading && data.length > 0 && (
+ <>
+
+ {parsedData.map((entity: any) => (
+ handleRedirect(entity)}
+ >
+ {entity.year} -
+ {entity.title || entity.name}
+
+ {entity.character && ` como ${entity.character}`}
+
+ {entity.episodeCount && (
+
+ {entity.episodeCount > 1
+ ? ` (${entity.episodeCount} episódios)`
+ : ` (${entity.episodeCount} episódio)`}
+
+ )}
+
+ ))}
+
- {parsedData?.length < data?.length && (
-
-
-
- )}
- >
- )}
+ {parsedData?.length < data?.length && (
+
+
+
+ )}
+ >
+ )}
- {!isLoading && data.length === 0 && (
- {message}
- )}
-
-
+ {!isLoading && data.length === 0 && (
+ {message}
+ )}
+
+
+
);
};
diff --git a/src/containers/Filmography/styles.ts b/src/containers/Filmography/styles.ts
index ca61ac7..5809e95 100644
--- a/src/containers/Filmography/styles.ts
+++ b/src/containers/Filmography/styles.ts
@@ -1,4 +1,5 @@
import styled from 'styled-components';
+import { motion } from 'framer-motion';
import DefaultProps from 'shared/types';
import { Container as DefaultContainer } from 'components/Layout';
@@ -43,7 +44,11 @@ export const ListContainer = styled.div`
transition: 0.3s height;
`;
-export const ItemContainer = styled.div`
+export const ItemContainer = styled(motion.div).attrs(() => ({
+ initial: { opacity: 0 },
+ animate: { opacity: 1 },
+ exit: { opacity: 0 },
+}))`
font-size: ${Size.Default};
color: ${Color.Text};
padding: ${Size.Medium} 0;
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 3c72f28..abc8cfb 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -72,7 +72,7 @@ const Login: React.FC = () => {
return (
-
+
@@ -88,7 +88,7 @@ const Login: React.FC = () => {
placeholder="Senha"
/>
{error}
-
-
+
);
};
diff --git a/src/pages/Login/styles.ts b/src/pages/Login/styles.ts
index 5320405..ad04391 100644
--- a/src/pages/Login/styles.ts
+++ b/src/pages/Login/styles.ts
@@ -53,12 +53,12 @@ export const LoginHeader = styled.h1`
margin-bottom: ${Size.Large};
font-size: ${Size.Large};
font-weight: 400;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
`;
export const ErrorMessage = styled.p`
margin: ${Size.Default} 0;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
font-size: ${Size.Small};
`;
@@ -68,7 +68,7 @@ export const SignupContainer = styled.div`
flex-direction: column;
align-items: center;
justify-content: center;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
text-align: center;
padding: ${Size.Default};
flex: 1 1 458px;
@@ -82,12 +82,12 @@ export const SignupHeader = styled.h1`
margin-bottom: ${Size.Large};
font-size: ${Size.Large};
font-weight: 400;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
`;
export const SignupDescription = styled.p`
margin-bottom: ${Size.Large};
font-size: ${Size.Default};
font-weight: 100;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
`;
diff --git a/src/pages/Signup/index.tsx b/src/pages/Signup/index.tsx
index d99ba13..9cd8063 100644
--- a/src/pages/Signup/index.tsx
+++ b/src/pages/Signup/index.tsx
@@ -72,7 +72,7 @@ const Signup: React.FC = () => {
return (
-
+
@@ -89,7 +89,7 @@ const Signup: React.FC = () => {
placeholder="Senha"
/>
{error}
-
+
CADASTRAR
@@ -103,7 +103,7 @@ const Signup: React.FC = () => {
history.push(Route.LOGIN)}
>
LOGIN
@@ -111,7 +111,7 @@ const Signup: React.FC = () => {
-
+
);
};
diff --git a/src/pages/Signup/styles.ts b/src/pages/Signup/styles.ts
index 7d1f245..855eeae 100644
--- a/src/pages/Signup/styles.ts
+++ b/src/pages/Signup/styles.ts
@@ -53,12 +53,12 @@ export const SignupHeader = styled.h1`
margin-bottom: ${Size.Large};
font-size: ${Size.Large};
font-weight: 400;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
`;
export const ErrorMessage = styled.p`
margin: ${Size.Default} 0;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
font-size: ${Size.Small};
`;
@@ -81,12 +81,12 @@ export const LoginHeader = styled.h1`
margin-bottom: ${Size.Large};
font-size: ${Size.Large};
font-weight: 400;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
`;
export const LoginDescription = styled.p`
margin-bottom: ${Size.Large};
font-size: ${Size.Default};
font-weight: 100;
- color: ${Color.Primary};
+ color: ${Color.Secondary};
`;
diff --git a/yarn.lock b/yarn.lock
index 4bd2cfd..0c884b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2036,7 +2036,7 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8":
version "0.8.8"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -8821,6 +8821,26 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"
+framer-motion@^2.9.4:
+ version "2.9.4"
+ resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.4.tgz#366656ae240776c923cbd4359815e5c1ed56084d"
+ integrity sha512-Bvgdwpu5UO6VnEEwenJEmnGeo9ILRRWh9f3iIX+71NiM5X60Qi6KlkBFGZc9DGbdIUAn0AYgaxVhTKL39OOYng==
+ dependencies:
+ framesync "^4.1.0"
+ hey-listen "^1.0.8"
+ popmotion "9.0.0-rc.20"
+ style-value-types "^3.1.9"
+ tslib "^1.10.0"
+ optionalDependencies:
+ "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@^4.1.0:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a"
+ integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==
+ dependencies:
+ hey-listen "^1.0.5"
+
fresh@0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -9375,6 +9395,11 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+hey-listen@^1.0.5, hey-listen@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+ integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
highlight.js@~9.15.0, highlight.js@~9.15.1:
version "9.15.10"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2"
@@ -13525,6 +13550,16 @@ polished@^3.6.5:
dependencies:
"@babel/runtime" "^7.9.2"
+popmotion@9.0.0-rc.20:
+ version "9.0.0-rc.20"
+ resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d"
+ integrity sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg==
+ dependencies:
+ framesync "^4.1.0"
+ hey-listen "^1.0.8"
+ style-value-types "^3.1.9"
+ tslib "^1.10.0"
+
popper.js@^1.14.4, popper.js@^1.14.7:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -16481,6 +16516,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
dependencies:
inline-style-parser "0.1.1"
+style-value-types@^3.1.9:
+ version "3.1.9"
+ resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc"
+ integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw==
+ dependencies:
+ hey-listen "^1.0.8"
+ tslib "^1.10.0"
+
styled-components@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d"