diff --git a/.changeset/red-cameras-burn.md b/.changeset/red-cameras-burn.md
new file mode 100644
index 000000000..da5e396d8
--- /dev/null
+++ b/.changeset/red-cameras-burn.md
@@ -0,0 +1,5 @@
+---
+'@craftjs/layers': patch
+---
+
+Updated 'styled-components' from 4.x.x to 6.x.x
diff --git a/examples/landing/components/editor/RenderNode.tsx b/examples/landing/components/editor/RenderNode.tsx
index 8f849016c..f4ab8be62 100644
--- a/examples/landing/components/editor/RenderNode.tsx
+++ b/examples/landing/components/editor/RenderNode.tsx
@@ -2,7 +2,7 @@ import { useNode, useEditor } from '@craftjs/core';
 import { ROOT_NODE } from '@craftjs/utils';
 import React, { useEffect, useRef, useCallback } from 'react';
 import ReactDOM from 'react-dom';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import ArrowUp from '../../public/icons/arrow-up.svg';
 import Delete from '../../public/icons/delete.svg';
diff --git a/examples/landing/components/editor/Viewport/Header.tsx b/examples/landing/components/editor/Viewport/Header.tsx
index 640e6b5ea..0a80d9890 100644
--- a/examples/landing/components/editor/Viewport/Header.tsx
+++ b/examples/landing/components/editor/Viewport/Header.tsx
@@ -2,7 +2,7 @@ import { useEditor } from '@craftjs/core';
 import { Tooltip } from '@material-ui/core';
 import cx from 'classnames';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import Checkmark from '../../../public/icons/check.svg';
 import Customize from '../../../public/icons/customize.svg';
diff --git a/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx b/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx
index b0b37bad1..40937890b 100644
--- a/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx
+++ b/examples/landing/components/editor/Viewport/Sidebar/SidebarItem.tsx
@@ -1,20 +1,22 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import Arrow from '../../../../public/icons/arrow.svg';
 
-const SidebarItemDiv = styled.div<{ visible?: boolean; height?: string }>`
+const SidebarItemDiv = styled.div<{ $visible?: boolean; $height?: string }>`
   height: ${(props) =>
-    props.visible && props.height && props.height !== 'full'
-      ? `${props.height}`
+    props.$visible && props.$height && props.$height !== 'full'
+      ? `${props.$height}`
       : 'auto'};
   flex: ${(props) =>
-    props.visible && props.height && props.height === 'full' ? `1` : 'unset'};
+    props.$visible && props.$height && props.$height === 'full'
+      ? `1`
+      : 'unset'};
   color: #545454;
 `;
 
-const Chevron = styled.a<{ visible: boolean }>`
-  transform: rotate(${(props) => (props.visible ? 180 : 0)}deg);
+const Chevron = styled.a<{ $visible: boolean }>`
+  transform: rotate(${(props) => (props.$visible ? 180 : 0)}deg);
   svg {
     width: 8px;
     height: 8px;
@@ -47,7 +49,11 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
   onChange,
 }) => {
   return (
-    <SidebarItemDiv visible={visible} height={height} className="flex flex-col">
+    <SidebarItemDiv
+      $visible={visible}
+      $height={height}
+      className="flex flex-col"
+    >
       <HeaderDiv
         onClick={() => {
           if (onChange) onChange(!visible);
@@ -60,7 +66,7 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
           {React.createElement(icon, { className: 'w-4 h-4 mr-2' })}
           <h2 className="text-xs uppercase">{title}</h2>
         </div>
-        <Chevron visible={visible}>
+        <Chevron $visible={visible}>
           <Arrow />
         </Chevron>
       </HeaderDiv>
diff --git a/examples/landing/components/editor/Viewport/Sidebar/index.tsx b/examples/landing/components/editor/Viewport/Sidebar/index.tsx
index ffe7c42aa..feaeef80f 100644
--- a/examples/landing/components/editor/Viewport/Sidebar/index.tsx
+++ b/examples/landing/components/editor/Viewport/Sidebar/index.tsx
@@ -1,7 +1,7 @@
 import { useEditor } from '@craftjs/core';
 import { Layers } from '@craftjs/layers';
 import React, { useState } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { SidebarItem } from './SidebarItem';
 
@@ -9,11 +9,11 @@ import CustomizeIcon from '../../../../public/icons/customize.svg';
 import LayerIcon from '../../../../public/icons/layers.svg';
 import { Toolbar } from '../../Toolbar';
 
-export const SidebarDiv = styled.div<{ enabled: boolean }>`
+export const SidebarDiv = styled.div<{ $enabled: boolean }>`
   width: 280px;
-  opacity: ${(props) => (props.enabled ? 1 : 0)};
+  opacity: ${(props) => (props.$enabled ? 1 : 0)};
   background: #fff;
-  margin-right: ${(props) => (props.enabled ? 0 : -280)}px;
+  margin-right: ${(props) => (props.$enabled ? 0 : -280)}px;
 `;
 
 const CarbonAdsContainer = styled.div`
@@ -143,7 +143,7 @@ export const Sidebar = () => {
   }));
 
   return (
-    <SidebarDiv enabled={enabled} className="sidebar transition bg-white w-2">
+    <SidebarDiv $enabled={enabled} className="sidebar transition bg-white w-2">
       <div className="flex flex-col h-full">
         <SidebarItem
           icon={CustomizeIcon}
diff --git a/examples/landing/components/editor/Viewport/Toolbox.tsx b/examples/landing/components/editor/Viewport/Toolbox.tsx
index f1a2e14e8..4518e8402 100644
--- a/examples/landing/components/editor/Viewport/Toolbox.tsx
+++ b/examples/landing/components/editor/Viewport/Toolbox.tsx
@@ -1,7 +1,7 @@
 import { Element, useEditor } from '@craftjs/core';
 import { Tooltip } from '@material-ui/core';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import ButtonSvg from '../../../public/icons/toolbox/button.svg';
 import SquareSvg from '../../../public/icons/toolbox/rectangle.svg';
@@ -12,20 +12,20 @@ import { Container } from '../../selectors/Container';
 import { Text } from '../../selectors/Text';
 import { Video } from '../../selectors/Video';
 
-const ToolboxDiv = styled.div<{ enabled: boolean }>`
+const ToolboxDiv = styled.div<{ $enabled: boolean }>`
   transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
-  ${(props) => (!props.enabled ? `width: 0;` : '')}
-  ${(props) => (!props.enabled ? `opacity: 0;` : '')}
+  ${(props) => (!props.$enabled ? `width: 0;` : '')}
+  ${(props) => (!props.$enabled ? `opacity: 0;` : '')}
 `;
 
-const Item = styled.a<{ move?: boolean }>`
+const Item = styled.a<{ $move?: boolean }>`
   svg {
     width: 22px;
     height: 22px;
     fill: #707070;
   }
   ${(props) =>
-    props.move &&
+    props.$move &&
     `
     cursor: move;
   `}
@@ -41,7 +41,7 @@ export const Toolbox = () => {
 
   return (
     <ToolboxDiv
-      enabled={enabled && enabled}
+      $enabled={enabled && enabled}
       className="toolbox transition w-12 h-full flex flex-col bg-white"
     >
       <div className="flex flex-1 flex-col items-center pt-3">
@@ -61,7 +61,7 @@ export const Toolbox = () => {
           }
         >
           <Tooltip title="Container" placement="right">
-            <Item className="m-2 pb-2 cursor-pointer block" move>
+            <Item className="m-2 pb-2 cursor-pointer block" $move>
               <SquareSvg />
             </Item>
           </Tooltip>
@@ -72,21 +72,21 @@ export const Toolbox = () => {
           }
         >
           <Tooltip title="Text" placement="right">
-            <Item className="m-2 pb-2 cursor-pointer block" move>
+            <Item className="m-2 pb-2 cursor-pointer block" $move>
               <TypeSvg />
             </Item>
           </Tooltip>
         </div>
         <div ref={(ref) => create(ref, <Button />)}>
           <Tooltip title="Button" placement="right">
-            <Item className="m-2 pb-2 cursor-pointer block" move>
+            <Item className="m-2 pb-2 cursor-pointer block" $move>
               <ButtonSvg />
             </Item>
           </Tooltip>
         </div>
         <div ref={(ref) => create(ref, <Video />)}>
           <Tooltip title="Video" placement="right">
-            <Item className="m-2 pb-2 cursor-pointer block" move>
+            <Item className="m-2 pb-2 cursor-pointer block" $move>
               <YoutubeSvg />
             </Item>
           </Tooltip>
diff --git a/examples/landing/components/selectors/Button/index.tsx b/examples/landing/components/selectors/Button/index.tsx
index aa21c6366..0878c704f 100644
--- a/examples/landing/components/selectors/Button/index.tsx
+++ b/examples/landing/components/selectors/Button/index.tsx
@@ -1,7 +1,7 @@
 import { UserComponent, useNode } from '@craftjs/core';
 import cx from 'classnames';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { ButtonSettings } from './ButtonSettings';
 
@@ -16,40 +16,55 @@ type ButtonProps = {
   textComponent?: any;
 };
 
-const StyledButton = styled.button<ButtonProps>`
+// N.B: Alias required StyledComponent props for Transient Props; https://styled-components.com/docs/api#transient-props
+type StyledButtonProps = {
+  $background?: Record<'r' | 'g' | 'b' | 'a', number>;
+  $buttonStyle?: string;
+  $margin?: any[];
+};
+
+const StyledButton = styled.button<StyledButtonProps>`
   background: ${(props) =>
-    props.buttonStyle === 'full'
-      ? `rgba(${Object.values(props.background)})`
+    props.$buttonStyle === 'full'
+      ? `rgba(${Object.values(props.$background)})`
       : 'transparent'};
   border: 2px solid transparent;
   border-color: ${(props) =>
-    props.buttonStyle === 'outline'
-      ? `rgba(${Object.values(props.background)})`
+    props.$buttonStyle === 'outline'
+      ? `rgba(${Object.values(props.$background)})`
       : 'transparent'};
-  margin: ${({ margin }) =>
-    `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};
+  margin: ${({ $margin }) =>
+    `${$margin[0]}px ${$margin[1]}px ${$margin[2]}px ${$margin[3]}px`};
 `;
 
-export const Button: UserComponent<ButtonProps> = (props: any) => {
+export const Button: UserComponent<ButtonProps> = ({
+  text,
+  textComponent,
+  color,
+  buttonStyle,
+  background,
+  margin,
+}: ButtonProps) => {
   const {
     connectors: { connect },
   } = useNode((node) => ({
     selected: node.events.selected,
   }));
 
-  const { text, textComponent, color, ...otherProps } = props;
   return (
     <StyledButton
       ref={connect}
       className={cx([
         'rounded w-full px-4 py-2',
         {
-          'shadow-lg': props.buttonStyle === 'full',
+          'shadow-lg': buttonStyle === 'full',
         },
       ])}
-      {...otherProps}
+      $buttonStyle={buttonStyle}
+      $background={background}
+      $margin={margin}
     >
-      <Text {...textComponent} text={text} color={props.color} />
+      <Text {...textComponent} text={text} color={color} />
     </StyledButton>
   );
 };
diff --git a/examples/landing/components/selectors/Resizer.tsx b/examples/landing/components/selectors/Resizer.tsx
index 751e34d09..0cb069cde 100644
--- a/examples/landing/components/selectors/Resizer.tsx
+++ b/examples/landing/components/selectors/Resizer.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { debounce } from 'debounce';
 import { Resizable } from 're-resizable';
 import React, { useRef, useEffect, useState, useCallback } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import {
   isPercentage,
@@ -12,7 +12,7 @@ import {
   getElementDimensions,
 } from '../../utils/numToMeasurement';
 
-const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
+const Indicators = styled.div<{ $bound?: 'row' | 'column' }>`
   position: absolute;
   top: 0;
   left: 0;
@@ -32,8 +32,8 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
     border: 2px solid #36a9e0;
     &:nth-child(1) {
       ${(props) =>
-        props.bound
-          ? props.bound === 'row'
+        props.$bound
+          ? props.$bound === 'row'
             ? `
                 left: 50%;
                 top: -5px;
@@ -52,12 +52,12 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
     &:nth-child(2) {
       right: -5px;
       top: -5px;
-      display: ${(props) => (props.bound ? 'none' : 'block')};
+      display: ${(props) => (props.$bound ? 'none' : 'block')};
     }
     &:nth-child(3) {
       ${(props) =>
-        props.bound
-          ? props.bound === 'row'
+        props.$bound
+          ? props.$bound === 'row'
             ? `
                 left: 50%;
                 bottom: -5px;
@@ -76,7 +76,7 @@ const Indicators = styled.div<{ bound?: 'row' | 'column' }>`
     &:nth-child(4) {
       bottom: -5px;
       right: -5px;
-      display: ${(props) => (props.bound ? 'none' : 'block')};
+      display: ${(props) => (props.$bound ? 'none' : 'block')};
     }
   }
 `;
@@ -257,7 +257,7 @@ export const Resizer = ({ propKey, children, ...props }: any) => {
     >
       {children}
       {active && (
-        <Indicators bound={fillSpace === 'yes' ? parentDirection : false}>
+        <Indicators $bound={fillSpace === 'yes' ? parentDirection : false}>
           <span></span>
           <span></span>
           <span></span>
diff --git a/examples/landing/components/selectors/Video/index.tsx b/examples/landing/components/selectors/Video/index.tsx
index 3daaaf746..d7d7608d1 100644
--- a/examples/landing/components/selectors/Video/index.tsx
+++ b/examples/landing/components/selectors/Video/index.tsx
@@ -1,18 +1,18 @@
 import { useNode, useEditor } from '@craftjs/core';
 import React from 'react';
 import YouTube from 'react-youtube';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { VideoSettings } from './VideoSettings';
 
-const YoutubeDiv = styled.div<any>`
+const YoutubeDiv = styled.div<{ $enabled: boolean }>`
   width: 100%;
   height: 100%;
   > div {
     height: 100%;
   }
   iframe {
-    pointer-events: ${(props) => (props.enabled ? 'none' : 'auto')};
+    pointer-events: ${(props) => (props.$enabled ? 'none' : 'auto')};
     // width:100%!important;
     // height:100%!important;
   }
@@ -31,7 +31,7 @@ export const Video = (props: any) => {
   const { videoId } = props;
 
   return (
-    <YoutubeDiv ref={connect} enabled={enabled}>
+    <YoutubeDiv ref={connect} $enabled={enabled}>
       <YouTube
         videoId={videoId}
         opts={{
diff --git a/examples/landing/package.json b/examples/landing/package.json
index 79a98e7fc..2a504bb90 100644
--- a/examples/landing/package.json
+++ b/examples/landing/package.json
@@ -29,7 +29,7 @@
     "react-loading": "2.0.3",
     "react-rnd": "10.1.1",
     "react-youtube": "7.9.0",
-    "styled-components": "4.4.1"
+    "styled-components": "6.1.13"
   },
   "devDependencies": {
     "@babel/core": "7.7.5",
diff --git a/packages/layers/package.json b/packages/layers/package.json
index cbd00fcc7..6bc2d20cb 100644
--- a/packages/layers/package.json
+++ b/packages/layers/package.json
@@ -41,11 +41,11 @@
   "devDependencies": {
     "@babel/core": "7.7.4",
     "@svgr/rollup": "6.5.1",
-    "styled-components": "4.2.1"
+    "styled-components": "6.1.13"
   },
   "peerDependencies": {
     "@craftjs/core": ">=0.2.0",
     "react": "^16.8.0 || ^17 || ^18",
-    "styled-components": ">= 4"
+    "styled-components": ">= 6.1"
   }
 }
diff --git a/packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx b/packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx
index b5418c411..b56aa56c1 100644
--- a/packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx
+++ b/packages/layers/src/layers/DefaultLayer/DefaultLayer.tsx
@@ -1,38 +1,39 @@
 import { useEditor } from '@craftjs/core';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { DefaultLayerHeader } from './DefaultLayerHeader';
 
 import { useLayer } from '../useLayer';
 
 const LayerNodeDiv = styled.div<{
-  expanded: boolean;
-  hasCanvases: boolean;
-  hovered: boolean;
+  $expanded: boolean;
+  $hasCanvases: boolean;
+  $hovered: boolean;
 }>`
-  background: ${(props) => (props.hovered ? '#f1f1f1' : 'transparent')};
+  background: ${(props) => (props.$hovered ? '#f1f1f1' : 'transparent')};
   display: block;
-  padding-bottom: ${(props) => (props.hasCanvases && props.expanded ? 5 : 0)}px;
+  padding-bottom: ${(props) =>
+    props.$hasCanvases && props.$expanded ? 5 : 0}px;
 `;
 
-const LayerChildren = styled.div<{ hasCanvases: boolean }>`
-  margin: 0 0 0 ${(props) => (props.hasCanvases ? 35 : 0)}px;
+const LayerChildren = styled.div<{ $hasCanvases: boolean }>`
+  margin: 0 0 0 ${(props) => (props.$hasCanvases ? 35 : 0)}px;
   background: ${(props) =>
-    props.hasCanvases ? 'rgba(255, 255, 255, 0.02)' : 'transparent'};
+    props.$hasCanvases ? 'rgba(255, 255, 255, 0.02)' : 'transparent'};
   position: relative;
 
   ${(props) =>
-    props.hasCanvases
+    props.$hasCanvases
       ? `
-  
+
   box-shadow: 0px 0px 44px -1px #00000014;
   border-radius: 10px;
   margin-right: 5px;
   margin-bottom:5px;
-  margin-top:5px; 
+  margin-top:5px;
   > * { overflow:hidden; }
-    &:before { 
+    &:before {
       position:absolute;
       left:-19px;
       width: 2px;
@@ -67,14 +68,14 @@ export const DefaultLayer = ({ children }: DefaultLayerProps) => {
   return (
     <LayerNodeDiv
       ref={layer}
-      expanded={expanded}
-      hasCanvases={hasChildCanvases}
-      hovered={hovered}
+      $expanded={expanded}
+      $hasCanvases={hasChildCanvases}
+      $hovered={hovered}
     >
       <DefaultLayerHeader />
       {children ? (
         <LayerChildren
-          hasCanvases={hasChildCanvases}
+          $hasCanvases={hasChildCanvases}
           className="craft-layer-children"
         >
           {children}
diff --git a/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx b/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx
index 3e4330919..7db59a438 100644
--- a/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx
+++ b/packages/layers/src/layers/DefaultLayer/DefaultLayerHeader.tsx
@@ -1,6 +1,6 @@
 import { useEditor } from '@craftjs/core';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { EditableLayerName } from './EditableLayerName';
 import Arrow from './svg/arrow.svg';
@@ -9,15 +9,15 @@ import Linked from './svg/linked.svg';
 
 import { useLayer } from '../useLayer';
 
-const StyledDiv = styled.div<{ depth: number; selected: boolean }>`
+const StyledDiv = styled.div<{ $depth: number; $selected: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 4px 10px;
-  background: ${(props) => (props.selected ? '#2680eb' : 'transparent')};
-  color: ${(props) => (props.selected ? '#fff' : 'inherit')};
+  background: ${(props) => (props.$selected ? '#2680eb' : 'transparent')};
+  color: ${(props) => (props.$selected ? '#fff' : 'inherit')};
   svg {
-    fill: ${(props) => (props.selected ? '#fff' : '#808184')};
+    fill: ${(props) => (props.$selected ? '#fff' : '#808184')};
     margin-top: 2px;
   }
   .inner {
@@ -26,7 +26,7 @@ const StyledDiv = styled.div<{ depth: number; selected: boolean }>`
       padding: 0px;
       flex: 1;
       display: flex;
-      margin-left: ${(props) => props.depth * 10}px;
+      margin-left: ${(props) => props.$depth * 10}px;
       align-items: center;
       div.layer-name {
         flex: 1;
@@ -39,7 +39,7 @@ const StyledDiv = styled.div<{ depth: number; selected: boolean }>`
   }
 `;
 
-const Expand = styled.a<{ expanded: boolean }>`
+const Expand = styled.a<{ $expanded: boolean }>`
   width: 8px;
   height: 8px;
   display: flex;
@@ -47,12 +47,12 @@ const Expand = styled.a<{ expanded: boolean }>`
   justify-content: center;
   transform-origin: center;
   transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
-  transform: rotate(${(props) => (props.expanded ? 180 : 0)}deg);
+  transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);
   opacity: 0.7;
   cursor: pointer;
 `;
 
-const Hide = styled.a<{ selected: boolean; isHidden: boolean }>`
+const Hide = styled.a<{ $selected: boolean; $isHidden: boolean }>`
   width: 14px;
   height: 14px;
   margin-right: 10px;
@@ -64,20 +64,20 @@ const Hide = styled.a<{ selected: boolean; isHidden: boolean }>`
     width: 100%;
     height: 100%;
     object-fit: contain;
-    opacity: ${(props) => (props.isHidden ? 0.2 : 1)};
+    opacity: ${(props) => (props.$isHidden ? 0.2 : 1)};
   }
   &:after {
     content: ' ';
     width: 2px;
-    height: ${(props) => (props.isHidden ? 100 : 0)}%;
+    height: ${(props) => (props.$isHidden ? 100 : 0)}%;
     position: absolute;
     left: 2px;
     top: 3px;
-    background: ${(props) => (props.selected ? '#fff' : '#808184')};
+    background: ${(props) => (props.$selected ? '#fff' : '#808184')};
     transform: rotate(-45deg);
     transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     transform-origin: 0% 0%;
-    opacity: ${(props) => (props.isHidden ? 0.4 : 1)};
+    opacity: ${(props) => (props.$isHidden ? 0.4 : 1)};
   }
 `;
 
@@ -117,10 +117,10 @@ export const DefaultLayerHeader = () => {
   });
 
   return (
-    <StyledDiv selected={selected} ref={drag} depth={depth}>
+    <StyledDiv $selected={selected} ref={drag} $depth={depth}>
       <Hide
-        selected={selected}
-        isHidden={hidden}
+        $selected={selected}
+        $isHidden={hidden}
         onClick={() => actions.setHidden(id, !hidden)}
       >
         <Eye />
@@ -138,7 +138,7 @@ export const DefaultLayerHeader = () => {
           </div>
           <div>
             {children && children.length ? (
-              <Expand expanded={expanded} onMouseDown={() => toggleLayer()}>
+              <Expand $expanded={expanded} onMouseDown={() => toggleLayer()}>
                 <Arrow />
               </Expand>
             ) : null}
diff --git a/yarn.lock b/yarn.lock
index f17f7cb08..519264eda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -523,7 +523,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-annotate-as-pure@npm:^7.0.0, @babel/helper-annotate-as-pure@npm:^7.12.13":
+"@babel/helper-annotate-as-pure@npm:^7.12.13":
   version: 7.12.13
   resolution: "@babel/helper-annotate-as-pure@npm:7.12.13"
   dependencies:
@@ -711,7 +711,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.13.12":
+"@babel/helper-module-imports@npm:^7.13.12":
   version: 7.13.12
   resolution: "@babel/helper-module-imports@npm:7.13.12"
   dependencies:
@@ -2537,11 +2537,11 @@ __metadata:
     "@craftjs/utils": ^0.2.4
     "@svgr/rollup": 6.5.1
     react-contenteditable: ^3.3.3
-    styled-components: 4.2.1
+    styled-components: 6.1.13
   peerDependencies:
     "@craftjs/core": ">=0.2.0"
     react: ^16.8.0 || ^17 || ^18
-    styled-components: ">= 4"
+    styled-components: ">= 6.1"
   languageName: unknown
   linkType: soft
 
@@ -3171,42 +3171,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^0.7.3":
-  version: 0.7.3
-  resolution: "@emotion/is-prop-valid@npm:0.7.3"
-  dependencies:
-    "@emotion/memoize": 0.7.1
-  checksum: 76c2cb5043b0a81dd5c1a8d76baa7c273e9cb5d177efaa482406b0e170ca2ce4f9274f299769e5d5489b319ba2fd94dfd85b912752242c23b159098606da68a9
-  languageName: node
-  linkType: hard
-
-"@emotion/is-prop-valid@npm:^0.8.1":
-  version: 0.8.5
-  resolution: "@emotion/is-prop-valid@npm:0.8.5"
+"@emotion/is-prop-valid@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@emotion/is-prop-valid@npm:1.2.2"
   dependencies:
-    "@emotion/memoize": 0.7.3
-  checksum: 8aca42d69be81035215310cb126ce9804bfe435c9757d6586fb51d43b34ddbe84bfe33d8e56f06d62c832d836391c2cf735f4df56d8de1eb17f633b8c2ae23aa
-  languageName: node
-  linkType: hard
-
-"@emotion/memoize@npm:0.7.1":
-  version: 0.7.1
-  resolution: "@emotion/memoize@npm:0.7.1"
-  checksum: fec25e74c3a4af920bfdb0f552c16f648c8f4343d51cb073af85fcec1a382ce041a4e082f458a999dc3599e9d768c0dd28e5accd6066169e01364b270b7036cf
+    "@emotion/memoize": ^0.8.1
+  checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25
   languageName: node
   linkType: hard
 
-"@emotion/memoize@npm:0.7.3":
-  version: 0.7.3
-  resolution: "@emotion/memoize@npm:0.7.3"
-  checksum: 9c0372982eb360425a03272111a748a6ca4b103d52bc460c29907501bff81007f731a16a55508a0818d826c3e9ac05f8c31beb21e173ea7920f3ee3503c2e146
+"@emotion/memoize@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/memoize@npm:0.8.1"
+  checksum: a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.7.0":
-  version: 0.7.4
-  resolution: "@emotion/unitless@npm:0.7.4"
-  checksum: 45714ce24f6e0b4b3ad3376cc12e612e15d145307feb52afa0bf7d3ada550e809b0ed0553d2ca9212f1fdb9da44a8f369afa78c760f3365c175118e2feec9288
+"@emotion/unitless@npm:0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/unitless@npm:0.8.1"
+  checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
   languageName: node
   linkType: hard
 
@@ -5575,6 +5559,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf
+  languageName: node
+  linkType: hard
+
 "@types/tough-cookie@npm:*":
   version: 4.0.2
   resolution: "@types/tough-cookie@npm:4.0.2"
@@ -7014,27 +7005,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-styled-components@npm:>= 1":
-  version: 1.10.6
-  resolution: "babel-plugin-styled-components@npm:1.10.6"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.0.0
-    "@babel/helper-module-imports": ^7.0.0
-    babel-plugin-syntax-jsx: ^6.18.0
-    lodash: ^4.17.11
-  peerDependencies:
-    styled-components: ">= 2"
-  checksum: 80998176f91c8f681f612ee0f8d2d8c93afeb1cc0cb71abf69ffed0ba192c0069d15c69994c6a0ca9a00ad125487eb4ac28458fd4a71b707b8204d8569575b4a
-  languageName: node
-  linkType: hard
-
-"babel-plugin-syntax-jsx@npm:^6.18.0":
-  version: 6.18.0
-  resolution: "babel-plugin-syntax-jsx@npm:6.18.0"
-  checksum: 0c7ce5b81d6cfc01a7dd7a76a9a8f090ee02ba5c890310f51217ef1a7e6163fb7848994bbc14fd560117892e82240df9c7157ad0764da67ca5f2afafb73a7d27
-  languageName: node
-  linkType: hard
-
 "babel-plugin-transform-react-remove-prop-types@npm:^0.4.24":
   version: 0.4.24
   resolution: "babel-plugin-transform-react-remove-prop-types@npm:0.4.24"
@@ -8905,14 +8875,14 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:^2.2.2":
-  version: 2.3.2
-  resolution: "css-to-react-native@npm:2.3.2"
+"css-to-react-native@npm:3.2.0":
+  version: 3.2.0
+  resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
     camelize: ^1.0.0
     css-color-keywords: ^1.0.0
-    postcss-value-parser: ^3.3.0
-  checksum: 0cc6ea2e519614c8d4e1e8e3872344b137f8bd091f0b21335037adbaa894b600b2cdb10b14d7f9f4047f6465dcd14daff10fd7ddbfa4f2ac300093687a9f0046
+    postcss-value-parser: ^4.0.2
+  checksum: 263be65e805aef02c3f20c064665c998a8c35293e1505dbe6e3054fb186b01a9897ac6cf121f9840e5a9dfe3fb3994f6fcd0af84a865f1df78ba5bf89e77adce
   languageName: node
   linkType: hard
 
@@ -9181,6 +9151,13 @@ clsx@latest:
   languageName: node
   linkType: hard
 
+"csstype@npm:3.1.3":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^2.2.0, csstype@npm:^2.5.2, csstype@npm:^2.6.5, csstype@npm:^2.6.7":
   version: 2.6.7
   resolution: "csstype@npm:2.6.7"
@@ -10871,7 +10848,7 @@ clsx@latest:
     react-loading: 2.0.3
     react-rnd: 10.1.1
     react-youtube: 7.9.0
-    styled-components: 4.4.1
+    styled-components: 6.1.13
     tailwindcss: latest
     typescript: 4.9.5
   languageName: unknown
@@ -14038,13 +14015,6 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"is-what@npm:^3.3.1":
-  version: 3.3.1
-  resolution: "is-what@npm:3.3.1"
-  checksum: 23f40889a754f472b03504f20605cd234e97506f6a797e6d1f24193463dbbbbad7348c2b30aa217210280d1d9ef9bb400773fe292d61660155492e94087496cc
-  languageName: node
-  linkType: hard
-
 "is-whitespace-character@npm:^1.0.0":
   version: 1.0.3
   resolution: "is-whitespace-character@npm:1.0.3"
@@ -16010,13 +15980,6 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"memoize-one@npm:^5.0.0":
-  version: 5.1.1
-  resolution: "memoize-one@npm:5.1.1"
-  checksum: 51a8e96cd94614909e1656843ecb9307440fbfa64994be12978bb30bc190f8e66010cb7a35d3ee641a52302ce701dcea990b636ea2ef3c1cf94a50b4651f5446
-  languageName: node
-  linkType: hard
-
 "memorystream@npm:^0.3.1":
   version: 0.3.1
   resolution: "memorystream@npm:0.3.1"
@@ -16062,15 +16025,6 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"merge-anything@npm:^2.2.4":
-  version: 2.4.1
-  resolution: "merge-anything@npm:2.4.1"
-  dependencies:
-    is-what: ^3.3.1
-  checksum: 00f8b1bc1fd8af1d7573fff10e04df369da725aed5f9442c953a275f5ed5f66c919b5a2eb8ada74fb0a411ad318c9bdf97b3721b9120f7085b02059b479468a5
-  languageName: node
-  linkType: hard
-
 "merge-descriptors@npm:1.0.1":
   version: 1.0.1
   resolution: "merge-descriptors@npm:1.0.1"
@@ -16604,6 +16558,15 @@ clsx@latest:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "nanoid@npm:3.3.7"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2
+  languageName: node
+  linkType: hard
+
 "natural-compare-lite@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare-lite@npm:1.4.0"
@@ -19436,6 +19399,17 @@ clsx@latest:
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: ^3.3.7
+    picocolors: ^1.0.0
+    source-map-js: ^1.2.0
+  checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^6.0.9":
   version: 6.0.23
   resolution: "postcss@npm:6.0.23"
@@ -19707,7 +19681,7 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"prop-types@latest, prop-types@npm:^15.5.10, prop-types@npm:^15.5.3, prop-types@npm:^15.5.4, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.1, prop-types@npm:^15.7.2":
+"prop-types@latest, prop-types@npm:^15.5.10, prop-types@npm:^15.5.3, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.1, prop-types@npm:^15.7.2":
   version: 15.7.2
   resolution: "prop-types@npm:15.7.2"
   dependencies:
@@ -21585,7 +21559,7 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:^1.1.0":
+"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -21909,6 +21883,13 @@ clsx@latest:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.0":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 4eb0cd997cdf228bc253bcaff9340afeb706176e64868ecd20efbe6efea931465f43955612346d6b7318789e5265bdc419bc7669c1cebe3db0eb255f57efa76b
+  languageName: node
+  linkType: hard
+
 "source-map-support@npm:0.5.13":
   version: 0.5.13
   resolution: "source-map-support@npm:0.5.13"
@@ -22508,49 +22489,23 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"styled-components@npm:4.2.1":
-  version: 4.2.1
-  resolution: "styled-components@npm:4.2.1"
-  dependencies:
-    "@babel/helper-module-imports": ^7.0.0
-    "@emotion/is-prop-valid": ^0.7.3
-    "@emotion/unitless": ^0.7.0
-    babel-plugin-styled-components: ">= 1"
-    css-to-react-native: ^2.2.2
-    memoize-one: ^5.0.0
-    prop-types: ^15.5.4
-    react-is: ^16.6.0
-    stylis: ^3.5.0
-    stylis-rule-sheet: ^0.0.10
-    supports-color: ^5.5.0
-  peerDependencies:
-    react: ">= 16.3.0"
-    react-dom: ">= 16.3.0"
-  checksum: 9e84c2ec05fcec6505344d9793f2f069c144d66615924e06ac4af7a0a68f8e65dde6b2d1ed5f293af2087bbeedce0eb17aa75b84927074fabf58bff1c587e956
-  languageName: node
-  linkType: hard
-
-"styled-components@npm:4.4.1":
-  version: 4.4.1
-  resolution: "styled-components@npm:4.4.1"
+"styled-components@npm:6.1.13":
+  version: 6.1.13
+  resolution: "styled-components@npm:6.1.13"
   dependencies:
-    "@babel/helper-module-imports": ^7.0.0
-    "@babel/traverse": ^7.0.0
-    "@emotion/is-prop-valid": ^0.8.1
-    "@emotion/unitless": ^0.7.0
-    babel-plugin-styled-components: ">= 1"
-    css-to-react-native: ^2.2.2
-    memoize-one: ^5.0.0
-    merge-anything: ^2.2.4
-    prop-types: ^15.5.4
-    react-is: ^16.6.0
-    stylis: ^3.5.0
-    stylis-rule-sheet: ^0.0.10
-    supports-color: ^5.5.0
+    "@emotion/is-prop-valid": 1.2.2
+    "@emotion/unitless": 0.8.1
+    "@types/stylis": 4.2.5
+    css-to-react-native: 3.2.0
+    csstype: 3.1.3
+    postcss: 8.4.38
+    shallowequal: 1.1.0
+    stylis: 4.3.2
+    tslib: 2.6.2
   peerDependencies:
-    react: ">= 16.3.0"
-    react-dom: ">= 16.3.0"
-  checksum: df137c7f621b4250cb40e0cd915275a01d2cef0f5104314a9b8fd7fe4127787f789ca9331b958164203f847e796b03e6e315dbdd6f526b4e4d484f39077950c6
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: cb836c5d4cc8d183f4b70a4a1b1aa13551c57389e9c8fe3286619eef9fc81466fee09c39a1c8b5aa03deb0e466e4d5ee04921f7d9f3b7afe4744e539e6047550
   languageName: node
   linkType: hard
 
@@ -22593,19 +22548,10 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"stylis-rule-sheet@npm:^0.0.10":
-  version: 0.0.10
-  resolution: "stylis-rule-sheet@npm:0.0.10"
-  peerDependencies:
-    stylis: ^3.5.0
-  checksum: 97ad016c64ecce8d4b2c2c1c3cf3260de3c0e2b151e78f90ded6cc1bfcca536625a77277af16a9c8a241236a9e4fd5b70d88dfa32e9b48afaddb8f102a95582d
-  languageName: node
-  linkType: hard
-
-"stylis@npm:^3.5.0":
-  version: 3.5.4
-  resolution: "stylis@npm:3.5.4"
-  checksum: 3673a748ad236219bd77ca9c0a8730b8726812e612cbc844aa6f029f13666a10cf2825a5f8d41f05e8af02b5987d31b7d3ebe995e4b42e0255366fec23489b77
+"stylis@npm:4.3.2":
+  version: 4.3.2
+  resolution: "stylis@npm:4.3.2"
+  checksum: 0faa8a97ff38369f47354376cd9f0def9bf12846da54c28c5987f64aaf67dcb6f00dce88a8632013bfb823b2c4d1d62a44f4ac20363a3505a7ab4e21b70179fc
   languageName: node
   linkType: hard
 
@@ -23180,6 +23126,13 @@ clsx@latest:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.6.2, tslib@npm:^2.3.0":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -23201,13 +23154,6 @@ clsx@latest:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.3.0":
-  version: 2.6.2
-  resolution: "tslib@npm:2.6.2"
-  checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
-  languageName: node
-  linkType: hard
-
 "tsutils@npm:^3.17.1":
   version: 3.17.1
   resolution: "tsutils@npm:3.17.1"