chore(deps-major) Update dependency styled-components to v6

package.json

@@ -56,7 +56,6 @@
     "@types/react-router-dom": "5.3.3",
     "@types/react-window": "1.8.5",
     "@types/sanitize-html": "2.9.0",
-    "@types/styled-components": "5.1.26",
     "@types/webpack": "5.28.2",
     "@typescript-eslint/eslint-plugin": "6.4.1",
     "@typescript-eslint/parser": "6.4.1",
@@ -117,12 +116,12 @@
     "react-router-dom": "6.11.1",
     "react-window": "1.8.9",
     "sanitize-html": "2.11.0",
-    "styled-components": "5.3.11",
+    "styled-components": "^6.0.7",
     "yarn": "1.22.19",
     "yup": "1.2.0"
   },
   "resolutions": {
-    "styled-components": "5.3.11",
+    "styled-components": "6.0.7",
     "@mui/styled-engine": "5.13.2",
     "lodash": "4.17.21",
     "glob-parent": "6.0.2",

src/components/designSystem/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import { cloneElement } from 'react'
+import { Box } from '@mui/material'
 import styled from 'styled-components'
 import clsns from 'classnames'
 
@@ -76,20 +76,24 @@ export const Icon = ({
   const SVGIcon = ALL_ICONS[name]
 
   return (
-    <StyledIcon
+    <StyledBox
       title={`${name}/${size}`}
       data-test={`${name}/${size}`}
       $size={size}
       $canClick={!!onClick}
       className={clsns('svg-icon', className, { [`icon-animation--${animation}`]: animation })}
       $color={mapColor(color)}
-      component={<SVGIcon />}
+      component={SVGIcon}
       onClick={onClick}
     />
   )
 }
 
-const StyledIcon = styled(({ component, ...props }) => cloneElement(component, props))`
+const StyledBox = styled(Box)<{
+  $size: keyof typeof IconSizeEnum
+  $canClick: boolean
+  $color: string
+}>`
   width: ${(props: { $size: keyof typeof IconSizeEnum }) => IconSizeEnum[props.$size]};
   min-width: ${(props: { $size: keyof typeof IconSizeEnum }) => IconSizeEnum[props.$size]};
   height: ${(props: { $size: keyof typeof IconSizeEnum }) => IconSizeEnum[props.$size]};