diff --git a/packages/components/src/Alert.tsx b/packages/components/src/Alert.tsx
index 7aba568fe..1e91d2a0a 100644
--- a/packages/components/src/Alert.tsx
+++ b/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,
+          },
+        })}
       />
     )
   }
diff --git a/packages/components/src/AspectImage.tsx b/packages/components/src/AspectImage.tsx
index 403576483..83b48b3f6 100644
--- a/packages/components/src/AspectImage.tsx
+++ b/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>
     )
diff --git a/packages/components/src/AspectRatio.tsx b/packages/components/src/AspectRatio.tsx
index e6a0ac037..73dbc7536 100644
--- a/packages/components/src/AspectRatio.tsx
+++ b/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>
diff --git a/packages/components/src/Avatar.tsx b/packages/components/src/Avatar.tsx
index 0b026c95a..d95f0c712 100644
--- a/packages/components/src/Avatar.tsx
+++ b/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,
+          },
+        })}
       />
     )
   })
diff --git a/packages/components/src/Badge.tsx b/packages/components/src/Badge.tsx
index 31a686707..a4575880a 100644
--- a/packages/components/src/Badge.tsx
+++ b/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',
+          },
+        })}
       />
     )
   }
diff --git a/packages/components/src/Box.tsx b/packages/components/src/Box.tsx
index 775a2f110..1c25466d9 100644
--- a/packages/components/src/Box.tsx
+++ b/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',
diff --git a/packages/components/src/Button.tsx b/packages/components/src/Button.tsx
index 49e914ecc..88de693a6 100644
--- a/packages/components/src/Button.tsx
+++ b/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,
+          },
+        })}
       />
     )
   })
diff --git a/packages/components/src/Card.tsx b/packages/components/src/Card.tsx
index 67c25eb19..bd2fe749d 100644
--- a/packages/components/src/Card.tsx
+++ b/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' })}
       />
     )
   }
diff --git a/packages/components/src/Checkbox.tsx b/packages/components/src/Checkbox.tsx
index 4710e4720..27a1d7058 100644
--- a/packages/components/src/Checkbox.tsx
+++ b/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>
diff --git a/packages/components/src/Container.tsx b/packages/components/src/Container.tsx
index 3a0a6c13c..761468467 100644
--- a/packages/components/src/Container.tsx
+++ b/packages/components/src/Container.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 ContainerProps = BoxProps
 
@@ -19,13 +20,14 @@ export const Container: ForwardRef<HTMLDivElement, ContainerProps> =
         ref={ref}
         variant="container"
         {...props}
-        // @ts-expect-error
-        __themeKey="layout"
-        __css={{
-          width: '100%',
-          maxWidth: 'container',
-          mx: 'auto',
-        }}
+        {...__internalProps({
+          __themeKey: 'layout',
+          __css: {
+            width: '100%',
+            maxWidth: 'container',
+            mx: 'auto',
+          },
+        })}
       />
     )
   })
diff --git a/packages/components/src/Divider.tsx b/packages/components/src/Divider.tsx
index 4b3519954..1055d62e6 100644
--- a/packages/components/src/Divider.tsx
+++ b/packages/components/src/Divider.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 DividerProps = BoxProps
 
@@ -16,14 +17,15 @@ export const Divider: ForwardRef<HTMLDivElement, DividerProps> =
         as="hr"
         variant="styles.hr"
         {...props}
-        // @ts-expect-error
-        __css={{
-          color: 'gray',
-          m: 0,
-          my: 2,
-          border: 0,
-          borderBottom: '1px solid',
-        }}
+        {...__internalProps({
+          __css: {
+            color: 'gray',
+            m: 0,
+            my: 2,
+            border: 0,
+            borderBottom: '1px solid',
+          },
+        })}
       />
     )
   })
diff --git a/packages/components/src/Donut.tsx b/packages/components/src/Donut.tsx
index 88e61f1c0..738360c4f 100644
--- a/packages/components/src/Donut.tsx
+++ b/packages/components/src/Donut.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxOwnProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface DonutProps
   extends Assign<
@@ -55,10 +56,10 @@ export const Donut: ForwardRef<SVGSVGElement, DonutProps> = React.forwardRef(
         aria-valuemin={min}
         aria-valuemax={max}
         {...props}
-        // @ts-expect-error
-        __css={{
-          color: 'primary',
-        }}>
+        {...__internalProps({
+          __css: { color: 'primary' },
+        })}
+      >
         {title && <title>{title}</title>}
         <circle cx={16} cy={16} r={r} opacity={1 / 8} />
         <circle
diff --git a/packages/components/src/Embed.tsx b/packages/components/src/Embed.tsx
index e8480eb31..5d8d037f5 100644
--- a/packages/components/src/Embed.tsx
+++ b/packages/components/src/Embed.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { ComponentPropsWithoutRef } from 'react'
 
 import { Box, BoxOwnProps, __isBoxStyledSystemProp } from './Box'
 import { Assign, ForwardRef } from './types'
-import { getProps } from './util'
+import { getProps, __internalProps } from './util'
 
 const getContainerProps = getProps(__isBoxStyledSystemProp)
 const getIframeProps = getProps((str) => !__isBoxStyledSystemProp(str))
@@ -40,39 +40,46 @@ export const Embed: ForwardRef<HTMLIFrameElement, EmbedProps> =
     },
     ref
   ) {
+    const iframeProps: ComponentPropsWithoutRef<'iframe'> = {
+      src,
+      width,
+      height,
+      frameBorder,
+      allowFullScreen,
+      allow,
+      ...getIframeProps(rest),
+    }
+
     return (
       <Box
         variant={variant}
         sx={sx}
-        // @ts-expect-error
-        __css={{
-          width: '100%',
-          height: 0,
-          paddingBottom: 100 / ratio + '%',
-          position: 'relative',
-          overflow: 'hidden',
-        }}
-        {...getContainerProps(rest)}>
+        {...getContainerProps(rest)}
+        {...__internalProps({
+          __css: {
+            width: '100%',
+            height: 0,
+            paddingBottom: 100 / ratio + '%',
+            position: 'relative',
+            overflow: 'hidden',
+          },
+        })}
+      >
         <Box
           ref={ref}
           as="iframe"
-          src={src}
-          width={width}
-          height={height}
-          frameBorder={frameBorder}
-          allowFullScreen={allowFullScreen}
-          allow={allow}
-          {...getIframeProps(rest)}
-          // @ts-expect-error
-          __css={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            border: 0,
-          }}
+          {...(iframeProps as {})}
+          {...__internalProps({
+            __css: {
+              position: 'absolute',
+              width: '100%',
+              height: '100%',
+              top: 0,
+              bottom: 0,
+              left: 0,
+              border: 0,
+            },
+          })}
         />
       </Box>
     )
diff --git a/packages/components/src/Grid.tsx b/packages/components/src/Grid.tsx
index b36c2c350..a472b0566 100644
--- a/packages/components/src/Grid.tsx
+++ b/packages/components/src/Grid.tsx
@@ -7,6 +7,7 @@ import React from 'react'
 
 import { Box, BoxProps } from './Box'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 const px = (n: number | string) => (typeof n === 'number' ? n + 'px' : n)
 
@@ -65,9 +66,10 @@ export const Grid: ForwardRef<HTMLDivElement, GridProps> = React.forwardRef(
       <Box
         ref={ref}
         {...props}
-        // @ts-expect-error internal prop
-        __themeKey="grids"
-        __css={__css}
+        {...__internalProps({
+          __themeKey: 'grids',
+          __css,
+        })}
       />
     )
   }
diff --git a/packages/components/src/Heading.tsx b/packages/components/src/Heading.tsx
index d04e0927d..902a841d3 100644
--- a/packages/components/src/Heading.tsx
+++ b/packages/components/src/Heading.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxOwnProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface HeadingProps
   extends Assign<React.ComponentPropsWithRef<'h2'>, BoxOwnProps> {}
@@ -21,13 +22,14 @@ export const Heading: ForwardRef<HTMLHeadingElement, HeadingProps> =
         as="h2"
         variant="heading"
         {...props}
-        // @ts-expect-error
-        __themeKey="text"
-        __css={{
-          fontFamily: 'heading',
-          fontWeight: 'heading',
-          lineHeight: 'heading',
-        }}
+        {...__internalProps({
+          __themeKey: 'text',
+          __css: {
+            fontFamily: 'heading',
+            fontWeight: 'heading',
+            lineHeight: 'heading',
+          },
+        })}
       />
     )
   })
diff --git a/packages/components/src/IconButton.tsx b/packages/components/src/IconButton.tsx
index 16e255362..525c268ca 100644
--- a/packages/components/src/IconButton.tsx
+++ b/packages/components/src/IconButton.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 
-import { Box, BoxOwnProps } from './Box'
+import { Box, BoxOwnProps, BoxProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps, __ThemeUIComponentsInternalProps } from './util'
 
 export interface IconButtonProps
   extends Assign<React.ComponentPropsWithRef<'button'>, BoxOwnProps> {
@@ -21,29 +22,32 @@ export const IconButton: ForwardRef<HTMLButtonElement, IconButtonProps> =
     { size = 32, ...props }: IconButtonProps,
     ref
   ) {
+    const emotionCssLabel =
+      (props as __ThemeUIComponentsInternalProps).__css?.label || 'IconButton'
+
     return (
       <Box
         ref={ref}
         as="button"
         variant="icon"
-        {...props}
-        // @ts-expect-error
-        __themeKey="buttons"
-        __css={{
-          // @ts-expect-error
-          label: props.__css?.label || 'IconButton',
-          appearance: 'none',
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: 1,
-          width: size,
-          height: size,
-          color: 'inherit',
-          bg: 'transparent',
-          border: 'none',
-          borderRadius: 4,
-        }}
+        {...(props as BoxProps)}
+        {...__internalProps({
+          __themeKey: 'buttons',
+          __css: {
+            label: emotionCssLabel,
+            appearance: 'none',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 1,
+            width: size,
+            height: size,
+            color: 'inherit',
+            bg: 'transparent',
+            border: 'none',
+            borderRadius: 4,
+          },
+        })}
       />
     )
   })
diff --git a/packages/components/src/Image.tsx b/packages/components/src/Image.tsx
index a58fd5f05..609e2458b 100644
--- a/packages/components/src/Image.tsx
+++ b/packages/components/src/Image.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxOwnProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps, __ThemeUIComponentsInternalProps } from './util'
 
 export interface ImageProps
   extends Assign<React.ComponentPropsWithRef<'img'>, BoxOwnProps> {}
@@ -12,19 +13,21 @@ export interface ImageProps
  */
 export const Image: ForwardRef<HTMLImageElement, ImageProps> = React.forwardRef(
   function Image(props, ref) {
+    const __outerCss = (props as __ThemeUIComponentsInternalProps).__css
+
     return (
       <Box
         ref={ref}
         as="img"
         {...props}
-        // @ts-expect-error
-        __themeKey="images"
-        __css={{
-          maxWidth: '100%',
-          height: 'auto',
-          // @ts-expect-error
-          ...props.__css,
-        }}
+        {...__internalProps({
+          __themeKey: 'images',
+          __css: {
+            maxWidth: '100%',
+            height: 'auto',
+            ...__outerCss,
+          },
+        })}
       />
     )
   }
diff --git a/packages/components/src/Input.tsx b/packages/components/src/Input.tsx
index bb18ea0bf..912edcfff 100644
--- a/packages/components/src/Input.tsx
+++ b/packages/components/src/Input.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { Box, BoxOwnProps } from './Box'
 import { get, ThemeUIStyleObject } from '@theme-ui/css'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 const autofillStyles: ThemeUIStyleObject = {
   boxShadow: 'inset 0 0 0 1000px var(--theme-ui-input-autofill-bg)',
@@ -52,9 +53,10 @@ export const Input: ForwardRef<HTMLInputElement, InputProps> = React.forwardRef(
           ...sx,
         }}
         {...rest}
-        // @ts-expect-error
-        __themeKey="forms"
-        __css={defaultInputStyles}
+        {...__internalProps({
+          __themeKey: 'forms',
+          __css: defaultInputStyles,
+        })}
       />
     )
   }
diff --git a/packages/components/src/Label.tsx b/packages/components/src/Label.tsx
index e8bcc26a5..0984dd341 100644
--- a/packages/components/src/Label.tsx
+++ b/packages/components/src/Label.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxOwnProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface LabelProps
   extends Assign<React.ComponentPropsWithRef<'label'>, BoxOwnProps> {}
@@ -19,12 +20,10 @@ export const Label: ForwardRef<HTMLLabelElement, LabelProps> = React.forwardRef(
         as="label"
         variant="label"
         {...props}
-        // @ts-expect-error
-        __themeKey="forms"
-        __css={{
-          width: '100%',
-          display: 'flex',
-        }}
+        {...__internalProps({
+          __themeKey: 'forms',
+          __css: { width: '100%', display: 'flex' },
+        })}
       />
     )
   }
diff --git a/packages/components/src/Link.tsx b/packages/components/src/Link.tsx
index 317606a12..42ef1e7df 100644
--- a/packages/components/src/Link.tsx
+++ b/packages/components/src/Link.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxOwnProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface LinkProps
   extends Assign<React.ComponentPropsWithRef<'a'>, BoxOwnProps> {}
@@ -19,8 +20,7 @@ export const Link: ForwardRef<HTMLAnchorElement, LinkProps> = React.forwardRef(
         as="a"
         variant="styles.a"
         {...props}
-        // @ts-expect-error internal prop
-        __themeKey="links"
+        {...__internalProps({ __themeKey: 'links' })}
       />
     )
   }
diff --git a/packages/components/src/Message.tsx b/packages/components/src/Message.tsx
index 5164be184..2ebd867ba 100644
--- a/packages/components/src/Message.tsx
+++ b/packages/components/src/Message.tsx
@@ -3,6 +3,7 @@ import { ThemeUICSSObject } from '@theme-ui/css'
 
 import { Box, BoxProps } from './Box'
 import { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export type MessageProps = BoxProps
 
@@ -28,9 +29,7 @@ export const Message: ForwardRef<HTMLDivElement, MessageProps> =
       <Box
         ref={ref}
         {...props}
-        // @ts-expect-error internal prop
-        __themeKey="messages"
-        __css={__css}
+        {...__internalProps({ __themeKey: 'messages', __css })}
       />
     )
   })
diff --git a/packages/components/src/NavLink.tsx b/packages/components/src/NavLink.tsx
index 24ad0560d..7abc01fdf 100644
--- a/packages/components/src/NavLink.tsx
+++ b/packages/components/src/NavLink.tsx
@@ -3,6 +3,7 @@ import type { ThemeUICSSObject } from '@theme-ui/css'
 
 import { Link, LinkProps } from './Link'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export type NavLinkProps = LinkProps
 /**
@@ -29,8 +30,7 @@ export const NavLink: ForwardRef<HTMLAnchorElement, NavLinkProps> =
         ref={ref}
         variant="nav"
         {...props}
-        // @ts-expect-error internal prop
-        __css={__css}
+        {...__internalProps({ __css })}
       />
     )
   })
diff --git a/packages/components/src/Paragraph.tsx b/packages/components/src/Paragraph.tsx
index 048c2de59..0bad6b961 100644
--- a/packages/components/src/Paragraph.tsx
+++ b/packages/components/src/Paragraph.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxOwnProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface ParagraphProps
   extends Assign<React.ComponentPropsWithRef<'p'>, BoxOwnProps> {}
@@ -21,13 +22,14 @@ export const Paragraph: ForwardRef<HTMLParagraphElement, ParagraphProps> =
         as="p"
         variant="paragraph"
         {...props}
-        // @ts-expect-error internal prop
-        __themeKey="text"
-        __css={{
-          fontFamily: 'body',
-          fontWeight: 'body',
-          lineHeight: 'body',
-        }}
+        {...__internalProps({
+          __themeKey: 'text',
+          __css: {
+            fontFamily: 'body',
+            fontWeight: 'body',
+            lineHeight: 'body',
+          },
+        })}
       />
     )
   })
diff --git a/packages/components/src/Progress.tsx b/packages/components/src/Progress.tsx
index 1a2d13a1b..191b0d393 100644
--- a/packages/components/src/Progress.tsx
+++ b/packages/components/src/Progress.tsx
@@ -2,8 +2,9 @@ import React from 'react'
 
 import { ThemeUICSSObject } from '@theme-ui/css'
 
-import { Box, BoxOwnProps } from './Box'
+import { Box, BoxOwnProps, BoxProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface ProgressProps
   extends Assign<React.ComponentPropsWithRef<'progress'>, BoxOwnProps> {}
@@ -42,9 +43,8 @@ export const Progress: ForwardRef<HTMLProgressElement, ProgressProps> =
         ref={ref}
         as="progress"
         variant="styles.progress"
-        {...props}
-        // @ts-expect-error internal prop
-        __css={__css}
+        {...(props as BoxProps)}
+        {...__internalProps({ __css })}
       />
     )
   })
diff --git a/packages/components/src/Radio.tsx b/packages/components/src/Radio.tsx
index 1dd1e7b5c..cdedcbb5d 100644
--- a/packages/components/src/Radio.tsx
+++ b/packages/components/src/Radio.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { Box, BoxOwnProps } from './Box'
 import { SVG, SVGProps } from './SVG'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 const RadioChecked = (props: SVGProps) => (
   <SVG {...props}>
@@ -20,23 +21,25 @@ const RadioIcon = (props: SVGProps) => (
   <React.Fragment>
     <RadioChecked
       {...props}
-      // @ts-expect-error internal prop
-      __css={{
-        display: 'none',
-        'input:checked ~ &': {
-          display: 'block',
+      {...__internalProps({
+        __css: {
+          display: 'none',
+          'input:checked ~ &': {
+            display: 'block',
+          },
         },
-      }}
+      })}
     />
     <RadioUnchecked
       {...props}
-      // @ts-expect-error internal prop
-      __css={{
-        display: 'block',
-        'input:checked ~ &': {
-          display: 'none',
+      {...__internalProps({
+        __css: {
+          display: 'block',
+          'input:checked ~ &': {
+            display: 'none',
+          },
         },
-      }}
+      })}
     />
   </React.Fragment>
 )
@@ -74,20 +77,21 @@ export const Radio: ForwardRef<HTMLInputElement, RadioProps> = React.forwardRef(
           variant={variant}
           className={className}
           sx={sx}
-          // @ts-expect-error internal prop
-          __themeKey="forms"
-          __css={{
-            mr: 2,
-            borderRadius: 9999,
-            color: 'gray',
-            flexShrink: 0,
-            'input:checked ~ &': {
-              color: 'primary',
-            },
-            'input:focus ~ &': {
-              bg: 'highlight',
+          {...__internalProps({
+            __themeKey: 'forms',
+            __css: {
+              mr: 2,
+              borderRadius: 9999,
+              color: 'gray',
+              flexShrink: 0,
+              'input:checked ~ &': {
+                color: 'primary',
+              },
+              'input:focus ~ &': {
+                bg: 'highlight',
+              },
             },
-          }}
+          })}
         />
       </Box>
     )
diff --git a/packages/components/src/Select.tsx b/packages/components/src/Select.tsx
index 7deb551b1..a745e677d 100644
--- a/packages/components/src/Select.tsx
+++ b/packages/components/src/Select.tsx
@@ -4,7 +4,7 @@ import { get, ThemeUICSSObject } from '@theme-ui/css'
 
 import { Box, BoxOwnProps } from './Box'
 import { SVG, SVGProps } from './SVG'
-import { getMargin, omitMargin } from './util'
+import { getMargin, omitMargin, __internalProps } from './util'
 import { Assign, ForwardRef } from './types'
 
 const DownArrow = (props: SVGProps) => (
@@ -43,15 +43,14 @@ export const Select: ForwardRef<HTMLSelectElement, SelectProps> =
         {...getMargin(props)}
         sx={{
           display: 'flex',
-        }}>
+        }}
+      >
         <Box
           ref={ref}
           as="select"
           variant="select"
           {...omitMargin(props)}
-          // @ts-expect-error internal prop
-          __themeKey="forms"
-          __css={__css}
+          {...__internalProps({ __themeKey: 'forms', __css })}
         />
         {arrow || (
           <DownArrow
diff --git a/packages/components/src/Slider.tsx b/packages/components/src/Slider.tsx
index cfdf55779..80b3c90e4 100644
--- a/packages/components/src/Slider.tsx
+++ b/packages/components/src/Slider.tsx
@@ -4,6 +4,7 @@ import { ThemeUICSSObject } from '@theme-ui/css'
 
 import { Box, BoxOwnProps } from './Box'
 import { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 const thumbStyle: ThemeUICSSObject = {
   appearance: 'none',
@@ -53,9 +54,7 @@ export const Slider: ForwardRef<HTMLInputElement, SliderProps> =
         type="range"
         variant="slider"
         {...props}
-        // @ts-expect-error internal prop
-        __themeKey="forms"
-        __css={sliderStyle}
+        {...__internalProps({ __themeKey: 'forms', __css: sliderStyle })}
       />
     )
   })
diff --git a/packages/components/src/Spinner.tsx b/packages/components/src/Spinner.tsx
index 060cb2461..f3a030312 100644
--- a/packages/components/src/Spinner.tsx
+++ b/packages/components/src/Spinner.tsx
@@ -3,8 +3,9 @@ import { keyframes } from '@emotion/react'
 
 import type { ThemeUICSSObject } from '@theme-ui/css'
 
-import { Box, BoxOwnProps } from './Box'
+import { Box, BoxOwnProps, BoxProps } from './Box'
 import type { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 const spin = keyframes({
   from: {
@@ -64,27 +65,34 @@ export const Spinner: ForwardRef<SVGSVGElement, SpinnerProps> =
       animationIterationCount: 'infinite',
     }
 
+    const svgProps = {
+      strokeWidth,
+
+      viewBox: '0 0 32 32',
+      width: size,
+      height: size,
+
+      fill: 'none',
+      stroke: 'currentColor',
+      role: 'img',
+    }
+
     return (
       <Box
         ref={ref}
         as="svg"
-        viewBox="0 0 32 32"
-        width={size}
-        height={size}
-        strokeWidth={strokeWidth}
-        fill="none"
-        stroke="currentcolor"
-        role="img"
-        {...props}
-        // @ts-expect-error internal prop
-        __css={__css}>
+        {...(svgProps as {})}
+        {...(props as BoxProps)}
+        {...__internalProps({ __css })}
+      >
         <title>{title}</title>
         <circle cx={16} cy={16} r={r} opacity={1 / 8} />
         <Box
           as="circle"
           {...(circleProps as {})}
-          // @ts-expect-error internal prop
-          __css={__circleCss}
+          {...__internalProps({
+            __css: __circleCss,
+          })}
         />
       </Box>
     )
diff --git a/packages/components/src/Switch.tsx b/packages/components/src/Switch.tsx
index 07d3ed219..92cfa10e1 100644
--- a/packages/components/src/Switch.tsx
+++ b/packages/components/src/Switch.tsx
@@ -5,6 +5,7 @@ import type { ThemeUICSSObject } from '@theme-ui/css'
 import { Box, BoxOwnProps } from './Box'
 import { Label } from './Label'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 const GUTTER = 2
 const SIZE = 18
@@ -73,19 +74,15 @@ export const Switch: ForwardRef<HTMLInputElement, SwitchProps> =
             height: 1,
             overflow: 'hidden',
           }}
-          // @ts-expect-error internal prop
-          __themeKey="forms"
+          {...__internalProps({ __themeKey: 'forms' })}
         />
         <Box
-          css={{
-            padding: GUTTER,
-          }}
+          css={{ padding: GUTTER }}
           variant={variant}
           className={className}
           sx={sx}
-          // @ts-expect-error internal prop
-          __themeKey="forms"
-          __css={__css}>
+          {...__internalProps({ __themeKey: 'forms', __css })}
+        >
           <Box />
         </Box>
         <span>{label}</span>
diff --git a/packages/components/src/Text.tsx b/packages/components/src/Text.tsx
index a45232013..0d00d74ef 100644
--- a/packages/components/src/Text.tsx
+++ b/packages/components/src/Text.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 import { Box, BoxProps } from './Box'
 import { ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export type TextProps = BoxProps
 
@@ -19,8 +20,9 @@ export const Text: ForwardRef<HTMLDivElement, TextProps> = React.forwardRef(
         ref={ref}
         variant="default"
         {...props}
-        // @ts-expect-error internal prop
-        __themeKey="text"
+        {...__internalProps({
+          __themeKey: 'text',
+        })}
       />
     )
   }
diff --git a/packages/components/src/Textarea.tsx b/packages/components/src/Textarea.tsx
index 5d895745c..21ee0d046 100644
--- a/packages/components/src/Textarea.tsx
+++ b/packages/components/src/Textarea.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 
-import { Box, BoxOwnProps } from './Box'
+import { Box, BoxOwnProps, BoxProps } from './Box'
 import type { Assign, ForwardRef } from './types'
+import { __internalProps } from './util'
 
 export interface TextareaProps
   extends Assign<React.ComponentPropsWithRef<'textarea'>, BoxOwnProps> {}
@@ -20,21 +21,22 @@ export const Textarea: ForwardRef<HTMLTextAreaElement, TextareaProps> =
         ref={ref}
         as="textarea"
         variant="textarea"
-        {...props}
-        // @ts-expect-error internal prop
-        __themeKey="forms"
-        __css={{
-          display: 'block',
-          width: '100%',
-          p: 2,
-          appearance: 'none',
-          fontSize: 'inherit',
-          lineHeight: 'inherit',
-          border: '1px solid',
-          borderRadius: 4,
-          color: 'inherit',
-          bg: 'transparent',
-        }}
+        {...(props as BoxProps)}
+        {...__internalProps({
+          __themeKey: 'forms',
+          __css: {
+            display: 'block',
+            width: '100%',
+            p: 2,
+            appearance: 'none',
+            fontSize: 'inherit',
+            lineHeight: 'inherit',
+            border: '1px solid',
+            borderRadius: 4,
+            color: 'inherit',
+            bg: 'transparent',
+          },
+        })}
       />
     )
   })
diff --git a/packages/components/src/util.ts b/packages/components/src/util.ts
index a0e2d7572..a9af62fad 100644
--- a/packages/components/src/util.ts
+++ b/packages/components/src/util.ts
@@ -1,4 +1,4 @@
-import { ThemeUICSSProperties } from '@theme-ui/css'
+import type { ThemeUICSSObject, ThemeUICSSProperties } from '@theme-ui/css'
 
 export const getProps =
   (test: (k: string) => boolean) =>
@@ -22,3 +22,16 @@ export const getMargin: (props: MarginProps) => MarginProps = getProps((k) =>
   MRE.test(k)
 )
 export const omitMargin = getProps((k) => !MRE.test(k))
+
+/** @internal */
+export function __internalProps(props: __ThemeUIComponentsInternalProps) {
+  return props as {}
+}
+
+/**
+ * @internal Props used by Theme UI Components not intended for user code.
+ */
+export interface __ThemeUIComponentsInternalProps {
+  __css?: ThemeUICSSObject
+  __themeKey?: string
+}
diff --git a/packages/components/test/Box.spec.tsx b/packages/components/test/Box.spec.tsx
index 04a68fbe1..34249f1a6 100644
--- a/packages/components/test/Box.spec.tsx
+++ b/packages/components/test/Box.spec.tsx
@@ -9,6 +9,7 @@ import { ThemeProvider } from 'theme-ui'
 import { Box } from '..'
 
 import { theme } from './__test-utils__'
+import { __internalProps } from '../src/util'
 
 describe('Box', () => {
   test('renders', () => {
@@ -62,16 +63,15 @@ describe('Box', () => {
   test('renders with base styles', () => {
     const json = renderJSON(
       <Box
-        // @ts-expect-error `__css` is not public API, use `sx` instead
-        __css={{
-          p: 4,
-          color: 'black',
-          bg: 'white',
-        }}
         bg="cyan"
-        sx={{
-          color: 'tomato',
-        }}
+        sx={{ color: 'tomato' }}
+        {...__internalProps({
+          __css: {
+            p: 4,
+            color: 'black',
+            bg: 'white',
+          },
+        })}
       />
     )
     expect(json).toHaveStyleRule('padding', '32px')