feat: Revert styled-components to v5 (#492)

package.json

@@ -80,6 +80,7 @@
     "@storybook/testing-library": "0.1.0",
     "@types/react-dom": "18.2.4",
     "@types/react-transition-group": "4.4.6",
+    "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "5.59.9",
     "@typescript-eslint/parser": "5.59.9",
     "babel-loader": "9.1.2",
@@ -106,7 +107,7 @@
     "react-transition-group": "4.4.5",
     "rimraf": "5.0.1",
     "storybook": "7.0.18",
-    "styled-components": "6.0.0-rc.3",
+    "styled-components": "5.3.11",
     "typescript": "4.9.5",
     "vite": "4.3.9"
   },
@@ -118,7 +119,7 @@
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "react-transition-group": ">=4.4.5",
-    "styled-components": ">=6.0.0-rc.3"
+    "styled-components": ">=5.3.11"
   },
   "packageManager": "[email protected]",
   "resolutions": {

src/components/SubTab.tsx

@@ -12,25 +12,19 @@ type SubtabProps = TabBaseProps &
     size?: SubTabSize
   }
 
-const parentFillLevelToActiveBG: Record<
-  FillLevel,
-  keyof typeof styledTheme.colors
-> = {
+const parentFillLevelToActiveBG = {
   0: 'fill-zero-selected',
   1: 'fill-one-selected',
   2: 'fill-two-selected',
   3: 'fill-three-selected',
-}
+} as const satisfies Record<FillLevel, keyof typeof styledTheme.colors>
 
-const parentFillLevelToHoverBG: Record<
-  FillLevel,
-  keyof typeof styledTheme.colors
-> = {
+const parentFillLevelToHoverBG = {
   0: 'fill-zero-hover',
   1: 'fill-one-hover',
   2: 'fill-two-hover',
   3: 'fill-three-hover',
-}
+} as const satisfies Record<FillLevel, keyof typeof styledTheme.colors>
 
 const SubTabBase = styled.div<{
   size: SubTabSize

src/components/wizard/Installer.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { type ReactElement } from 'react'
+import { type ComponentProps, type ReactElement } from 'react'
 
 import AppIcon from '../AppIcon'
 import { ListBox } from '../ListBox'
@@ -9,8 +9,6 @@ import Chip from '../Chip'
 import Tooltip from '../Tooltip'
 import InfoOutlineIcon from '../icons/InfoOutlineIcon'
 
-import { type CSSObject } from '../../types'
-
 import { useNavigation, useStepper } from './hooks'
 
 const Installer = styled(InstallerUnstyled)(({ theme }) => ({
@@ -36,7 +34,7 @@ const Installer = styled(InstallerUnstyled)(({ theme }) => ({
   },
 }))
 
-function InstallerUnstyled({ ...props }: CSSObject): ReactElement {
+function InstallerUnstyled({ ...props }: ComponentProps<'div'>): ReactElement {
   const { onEdit } = useNavigation()
   const { selected: apps } = useStepper()
 

src/types.ts

@@ -10,4 +10,4 @@ export type Severity = 'info' | 'warning' | 'success' | 'error' | 'danger'
 
 export type ColorKey = keyof DefaultTheme['colors']
 
-export type CSSObject = Record<string, any>
+export { type CSSObject } from 'styled-components'