upgrade to styled components v6

package.json

@@ -41,12 +41,9 @@
     "@react-hooks-library/core": "0.6.0",
     "@react-spring/web": "9.7.3",
     "@react-stately/utils": "3.9.0",
-    "@react-types/shared": "3.22.0",
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-table": "8.20.5",
     "@tanstack/react-virtual": "3.0.1",
-    "@types/chroma-js": "2.4.3",
-    "@types/lodash-es": "4.17.12",
     "babel-plugin-styled-components": "2.1.4",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
@@ -77,6 +74,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@pluralsh/eslint-config-typescript": "2.5.147",
+    "@react-types/shared": "3.22.0",
     "@storybook/addon-actions": "7.6.5",
     "@storybook/addon-docs": "7.6.5",
     "@storybook/addon-essentials": "7.6.5",
@@ -89,10 +87,11 @@
     "@storybook/react-vite": "7.6.5",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "5.17.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/chroma-js": "2.4.3",
+    "@types/lodash-es": "4.17.12",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@types/react-transition-group": "4.4.10",
-    "@types/styled-components": "5.1.30",
     "@typescript-eslint/eslint-plugin": "6.14.0",
     "@typescript-eslint/parser": "6.14.0",
     "@vitest/coverage-v8": "1.0.4",
@@ -124,8 +123,8 @@
     "react-transition-group": "4.4.5",
     "rimraf": "5.0.5",
     "storybook": "7.6.5",
-    "styled-components": "5.3.11",
-    "typescript": "^5.4.5",
+    "styled-components": "6.1.13",
+    "typescript": "5.6.2",
     "vite": "5.0.10",
     "vitest": "1.0.4"
   },

src/components/AppIcon.tsx

@@ -108,11 +108,11 @@ export function toInitials(name: string) {
 }
 
 const AppIconSC = styled.div<{
-  $color: ValueOf<typeof hueToColor>
-  $borderColor: ValueOf<typeof hueToBorderColor>
-  $hasBorder: boolean
-  $boxSize: number
-  $clickable: boolean
+  $color?: ValueOf<typeof hueToColor>
+  $borderColor?: ValueOf<typeof hueToBorderColor>
+  $hasBorder?: boolean
+  $boxSize?: number
+  $clickable?: boolean
 }>(({ theme, $color, $borderColor, $hasBorder, $boxSize, $clickable }) => ({
   display: 'flex',
   alignItems: 'center',

src/components/ArrowScroll.tsx

@@ -22,7 +22,7 @@ const ComponentWrapperSC = styled.div({
   },
 })
 const ArrowWrapperSC = styled.div<{
-  $direction: 'left' | 'right'
+  $direction?: 'left' | 'right'
 }>(({ theme, $direction }) => ({
   color: theme.colors['icon-light'],
   zIndex: theme.zIndexes.modal,

src/components/Banner.tsx

@@ -1,17 +1,17 @@
-import { type ReactNode, type Ref, forwardRef } from 'react'
 import { Div, Flex, type FlexProps, Span, type SpanProps } from 'honorable'
+import { type ReactNode, type Ref, forwardRef } from 'react'
 import styled from 'styled-components'
 
 import { type ColorKey, type SeverityExt, sanitizeSeverity } from '../types'
 
 import { FillLevelProvider } from './contexts/FillLevelContext'
-import ErrorIcon from './icons/ErrorIcon'
+import IconFrame from './IconFrame'
+import CheckRoundedIcon from './icons/CheckRoundedIcon'
 import CloseIcon from './icons/CloseIcon'
+import type createIcon from './icons/createIcon'
+import ErrorIcon from './icons/ErrorIcon'
 import InfoIcon from './icons/InfoIcon'
 import WarningIcon from './icons/WarningIcon'
-import CheckRoundedIcon from './icons/CheckRoundedIcon'
-import type createIcon from './icons/createIcon'
-import IconFrame from './IconFrame'
 
 export const BANNER_SEVERITIES = [
   'info',
@@ -53,7 +53,7 @@ const severityToIcon: Record<BannerSeverity, ReturnType<typeof createIcon>> = {
   success: CheckRoundedIcon,
 }
 
-const BannerOuter = styled.div<{
+const BannerOuter: any = styled.div<{
   $borderColorKey: ColorKey
   $fullWidth?: boolean
 }>(({ $borderColorKey, $fullWidth, theme }) => ({
@@ -110,11 +110,7 @@ const Content = styled.p<{ $hasHeading: boolean }>(
   })
 )
 
-const CloseButton = styled(IconFrame).attrs({
-  size: 'medium',
-  clickable: true,
-  icon: <CloseIcon />,
-})(({ theme }) => ({
+const CloseButton = styled(IconFrame)(({ theme }) => ({
   marginLeft: theme.spacing.medium,
 }))
 
@@ -167,7 +163,14 @@ function BannerRef(
         </div>
       </BannerInner>
       <Div flexGrow={1} />
-      {typeof onClose === 'function' && <CloseButton onClick={onClose} />}
+      {typeof onClose === 'function' && (
+        <CloseButton
+          size="medium"
+          clickable
+          icon={<CloseIcon />}
+          onClick={onClose}
+        />
+      )}
     </BannerOuter>
   )
 

src/components/Chip.tsx

@@ -1,25 +1,22 @@
 import { type FlexProps } from 'honorable'
 import {
   type ComponentProps,
+  type ComponentPropsWithRef,
   type ReactElement,
   type Ref,
   forwardRef,
 } from 'react'
-import styled, {
-  type DefaultTheme,
-  type StyledComponent,
-  useTheme,
-} from 'styled-components'
+import styled, { type DefaultTheme, useTheme } from 'styled-components'
 
 import { type SEVERITIES } from '../types'
 
-import { Spinner } from './Spinner'
 import Card, {
   type BaseCardProps,
   type CardFillLevel,
   useDecideFillLevel,
 } from './Card'
 import CloseIcon from './icons/CloseIcon'
+import { Spinner } from './Spinner'
 import Tooltip from './Tooltip'
 
 export const CHIP_CLOSE_ATTR_KEY = 'data-close-button' as const
@@ -36,7 +33,7 @@ export type ChipProps = Omit<FlexProps, 'size'> &
     icon?: ReactElement
     loading?: boolean
     closeButton?: boolean
-    closeButtonProps?: ComponentProps<StyledComponent<'button', DefaultTheme>>
+    closeButtonProps?: ComponentPropsWithRef<'div'>
     clickable?: boolean
     truncateWidth?: number
     truncateEdge?: 'start' | 'end'
@@ -179,9 +176,8 @@ function ChipRef(
     disabled,
     tooltip,
     tooltipProps,
-    as,
     ...props
-  }: ChipProps & { as?: ComponentProps<typeof ChipCardSC>['forwardedAs'] },
+  }: ChipProps,
   ref: Ref<any>
 ) {
   fillLevel = useDecideFillLevel({ hue, fillLevel })
@@ -202,7 +198,6 @@ function ChipRef(
       $severity={severity}
       $truncateWidth={truncateWidth}
       $truncateEdge={truncateEdge}
-      {...(as ? { forwardedAs: as } : {})}
       {...props}
     >
       {loading && (
@@ -224,7 +219,6 @@ function ChipRef(
         <CloseButtonSC
           disabled={disabled}
           $fillLevel={fillLevel}
-          $severity={severity}
           {...{
             [CHIP_CLOSE_ATTR_KEY]: '',
           }}

src/components/IconFrame.tsx

@@ -1,6 +1,5 @@
-import { ButtonBase, Flex } from 'honorable'
+import { ButtonBase, Flex, type FlexProps } from 'honorable'
 import {
-  type ComponentProps,
   type ReactElement,
   type ReactNode,
   cloneElement,
@@ -98,7 +97,9 @@ type IconFrameProps = {
   type?: Type
   selected?: boolean
   background?: SemanticColorKey
-} & Omit<ComponentProps<typeof IconFrameSC>, 'size'>
+} & FlexProps & {
+    as?: any
+  }
 
 const IconFrameSC = styled(Flex)<{
   $type: Type

src/components/Input2.tsx

@@ -140,8 +140,8 @@ const InputRootSC = styled.div<{
   },
 }))
 const InputBaseSC = styled.input<{
-  $padStart: 'xsmall' | 'small' | 'medium' | undefined | null
-  $padEnd: 'xsmall' | 'small' | 'medium' | undefined | null
+  $padStart?: 'xsmall' | 'small' | 'medium' | undefined | null
+  $padEnd?: 'xsmall' | 'small' | 'medium' | undefined | null
 }>(({ theme, $padStart, $padEnd }) => ({
   ...theme.partials.reset.input,
   width: '100%',
@@ -345,11 +345,10 @@ const Input2 = forwardRef<HTMLDivElement, InputPropsFull>(
             </InputContentSC>
           )}
           <InputBaseSC
-            $padStart={!inputContent ? inputPadStart : 'xxsmall'}
+            $padStart={!inputContent ? inputPadStart : 'xsmall'}
             $padEnd={inputPadEnd}
             disabled={disabled}
             value={value}
-            error={error}
             placeholder={placeholder}
             onChange={wrappedOnChange}
             onFocus={onFocus}

src/components/LightDarkSwitch.tsx

@@ -214,7 +214,6 @@ const SwitchHandleSC = styled(
 
 export function LightDarkSwitch({
   children,
-  as,
   className,
   ...props
 }: SwitchProps) {
@@ -231,7 +230,6 @@ export function LightDarkSwitch({
 
   return (
     <SwitchSC
-      as={as}
       className={className}
       {...styleProps}
     >

src/components/ListBoxItem.tsx

@@ -220,7 +220,7 @@ const ListBoxFooter = forwardRef<HTMLButtonElement, ListBoxFooterProps>(
 const ListBoxFooterPlusInner = styled(ListBoxFooter)(({ theme }) => ({
   color: theme.colors['text-primary-accent'],
 }))
-const ListBoxFooterPlus = forwardRef<HTMLDivElement, ListBoxFooterProps>(
+const ListBoxFooterPlus = forwardRef<HTMLButtonElement, ListBoxFooterProps>(
   ({ leftContent, children, ...props }, ref) => (
     <ListBoxFooterPlusInner
       ref={ref}

src/components/Modal.tsx

@@ -1,11 +1,14 @@
 // this is just styling, actual modal logic is in ModalWrapper
 
-import { type ReactNode, type Ref, forwardRef, useCallback } from 'react'
+import {
+  type ComponentPropsWithRef,
+  type ReactNode,
+  type Ref,
+  forwardRef,
+  useCallback,
+} from 'react'
 
-import styled, {
-  type StyledComponentPropsWithRef,
-  useTheme,
-} from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 import { VisuallyHidden } from 'react-aria'
 
@@ -42,7 +45,7 @@ type ModalPropsType = ModalWrapperProps & {
   actions?: ReactNode
   severity?: ModalSeverity
   asForm?: boolean
-  formProps?: StyledComponentPropsWithRef<'form'>
+  formProps?: ComponentPropsWithRef<'form'>
 }
 
 const severityToIconColorKey = {
@@ -72,8 +75,8 @@ const sizeToWidth = {
 } as const satisfies Partial<Record<ModalSize, number | string | undefined>>
 
 const ModalSC = styled(Card)<{
-  $width: number
-  $maxWidth: number
+  $width: number | string
+  $maxWidth: number | string
 }>(({ $width, $maxWidth }) => ({
   position: 'relative',
   display: 'flex',

src/components/Sidebar.tsx

@@ -79,7 +79,6 @@ function SidebarRef(
       <SidebarSC
         $isHorizontal={layout === 'horizontal'}
         $variant={variant}
-        $isExpanded={isExpanded}
         ref={ref}
         {...props}
       />

src/components/SidebarItem.tsx

@@ -1,11 +1,11 @@
-import { type ComponentProps, type Ref, forwardRef } from 'react'
+import { type ComponentPropsWithRef, type Ref, forwardRef } from 'react'
 import styled from 'styled-components'
 
 import Tooltip from '../components/Tooltip'
 
 import { type SidebarVariant, useSidebar } from './Sidebar'
 
-type SidebarItemProps = ComponentProps<typeof ItemSC> & {
+type SidebarItemProps = ComponentPropsWithRef<'div'> & {
   clickable?: boolean
   tooltip?: string
   expandedLabel?: string
@@ -41,12 +41,11 @@ function WithTooltipRef(
   { children, clickable, tooltip = '', ...props }: SidebarItemProps,
   ref: Ref<HTMLDivElement>
 ) {
-  const { layout, isExpanded } = useSidebar()
+  const { isExpanded } = useSidebar()
 
   if (!tooltip || isExpanded)
     return (
       <Item
-        layout={layout}
         clickable={clickable}
         ref={ref}
         {...props}
@@ -63,7 +62,6 @@ function WithTooltipRef(
       whiteSpace="nowrap"
     >
       <Item
-        layout={layout}
         clickable={clickable}
         ref={ref}
         {...props}

src/components/Spinner.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps } from 'react'
+import { type ComponentPropsWithRef } from 'react'
 import styled, { keyframes } from 'styled-components'
 
 const rotateAnim = keyframes`
@@ -41,14 +41,12 @@ const SpinnerSC = styled(
 export function Spinner({
   color,
   size = 16,
-  as,
   ...props
-}: { color?: string; size?: number } & ComponentProps<typeof SpinnerSC>) {
+}: { color?: string; size?: number } & ComponentPropsWithRef<'div'>) {
   return (
     <SpinnerSC
       $color={color}
       $size={size}
-      {...(as ? { forwardedAs: as } : {})}
       {...props}
     />
   )