diff --git a/.yarn/cache/@emotion-is-prop-valid-npm-1.2.2-53f93f2b2d-61f6b128ea.zip b/.yarn/cache/@emotion-is-prop-valid-npm-1.2.2-53f93f2b2d-61f6b128ea.zip
new file mode 100644
index 00000000..f742187f
Binary files /dev/null and b/.yarn/cache/@emotion-is-prop-valid-npm-1.2.2-53f93f2b2d-61f6b128ea.zip differ
diff --git a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip b/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip
deleted file mode 100644
index 6803d574..00000000
Binary files a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip and /dev/null differ
diff --git a/.yarn/cache/@types-styled-components-npm-5.1.26-aabda06611-84f53b3101.zip b/.yarn/cache/@types-styled-components-npm-5.1.26-aabda06611-84f53b3101.zip
deleted file mode 100644
index 8b3291cb..00000000
Binary files a/.yarn/cache/@types-styled-components-npm-5.1.26-aabda06611-84f53b3101.zip and /dev/null differ
diff --git a/.yarn/cache/@types-stylis-npm-4.2.5-402b8fb751-24f91719db.zip b/.yarn/cache/@types-stylis-npm-4.2.5-402b8fb751-24f91719db.zip
new file mode 100644
index 00000000..9eda6dab
Binary files /dev/null and b/.yarn/cache/@types-stylis-npm-4.2.5-402b8fb751-24f91719db.zip differ
diff --git a/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-8db785cc92.zip b/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-8db785cc92.zip
new file mode 100644
index 00000000..9853f0cf
Binary files /dev/null and b/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-8db785cc92.zip differ
diff --git a/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip b/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip
new file mode 100644
index 00000000..7b2fd6e1
Binary files /dev/null and b/.yarn/cache/nanoid-npm-3.3.7-98824ba130-d36c427e53.zip differ
diff --git a/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip b/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip
new file mode 100644
index 00000000..dad4781d
Binary files /dev/null and b/.yarn/cache/postcss-npm-8.4.38-495621b279-649f9e60a7.zip differ
diff --git a/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip b/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip
new file mode 100644
index 00000000..22143e39
Binary files /dev/null and b/.yarn/cache/source-map-js-npm-1.2.0-6e63f357e5-791a43306d.zip differ
diff --git a/.yarn/cache/styled-components-npm-6.1.10-test.0-4a9f9f76e2-05bd9b2de0.zip b/.yarn/cache/styled-components-npm-6.1.10-test.0-4a9f9f76e2-05bd9b2de0.zip
new file mode 100644
index 00000000..443efe41
Binary files /dev/null and b/.yarn/cache/styled-components-npm-6.1.10-test.0-4a9f9f76e2-05bd9b2de0.zip differ
diff --git a/.yarn/cache/stylis-npm-4.3.2-c353cab3be-0faa8a97ff.zip b/.yarn/cache/stylis-npm-4.3.2-c353cab3be-0faa8a97ff.zip
new file mode 100644
index 00000000..df5188eb
Binary files /dev/null and b/.yarn/cache/stylis-npm-4.3.2-c353cab3be-0faa8a97ff.zip differ
diff --git a/.yarn/cache/tslib-npm-2.6.2-4fc8c068d9-329ea56123.zip b/.yarn/cache/tslib-npm-2.6.2-4fc8c068d9-329ea56123.zip
new file mode 100644
index 00000000..3424b444
Binary files /dev/null and b/.yarn/cache/tslib-npm-2.6.2-4fc8c068d9-329ea56123.zip differ
diff --git a/benchmarks/package.json b/benchmarks/package.json
index e0520078..e41d3f4c 100644
--- a/benchmarks/package.json
+++ b/benchmarks/package.json
@@ -29,7 +29,7 @@
     "@xstyled/emotion": "^3.8.0",
     "@xstyled/styled-components": "^3.8.0",
     "emotion-theming": "^11.0.0",
-    "styled-components": "^5.3.6",
+    "styled-components": "^6.1.9",
     "styled-system": "^5.1.5"
   }
 }
diff --git a/package.json b/package.json
index c17d4d9f..94ea0084 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/react": "^18.0.21",
-    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
     "babel-jest": "^29.1.2",
@@ -49,12 +48,13 @@
     "rollup": "^2.79.1",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-esbuild": "^4.10.1",
-    "styled-components": "^5.3.6",
+    "styled-components": "^6.1.9",
     "typescript": "^4.8.4"
   },
   "resolutions": {
     "smooth-doc/styled-components": "^5.2.3",
-    "smooth-doc/gatsby-plugin-robots-txt": "1.5.6"
+    "smooth-doc/gatsby-plugin-robots-txt": "1.5.6",
+    "styled-components": "test"
   },
   "bundlewatch": {
     "files": [
@@ -80,8 +80,5 @@
       }
     ]
   },
-  "overrides": {
-    "babel-plugin-styled-components": "2.0.2"
-  },
   "packageManager": "yarn@3.6.1"
 }
diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json
index c31eedbd..6935c03d 100644
--- a/packages/styled-components/package.json
+++ b/packages/styled-components/package.json
@@ -38,9 +38,10 @@
     "url": "https://github.com/sponsors/gregberge"
   },
   "peerDependencies": {
-    "styled-components": "^4.0.0 || ^5.0.0"
+    "styled-components": "^6.0.0"
   },
   "dependencies": {
+    "@emotion/is-prop-valid": "^1.2.2",
     "@xstyled/core": "^3.8.0",
     "@xstyled/system": "^3.8.0",
     "@xstyled/util": "^3.7.0"
diff --git a/packages/styled-components/src/breakpoints.ts b/packages/styled-components/src/breakpoints.ts
index 742d64ec..844d2215 100644
--- a/packages/styled-components/src/breakpoints.ts
+++ b/packages/styled-components/src/breakpoints.ts
@@ -5,7 +5,7 @@ import {
   useThemeDown,
 } from '@xstyled/core'
 import { Screens } from '@xstyled/system'
-import { useTheme } from './theme'
+import { useTheme } from 'styled-components'
 
 export { useViewportWidth } from '@xstyled/core'
 
diff --git a/packages/styled-components/src/createCreateGlobalStyle.ts b/packages/styled-components/src/createCreateGlobalStyle.ts
index 9bb7b53d..c113edcc 100644
--- a/packages/styled-components/src/createCreateGlobalStyle.ts
+++ b/packages/styled-components/src/createCreateGlobalStyle.ts
@@ -7,12 +7,10 @@ export type XCreateGlobalStyle = typeof scCreateGlobalStyle
 export const createCreateGlobalStyle = <TGen extends StyleGenerator>(
   generator: TGen,
 ): XCreateGlobalStyle => {
-  const css = createCssFunction(generator)
-  return ((
-    ...args: Parameters<XCreateGlobalStyle>
-  ): ReturnType<XCreateGlobalStyle> =>
-    scCreateGlobalStyle([
-      // @ts-ignore
-      css(...args),
-    ])) as XCreateGlobalStyle
+  const css = createCssFunction<TGen>(generator)
+  return <Props extends object>(
+    ...args: Parameters<typeof scCreateGlobalStyle<Props>>
+  ) =>
+    // @ts-expect-error
+    scCreateGlobalStyle<Props>([css<Props>(...args)])
 }
diff --git a/packages/styled-components/src/createCssFunction.ts b/packages/styled-components/src/createCssFunction.ts
index 9ddb8c38..afc2b341 100644
--- a/packages/styled-components/src/createCssFunction.ts
+++ b/packages/styled-components/src/createCssFunction.ts
@@ -1,22 +1,19 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
-import {
-  css as scCss,
-  FlattenSimpleInterpolation,
-  ThemedCssFunction,
-} from 'styled-components'
-import { StyleGenerator, Theme } from '@xstyled/system'
-import { flattenStrings } from '@xstyled/util'
 import { createTransform } from '@xstyled/core'
+import { StyleGenerator } from '@xstyled/system'
+import { flattenStrings } from '@xstyled/util'
+import { css as scCss } from 'styled-components'
 
-export type XCSSFunction = ThemedCssFunction<Theme>
+export type XCSSFunction = typeof scCss
 
 export const createCssFunction = <TGen extends StyleGenerator>(
   generator: TGen,
 ): XCSSFunction => {
   const transform = createTransform(generator)
-  return ((...args: Parameters<XCSSFunction>) => {
-    const scCssArgs = scCss(...args)
+
+  return <Props extends object>(...args: Parameters<XCSSFunction>) => {
+    const scCssArgs = scCss<Props>(...args)
     const flattenedArgs = flattenStrings(scCssArgs as any[])
-    return flattenedArgs.map(transform) as FlattenSimpleInterpolation
-  }) as XCSSFunction
+    return flattenedArgs.map(transform) as ReturnType<typeof scCss<Props>>
+  }
 }
diff --git a/packages/styled-components/src/createGlobalStyle.test.tsx b/packages/styled-components/src/createGlobalStyle.test.tsx
index d886f625..c0b9ffe5 100644
--- a/packages/styled-components/src/createGlobalStyle.test.tsx
+++ b/packages/styled-components/src/createGlobalStyle.test.tsx
@@ -16,7 +16,7 @@ describe('#createGlobalStyle', () => {
     const GlobalStyle = createGlobalStyle`
       .margin {
         margin: 2;
-      } 
+      }
     `
     const { container } = render(
       <>
diff --git a/packages/styled-components/src/createStyled.ts b/packages/styled-components/src/createStyled.ts
index 7faad9b5..e3bb8b9a 100644
--- a/packages/styled-components/src/createStyled.ts
+++ b/packages/styled-components/src/createStyled.ts
@@ -1,56 +1,51 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
-import type { ElementType } from 'react'
+import isPropValid from '@emotion/is-prop-valid'
 import { BoxElements } from '@xstyled/core'
+import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system'
 import { string } from '@xstyled/util'
-import { StyleGenerator, StyleGeneratorProps, Theme } from '@xstyled/system'
 import {
-  StyledConfig,
-  ThemedBaseStyledInterface,
-  ThemedStyledFunction,
+  LibraryStyled,
+  ShouldForwardProp,
+  Styled,
+  StyledInstance,
+  StyledOptions,
+  WebTarget,
 } from 'styled-components'
+import { XCSSFunction, createCssFunction } from './createCssFunction'
 import { scStyled } from './scStyled'
-import { createCssFunction, XCSSFunction } from './createCssFunction'
 
-const getCreateStyle = (
-  baseCreateStyle: ThemedStyledFunction<any, any>,
+const getCreateStyle = <TGen extends StyleGenerator>(
+  baseCreateStyle: StyledInstance<'web', any, any>,
   css: XCSSFunction,
-  generator?: StyleGenerator,
-) => {
+  generator?: TGen,
+): ReturnType<LibraryStyled<StyleGeneratorProps<TGen>>> => {
   const createStyle = (...args: Parameters<typeof css>) =>
-    // @ts-ignore
     baseCreateStyle`${css(...args)}${generator}`
   createStyle.attrs = (attrs: Parameters<typeof baseCreateStyle.attrs>[0]) =>
-    getCreateStyle(baseCreateStyle.attrs(attrs), css, generator)
-  createStyle.withConfig = (config: StyledConfig<any>) =>
-    getCreateStyle(baseCreateStyle.withConfig(config), css, generator)
+    getCreateStyle<TGen>(baseCreateStyle.attrs(attrs), css, generator)
+  createStyle.withConfig = (config: StyledOptions<'web', any>) =>
+    getCreateStyle<TGen>(baseCreateStyle.withConfig(config), css, generator)
+  // @ts-expect-error
   return createStyle
 }
 
 type BoxStyledTags<TProps extends object> = {
-  [Key in keyof BoxElements]: ThemedStyledFunction<
+  [Key in keyof BoxElements]: StyledInstance<
+    'web',
     BoxElements[Key],
-    Theme,
-    TProps
+    Omit<JSX.IntrinsicElements[BoxElements[Key]], keyof TProps> & TProps
   >
 }
 
 export interface XStyled<TGen extends StyleGenerator>
-  extends ThemedBaseStyledInterface<Theme>,
+  extends Styled,
     BoxStyledTags<StyleGeneratorProps<TGen>> {}
 
 const createShouldForwardProp = (
   generator: StyleGenerator,
-): ((
-  prop: string | number | symbol,
-  defaultValidatorFn: (prop: string | number | symbol) => boolean,
-  elementToBeCreated?: ElementType,
-) => boolean) => {
+): ShouldForwardProp<'web'> => {
   const propSet = new Set<string>(generator.meta.props)
-  return (
-    prop: string | number | symbol,
-    defaultValidatorFn: (prop: string | number | symbol) => boolean,
-    elementToBeCreated?: ElementType,
-  ) => {
+  return (prop: string, elementToBeCreated?: WebTarget) => {
     if (string(prop) && propSet.has(prop)) {
       return false
     }
@@ -61,7 +56,7 @@ const createShouldForwardProp = (
       // This means that HTML elements could get unwanted props, but ultimately
       // this is a bug in the caller, because why are they passing unwanted
       // props?
-      return defaultValidatorFn(prop)
+      return isPropValid(prop)
     }
     return true
   }
@@ -71,14 +66,14 @@ export const createBaseStyled = <TGen extends StyleGenerator>(
   css: XCSSFunction,
   generator?: TGen,
 ): XStyled<TGen> => {
-  const config = generator
+  const config: StyledOptions<'web', object> = generator
     ? {
         shouldForwardProp: createShouldForwardProp(generator),
       }
     : {}
   return ((component: Parameters<typeof scStyled>[0]) => {
     const baseStyled = scStyled(component)
-    return getCreateStyle(
+    return getCreateStyle<TGen>(
       config ? baseStyled.withConfig(config) : baseStyled,
       css,
       generator,
@@ -86,18 +81,21 @@ export const createBaseStyled = <TGen extends StyleGenerator>(
   }) as XStyled<TGen>
 }
 
+type JSXElementKeys = keyof JSX.IntrinsicElements
+
 export const createStyled = <TGen extends StyleGenerator>(
   generator: TGen,
 ): XStyled<TGen> => {
   const css = createCssFunction(generator)
-  const styled = createBaseStyled(css)
-  const xstyled = createBaseStyled(css, generator)
+  const styled = createBaseStyled<TGen>(css)
+  const xstyled = createBaseStyled<TGen>(css, generator)
   styled.box = xstyled('div')
-  Object.keys(scStyled).forEach((key) => {
-    // @ts-ignore
+  ;(Object.keys(scStyled) as JSXElementKeys[]).forEach((key) => {
+    // @ts-expect-error
     styled[key] = styled(key)
-    // @ts-ignore
+    // @ts-expect-error
     styled[`${key}Box`] = xstyled(key)
   })
+
   return styled
 }
diff --git a/packages/styled-components/src/createX.ts b/packages/styled-components/src/createX.ts
index 5c0c298f..bf4a59c6 100644
--- a/packages/styled-components/src/createX.ts
+++ b/packages/styled-components/src/createX.ts
@@ -1,23 +1,14 @@
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
-import { StyledComponent, DefaultTheme } from 'styled-components'
-import { scStyled } from './scStyled'
 import { StyleGenerator, StyleGeneratorProps } from '@xstyled/system'
-import { createBaseStyled } from './createStyled'
+import { StyledInstance } from 'styled-components'
 import { createCssFunction } from './createCssFunction'
+import { createBaseStyled } from './createStyled'
+import { scStyled } from './scStyled'
 
 type JSXElementKeys = keyof JSX.IntrinsicElements
 
-type SafeIntrinsicElement<T extends keyof JSX.IntrinsicElements> = (
-  props: Omit<JSX.IntrinsicElements[T], 'color'>,
-) => React.ReactElement<any, T>
-
 export type X<TGen extends StyleGenerator> = {
-  [Key in JSXElementKeys]: StyledComponent<
-    SafeIntrinsicElement<Key>,
-    DefaultTheme,
-    StyleGeneratorProps<TGen>,
-    'color'
-  >
+  [Key in JSXElementKeys]: StyledInstance<'web', Key, StyleGeneratorProps<TGen>>
 }
 
 export const createX = <TGen extends StyleGenerator>(
@@ -25,8 +16,7 @@ export const createX = <TGen extends StyleGenerator>(
 ): X<TGen> => {
   const xstyled = createBaseStyled(createCssFunction(generator), generator)
   const x = {} as X<TGen>
-  Object.keys(scStyled).forEach((tag) => {
-    // @ts-ignore
+  ;(Object.keys(scStyled) as JSXElementKeys[]).forEach((tag) => {
     x[tag] = xstyled(tag)``
   })
   return x
diff --git a/packages/styled-components/src/scStyled.ts b/packages/styled-components/src/scStyled.ts
index d969f3cc..9aad87df 100644
--- a/packages/styled-components/src/scStyled.ts
+++ b/packages/styled-components/src/scStyled.ts
@@ -1,6 +1,6 @@
-import styled from 'styled-components'
+import styled, { Styled } from 'styled-components'
 
 // Provide interop since `styled-components` does not work out of the box with ESM
 export const scStyled =
-  // @ts-ignore
-  typeof styled === 'function' ? styled : styled.default
+  // @ts-expect-error
+  (typeof styled === 'function' ? styled : styled.default) as Styled
diff --git a/packages/styled-components/src/styled.test.tsx b/packages/styled-components/src/styled.test.tsx
index af4eedc9..8f739a68 100644
--- a/packages/styled-components/src/styled.test.tsx
+++ b/packages/styled-components/src/styled.test.tsx
@@ -38,11 +38,9 @@ describe('#styled', () => {
   })
 
   it('works with render props', () => {
-    const Foo = ({
-      children,
-    }: {
+    const Foo: React.FC<{
       children: ({ content }: { content: string }) => React.ReactNode
-    }) => <div>{children({ content: 'Hello World' })}</div>
+    }> = ({ children }) => <div>{children({ content: 'Hello World' })}</div>
 
     const StyledFoo = styled(Foo)``
 
diff --git a/packages/styled-components/src/theme.ts b/packages/styled-components/src/theme.ts
index 3ed8f62a..fed2f1a8 100644
--- a/packages/styled-components/src/theme.ts
+++ b/packages/styled-components/src/theme.ts
@@ -1,11 +1,8 @@
-import { useContext, ContextType } from 'react'
-import { ThemeContext } from 'styled-components'
 import { createUseGetter } from '@xstyled/core'
 import { th } from '@xstyled/system'
+import { useTheme } from 'styled-components'
 
-export const useTheme = (): ContextType<typeof ThemeContext> => {
-  return useContext(ThemeContext)
-}
+export { useTheme }
 
 export const useTh = createUseGetter(th, useTheme)
 
diff --git a/packages/system/package.json b/packages/system/package.json
index 7d7b6ac5..2961e8b2 100644
--- a/packages/system/package.json
+++ b/packages/system/package.json
@@ -41,5 +41,8 @@
   "dependencies": {
     "@xstyled/util": "^3.7.0",
     "csstype": "^3.1.1"
+  },
+  "devDependencies": {
+    "@emotion/is-prop-valid": "^1.2.2"
   }
 }
diff --git a/packages/system/tests/styled-components/styles.test.tsx b/packages/system/tests/styled-components/styles.test.tsx
index 4db257a3..63b54e30 100644
--- a/packages/system/tests/styled-components/styles.test.tsx
+++ b/packages/system/tests/styled-components/styles.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import 'jest-styled-components'
 import '@testing-library/jest-dom/extend-expect'
+import isPropValid from '@emotion/is-prop-valid'
 import { render, cleanup } from '@testing-library/react'
 import styled from 'styled-components'
 import * as styles from '../../src'
@@ -588,10 +589,10 @@ describe('styles', () => {
         },
         styleRule: 'box-shadow',
         expectations: [
-          ['red', 'var(--x-ring-shadow,0 0 #0000),var(--x-shadow)'],
+          ['red', 'var(--x-ring-shadow, 0 0 #0000),var(--x-shadow)'],
           [
             '12px 12px 2px 1px rgba(0, 0, 255, .2)',
-            'var(--x-ring-shadow,0 0 #0000),var(--x-shadow)',
+            'var(--x-ring-shadow, 0 0 #0000),var(--x-shadow)',
           ],
         ],
       },
@@ -622,7 +623,7 @@ describe('styles', () => {
       },
     ],
   ])('#%s', (name, config) => {
-    const Dummy = styled.div`
+    const Dummy = styled.div.withConfig({ shouldForwardProp: isPropValid })`
       ${styles[(config as any).utility || name]};
     `
 
diff --git a/yarn.lock b/yarn.lock
index d9501254..384993f9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1913,6 +1913,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:1.2.2, @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.8.1
+  checksum: 61f6b128ea62b9f76b47955057d5d86fcbe2a6989d2cd1e583daac592901a950475a37d049b9f7a7c6aa8758a33b408735db759fdedfd1f629df0f85ab60ea25
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.2.1":
   version: 1.2.1
   resolution: "@emotion/is-prop-valid@npm:1.2.1"
@@ -2018,6 +2027,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/unitless@npm:0.8.1, @emotion/unitless@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/unitless@npm:0.8.1"
+  checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
+  languageName: node
+  linkType: hard
+
 "@emotion/unitless@npm:^0.7.4":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
@@ -2025,13 +2041,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.8.1":
-  version: 0.8.1
-  resolution: "@emotion/unitless@npm:0.8.1"
-  checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88
-  languageName: node
-  linkType: hard
-
 "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1":
   version: 1.0.1
   resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1"
@@ -5453,16 +5462,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hoist-non-react-statics@npm:*":
-  version: 3.3.1
-  resolution: "@types/hoist-non-react-statics@npm:3.3.1"
-  dependencies:
-    "@types/react": "*"
-    hoist-non-react-statics: ^3.3.0
-  checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719
-  languageName: node
-  linkType: hard
-
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -5842,14 +5841,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/styled-components@npm:^5.1.26":
-  version: 5.1.26
-  resolution: "@types/styled-components@npm:5.1.26"
-  dependencies:
-    "@types/hoist-non-react-statics": "*"
-    "@types/react": "*"
-    csstype: ^3.0.2
-  checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76
+"@types/stylis@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 24f91719db5569979e9e2f197e050ef82e1fd72474e8dc45bca38d48ee56481eae0f0d4a7ac172540d7774b45a2a78d901a4c6d07bba77a33dbccff464ea3edf
   languageName: node
   linkType: hard
 
@@ -6359,7 +6354,7 @@ __metadata:
     html-webpack-plugin: ^5.5.0
     react: ^18.2.0
     react-dom: ^18.2.0
-    styled-components: ^5.3.6
+    styled-components: ^6.1.9
     styled-system: ^5.1.5
     webpack: ^5.74.0
     webpack-cli: ^4.10.0
@@ -6401,11 +6396,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@xstyled/styled-components@workspace:packages/styled-components"
   dependencies:
+    "@emotion/is-prop-valid": ^1.2.2
     "@xstyled/core": ^3.8.0
     "@xstyled/system": ^3.8.0
     "@xstyled/util": ^3.7.0
   peerDependencies:
-    styled-components: ^4.0.0 || ^5.0.0
+    styled-components: ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -6413,6 +6409,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@xstyled/system@workspace:packages/system"
   dependencies:
+    "@emotion/is-prop-valid": ^1.2.2
     "@xstyled/util": ^3.7.0
     csstype: ^3.1.1
   languageName: unknown
@@ -9420,7 +9417,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:^3.0.0":
+"css-to-react-native@npm:3.2.0, css-to-react-native@npm:^3.0.0":
   version: 3.2.0
   resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
@@ -9564,6 +9561,13 @@ __metadata:
   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:^3.0.2, csstype@npm:^3.1.1":
   version: 3.1.2
   resolution: "csstype@npm:3.1.2"
@@ -13714,7 +13718,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -17969,6 +17973,15 @@ __metadata:
   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
+
 "napi-build-utils@npm:^1.0.1":
   version: 1.0.2
   resolution: "napi-build-utils@npm:1.0.2"
@@ -19830,6 +19843,17 @@ __metadata:
   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:^8.2.15, postcss@npm:^8.2.9, postcss@npm:^8.3.11":
   version: 8.4.27
   resolution: "postcss@npm:8.4.27"
@@ -21220,7 +21244,6 @@ __metadata:
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^13.4.0
     "@types/react": ^18.0.21
-    "@types/styled-components": ^5.1.26
     "@typescript-eslint/eslint-plugin": ^5.39.0
     "@typescript-eslint/parser": ^5.39.0
     babel-jest: ^29.1.2
@@ -21244,7 +21267,7 @@ __metadata:
     rollup: ^2.79.1
     rollup-plugin-dts: ^4.2.2
     rollup-plugin-esbuild: ^4.10.1
-    styled-components: ^5.3.6
+    styled-components: ^6.1.9
     typescript: ^4.8.4
   languageName: unknown
   linkType: soft
@@ -21618,7 +21641,7 @@ __metadata:
   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
@@ -21956,6 +21979,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97
+  languageName: node
+  linkType: hard
+
 "source-map-support@npm:0.5.13":
   version: 0.5.13
   resolution: "source-map-support@npm:0.5.13"
@@ -22570,7 +22600,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^5.2.3, styled-components@npm:^5.3.6":
+"styled-components@npm:^5.2.3":
   version: 5.3.11
   resolution: "styled-components@npm:5.3.11"
   dependencies:
@@ -22592,6 +22622,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styled-components@npm:test":
+  version: 6.1.10-test.0
+  resolution: "styled-components@npm:6.1.10-test.0"
+  dependencies:
+    "@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.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: 05bd9b2de0ef4e64541b4ffcbdd442f928e6282c83cc325c19b7ff5891fea27d77108edc2106f9624e0b43d5521794759b85b07aa9b03a3f8acbf191c3b248d4
+  languageName: node
+  linkType: hard
+
 "styled-system@npm:^5.1.5":
   version: 5.1.5
   resolution: "styled-system@npm:5.1.5"
@@ -22632,6 +22682,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.3.2":
+  version: 4.3.2
+  resolution: "stylis@npm:4.3.2"
+  checksum: 0faa8a97ff38369f47354376cd9f0def9bf12846da54c28c5987f64aaf67dcb6f00dce88a8632013bfb823b2c4d1d62a44f4ac20363a3505a7ab4e21b70179fc
+  languageName: node
+  linkType: hard
+
 "sudo-prompt@npm:^8.2.0":
   version: 8.2.5
   resolution: "sudo-prompt@npm:8.2.5"
@@ -23110,6 +23167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.6.2":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.10.0, tslib@npm:^1.8.1, tslib@npm:^1.9.0":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"