diff --git a/packages/components/src/Alert.js b/packages/components/src/Alert.js
index cead9ceee..c209397ad 100644
--- a/packages/components/src/Alert.js
+++ b/packages/components/src/Alert.js
@@ -1,21 +1,23 @@
 import React from 'react'
 import Box from './Box'
 
-export const Alert = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    variant="primary"
-    {...props}
-    __themeKey="alerts"
-    __css={{
-      display: 'flex',
-      alignItems: 'center',
-      px: 3,
-      py: 2,
-      fontWeight: 'bold',
-      color: 'white',
-      bg: 'primary',
-      borderRadius: 4,
-    }}
-  />
-))
+export const Alert = React.forwardRef(function Alert(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      variant="primary"
+      {...props}
+      __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.js b/packages/components/src/AspectImage.js
index 6459a3674..ec4df0723 100644
--- a/packages/components/src/AspectImage.js
+++ b/packages/components/src/AspectImage.js
@@ -2,14 +2,19 @@ import React from 'react'
 import { AspectRatio } from './AspectRatio'
 import { Image } from './Image'
 
-export const AspectImage = React.forwardRef(({ ratio, ...props }, ref) => (
-  <AspectRatio ratio={ratio}>
-    <Image
-      ref={ref}
-      {...props}
-      __css={{
-        objectFit: 'cover',
-      }}
-    />
-  </AspectRatio>
-))
+export const AspectImage = React.forwardRef(function AspectImage(
+  { ratio, ...props },
+  ref
+) {
+  return (
+    <AspectRatio ratio={ratio}>
+      <Image
+        ref={ref}
+        {...props}
+        __css={{
+          objectFit: 'cover',
+        }}
+      />
+    </AspectRatio>
+  )
+})
diff --git a/packages/components/src/AspectRatio.js b/packages/components/src/AspectRatio.js
index 8c563097f..6b29f22cb 100644
--- a/packages/components/src/AspectRatio.js
+++ b/packages/components/src/AspectRatio.js
@@ -1,8 +1,11 @@
 import React from 'react'
 import Box from './Box'
 
-export const AspectRatio = React.forwardRef(
-  ({ ratio = 4 / 3, children, ...props }, ref) => (
+export const AspectRatio = React.forwardRef(function AspectRatio(
+  { ratio = 4 / 3, children, ...props },
+  ref
+) {
+  return (
     <Box
       ref={ref}
       sx={{
@@ -29,4 +32,4 @@ export const AspectRatio = React.forwardRef(
       </Box>
     </Box>
   )
-)
+})
diff --git a/packages/components/src/Avatar.js b/packages/components/src/Avatar.js
index ff7a0110b..bda6614eb 100644
--- a/packages/components/src/Avatar.js
+++ b/packages/components/src/Avatar.js
@@ -1,15 +1,20 @@
 import React from 'react'
 import { Image } from './Image'
 
-export const Avatar = React.forwardRef(({ size = 48, ...props }, ref) => (
-  <Image
-    ref={ref}
-    width={size}
-    height={size}
-    variant="avatar"
-    {...props}
-    __css={{
-      borderRadius: 9999,
-    }}
-  />
-))
+export const Avatar = React.forwardRef(function Avatar(
+  { size = 48, ...props },
+  ref
+) {
+  return (
+    <Image
+      ref={ref}
+      width={size}
+      height={size}
+      variant="avatar"
+      {...props}
+      __css={{
+        borderRadius: 9999,
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Badge.js b/packages/components/src/Badge.js
index d266d80b2..bcf5df885 100644
--- a/packages/components/src/Badge.js
+++ b/packages/components/src/Badge.js
@@ -1,22 +1,24 @@
 import React from 'react'
 import Box from './Box'
 
-export const Badge = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    variant="primary"
-    {...props}
-    __themeKey="badges"
-    __css={{
-      display: 'inline-block',
-      verticalAlign: 'baseline',
-      fontSize: 0,
-      fontWeight: 'bold',
-      whiteSpace: 'nowrap',
-      px: 1,
-      borderRadius: 2,
-      color: 'white',
-      bg: 'primary',
-    }}
-  />
-))
+export const Badge = React.forwardRef(function Badge(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      variant="primary"
+      {...props}
+      __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.js b/packages/components/src/Box.js
index c1f5559ad..650c45e2e 100644
--- a/packages/components/src/Box.js
+++ b/packages/components/src/Box.js
@@ -35,4 +35,6 @@ export const Box = styled('div', {
   (props) => props.css
 )
 
+Box.displayName = 'Box'
+
 export default Box
diff --git a/packages/components/src/Button.js b/packages/components/src/Button.js
index 530e7f932..8a49de069 100644
--- a/packages/components/src/Button.js
+++ b/packages/components/src/Button.js
@@ -1,26 +1,28 @@
 import React from 'react'
 import Box from './Box'
 
-export const Button = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="button"
-    variant="primary"
-    {...props}
-    __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,
-    }}
-  />
-))
+export const Button = React.forwardRef(function Button(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="button"
+      variant="primary"
+      {...props}
+      __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.js b/packages/components/src/Card.js
index ead00ca51..f3f0b0e87 100644
--- a/packages/components/src/Card.js
+++ b/packages/components/src/Card.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import Box from './Box'
 
-export const Card = React.forwardRef((props, ref) => (
-  <Box ref={ref} variant="primary" {...props} __themeKey="cards" />
-))
+export const Card = React.forwardRef(function Card(props, ref) {
+  return <Box ref={ref} variant="primary" {...props} __themeKey="cards" />
+})
diff --git a/packages/components/src/Checkbox.js b/packages/components/src/Checkbox.js
index 2abc15aa8..43c78a8e6 100644
--- a/packages/components/src/Checkbox.js
+++ b/packages/components/src/Checkbox.js
@@ -37,8 +37,11 @@ const CheckboxIcon = (props) => (
   </React.Fragment>
 )
 
-export const Checkbox = React.forwardRef(
-  ({ className, sx, variant = 'checkbox', children, ...props }, ref) => (
+export const Checkbox = React.forwardRef(function Checkbox(
+  { className, sx, variant = 'checkbox', children, ...props },
+  ref
+) {
+  return (
     <Box sx={{ minWidth: 'min-content' }}>
       <Box
         ref={ref}
@@ -78,4 +81,4 @@ export const Checkbox = React.forwardRef(
       {children}
     </Box>
   )
-)
+})
diff --git a/packages/components/src/Close.js b/packages/components/src/Close.js
index af4666e15..e3504e4b6 100644
--- a/packages/components/src/Close.js
+++ b/packages/components/src/Close.js
@@ -12,14 +12,19 @@ const x = (
   </svg>
 )
 
-export const Close = React.forwardRef(({ size = 32, ...props }, ref) => (
-  <IconButton
-    ref={ref}
-    size={size}
-    title="Close"
-    aria-label="Close"
-    variant="close"
-    {...props}
-    children={x}
-  />
-))
+export const Close = React.forwardRef(function Close(
+  { size = 32, ...props },
+  ref
+) {
+  return (
+    <IconButton
+      ref={ref}
+      size={size}
+      title="Close"
+      aria-label="Close"
+      variant="close"
+      {...props}
+      children={x}
+    />
+  )
+})
diff --git a/packages/components/src/Container.js b/packages/components/src/Container.js
index 5697e059b..c215dd731 100644
--- a/packages/components/src/Container.js
+++ b/packages/components/src/Container.js
@@ -1,16 +1,18 @@
 import React from 'react'
 import Box from './Box'
 
-export const Container = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    variant="container"
-    {...props}
-    __themeKey="layout"
-    __css={{
-      width: '100%',
-      maxWidth: 'container',
-      mx: 'auto',
-    }}
-  />
-))
+export const Container = React.forwardRef(function Container(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      variant="container"
+      {...props}
+      __themeKey="layout"
+      __css={{
+        width: '100%',
+        maxWidth: 'container',
+        mx: 'auto',
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Divider.js b/packages/components/src/Divider.js
index da52c442c..0c710c7f8 100644
--- a/packages/components/src/Divider.js
+++ b/packages/components/src/Divider.js
@@ -1,18 +1,20 @@
 import React from 'react'
 import Box from './Box'
 
-export const Divider = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="hr"
-    variant="styles.hr"
-    {...props}
-    __css={{
-      color: 'gray',
-      m: 0,
-      my: 2,
-      border: 0,
-      borderBottom: '1px solid',
-    }}
-  />
-))
+export const Divider = React.forwardRef(function Divider(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="hr"
+      variant="styles.hr"
+      {...props}
+      __css={{
+        color: 'gray',
+        m: 0,
+        my: 2,
+        border: 0,
+        borderBottom: '1px solid',
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Donut.js b/packages/components/src/Donut.js
index 9f0e0e305..7d76d1ca8 100644
--- a/packages/components/src/Donut.js
+++ b/packages/components/src/Donut.js
@@ -1,52 +1,42 @@
 import React from 'react'
 import Box from './Box'
 
-export const Donut = React.forwardRef(
-  (
-    {
-      size = 128,
-      strokeWidth = 2,
-      value = 0,
-      min = 0,
-      max = 1,
-      title,
-      ...props
-    },
-    ref
-  ) => {
-    const r = 16 - strokeWidth
-    const C = 2 * r * Math.PI
-    const offset = C - ((value - min) / (max - min)) * C
+export const Donut = React.forwardRef(function Donut(
+  { size = 128, strokeWidth = 2, value = 0, min = 0, max = 1, title, ...props },
+  ref
+) {
+  const r = 16 - strokeWidth
+  const C = 2 * r * Math.PI
+  const offset = C - ((value - min) / (max - min)) * C
 
-    return (
-      <Box
-        ref={ref}
-        as="svg"
-        viewBox="0 0 32 32"
-        width={size}
-        height={size}
-        strokeWidth={strokeWidth}
-        fill="none"
-        stroke="currentcolor"
-        role="img"
-        aria-valuenow={value}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        {...props}
-        __css={{
-          color: 'primary',
-        }}>
-        {title && <title>{title}</title>}
-        <circle cx={16} cy={16} r={r} opacity={1 / 8} />
-        <circle
-          cx={16}
-          cy={16}
-          r={r}
-          strokeDasharray={C}
-          strokeDashoffset={offset}
-          transform="rotate(-90 16 16)"
-        />
-      </Box>
-    )
-  }
-)
+  return (
+    <Box
+      ref={ref}
+      as="svg"
+      viewBox="0 0 32 32"
+      width={size}
+      height={size}
+      strokeWidth={strokeWidth}
+      fill="none"
+      stroke="currentcolor"
+      role="img"
+      aria-valuenow={value}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      {...props}
+      __css={{
+        color: 'primary',
+      }}>
+      {title && <title>{title}</title>}
+      <circle cx={16} cy={16} r={r} opacity={1 / 8} />
+      <circle
+        cx={16}
+        cy={16}
+        r={r}
+        strokeDasharray={C}
+        strokeDashoffset={offset}
+        transform="rotate(-90 16 16)"
+      />
+    </Box>
+  )
+})
diff --git a/packages/components/src/Embed.js b/packages/components/src/Embed.js
index 3f9ede93f..12013e2e2 100644
--- a/packages/components/src/Embed.js
+++ b/packages/components/src/Embed.js
@@ -9,55 +9,53 @@ const getIframeProps = getProps((str) => !__isBoxStyledSystemProp(str))
 
 /** @typedef {import("../index").EmbedProps} EmbedProps */
 /** @type {React.ForwardRefExoticComponent<EmbedProps>} */
-export const Embed = React.forwardRef(
-  (
-    {
-      variant,
-      sx,
-      ratio = 16 / 9,
-      src,
-      frameBorder = 0,
-      allowFullScreen = true,
-      width = 560,
-      height = 315,
-      allow,
-      ...rest
-    },
-    ref
-  ) => {
-    return (
+export const Embed = React.forwardRef(function Embed(
+  {
+    variant,
+    sx,
+    ratio = 16 / 9,
+    src,
+    frameBorder = 0,
+    allowFullScreen = true,
+    width = 560,
+    height = 315,
+    allow,
+    ...rest
+  },
+  ref
+) {
+  return (
+    <Box
+      variant={variant}
+      sx={sx}
+      __css={{
+        width: '100%',
+        height: 0,
+        paddingBottom: 100 / ratio + '%',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+      {...getContainerProps(rest)}>
       <Box
-        variant={variant}
-        sx={sx}
+        ref={ref}
+        as="iframe"
+        src={src}
+        width={width}
+        height={height}
+        frameBorder={frameBorder}
+        allowFullScreen={allowFullScreen}
+        allow={allow}
+        {...getIframeProps(rest)}
         __css={{
+          position: 'absolute',
           width: '100%',
-          height: 0,
-          paddingBottom: 100 / ratio + '%',
-          position: 'relative',
-          overflow: 'hidden',
+          height: '100%',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          border: 0,
         }}
-        {...getContainerProps(rest)}>
-        <Box
-          ref={ref}
-          as="iframe"
-          src={src}
-          width={width}
-          height={height}
-          frameBorder={frameBorder}
-          allowFullScreen={allowFullScreen}
-          allow={allow}
-          {...getIframeProps(rest)}
-          __css={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            border: 0,
-          }}
-        />
-      </Box>
-    )
-  }
-)
+      />
+    </Box>
+  )
+})
diff --git a/packages/components/src/Field.js b/packages/components/src/Field.js
index 773d52156..7ff0777e6 100644
--- a/packages/components/src/Field.js
+++ b/packages/components/src/Field.js
@@ -4,20 +4,21 @@ import { Label } from './Label'
 import { Input } from './Input'
 import { getMargin, omitMargin } from './util'
 
-export const Field = React.forwardRef(
-  ({ as: Control = Input, label, id, name, ...props }, ref) => {
-    const fieldIdentifier = id || name
+export const Field = React.forwardRef(function Field(
+  { as: Control = Input, label, id, name, ...props },
+  ref
+) {
+  const fieldIdentifier = id || name
 
-    return (
-      <Box {...getMargin(props)}>
-        <Label htmlFor={fieldIdentifier}>{label}</Label>
-        <Control
-          ref={ref}
-          id={fieldIdentifier}
-          name={name}
-          {...omitMargin(props)}
-        />
-      </Box>
-    )
-  }
-)
+  return (
+    <Box {...getMargin(props)}>
+      <Label htmlFor={fieldIdentifier}>{label}</Label>
+      <Control
+        ref={ref}
+        id={fieldIdentifier}
+        name={name}
+        {...omitMargin(props)}
+      />
+    </Box>
+  )
+})
diff --git a/packages/components/src/Flex.js b/packages/components/src/Flex.js
index 881f18c9f..8eb72e12e 100644
--- a/packages/components/src/Flex.js
+++ b/packages/components/src/Flex.js
@@ -4,3 +4,5 @@ import Box from './Box'
 export const Flex = styled(Box)({
   display: 'flex',
 })
+
+Flex.displayName = 'Flex'
diff --git a/packages/components/src/Grid.js b/packages/components/src/Grid.js
index 3b2b485eb..541200fee 100644
--- a/packages/components/src/Grid.js
+++ b/packages/components/src/Grid.js
@@ -13,23 +13,24 @@ const countToColumns = (n) =>
     ? n.map(countToColumns)
     : !!n && (typeof n === 'number' ? `repeat(${n}, 1fr)` : n)
 
-export const Grid = React.forwardRef(
-  ({ width, columns, gap = 3, repeat = 'fit', ...props }, ref) => {
-    const gridTemplateColumns = !!width
-      ? widthToColumns(width, repeat)
-      : countToColumns(columns)
+export const Grid = React.forwardRef(function Grid(
+  { width, columns, gap = 3, repeat = 'fit', ...props },
+  ref
+) {
+  const gridTemplateColumns = !!width
+    ? widthToColumns(width, repeat)
+    : countToColumns(columns)
 
-    return (
-      <Box
-        ref={ref}
-        {...props}
-        __themeKey="grids"
-        __css={{
-          display: 'grid',
-          gridGap: gap,
-          gridTemplateColumns,
-        }}
-      />
-    )
-  }
-)
+  return (
+    <Box
+      ref={ref}
+      {...props}
+      __themeKey="grids"
+      __css={{
+        display: 'grid',
+        gridGap: gap,
+        gridTemplateColumns,
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Heading.js b/packages/components/src/Heading.js
index 67764fc59..061f42929 100644
--- a/packages/components/src/Heading.js
+++ b/packages/components/src/Heading.js
@@ -1,17 +1,19 @@
 import React from 'react'
 import Box from './Box'
 
-export const Heading = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="h2"
-    variant="heading"
-    {...props}
-    __themeKey="text"
-    __css={{
-      fontFamily: 'heading',
-      fontWeight: 'heading',
-      lineHeight: 'heading',
-    }}
-  />
-))
+export const Heading = React.forwardRef(function Heading(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="h2"
+      variant="heading"
+      {...props}
+      __themeKey="text"
+      __css={{
+        fontFamily: 'heading',
+        fontWeight: 'heading',
+        lineHeight: 'heading',
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/IconButton.js b/packages/components/src/IconButton.js
index f776cdd4b..a15b738e3 100644
--- a/packages/components/src/IconButton.js
+++ b/packages/components/src/IconButton.js
@@ -1,25 +1,31 @@
 import React from 'react'
 import Box from './Box'
 
-export const IconButton = React.forwardRef(({ size = 32, ...props }, ref) => (
-  <Box
-    ref={ref}
-    as="button"
-    variant="icon"
-    {...props}
-    __themeKey="buttons"
-    __css={{
-      appearance: 'none',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 1,
-      width: size,
-      height: size,
-      color: 'inherit',
-      bg: 'transparent',
-      border: 'none',
-      borderRadius: 4,
-    }}
-  />
-))
+export const IconButton = React.forwardRef(function IconButton(
+  { size = 32, ...props },
+  ref
+) {
+  return (
+    <Box
+      ref={ref}
+      as="button"
+      variant="icon"
+      {...props}
+      __themeKey="buttons"
+      __css={{
+        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,
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Image.js b/packages/components/src/Image.js
index 915eeb271..a201f8e89 100644
--- a/packages/components/src/Image.js
+++ b/packages/components/src/Image.js
@@ -1,16 +1,18 @@
 import React from 'react'
 import Box from './Box'
 
-export const Image = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="img"
-    {...props}
-    __themeKey="images"
-    __css={{
-      maxWidth: '100%',
-      height: 'auto',
-      ...props.__css,
-    }}
-  />
-))
+export const Image = React.forwardRef(function Image(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="img"
+      {...props}
+      __themeKey="images"
+      __css={{
+        maxWidth: '100%',
+        height: 'auto',
+        ...props.__css,
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Input.js b/packages/components/src/Input.js
index 313a83d99..3f17a0553 100644
--- a/packages/components/src/Input.js
+++ b/packages/components/src/Input.js
@@ -1,24 +1,26 @@
 import React from 'react'
 import Box from './Box'
 
-export const Input = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="input"
-    variant="input"
-    {...props}
-    __themeKey="forms"
-    __css={{
-      display: 'block',
-      width: '100%',
-      p: 2,
-      appearance: 'none',
-      fontSize: 'inherit',
-      lineHeight: 'inherit',
-      border: '1px solid',
-      borderRadius: 4,
-      color: 'inherit',
-      bg: 'transparent',
-    }}
-  />
-))
+export const Input = React.forwardRef(function Input(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="input"
+      variant="input"
+      {...props}
+      __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/Label.js b/packages/components/src/Label.js
index 0f6070e3f..3e39c024e 100644
--- a/packages/components/src/Label.js
+++ b/packages/components/src/Label.js
@@ -1,16 +1,18 @@
 import React from 'react'
 import Box from './Box'
 
-export const Label = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="label"
-    variant="label"
-    {...props}
-    __themeKey="forms"
-    __css={{
-      width: '100%',
-      display: 'flex',
-    }}
-  />
-))
+export const Label = React.forwardRef(function Label(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="label"
+      variant="label"
+      {...props}
+      __themeKey="forms"
+      __css={{
+        width: '100%',
+        display: 'flex',
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Link.js b/packages/components/src/Link.js
index 2bbe19b0b..d32051afe 100644
--- a/packages/components/src/Link.js
+++ b/packages/components/src/Link.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import Box from './Box'
 
-export const Link = React.forwardRef((props, ref) => (
-  <Box ref={ref} as="a" variant="styles.a" {...props} __themeKey="links" />
-))
+export const Link = React.forwardRef(function Link(props, ref) {
+  return (
+    <Box ref={ref} as="a" variant="styles.a" {...props} __themeKey="links" />
+  )
+})
diff --git a/packages/components/src/MenuButton.js b/packages/components/src/MenuButton.js
index fd7b92709..a90422010 100644
--- a/packages/components/src/MenuButton.js
+++ b/packages/components/src/MenuButton.js
@@ -18,13 +18,15 @@ export const MenuIcon = ({ size = 24 }) => (
   </Box>
 )
 
-export const MenuButton = React.forwardRef((props, ref) => (
-  <IconButton
-    ref={ref}
-    title="Menu"
-    aria-label="Toggle Menu"
-    variant="menu"
-    {...props}>
-    <MenuIcon />
-  </IconButton>
-))
+export const MenuButton = React.forwardRef(function MenuButton(props, ref) {
+  return (
+    <IconButton
+      ref={ref}
+      title="Menu"
+      aria-label="Toggle Menu"
+      variant="menu"
+      {...props}>
+      <MenuIcon />
+    </IconButton>
+  )
+})
diff --git a/packages/components/src/Message.js b/packages/components/src/Message.js
index d321f270e..02be9bc11 100644
--- a/packages/components/src/Message.js
+++ b/packages/components/src/Message.js
@@ -1,19 +1,21 @@
 import React from 'react'
 import Box from './Box'
 
-export const Message = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    {...props}
-    __themeKey="messages"
-    __css={{
-      padding: 3,
-      paddingLeft: (t) => t.space[3] - t.space[1],
-      borderLeftWidth: (t) => t.space[1],
-      borderLeftStyle: 'solid',
-      borderLeftColor: 'primary',
-      borderRadius: 4,
-      bg: 'highlight',
-    }}
-  />
-))
+export const Message = React.forwardRef(function Message(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      {...props}
+      __themeKey="messages"
+      __css={{
+        padding: 3,
+        paddingLeft: (t) => t.space[3] - t.space[1],
+        borderLeftWidth: (t) => t.space[1],
+        borderLeftStyle: 'solid',
+        borderLeftColor: 'primary',
+        borderRadius: 4,
+        bg: 'highlight',
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/NavLink.js b/packages/components/src/NavLink.js
index 8b6dbcd01..d2b386aef 100644
--- a/packages/components/src/NavLink.js
+++ b/packages/components/src/NavLink.js
@@ -1,19 +1,21 @@
 import React from 'react'
 import { Link } from './Link'
 
-export const NavLink = React.forwardRef((props, ref) => (
-  <Link
-    ref={ref}
-    variant="nav"
-    {...props}
-    __css={{
-      color: 'inherit',
-      textDecoration: 'none',
-      fontWeight: 'bold',
-      display: 'inline-block',
-      '&:hover, &:focus, &.active': {
-        color: 'primary',
-      },
-    }}
-  />
-))
+export const NavLink = React.forwardRef(function NavLink(props, ref) {
+  return (
+    <Link
+      ref={ref}
+      variant="nav"
+      {...props}
+      __css={{
+        color: 'inherit',
+        textDecoration: 'none',
+        fontWeight: 'bold',
+        display: 'inline-block',
+        '&:hover, &:focus, &.active': {
+          color: 'primary',
+        },
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Paragraph.js b/packages/components/src/Paragraph.js
index e34fb7d90..0f95573df 100644
--- a/packages/components/src/Paragraph.js
+++ b/packages/components/src/Paragraph.js
@@ -1,26 +1,31 @@
 import React from 'react'
 import Box from './Box'
 
-export const Paragraph = React.forwardRef(({ sx, ...props }, ref) => (
-  <Box
-    ref={ref}
-    as="p"
-    variant="paragraph"
-    {...props}
-    sx={{
-      // reset margin by default: avoid relying on user-agent margins (not aware of theme-ui space scale)
-      margin: 0,
-      // set a max-width: avoid full-page paragraphs
-      '@media screen and (min-width: 36em)': {
-        maxWidth: '48rem',
-      },
-      ...sx,
-    }}
-    __themeKey="text"
-    __css={{
-      fontFamily: 'body',
-      fontWeight: 'body',
-      lineHeight: 'body',
-    }}
-  />
-))
+export const Paragraph = React.forwardRef(function Paragraph(
+  { sx, ...props },
+  ref
+) {
+  return (
+    <Box
+      ref={ref}
+      as="p"
+      variant="paragraph"
+      {...props}
+      sx={{
+        // reset margin by default: avoid relying on user-agent margins (not aware of theme-ui space scale)
+        margin: 0,
+        // set a max-width: avoid full-page paragraphs
+        '@media screen and (min-width: 36em)': {
+          maxWidth: '48rem',
+        },
+        ...sx,
+      }}
+      __themeKey="text"
+      __css={{
+        fontFamily: 'body',
+        fontWeight: 'body',
+        lineHeight: 'body',
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Progress.js b/packages/components/src/Progress.js
index cd651be99..11974dbd0 100644
--- a/packages/components/src/Progress.js
+++ b/packages/components/src/Progress.js
@@ -1,33 +1,35 @@
 import React from 'react'
 import Box from './Box'
 
-export const Progress = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="progress"
-    variant="styles.progress"
-    {...props}
-    __css={{
-      display: 'block',
-      width: '100%',
-      height: '4px',
-      margin: 0,
-      padding: 0,
-      overflow: 'hidden',
-      appearance: 'none',
-      color: 'primary',
-      bg: 'gray',
-      borderRadius: 9999,
-      border: 'none',
-      '&::-webkit-progress-bar': {
-        bg: 'transparent',
-      },
-      '&::-webkit-progress-value': {
-        bg: 'currentcolor',
-      },
-      '&::-moz-progress-bar': {
-        bg: 'currentcolor',
-      },
-    }}
-  />
-))
+export const Progress = React.forwardRef(function Progress(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="progress"
+      variant="styles.progress"
+      {...props}
+      __css={{
+        display: 'block',
+        width: '100%',
+        height: '4px',
+        margin: 0,
+        padding: 0,
+        overflow: 'hidden',
+        appearance: 'none',
+        color: 'primary',
+        bg: 'gray',
+        borderRadius: 9999,
+        border: 'none',
+        '&::-webkit-progress-bar': {
+          bg: 'transparent',
+        },
+        '&::-webkit-progress-value': {
+          bg: 'currentcolor',
+        },
+        '&::-moz-progress-bar': {
+          bg: 'currentcolor',
+        },
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Radio.js b/packages/components/src/Radio.js
index a2a53d162..0d9493fa7 100644
--- a/packages/components/src/Radio.js
+++ b/packages/components/src/Radio.js
@@ -37,8 +37,11 @@ const RadioIcon = (props) => (
   </React.Fragment>
 )
 
-export const Radio = React.forwardRef(
-  ({ className, sx, variant = 'radio', ...props }, ref) => (
+export const Radio = React.forwardRef(function Radio(
+  { className, sx, variant = 'radio', ...props },
+  ref
+) {
+  return (
     <Box sx={{ minWidth: 'min-content' }}>
       <Box
         ref={ref}
@@ -77,4 +80,4 @@ export const Radio = React.forwardRef(
       />
     </Box>
   )
-)
+})
diff --git a/packages/components/src/SVG.js b/packages/components/src/SVG.js
index a3f28e1d3..eb383ff09 100644
--- a/packages/components/src/SVG.js
+++ b/packages/components/src/SVG.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Box from './Box'
 
-export default ({ size = 24, ...props }) => (
+const SVG = ({ size = 24, ...props }) => (
   <Box
     as="svg"
     xmlns="http://www.w3.org/2000/svg"
@@ -12,3 +12,7 @@ export default ({ size = 24, ...props }) => (
     {...props}
   />
 )
+
+SVG.displayName = 'SVG'
+
+export default SVG
diff --git a/packages/components/src/Select.js b/packages/components/src/Select.js
index ef36131ca..d3e0eaa85 100644
--- a/packages/components/src/Select.js
+++ b/packages/components/src/Select.js
@@ -9,39 +9,44 @@ const DownArrow = (props) => (
   </SVG>
 )
 
-export const Select = React.forwardRef(({ arrow, ...props }, ref) => (
-  <Box
-    {...getMargin(props)}
-    sx={{
-      display: 'flex',
-    }}>
+export const Select = React.forwardRef(function Select(
+  { arrow, ...props },
+  ref
+) {
+  return (
     <Box
-      ref={ref}
-      as="select"
-      variant="select"
-      {...omitMargin(props)}
-      __themeKey="forms"
-      __css={{
-        display: 'block',
-        width: '100%',
-        p: 2,
-        appearance: 'none',
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        border: '1px solid',
-        borderRadius: 4,
-        color: 'inherit',
-        bg: 'transparent',
-      }}
-    />
-    {arrow || (
-      <DownArrow
-        sx={{
-          ml: -28,
-          alignSelf: 'center',
-          pointerEvents: 'none',
+      {...getMargin(props)}
+      sx={{
+        display: 'flex',
+      }}>
+      <Box
+        ref={ref}
+        as="select"
+        variant="select"
+        {...omitMargin(props)}
+        __themeKey="forms"
+        __css={{
+          display: 'block',
+          width: '100%',
+          p: 2,
+          appearance: 'none',
+          fontSize: 'inherit',
+          lineHeight: 'inherit',
+          border: '1px solid',
+          borderRadius: 4,
+          color: 'inherit',
+          bg: 'transparent',
         }}
       />
-    )}
-  </Box>
-))
+      {arrow || (
+        <DownArrow
+          sx={{
+            ml: -28,
+            alignSelf: 'center',
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+    </Box>
+  )
+})
diff --git a/packages/components/src/Slider.js b/packages/components/src/Slider.js
index 16ba43bda..aac445bff 100644
--- a/packages/components/src/Slider.js
+++ b/packages/components/src/Slider.js
@@ -11,31 +11,33 @@ const thumb = {
   variant: 'forms.slider.thumb',
 }
 
-export const Slider = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="input"
-    type="range"
-    variant="slider"
-    {...props}
-    __themeKey="forms"
-    __css={{
-      display: 'block',
-      width: '100%',
-      height: 4,
-      my: 2,
-      cursor: 'pointer',
-      appearance: 'none',
-      borderRadius: 9999,
-      color: 'inherit',
-      bg: 'gray',
-      ':focus': {
-        outline: 'none',
-        color: 'primary',
-      },
-      '&::-webkit-slider-thumb': thumb,
-      '&::-moz-range-thumb': thumb,
-      '&::-ms-thumb': thumb,
-    }}
-  />
-))
+export const Slider = React.forwardRef(function Slider(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="input"
+      type="range"
+      variant="slider"
+      {...props}
+      __themeKey="forms"
+      __css={{
+        display: 'block',
+        width: '100%',
+        height: 4,
+        my: 2,
+        cursor: 'pointer',
+        appearance: 'none',
+        borderRadius: 9999,
+        color: 'inherit',
+        bg: 'gray',
+        ':focus': {
+          outline: 'none',
+          color: 'primary',
+        },
+        '&::-webkit-slider-thumb': thumb,
+        '&::-moz-range-thumb': thumb,
+        '&::-ms-thumb': thumb,
+      }}
+    />
+  )
+})
diff --git a/packages/components/src/Spinner.js b/packages/components/src/Spinner.js
index 0e74a19fb..57288f4c6 100644
--- a/packages/components/src/Spinner.js
+++ b/packages/components/src/Spinner.js
@@ -11,56 +11,54 @@ const spin = keyframes({
   },
 })
 
-export const Spinner = React.forwardRef(
-  (
-    {
-      size = 48,
-      strokeWidth = 4,
-      max = 1,
-      title = 'Loading...',
-      duration = 500,
-      ...props
-    },
-    ref
-  ) => {
-    const r = 16 - strokeWidth
-    const C = 2 * r * Math.PI
-    const offset = C - (1 / 4) * C
+export const Spinner = React.forwardRef(function Spinner(
+  {
+    size = 48,
+    strokeWidth = 4,
+    max = 1,
+    title = 'Loading...',
+    duration = 500,
+    ...props
+  },
+  ref
+) {
+  const r = 16 - strokeWidth
+  const C = 2 * r * Math.PI
+  const offset = C - (1 / 4) * C
 
-    return (
+  return (
+    <Box
+      ref={ref}
+      as="svg"
+      viewBox="0 0 32 32"
+      width={size}
+      height={size}
+      strokeWidth={strokeWidth}
+      fill="none"
+      stroke="currentcolor"
+      role="img"
+      {...props}
+      __css={{
+        color: 'primary',
+        overflow: 'visible',
+      }}>
+      <title>{title}</title>
+      <circle cx={16} cy={16} r={r} opacity={1 / 8} />
       <Box
-        ref={ref}
-        as="svg"
-        viewBox="0 0 32 32"
-        width={size}
-        height={size}
-        strokeWidth={strokeWidth}
-        fill="none"
-        stroke="currentcolor"
-        role="img"
-        {...props}
+        as="circle"
+        cx={16}
+        cy={16}
+        r={r}
+        strokeDasharray={C}
+        strokeDashoffset={offset}
         __css={{
-          color: 'primary',
-          overflow: 'visible',
-        }}>
-        <title>{title}</title>
-        <circle cx={16} cy={16} r={r} opacity={1 / 8} />
-        <Box
-          as="circle"
-          cx={16}
-          cy={16}
-          r={r}
-          strokeDasharray={C}
-          strokeDashoffset={offset}
-          __css={{
-            transformOrigin: '50% 50%',
-            animationName: spin.toString(),
-            animationTimingFunction: 'linear',
-            animationDuration: duration + 'ms',
-            animationIterationCount: 'infinite',
-          }}
-        />
-      </Box>
-    )
-  }
-)
+          transformOrigin: '50% 50%',
+          animationName: spin.toString(),
+          animationTimingFunction: 'linear',
+          animationDuration: duration + 'ms',
+          animationIterationCount: 'infinite',
+        }}
+      />
+    </Box>
+  )
+})
diff --git a/packages/components/src/Switch.js b/packages/components/src/Switch.js
index 7c55dd516..3c10bde98 100644
--- a/packages/components/src/Switch.js
+++ b/packages/components/src/Switch.js
@@ -5,68 +5,69 @@ import { Label } from './Label'
 const GUTTER = 2
 const SIZE = 18
 
-export const Switch = React.forwardRef(
-  ({ className, label, sx, variant = 'switch', ...props }, ref) => {
-    return (
-      <Label sx={{ cursor: 'pointer' }}>
-        <Box
-          ref={ref}
-          as="input"
-          type="checkbox"
-          __themeKey="forms"
-          aria-label={label}
-          {...props}
-          sx={{
-            position: 'absolute',
-            opacity: 0,
-            zIndex: -1,
-            width: 1,
-            height: 1,
-            overflow: 'hidden',
-          }}
-        />
-        <Box
-          css={{
-            padding: GUTTER,
-          }}
-          __themeKey="forms"
-          variant={variant}
-          className={className}
-          sx={sx}
-          __css={{
+export const Switch = React.forwardRef(function Switch(
+  { className, label, sx, variant = 'switch', ...props },
+  ref
+) {
+  return (
+    <Label sx={{ cursor: 'pointer' }}>
+      <Box
+        ref={ref}
+        as="input"
+        type="checkbox"
+        __themeKey="forms"
+        aria-label={label}
+        {...props}
+        sx={{
+          position: 'absolute',
+          opacity: 0,
+          zIndex: -1,
+          width: 1,
+          height: 1,
+          overflow: 'hidden',
+        }}
+      />
+      <Box
+        css={{
+          padding: GUTTER,
+        }}
+        __themeKey="forms"
+        variant={variant}
+        className={className}
+        sx={sx}
+        __css={{
+          position: 'relative',
+          bg: 'gray',
+          borderRadius: SIZE,
+          height: SIZE + GUTTER * 2,
+          width: SIZE * 2 + GUTTER * 2,
+          mr: 2,
+          'input:disabled ~ &': {
+            opacity: 0.5,
+            cursor: 'not-allowed',
+          },
+          '& > div': {
+            display: 'flex',
+            alignItems: 'center',
+            borderRadius: '50%',
+            height: SIZE,
+            width: SIZE,
+            bg: 'white',
+            boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
             position: 'relative',
-            bg: 'gray',
-            borderRadius: SIZE,
-            height: SIZE + GUTTER * 2,
-            width: SIZE * 2 + GUTTER * 2,
-            mr: 2,
-            'input:disabled ~ &': {
-              opacity: 0.5,
-              cursor: 'not-allowed',
+            transform: 'translateX(0%)',
+            transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)`,
+          },
+          'input:checked ~ &': {
+            bg: 'primary',
+            '> div': {
+              transform: 'translateX(100%)',
             },
-            '& > div': {
-              display: 'flex',
-              alignItems: 'center',
-              borderRadius: '50%',
-              height: SIZE,
-              width: SIZE,
-              bg: 'white',
-              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
-              position: 'relative',
-              transform: 'translateX(0%)',
-              transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)`,
-            },
-            'input:checked ~ &': {
-              bg: 'primary',
-              '> div': {
-                transform: 'translateX(100%)',
-              },
-            },
-          }}>
-          <Box />
-        </Box>
-        <span>{label}</span>
-      </Label>
-    )
-  }
-)
+          },
+        }}>
+        <Box />
+      </Box>
+      <span>{label}</span>
+    </Label>
+  )
+})
diff --git a/packages/components/src/Text.js b/packages/components/src/Text.js
index b1337a788..dd55b17a8 100644
--- a/packages/components/src/Text.js
+++ b/packages/components/src/Text.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import Box from './Box'
 
-export const Text = React.forwardRef((props, ref) => (
-  <Box as="span" ref={ref} variant="default" {...props} __themeKey="text" />
-))
+export const Text = React.forwardRef(function Text(props, ref) {
+  return (
+    <Box as="span" ref={ref} variant="default" {...props} __themeKey="text" />
+  )
+})
diff --git a/packages/components/src/Textarea.js b/packages/components/src/Textarea.js
index 071492a27..3d2dc2507 100644
--- a/packages/components/src/Textarea.js
+++ b/packages/components/src/Textarea.js
@@ -1,24 +1,26 @@
 import React from 'react'
 import Box from './Box'
 
-export const Textarea = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    as="textarea"
-    variant="textarea"
-    {...props}
-    __themeKey="forms"
-    __css={{
-      display: 'block',
-      width: '100%',
-      p: 2,
-      appearance: 'none',
-      fontSize: 'inherit',
-      lineHeight: 'inherit',
-      border: '1px solid',
-      borderRadius: 4,
-      color: 'inherit',
-      bg: 'transparent',
-    }}
-  />
-))
+export const Textarea = React.forwardRef(function Textarea(props, ref) {
+  return (
+    <Box
+      ref={ref}
+      as="textarea"
+      variant="textarea"
+      {...props}
+      __themeKey="forms"
+      __css={{
+        display: 'block',
+        width: '100%',
+        p: 2,
+        appearance: 'none',
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        border: '1px solid',
+        borderRadius: 4,
+        color: 'inherit',
+        bg: 'transparent',
+      }}
+    />
+  )
+})