diff --git a/package.json b/package.json
index b0e35a9..a3128a8 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,12 @@
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
+ "@types/styled-components": "^5.1.26",
"node-sass": "^8.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
+ "styled-components": "^5.3.6",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
@@ -40,5 +42,8 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "resolutions": {
+ "styled-components": "^5"
}
}
diff --git a/src/_variaveis.scss b/src/_variaveis.scss
index 6c7ee19..e5206fc 100644
--- a/src/_variaveis.scss
+++ b/src/_variaveis.scss
@@ -4,6 +4,7 @@ $font-family: 'Roboto', sans-serif;
/* Colors */
$color-black: #000;
+$color-black-transparent: rgba(69, 69, 69, 0.7);
$color-white: #fff;
$color-primary-700: #F2F2F2;
diff --git a/src/assets/imgs/close-menu-mobile.png b/src/assets/imgs/close-menu-mobile.png
new file mode 100644
index 0000000..db20eb2
Binary files /dev/null and b/src/assets/imgs/close-menu-mobile.png differ
diff --git a/src/assets/imgs/menu-hamburger-header.png b/src/assets/imgs/menu-hamburger-header.png
new file mode 100644
index 0000000..ff82bdf
Binary files /dev/null and b/src/assets/imgs/menu-hamburger-header.png differ
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
new file mode 100644
index 0000000..ac43753
--- /dev/null
+++ b/src/components/Container/Container.tsx
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const Container = styled.main`
+position: absolute;
+backdrop-filter: blur(1px);
+width: 100%;
+height: 100%;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+z-index: 5;
+
+background: $color-black-transparent;
+`;
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index eb76b02..e1de6e6 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -1,104 +1,108 @@
@import '../../_variaveis.scss';
-.header-top {
- width: calc(100% - 200px);
- height: 32px;
- padding: 22px 100px;
+.header {
+ width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- gap: 10px;
- border-bottom: 1px solid $color-primary-400;
- background: $color-black;
-
- &__logo {
- width: 136px;
- height: 26px;
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ display: none;
}
- &__input {
+ .header-top {
+ width: calc(100% - 200px);
+ height: 32px;
+ padding: 22px 100px;
+
display: flex;
flex-direction: row;
+ justify-content: space-between;
align-items: center;
- padding: 7px 16px;
gap: 10px;
+ border-bottom: 1px solid $color-primary-400;
+ background: $color-black;
- background: $color-white;
- border: 2px solid $color-primary-700;
- border-radius: 5px;
+ &__logo {
+ width: 136px;
+ height: 26px;
+ }
- width: 25%;
- height: 12px;
+ &__input {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 7px 16px;
+ gap: 10px;
- background-image: url("../../assets/imgs/search-icon-header.png");
- background-size: 18px;
- background-repeat: no-repeat;
- background-position: bottom 50% right 16px;
+ background: $color-white;
+ border: 2px solid $color-primary-700;
+ border-radius: 5px;
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 16px;
- color: $color-primary-500;
+ width: 25%;
+ height: 12px;
+
+ background-image: url("../../assets/imgs/search-icon-header.png");
+ background-size: 18px;
+ background-repeat: no-repeat;
+ background-position: bottom 50% right 16px;
- &::placeholder {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-primary-500;
+
+ &::placeholder {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-primary-500;
+ }
+ }
+
+ &__log-cart {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__log {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-white;
+ text-decoration: none;
+
+ margin-right: 55px;
+ }
+
+ &__cart {
+ width: 28px;
+ height: 28px;
}
}
- &__log-cart {
+ .header-bottom {
+ width: calc(100% - 200px);
+ height: 16px;
+ padding: 14px 100px;
+ background-color: $color-black;
+
display: flex;
- align-items: center;
+ flex-direction: column;
justify-content: center;
- }
+ align-items: flex-start;
- &__log {
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 16px;
- color: $color-white;
- text-decoration: none;
+ &__list {
+ display: flex;
+ align-items: center;
+ justify-content: center;
- margin-right: 55px;
- }
-
- &__cart {
- width: 28px;
- height: 28px;
- }
-}
-
-.header-bottom {
- width: calc(100% - 200px);
- height: 16px;
- padding: 14px 100px;
- background-color: $color-black;
-
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
-
- &__list {
- list-style: none;
- display: flex;
- align-items: center;
- justify-content: center;
-
- &__items-menu {
- margin-right: 55px;
-
- a {
+ &__items-menu {
+ margin-right: 55px;
font-family: $font-family;
font-style: normal;
font-weight: 500;
@@ -107,6 +111,7 @@
text-transform: uppercase;
text-decoration: none;
color: $color-white;
+
}
}
}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index fa8401d..195cbd9 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -19,11 +19,11 @@ const Header = () => {
)
diff --git a/src/components/HeaderMobile/HeaderMobile.module.scss b/src/components/HeaderMobile/HeaderMobile.module.scss
new file mode 100644
index 0000000..28362f6
--- /dev/null
+++ b/src/components/HeaderMobile/HeaderMobile.module.scss
@@ -0,0 +1,62 @@
+@import '../../_variaveis.scss';
+
+.header-mobile {
+ display: none;
+ padding: 25px 16px;
+ background: $color-black;
+ width: calc(100% - 32px);
+ height: 89px;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ display: block;
+
+ }
+
+ &__top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ &__icon-hamburger {
+ background-color: transparent;
+ border: none;
+ }
+ }
+
+ &__input {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 7px 16px;
+ gap: 10px;
+
+ background: $color-white;
+ border: 2px solid $color-primary-700;
+ border-radius: 5px;
+
+ width: calc(100% - 32px);
+ height: 12px;
+ margin-top: 25px;
+
+ background-image: url("../../assets/imgs/search-icon-header.png");
+ background-size: 18px;
+ background-repeat: no-repeat;
+ background-position: bottom 50% right 16px;
+
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-primary-500;
+
+ &::placeholder {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-primary-500;
+ }
+ }
+}
diff --git a/src/components/HeaderMobile/HeaderMobile.tsx b/src/components/HeaderMobile/HeaderMobile.tsx
new file mode 100644
index 0000000..b3b5cfc
--- /dev/null
+++ b/src/components/HeaderMobile/HeaderMobile.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import styles from './HeaderMobile.module.scss'
+
+import { MenuMobile } from '../MenuMobile/MenuMobile';
+import hamburger from '../../assets/imgs/menu-hamburger-header.png'
+import logo from '../../assets/imgs/m3-acdemy-logo.png'
+import cart from '../../assets/imgs/cart-icon-header.png'
+
+const HeaderMobile = () => {
+ const [menuIsVisible, setMenuIsVisible] = useState(false);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ header>
+ >
+ )
+}
+
+export { HeaderMobile }
diff --git a/src/components/MenuMobile/MenuMobile.scss b/src/components/MenuMobile/MenuMobile.scss
new file mode 100644
index 0000000..fcd559a
--- /dev/null
+++ b/src/components/MenuMobile/MenuMobile.scss
@@ -0,0 +1,84 @@
+@import '../../variaveis';
+
+.container-menu {
+ position: absolute;
+ backdrop-filter: blur(1px);
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 5;
+
+ background: $color-black-transparent;
+ opacity: 0;
+ pointer-events: none;
+ transition: all 0.4s ease-in-out;
+
+ &.opened {
+ opacity: 1;
+ pointer-events: all;
+ }
+
+ &__wrapper {
+ width: 90%;
+ background-color: $color-white;
+ height: 585px;
+ }
+
+ &__top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ width: calc(100% - 32px);
+ height: 78px;
+ padding: 0 16px;
+
+ background: $color-black;
+
+ &__log {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-white;
+ text-decoration: none;
+
+ margin-right: 55px;
+ }
+
+ &__close {
+ background: transparent;
+ border: none;
+ }
+ }
+
+ &__bottom {
+ padding: 0 16px;
+ width: calc(100% - 32px);
+
+ &__list {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-direction: column;
+ margin-top: 31px;
+
+ &__items-menu {
+ margin-bottom: 12px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: uppercase;
+ text-decoration: none;
+ color: $color-primary-400;
+
+ }
+ }
+ }
+}
diff --git a/src/components/MenuMobile/MenuMobile.tsx b/src/components/MenuMobile/MenuMobile.tsx
new file mode 100644
index 0000000..d34d8c8
--- /dev/null
+++ b/src/components/MenuMobile/MenuMobile.tsx
@@ -0,0 +1,34 @@
+import './MenuMobile.scss'
+
+import close from '../../assets/imgs/close-menu-mobile.png'
+
+interface MenuMobileProps {
+ menuIsVisible: boolean;
+ setMenuIsVisible: React.Dispatch>;
+}
+
+const MenuMobile = ({menuIsVisible, setMenuIsVisible }: MenuMobileProps) => {
+ return (
+
+ )
+}
+
+export { MenuMobile }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index db863d9..554d035 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,12 +1,16 @@
import React from 'react';
import { Header } from '../components/Header/Header';
+import { HeaderMobile } from '../components/HeaderMobile/HeaderMobile';
import './Home.scss';
function Home() {
return (
+ < >
+
+ >
);
}
diff --git a/yarn.lock b/yarn.lock
index a6f2aca..7498998 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -75,7 +75,7 @@
"@jridgewell/gen-mapping" "^0.3.2"
jsesc "^2.5.1"
-"@babel/helper-annotate-as-pure@^7.18.6":
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
@@ -168,7 +168,7 @@
dependencies:
"@babel/types" "^7.20.7"
-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.18.6":
version "7.18.6"
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@@ -1052,7 +1052,7 @@
"@babel/parser" "^7.20.7"
"@babel/types" "^7.20.7"
-"@babel/traverse@^7.20.10", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.20.10", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2":
version "7.20.10"
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.10.tgz#2bf98239597fcec12f842756f186a9dde6d09230"
integrity sha512-oSf1juCgymrSez8NI4A2sr4+uB/mFd9MXplYGPEBnfAuWmmyeVcHa6xLPiaRBcXkcb/28bgxmQLTVwFKE1yfsg==
@@ -1193,6 +1193,28 @@
resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
+"@emotion/is-prop-valid@^1.1.0":
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+ integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+ dependencies:
+ "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@^0.8.0":
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+ integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/stylis@^0.8.4":
+ version "0.8.5"
+ resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+ integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+ version "0.7.5"
+ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+ integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
"@eslint/eslintrc@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.4.0.tgz#8ec64e0df3e7a1971ee1ff5158da87389f167a63"
@@ -1971,6 +1993,14 @@
dependencies:
"@types/node" "*"
+"@types/hoist-non-react-statics@*":
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+ integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+ dependencies:
+ "@types/react" "*"
+ hoist-non-react-statics "^3.3.0"
+
"@types/html-minifier-terser@^6.0.0":
version "6.1.0"
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -2148,6 +2178,15 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
+"@types/styled-components@^5.1.26":
+ version "5.1.26"
+ resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.26.tgz#5627e6812ee96d755028a98dae61d28e57c233af"
+ integrity sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==
+ dependencies:
+ "@types/hoist-non-react-statics" "*"
+ "@types/react" "*"
+ csstype "^3.0.2"
+
"@types/testing-library__jest-dom@^5.9.1":
version "5.14.5"
resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz#d113709c90b3c75fdb127ec338dad7d5f86c974f"
@@ -2850,6 +2889,22 @@ babel-plugin-polyfill-regenerator@^0.4.1:
dependencies:
"@babel/helper-define-polyfill-provider" "^0.3.3"
+"babel-plugin-styled-components@>= 1.12.0":
+ version "2.0.7"
+ resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+ integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.16.0"
+ "@babel/helper-module-imports" "^7.16.0"
+ babel-plugin-syntax-jsx "^6.18.0"
+ lodash "^4.17.11"
+ picomatch "^2.3.0"
+
+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 sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==
+
babel-plugin-transform-react-remove-prop-types@^0.4.24:
version "0.4.24"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
@@ -3128,6 +3183,11 @@ camelcase@^6.2.0, camelcase@^6.2.1:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+camelize@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+ integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
caniuse-api@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -3480,6 +3540,11 @@ css-blank-pseudo@^3.0.3:
dependencies:
postcss-selector-parser "^6.0.9"
+css-color-keywords@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+ integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
css-declaration-sorter@^6.3.1:
version "6.3.1"
resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz#be5e1d71b7a992433fb1c542c7a1b835e45682ec"
@@ -3549,6 +3614,15 @@ css-select@^4.1.3:
domutils "^2.8.0"
nth-check "^2.0.1"
+css-to-react-native@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+ integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+ dependencies:
+ camelize "^1.0.0"
+ css-color-keywords "^1.0.0"
+ postcss-value-parser "^4.0.2"
+
css-tree@1.0.0-alpha.37:
version "1.0.0-alpha.37"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -5046,6 +5120,13 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
+ version "3.3.2"
+ resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+ integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+ dependencies:
+ react-is "^16.7.0"
+
hoopy@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -7253,7 +7334,7 @@ picocolors@^1.0.0:
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -7812,7 +7893,7 @@ postcss-unique-selectors@^5.1.1:
dependencies:
postcss-selector-parser "^6.0.5"
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -8061,7 +8142,7 @@ react-error-overlay@^6.0.11:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -8619,6 +8700,11 @@ setprototypeof@1.2.0:
resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
+shallowequal@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+ integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
shebang-command@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -8992,6 +9078,22 @@ style-loader@^3.3.1:
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
+styled-components@^5, styled-components@^5.3.6:
+ version "5.3.6"
+ resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
+ integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
+ dependencies:
+ "@babel/helper-module-imports" "^7.0.0"
+ "@babel/traverse" "^7.4.5"
+ "@emotion/is-prop-valid" "^1.1.0"
+ "@emotion/stylis" "^0.8.4"
+ "@emotion/unitless" "^0.7.4"
+ babel-plugin-styled-components ">= 1.12.0"
+ css-to-react-native "^3.0.0"
+ hoist-non-react-statics "^3.0.0"
+ shallowequal "^1.1.0"
+ supports-color "^5.5.0"
+
stylehacks@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
@@ -9000,7 +9102,7 @@ stylehacks@^5.1.1:
browserslist "^4.21.4"
postcss-selector-parser "^6.0.4"
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==