Revert "chore: down grade styledcomponents v6 -> v5"

This reverts commit 37a1cc1.

package.json

@@ -72,7 +72,6 @@
     "@types/jest-specific-snapshot": "^0.5.9",
     "@types/node": "^18.19.59",
     "@types/prettier": "^2.4.3",
-    "@types/styled-components": "^5.1.21",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
@@ -110,7 +109,7 @@
     "storybook": "^8.0.5",
     "storybook-dark-mode": "^4.0.1",
     "style-loader": "^3.3.4",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "stylelint": "^14.3.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^6.0.0",
@@ -126,8 +125,7 @@
   "packageManager": "[email protected]",
   "resolutions": {
     "node-gyp": "^9.0.0",
-    "postcss": "^8.4.16",
-    "@types/react": "^18.3.3"
+    "postcss": "^8.4.16"
   },
   "lint-staged": {
     "*": [

packages/icons/package.json

@@ -23,14 +23,13 @@
   "devDependencies": {
     "@storybook/react": "^8.0.5",
     "@types/react": "^18.3.3",
-    "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@types/webpack-env": "^1.18.1",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
     "react": "^18.3.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.1"

packages/react-sandbox/package.json

@@ -34,7 +34,6 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
@@ -43,7 +42,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "use-resize-observer": "^9.1.0",
@@ -60,9 +59,9 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "styled-components": ">=6.0.0"
   },
   "files": [
     "src",

packages/styled/package.json

@@ -23,7 +23,6 @@
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-test-renderer": "^18.3.0",
-    "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "jest-styled-components": "^7.1.1",
@@ -32,7 +31,7 @@
     "react": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.2"
@@ -44,8 +43,8 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0",
+    "styled-components": ">=6.0.0"
   },
   "files": [
     "src",

packages/styled/src/addThemeUtils.story.tsx

@@ -1,3 +1,4 @@
+import { light } from '@charcoal-ui/theme'
 import styled, { ThemeProvider } from 'styled-components'
 import { MyTheme, myTheme } from './storyHelper'
 
@@ -10,7 +11,7 @@ declare module 'styled-components' {
 }
 
 export const Example = () => (
-  <ThemeProvider theme={myTheme}>
+  <ThemeProvider theme={(theme) => myTheme(theme ?? light)}>
     <RootDiv>
       <Bg1Div>
         <TypographyDiv>

packages/styled/src/utils/gap.ts

@@ -1,13 +1,10 @@
 import { Spacing } from '@charcoal-ui/theme'
-import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { css, RuleSet } from 'styled-components'
 import { pxIfNum } from './helpers/pxIfNum'
 
-export function gap(v1: keyof Spacing): FlattenSimpleInterpolation
+export function gap(v1: keyof Spacing): RuleSet
 
-export function gap(
-  v1: keyof Spacing,
-  v2: keyof Spacing
-): FlattenSimpleInterpolation
+export function gap(v1: keyof Spacing, v2: keyof Spacing): RuleSet
 
 export function gap(v1: keyof Spacing, v2?: keyof Spacing) {
   return css`

packages/styled/src/utils/margin.ts

@@ -1,26 +1,23 @@
-import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { css, RuleSet } from 'styled-components'
 import { SpacingType } from './helpers/SpacingType'
 import { pxIfNum } from './helpers/pxIfNum'
 
-export function margin(arg1: SpacingType): FlattenSimpleInterpolation
+export function margin(arg1: SpacingType): RuleSet
 
-export function margin(
-  arg1: SpacingType,
-  arg2: SpacingType
-): FlattenSimpleInterpolation
+export function margin(arg1: SpacingType, arg2: SpacingType): RuleSet
 
 export function margin(
   arg1: SpacingType,
   arg2: SpacingType,
   arg3: SpacingType
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function margin(
   arg1: SpacingType,
   arg2: SpacingType,
   arg3: SpacingType,
   arg4: SpacingType
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function margin(
   arg1: SpacingType,

packages/styled/src/utils/padding.ts

@@ -1,26 +1,23 @@
 import { Spacing } from '@charcoal-ui/theme'
-import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { css, RuleSet } from 'styled-components'
 import { pxIfNum } from './helpers/pxIfNum'
 
-export function padding(arg1: keyof Spacing): FlattenSimpleInterpolation
+export function padding(arg1: keyof Spacing): RuleSet
 
-export function padding(
-  arg1: keyof Spacing,
-  arg2: keyof Spacing
-): FlattenSimpleInterpolation
+export function padding(arg1: keyof Spacing, arg2: keyof Spacing): RuleSet
 
 export function padding(
   arg1: keyof Spacing,
   arg2: keyof Spacing,
   arg3: keyof Spacing
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function padding(
   arg1: keyof Spacing,
   arg2: keyof Spacing,
   arg3: keyof Spacing,
   arg4: keyof Spacing
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function padding(
   arg1: keyof Spacing,