refactor(components): get rid of @ts-expect-error in favoir of __inte…

…rnalProps function

packages/components/src/Alert.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxProps } from './Box'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export type AlertProps = BoxProps
 
@@ -18,18 +19,19 @@ export const Alert: ForwardRef<HTMLDivElement, AlertProps> = React.forwardRef(
         ref={ref}
         variant="primary"
         {...props}
-        // @ts-expect-error
-        __themeKey="alerts"
-        __css={{
-          display: 'flex',
-          alignItems: 'center',
-          px: 3,
-          py: 2,
-          fontWeight: 'bold',
-          color: 'white',
-          bg: 'primary',
-          borderRadius: 4,
-        }}
+        {...__internalProps({
+          __themeKey: 'alerts',
+          __css: {
+            display: 'flex',
+            alignItems: 'center',
+            px: 3,
+            py: 2,
+            fontWeight: 'bold',
+            color: 'white',
+            bg: 'primary',
+            borderRadius: 4,
+          },
+        })}
       />
     )
   }

packages/components/src/AspectImage.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { AspectRatio } from './AspectRatio'
 import { Image, ImageProps } from './Image'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface AspectImageProps extends ImageProps {
   ratio?: number
@@ -18,10 +19,11 @@ export const AspectImage: ForwardRef<HTMLImageElement, AspectImageProps> =
         <Image
           ref={ref}
           {...props}
-          // @ts-expect-error
-          __css={{
-            objectFit: 'cover',
-          }}
+          {...__internalProps({
+            __css: {
+              objectFit: 'cover',
+            },
+          })}
         />
       </AspectRatio>
     )

packages/components/src/AspectRatio.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxProps } from './Box'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface AspectRatioProps extends BoxProps {
   ratio?: number
@@ -22,7 +23,8 @@ export const AspectRatio: ForwardRef<HTMLDivElement, AspectRatioProps> =
         sx={{
           position: 'relative',
           overflow: 'hidden',
-        }}>
+        }}
+      >
         <Box
           sx={{
             width: '100%',
@@ -32,14 +34,16 @@ export const AspectRatio: ForwardRef<HTMLDivElement, AspectRatioProps> =
         />
         <Box
           {...props}
-          // @ts-expect-error
-          __css={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-          }}>
+          {...__internalProps({
+            __css: {
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+            },
+          })}
+        >
           {children}
         </Box>
       </Box>

packages/components/src/Avatar.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Image, ImageProps } from './Image'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface AvatarProps extends ImageProps {
   size?: number | string
@@ -16,10 +17,11 @@ export const Avatar: ForwardRef<HTMLImageElement, AvatarProps> =
         height={size}
         variant="avatar"
         {...props}
-        // @ts-expect-error
-        __css={{
-          borderRadius: 9999,
-        }}
+        {...__internalProps({
+          __css: {
+            borderRadius: 9999,
+          },
+        })}
       />
     )
   })

packages/components/src/Badge.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxProps } from './Box'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export type BadgeProps = BoxProps
 
@@ -12,19 +13,20 @@ export const Badge: ForwardRef<HTMLDivElement, BadgeProps> = React.forwardRef(
         ref={ref}
         variant="primary"
         {...props}
-        // @ts-expect-error
-        __themeKey="badges"
-        __css={{
-          display: 'inline-block',
-          verticalAlign: 'baseline',
-          fontSize: 0,
-          fontWeight: 'bold',
-          whiteSpace: 'nowrap',
-          px: 1,
-          borderRadius: 2,
-          color: 'white',
-          bg: 'primary',
-        }}
+        {...__internalProps({
+          __themeKey: 'badges',
+          __css: {
+            display: 'inline-block',
+            verticalAlign: 'baseline',
+            fontSize: 0,
+            fontWeight: 'bold',
+            whiteSpace: 'nowrap',
+            px: 1,
+            borderRadius: 2,
+            color: 'white',
+            bg: 'primary',
+          },
+        })}
       />
     )
   }

packages/components/src/Box.tsx

@@ -10,11 +10,11 @@ import React, { forwardRef } from 'react'
 import {
   css,
   get,
-  ThemeUICSSObject,
   ThemeUICSSProperties,
   ThemeUIStyleObject,
 } from '@theme-ui/css'
 import type { Assign } from './types'
+import type { __ThemeUIComponentsInternalProps } from './util'
 
 const boxSystemProps = [
   // space scale props (inherited from @styled-system/space)
@@ -77,7 +77,10 @@ export const __isBoxStyledSystemProp = (prop: string) =>
 
 const pickSystemProps = (props: BoxOwnProps) => {
   const res: Partial<Pick<BoxOwnProps, typeof boxSystemProps[number]>> = {}
-  for (const key of boxSystemProps) res[key] = props[key]
+  for (const key of boxSystemProps) {
+    // ts2590: union is too large
+    ;(res as any)[key] = props[key]
+  }
 
   return res
 }
@@ -86,14 +89,9 @@ const pickSystemProps = (props: BoxOwnProps) => {
  * Use the Box component as a layout primitive to add margin, padding, and colors to content.
  * @see https://theme-ui.com/components/box
  */
-export const Box = forwardRef<HTMLElement, BoxProps>(function Box(props, ref) {
+export const Box = forwardRef<any, BoxProps>(function Box(props, ref) {
   const theme = useTheme()
 
-  interface __BoxInternalProps {
-    __css: ThemeUICSSObject
-    __themeKey?: string
-  }
-
   const {
     __themeKey = 'variants',
     __css,
@@ -102,7 +100,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(function Box(props, ref) {
     sx,
     as: Component = 'div',
     ...rest
-  } = props as BoxProps & __BoxInternalProps
+  } = props as BoxProps & __ThemeUIComponentsInternalProps
 
   const baseStyles: CSSObject = {
     boxSizing: 'border-box',

packages/components/src/Button.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 
-import { Box, BoxOwnProps } from './Box'
+import { Box as _Box, BoxOwnProps, BoxProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
+
+const Box = _Box as React.ForwardRefExoticComponent<
+  BoxProps & React.RefAttributes<HTMLButtonElement>
+>
 
 export interface ButtonProps
   extends Assign<React.ComponentPropsWithRef<'button'>, BoxOwnProps> {}
@@ -13,26 +18,27 @@ export const Button: ForwardRef<HTMLButtonElement, ButtonProps> =
   React.forwardRef(function Button(props, ref) {
     return (
       <Box
-        ref={ref}
+        ref={ref as React.Ref<HTMLButtonElement>}
         as="button"
         variant="primary"
-        {...props}
-        // @ts-expect-error
-        __themeKey="buttons"
-        __css={{
-          appearance: 'none',
-          display: props.hidden ? undefined : 'inline-block',
-          textAlign: 'center',
-          lineHeight: 'inherit',
-          textDecoration: 'none',
-          fontSize: 'inherit',
-          px: 3,
-          py: 2,
-          color: 'white',
-          bg: 'primary',
-          border: 0,
-          borderRadius: 4,
-        }}
+        {...(props as BoxProps)}
+        {...__internalProps({
+          __themeKey: 'buttons',
+          __css: {
+            appearance: 'none',
+            display: props.hidden ? undefined : 'inline-block',
+            textAlign: 'center',
+            lineHeight: 'inherit',
+            textDecoration: 'none',
+            fontSize: 'inherit',
+            px: 3,
+            py: 2,
+            color: 'white',
+            bg: 'primary',
+            border: 0,
+            borderRadius: 4,
+          },
+        })}
       />
     )
   })

packages/components/src/Card.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxProps } from './Box'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export type CardProps = BoxProps
 /**
@@ -16,8 +17,7 @@ export const Card: ForwardRef<HTMLDivElement, CardProps> = React.forwardRef(
         ref={ref}
         variant="primary"
         {...props}
-        // @ts-expect-error
-        __themeKey="cards"
+        {...__internalProps({ __themeKey: 'cards' })}
       />
     )
   }

packages/components/src/Checkbox.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Box, BoxOwnProps } from './Box'
 import { SVG, SVGProps } from './SVG'
 import { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 const CheckboxChecked = (props: SVGProps) => (
   <SVG {...props}>
@@ -20,23 +21,25 @@ const CheckboxIcon = (props: SVGProps) => (
   <React.Fragment>
     <CheckboxChecked
       {...props}
-      // @ts-expect-error internal prop
-      __css={{
-        display: 'none',
-        'input:checked ~ &': {
-          display: 'block',
+      {...__internalProps({
+        __css: {
+          display: 'none',
+          'input:checked ~ &': {
+            display: 'block',
+          },
         },
-      }}
+      })}
     />
     <CheckboxUnchecked
       {...props}
-      // @ts-expect-error internal prop
-      __css={{
-        display: 'block',
-        'input:checked ~ &': {
-          display: 'none',
+      {...__internalProps({
+        __css: {
+          display: 'block',
+          'input:checked ~ &': {
+            display: 'none',
+          },
         },
-      }}
+      })}
     />
   </React.Fragment>
 )
@@ -78,21 +81,22 @@ export const Checkbox: ForwardRef<HTMLInputElement, CheckboxProps> =
           variant={variant}
           className={className}
           sx={sx}
-          // @ts-expect-error internal prop
-          __themeKey="forms"
-          __css={{
-            mr: 2,
-            borderRadius: 4,
-            color: 'gray',
-            flexShrink: 0,
-            'input:checked ~ &': {
-              color: 'primary',
-            },
-            'input:focus ~ &': {
-              color: 'primary',
-              bg: 'highlight',
+          {...__internalProps({
+            __themeKey: 'forms',
+            __css: {
+              mr: 2,
+              borderRadius: 4,
+              color: 'gray',
+              flexShrink: 0,
+              'input:checked ~ &': {
+                color: 'primary',
+              },
+              'input:focus ~ &': {
+                color: 'primary',
+                bg: 'highlight',
+              },
             },
-          }}
+          })}
         />
         {children}
       </Box>