From 6af9fa1f988099ecb61887c7b9678d67cdb58010 Mon Sep 17 00:00:00 2001
From: suren-atoyan <contact@surenatoyan.com>
Date: Sat, 6 Jan 2024 14:11:01 +0400
Subject: [PATCH] import styled from material/styles

---
 README.md                     | 2 +-
 src/components/styled.ts      | 2 +-
 src/pages/Welcome/styled.ts   | 2 +-
 src/sections/Header/styled.ts | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 763957c..81ea8b5 100644
--- a/README.md
+++ b/README.md
@@ -118,7 +118,7 @@ You have access to `theme` object via `sx` prop and `styled-components`:
 ```js
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 
 // styled-components
 const MyCoolButton = styled(Button)(({ theme }) => ({
diff --git a/src/components/styled.ts b/src/components/styled.ts
index a38152a..737ffa1 100644
--- a/src/components/styled.ts
+++ b/src/components/styled.ts
@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 
 const FlexBox = styled(Box)({
   display: 'flex',
diff --git a/src/pages/Welcome/styled.ts b/src/pages/Welcome/styled.ts
index 58e33e8..ee8690b 100644
--- a/src/pages/Welcome/styled.ts
+++ b/src/pages/Welcome/styled.ts
@@ -1,4 +1,4 @@
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 
 const Image = styled('img')({
   width: '10%',
diff --git a/src/sections/Header/styled.ts b/src/sections/Header/styled.ts
index 09b378b..c9e9fcc 100644
--- a/src/sections/Header/styled.ts
+++ b/src/sections/Header/styled.ts
@@ -1,5 +1,5 @@
 import Button from '@mui/material/Button';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 
 const HotKeysButton = styled(Button)(({ theme }) => ({
   height: 'fit-content',