From 1ae38e16272ad02572d6ce8128b725aefbe03d33 Mon Sep 17 00:00:00 2001
From: David Burles <dburles@gmail.com>
Date: Tue, 31 Mar 2020 12:33:04 +1100
Subject: [PATCH 1/7] add display names to components

React devtools and Emotion will now render the correct component names
---
 packages/components/src/Alert.js       | 36 +++++-----
 packages/components/src/AspectImage.js | 27 ++++---
 packages/components/src/AspectRatio.js |  9 ++-
 packages/components/src/Avatar.js      | 29 ++++----
 packages/components/src/Badge.js       | 38 +++++-----
 packages/components/src/Box.js         |  1 +
 packages/components/src/Button.js      | 48 +++++++------
 packages/components/src/Card.js        |  6 +-
 packages/components/src/Checkbox.js    |  9 ++-
 packages/components/src/Close.js       | 25 ++++---
 packages/components/src/Container.js   | 28 ++++----
 packages/components/src/Divider.js     | 32 +++++----
 packages/components/src/Donut.js       | 86 ++++++++++------------
 packages/components/src/Embed.js       | 30 ++++----
 packages/components/src/Field.js       | 21 +++---
 packages/components/src/Flex.js        |  2 +-
 packages/components/src/Grid.js        | 39 +++++-----
 packages/components/src/Heading.js     | 30 ++++----
 packages/components/src/IconButton.js  | 49 +++++++------
 packages/components/src/Image.js       | 28 ++++----
 packages/components/src/Input.js       | 44 ++++++------
 packages/components/src/Label.js       | 28 ++++----
 packages/components/src/Link.js        |  8 ++-
 packages/components/src/MenuButton.js  | 22 +++---
 packages/components/src/Message.js     | 34 ++++-----
 packages/components/src/NavLink.js     | 34 ++++-----
 packages/components/src/Progress.js    | 62 ++++++++--------
 packages/components/src/Radio.js       |  9 ++-
 packages/components/src/Select.js      | 66 ++++++++---------
 packages/components/src/Slider.js      | 58 +++++++--------
 packages/components/src/Spinner.js     | 98 +++++++++++++-------------
 packages/components/src/Text.js        |  6 +-
 packages/components/src/Textarea.js    | 44 ++++++------
 33 files changed, 570 insertions(+), 516 deletions(-)

diff --git a/packages/components/src/Alert.js b/packages/components/src/Alert.js
index 6a71f6864..6fd2af136 100644
--- a/packages/components/src/Alert.js
+++ b/packages/components/src/Alert.js
@@ -1,20 +1,22 @@
 import React from 'react'
 import Box from './Box'
 
-export const Alert = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    {...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}
+      {...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 912f59ead..ef45c2ba5 100644
--- a/packages/components/src/Badge.js
+++ b/packages/components/src/Badge.js
@@ -1,21 +1,23 @@
 import React from 'react'
 import Box from './Box'
 
-export const Badge = React.forwardRef((props, ref) => (
-  <Box
-    ref={ref}
-    {...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}
+      {...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 c4c0c0bfa..625ab2a88 100644
--- a/packages/components/src/Box.js
+++ b/packages/components/src/Box.js
@@ -15,6 +15,7 @@ const variant = ({ theme, variant, __themeKey = 'variants' }) =>
   css(get(theme, __themeKey + '.' + variant, get(theme, variant)))
 
 export const Box = styled('div', {
+  label: 'Box',
   shouldForwardProp,
 })(
   {
diff --git a/packages/components/src/Button.js b/packages/components/src/Button.js
index 100224899..d80f49027 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: '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: '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 65803c655..9deacee1b 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', ...props }, ref) => (
+export const Checkbox = React.forwardRef(function Checkbox(
+  { className, sx, variant = 'checkbox', ...props },
+  ref
+) {
+  return (
     <Box>
       <Box
         ref={ref}
@@ -76,4 +79,4 @@ export const Checkbox = React.forwardRef(
       />
     </Box>
   )
-)
+})
diff --git a/packages/components/src/Close.js b/packages/components/src/Close.js
index 8eb9b9b38..baa53291c 100644
--- a/packages/components/src/Close.js
+++ b/packages/components/src/Close.js
@@ -12,13 +12,18 @@ const x = (
   </svg>
 )
 
-export const Close = React.forwardRef(({ size = 32, ...props }, ref) => (
-  <IconButton
-    ref={ref}
-    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}
+      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 13d92149f..5eb2a258a 100644
--- a/packages/components/src/Embed.js
+++ b/packages/components/src/Embed.js
@@ -1,20 +1,20 @@
 import React from 'react'
 import Box from './Box'
 
-export const Embed = React.forwardRef(
-  (
-    {
-      ratio = 16 / 9,
-      src,
-      frameBorder = 0,
-      allowFullScreen = true,
-      width = 560,
-      height = 315,
-      allow,
-      ...props
-    },
-    ref
-  ) => (
+export const Embed = React.forwardRef(function Embed(
+  {
+    ratio = 16 / 9,
+    src,
+    frameBorder = 0,
+    allowFullScreen = true,
+    width = 560,
+    height = 315,
+    allow,
+    ...props
+  },
+  ref
+) {
+  return (
     <Box
       {...props}
       __css={{
@@ -45,4 +45,4 @@ export const Embed = React.forwardRef(
       />
     </Box>
   )
-)
+})
diff --git a/packages/components/src/Field.js b/packages/components/src/Field.js
index cd2c0d3bb..f27013e39 100644
--- a/packages/components/src/Field.js
+++ b/packages/components/src/Field.js
@@ -4,13 +4,14 @@ import { Label } from './Label'
 import { Input } from './Input'
 import { getMargin, omitMargin } from './util'
 
-export const Field = React.forwardRef(
-  ({ as: Control = Input, label, name, ...props }, ref) => {
-    return (
-      <Box {...getMargin(props)}>
-        <Label htmlFor={name}>{label}</Label>
-        <Control ref={ref} id={name} name={name} {...omitMargin(props)} />
-      </Box>
-    )
-  }
-)
+export const Field = React.forwardRef(function Field(
+  { as: Control = Input, label, name, ...props },
+  ref
+) {
+  return (
+    <Box {...getMargin(props)}>
+      <Label htmlFor={name}>{label}</Label>
+      <Control ref={ref} id={name} name={name} {...omitMargin(props)} />
+    </Box>
+  )
+})
diff --git a/packages/components/src/Flex.js b/packages/components/src/Flex.js
index 881f18c9f..479b8353c 100644
--- a/packages/components/src/Flex.js
+++ b/packages/components/src/Flex.js
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import Box from './Box'
 
-export const Flex = styled(Box)({
+export const Flex = styled(Box, { label: 'Flex' })({
   display: 'flex',
 })
diff --git a/packages/components/src/Grid.js b/packages/components/src/Grid.js
index e5c3a0416..7f98b41ce 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, ...props }, ref) => {
-    const gridTemplateColumns = !!width
-      ? widthToColumns(width)
-      : countToColumns(columns)
+export const Grid = React.forwardRef(function Grid(
+  { width, columns, gap = 3, ...props },
+  ref
+) {
+  const gridTemplateColumns = !!width
+    ? widthToColumns(width)
+    : 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..5bb00d655 100644
--- a/packages/components/src/IconButton.js
+++ b/packages/components/src/IconButton.js
@@ -1,25 +1,30 @@
 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={{
+        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 93715ef11..8b0cb0833 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/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 a655872c3..d291b2af8 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>
       <Box
         ref={ref}
@@ -76,4 +79,4 @@ export const Radio = React.forwardRef(
       />
     </Box>
   )
-)
+})
diff --git a/packages/components/src/Select.js b/packages/components/src/Select.js
index 8972b733f..5f64e710f 100644
--- a/packages/components/src/Select.js
+++ b/packages/components/src/Select.js
@@ -9,37 +9,39 @@ const DownArrow = props => (
   </SVG>
 )
 
-export const Select = React.forwardRef((props, ref) => (
-  <Box
-    {...getMargin(props)}
-    sx={{
-      display: 'flex',
-    }}>
+export const Select = React.forwardRef(function Select(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',
-      }}
-    />
-    <DownArrow
+      {...getMargin(props)}
       sx={{
-        ml: -28,
-        alignSelf: 'center',
-        pointerEvents: 'none',
-      }}
-    />
-  </Box>
-))
+        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',
+        }}
+      />
+      <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 641979567..3d2b993be 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/Text.js b/packages/components/src/Text.js
index 6f7c09535..b440048a9 100644
--- a/packages/components/src/Text.js
+++ b/packages/components/src/Text.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import Box from './Box'
 
-export const Text = React.forwardRef((props, ref) => (
-  <Box ref={ref} {...props} __themeKey="text" />
-))
+export const Text = React.forwardRef(function Text(props, ref) {
+  return <Box ref={ref} {...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',
+      }}
+    />
+  )
+})

From e2c545402dd0a5cdf411c50ac1ec5609fb209916 Mon Sep 17 00:00:00 2001
From: David Burles <dburles@gmail.com>
Date: Mon, 13 Apr 2020 16:44:27 +1000
Subject: [PATCH 2/7] add emotion label property to components

---
 packages/components/src/Alert.js       |  1 +
 packages/components/src/AspectImage.js |  1 +
 packages/components/src/AspectRatio.js |  1 +
 packages/components/src/Avatar.js      |  1 +
 packages/components/src/Badge.js       |  1 +
 packages/components/src/Box.js         |  3 ++-
 packages/components/src/Button.js      |  1 +
 packages/components/src/Card.js        | 10 +++++++++-
 packages/components/src/Checkbox.js    |  2 +-
 packages/components/src/Close.js       |  1 +
 packages/components/src/Container.js   |  1 +
 packages/components/src/Divider.js     |  1 +
 packages/components/src/Donut.js       |  1 +
 packages/components/src/Embed.js       |  1 +
 packages/components/src/Field.js       |  2 +-
 packages/components/src/Flex.js        |  3 ++-
 packages/components/src/Grid.js        |  1 +
 packages/components/src/Heading.js     |  1 +
 packages/components/src/IconButton.js  |  1 +
 packages/components/src/Image.js       |  1 +
 packages/components/src/Input.js       |  1 +
 packages/components/src/Label.js       |  1 +
 packages/components/src/Link.js        |  9 ++++++++-
 packages/components/src/MenuButton.js  |  3 ++-
 packages/components/src/Message.js     |  1 +
 packages/components/src/NavLink.js     |  1 +
 packages/components/src/Progress.js    |  1 +
 packages/components/src/Radio.js       |  2 +-
 packages/components/src/SVG.js         |  1 +
 packages/components/src/Select.js      |  1 +
 packages/components/src/Slider.js      |  1 +
 packages/components/src/Spinner.js     |  1 +
 packages/components/src/Text.js        |  4 +++-
 packages/components/src/Textarea.js    |  1 +
 34 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/Alert.js b/packages/components/src/Alert.js
index 6fd2af136..801cf7e66 100644
--- a/packages/components/src/Alert.js
+++ b/packages/components/src/Alert.js
@@ -8,6 +8,7 @@ export const Alert = React.forwardRef(function Alert(props, ref) {
       {...props}
       __themeKey="alerts"
       __css={{
+        label: 'Alert',
         display: 'flex',
         alignItems: 'center',
         px: 3,
diff --git a/packages/components/src/AspectImage.js b/packages/components/src/AspectImage.js
index ec4df0723..0a6b20182 100644
--- a/packages/components/src/AspectImage.js
+++ b/packages/components/src/AspectImage.js
@@ -12,6 +12,7 @@ export const AspectImage = React.forwardRef(function AspectImage(
         ref={ref}
         {...props}
         __css={{
+          label: 'AspectImage',
           objectFit: 'cover',
         }}
       />
diff --git a/packages/components/src/AspectRatio.js b/packages/components/src/AspectRatio.js
index 6b29f22cb..70e544300 100644
--- a/packages/components/src/AspectRatio.js
+++ b/packages/components/src/AspectRatio.js
@@ -9,6 +9,7 @@ export const AspectRatio = React.forwardRef(function AspectRatio(
     <Box
       ref={ref}
       sx={{
+        label: 'AspectRatio',
         position: 'relative',
         overflow: 'hidden',
       }}>
diff --git a/packages/components/src/Avatar.js b/packages/components/src/Avatar.js
index bda6614eb..be4897e5b 100644
--- a/packages/components/src/Avatar.js
+++ b/packages/components/src/Avatar.js
@@ -13,6 +13,7 @@ export const Avatar = React.forwardRef(function Avatar(
       variant="avatar"
       {...props}
       __css={{
+        label: 'Avatar',
         borderRadius: 9999,
       }}
     />
diff --git a/packages/components/src/Badge.js b/packages/components/src/Badge.js
index ef45c2ba5..342af8a1a 100644
--- a/packages/components/src/Badge.js
+++ b/packages/components/src/Badge.js
@@ -8,6 +8,7 @@ export const Badge = React.forwardRef(function Badge(props, ref) {
       {...props}
       __themeKey="badges"
       __css={{
+        label: 'Badge',
         display: 'inline-block',
         verticalAlign: 'baseline',
         fontSize: 0,
diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js
index 625ab2a88..3ab610a49 100644
--- a/packages/components/src/Box.js
+++ b/packages/components/src/Box.js
@@ -15,10 +15,11 @@ const variant = ({ theme, variant, __themeKey = 'variants' }) =>
   css(get(theme, __themeKey + '.' + variant, get(theme, variant)))
 
 export const Box = styled('div', {
-  label: 'Box',
   shouldForwardProp,
 })(
   {
+    // Avoids e.g. 'css-191ogd4-Box-Text' in favor of 'css-191ogd4-Text' class names.
+    label: props => (props.__css && props.__css.label) || 'Box',
     boxSizing: 'border-box',
     margin: 0,
     minWidth: 0,
diff --git a/packages/components/src/Button.js b/packages/components/src/Button.js
index d80f49027..97f6b66d1 100644
--- a/packages/components/src/Button.js
+++ b/packages/components/src/Button.js
@@ -10,6 +10,7 @@ export const Button = React.forwardRef(function Button(props, ref) {
       {...props}
       __themeKey="buttons"
       __css={{
+        label: 'Button',
         appearance: 'none',
         display: 'inline-block',
         textAlign: 'center',
diff --git a/packages/components/src/Card.js b/packages/components/src/Card.js
index f3f0b0e87..7b5deb1de 100644
--- a/packages/components/src/Card.js
+++ b/packages/components/src/Card.js
@@ -2,5 +2,13 @@ import React from 'react'
 import Box from './Box'
 
 export const Card = React.forwardRef(function Card(props, ref) {
-  return <Box ref={ref} variant="primary" {...props} __themeKey="cards" />
+  return (
+    <Box
+      ref={ref}
+      variant="primary"
+      {...props}
+      __themeKey="cards"
+      __css={{ label: 'Card' }}
+    />
+  )
 })
diff --git a/packages/components/src/Checkbox.js b/packages/components/src/Checkbox.js
index 9deacee1b..64f49844b 100644
--- a/packages/components/src/Checkbox.js
+++ b/packages/components/src/Checkbox.js
@@ -42,7 +42,7 @@ export const Checkbox = React.forwardRef(function Checkbox(
   ref
 ) {
   return (
-    <Box>
+    <Box __css={{ label: 'Checkbox' }}>
       <Box
         ref={ref}
         as="input"
diff --git a/packages/components/src/Close.js b/packages/components/src/Close.js
index baa53291c..2a6015d78 100644
--- a/packages/components/src/Close.js
+++ b/packages/components/src/Close.js
@@ -24,6 +24,7 @@ export const Close = React.forwardRef(function Close(
       variant="close"
       {...props}
       children={x}
+      __css={{ label: 'Close' }}
     />
   )
 })
diff --git a/packages/components/src/Container.js b/packages/components/src/Container.js
index c215dd731..1395c985d 100644
--- a/packages/components/src/Container.js
+++ b/packages/components/src/Container.js
@@ -9,6 +9,7 @@ export const Container = React.forwardRef(function Container(props, ref) {
       {...props}
       __themeKey="layout"
       __css={{
+        label: 'Container',
         width: '100%',
         maxWidth: 'container',
         mx: 'auto',
diff --git a/packages/components/src/Divider.js b/packages/components/src/Divider.js
index 0c710c7f8..d6cf26d03 100644
--- a/packages/components/src/Divider.js
+++ b/packages/components/src/Divider.js
@@ -9,6 +9,7 @@ export const Divider = React.forwardRef(function Divider(props, ref) {
       variant="styles.hr"
       {...props}
       __css={{
+        label: 'Divider',
         color: 'gray',
         m: 0,
         my: 2,
diff --git a/packages/components/src/Donut.js b/packages/components/src/Donut.js
index 7d76d1ca8..aebee326d 100644
--- a/packages/components/src/Donut.js
+++ b/packages/components/src/Donut.js
@@ -25,6 +25,7 @@ export const Donut = React.forwardRef(function Donut(
       aria-valuemax={max}
       {...props}
       __css={{
+        label: 'Donut',
         color: 'primary',
       }}>
       {title && <title>{title}</title>}
diff --git a/packages/components/src/Embed.js b/packages/components/src/Embed.js
index 5eb2a258a..e83ebb689 100644
--- a/packages/components/src/Embed.js
+++ b/packages/components/src/Embed.js
@@ -18,6 +18,7 @@ export const Embed = React.forwardRef(function Embed(
     <Box
       {...props}
       __css={{
+        label: 'Embed',
         width: '100%',
         height: 0,
         paddingBottom: 100 / ratio + '%',
diff --git a/packages/components/src/Field.js b/packages/components/src/Field.js
index f27013e39..62038b0cf 100644
--- a/packages/components/src/Field.js
+++ b/packages/components/src/Field.js
@@ -9,7 +9,7 @@ export const Field = React.forwardRef(function Field(
   ref
 ) {
   return (
-    <Box {...getMargin(props)}>
+    <Box {...getMargin(props)} __css={{ label: 'Field' }}>
       <Label htmlFor={name}>{label}</Label>
       <Control ref={ref} id={name} name={name} {...omitMargin(props)} />
     </Box>
diff --git a/packages/components/src/Flex.js b/packages/components/src/Flex.js
index 479b8353c..5c2eddc8e 100644
--- a/packages/components/src/Flex.js
+++ b/packages/components/src/Flex.js
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import Box from './Box'
 
-export const Flex = styled(Box, { label: 'Flex' })({
+export const Flex = styled(Box)({
+  label: 'Flex',
   display: 'flex',
 })
diff --git a/packages/components/src/Grid.js b/packages/components/src/Grid.js
index 7f98b41ce..764e93dfa 100644
--- a/packages/components/src/Grid.js
+++ b/packages/components/src/Grid.js
@@ -27,6 +27,7 @@ export const Grid = React.forwardRef(function Grid(
       {...props}
       __themeKey="grids"
       __css={{
+        label: 'Grid',
         display: 'grid',
         gridGap: gap,
         gridTemplateColumns,
diff --git a/packages/components/src/Heading.js b/packages/components/src/Heading.js
index 061f42929..6e1a99889 100644
--- a/packages/components/src/Heading.js
+++ b/packages/components/src/Heading.js
@@ -10,6 +10,7 @@ export const Heading = React.forwardRef(function Heading(props, ref) {
       {...props}
       __themeKey="text"
       __css={{
+        label: 'Heading',
         fontFamily: 'heading',
         fontWeight: 'heading',
         lineHeight: 'heading',
diff --git a/packages/components/src/IconButton.js b/packages/components/src/IconButton.js
index 5bb00d655..eb9f08b55 100644
--- a/packages/components/src/IconButton.js
+++ b/packages/components/src/IconButton.js
@@ -13,6 +13,7 @@ export const IconButton = React.forwardRef(function IconButton(
       {...props}
       __themeKey="buttons"
       __css={{
+        label: props.__css.label || 'IconButton',
         appearance: 'none',
         display: 'inline-flex',
         alignItems: 'center',
diff --git a/packages/components/src/Image.js b/packages/components/src/Image.js
index a201f8e89..083114345 100644
--- a/packages/components/src/Image.js
+++ b/packages/components/src/Image.js
@@ -9,6 +9,7 @@ export const Image = React.forwardRef(function Image(props, ref) {
       {...props}
       __themeKey="images"
       __css={{
+        label: 'Image',
         maxWidth: '100%',
         height: 'auto',
         ...props.__css,
diff --git a/packages/components/src/Input.js b/packages/components/src/Input.js
index 3f17a0553..59e0fb582 100644
--- a/packages/components/src/Input.js
+++ b/packages/components/src/Input.js
@@ -10,6 +10,7 @@ export const Input = React.forwardRef(function Input(props, ref) {
       {...props}
       __themeKey="forms"
       __css={{
+        label: 'Input',
         display: 'block',
         width: '100%',
         p: 2,
diff --git a/packages/components/src/Label.js b/packages/components/src/Label.js
index 3e39c024e..2f3d30515 100644
--- a/packages/components/src/Label.js
+++ b/packages/components/src/Label.js
@@ -10,6 +10,7 @@ export const Label = React.forwardRef(function Label(props, ref) {
       {...props}
       __themeKey="forms"
       __css={{
+        label: 'Label',
         width: '100%',
         display: 'flex',
       }}
diff --git a/packages/components/src/Link.js b/packages/components/src/Link.js
index d32051afe..be93b0cfc 100644
--- a/packages/components/src/Link.js
+++ b/packages/components/src/Link.js
@@ -3,6 +3,13 @@ import Box from './Box'
 
 export const Link = React.forwardRef(function Link(props, ref) {
   return (
-    <Box ref={ref} as="a" variant="styles.a" {...props} __themeKey="links" />
+    <Box
+      ref={ref}
+      as="a"
+      variant="styles.a"
+      {...props}
+      __themeKey="links"
+      __css={{ label: 'Link' }}
+    />
   )
 })
diff --git a/packages/components/src/MenuButton.js b/packages/components/src/MenuButton.js
index a90422010..122e7ee75 100644
--- a/packages/components/src/MenuButton.js
+++ b/packages/components/src/MenuButton.js
@@ -25,7 +25,8 @@ export const MenuButton = React.forwardRef(function MenuButton(props, ref) {
       title="Menu"
       aria-label="Toggle Menu"
       variant="menu"
-      {...props}>
+      {...props}
+      __css={{ label: 'MenuButton' }}>
       <MenuIcon />
     </IconButton>
   )
diff --git a/packages/components/src/Message.js b/packages/components/src/Message.js
index 8b0cb0833..1a7855e1b 100644
--- a/packages/components/src/Message.js
+++ b/packages/components/src/Message.js
@@ -8,6 +8,7 @@ export const Message = React.forwardRef(function Message(props, ref) {
       {...props}
       __themeKey="messages"
       __css={{
+        label: 'Message',
         padding: 3,
         paddingLeft: t => t.space[3] - t.space[1],
         borderLeftWidth: t => t.space[1],
diff --git a/packages/components/src/NavLink.js b/packages/components/src/NavLink.js
index d2b386aef..e6633881c 100644
--- a/packages/components/src/NavLink.js
+++ b/packages/components/src/NavLink.js
@@ -8,6 +8,7 @@ export const NavLink = React.forwardRef(function NavLink(props, ref) {
       variant="nav"
       {...props}
       __css={{
+        label: 'NavLink',
         color: 'inherit',
         textDecoration: 'none',
         fontWeight: 'bold',
diff --git a/packages/components/src/Progress.js b/packages/components/src/Progress.js
index 11974dbd0..f94cab301 100644
--- a/packages/components/src/Progress.js
+++ b/packages/components/src/Progress.js
@@ -9,6 +9,7 @@ export const Progress = React.forwardRef(function Progress(props, ref) {
       variant="styles.progress"
       {...props}
       __css={{
+        label: 'Progress',
         display: 'block',
         width: '100%',
         height: '4px',
diff --git a/packages/components/src/Radio.js b/packages/components/src/Radio.js
index d291b2af8..83a527cf6 100644
--- a/packages/components/src/Radio.js
+++ b/packages/components/src/Radio.js
@@ -42,7 +42,7 @@ export const Radio = React.forwardRef(function Radio(
   ref
 ) {
   return (
-    <Box>
+    <Box __css={{ label: 'Radio' }}>
       <Box
         ref={ref}
         as="input"
diff --git a/packages/components/src/SVG.js b/packages/components/src/SVG.js
index a3f28e1d3..81f57028a 100644
--- a/packages/components/src/SVG.js
+++ b/packages/components/src/SVG.js
@@ -10,5 +10,6 @@ export default ({ size = 24, ...props }) => (
     viewBox="0 0 24 24"
     fill="currentcolor"
     {...props}
+    __css={{ label: 'SVG' }}
   />
 )
diff --git a/packages/components/src/Select.js b/packages/components/src/Select.js
index 5f64e710f..511c66995 100644
--- a/packages/components/src/Select.js
+++ b/packages/components/src/Select.js
@@ -14,6 +14,7 @@ export const Select = React.forwardRef(function Select(props, ref) {
     <Box
       {...getMargin(props)}
       sx={{
+        label: 'Select',
         display: 'flex',
       }}>
       <Box
diff --git a/packages/components/src/Slider.js b/packages/components/src/Slider.js
index aac445bff..6dddfca69 100644
--- a/packages/components/src/Slider.js
+++ b/packages/components/src/Slider.js
@@ -21,6 +21,7 @@ export const Slider = React.forwardRef(function Slider(props, ref) {
       {...props}
       __themeKey="forms"
       __css={{
+        label: 'Slider',
         display: 'block',
         width: '100%',
         height: 4,
diff --git a/packages/components/src/Spinner.js b/packages/components/src/Spinner.js
index 3d2b993be..6db77e492 100644
--- a/packages/components/src/Spinner.js
+++ b/packages/components/src/Spinner.js
@@ -39,6 +39,7 @@ export const Spinner = React.forwardRef(function Spinner(
       role="img"
       {...props}
       __css={{
+        label: 'Spinner',
         color: 'primary',
         overflow: 'visible',
       }}>
diff --git a/packages/components/src/Text.js b/packages/components/src/Text.js
index b440048a9..42565e137 100644
--- a/packages/components/src/Text.js
+++ b/packages/components/src/Text.js
@@ -2,5 +2,7 @@ import React from 'react'
 import Box from './Box'
 
 export const Text = React.forwardRef(function Text(props, ref) {
-  return <Box ref={ref} {...props} __themeKey="text" />
+  return (
+    <Box ref={ref} {...props} __themeKey="text" __css={{ label: 'Text' }} />
+  )
 })
diff --git a/packages/components/src/Textarea.js b/packages/components/src/Textarea.js
index 3d2dc2507..97d3fde10 100644
--- a/packages/components/src/Textarea.js
+++ b/packages/components/src/Textarea.js
@@ -10,6 +10,7 @@ export const Textarea = React.forwardRef(function Textarea(props, ref) {
       {...props}
       __themeKey="forms"
       __css={{
+        label: 'Textarea',
         display: 'block',
         width: '100%',
         p: 2,

From ecb9cdf7f9147c6439d015fea054d521d9b9b457 Mon Sep 17 00:00:00 2001
From: David Burles <dburles@gmail.com>
Date: Mon, 13 Apr 2020 16:52:59 +1000
Subject: [PATCH 3/7] appears to be unavoidable

---
 packages/components/src/Box.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js
index 3ab610a49..5359e208c 100644
--- a/packages/components/src/Box.js
+++ b/packages/components/src/Box.js
@@ -16,10 +16,9 @@ const variant = ({ theme, variant, __themeKey = 'variants' }) =>
 
 export const Box = styled('div', {
   shouldForwardProp,
+  label: 'Box',
 })(
   {
-    // Avoids e.g. 'css-191ogd4-Box-Text' in favor of 'css-191ogd4-Text' class names.
-    label: props => (props.__css && props.__css.label) || 'Box',
     boxSizing: 'border-box',
     margin: 0,
     minWidth: 0,

From 422364eeafe0df43c1f28469cc7c6bdf3f7184fe Mon Sep 17 00:00:00 2001
From: David Burles <dburles@gmail.com>
Date: Fri, 11 Dec 2020 18:18:00 +1100
Subject: [PATCH 4/7] optional

---
 packages/components/src/IconButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/IconButton.js b/packages/components/src/IconButton.js
index eb9f08b55..a15b738e3 100644
--- a/packages/components/src/IconButton.js
+++ b/packages/components/src/IconButton.js
@@ -13,7 +13,7 @@ export const IconButton = React.forwardRef(function IconButton(
       {...props}
       __themeKey="buttons"
       __css={{
-        label: props.__css.label || 'IconButton',
+        label: props.__css?.label || 'IconButton',
         appearance: 'none',
         display: 'inline-flex',
         alignItems: 'center',

From 0a7e75eb1add746853f71b7ac009f216cdd031ae Mon Sep 17 00:00:00 2001
From: David Burles <dburles@gmail.com>
Date: Mon, 14 Dec 2020 09:50:30 +1100
Subject: [PATCH 5/7] remove label

---
 packages/components/src/Alert.js       |  1 -
 packages/components/src/AspectImage.js |  1 -
 packages/components/src/AspectRatio.js |  1 -
 packages/components/src/Avatar.js      |  1 -
 packages/components/src/Badge.js       |  1 -
 packages/components/src/Box.js         |  7 +++----
 packages/components/src/Button.js      |  1 -
 packages/components/src/Card.js        | 10 +---------
 packages/components/src/Checkbox.js    |  2 +-
 packages/components/src/Close.js       |  1 -
 packages/components/src/Container.js   |  1 -
 packages/components/src/Divider.js     |  1 -
 packages/components/src/Donut.js       |  1 -
 packages/components/src/Embed.js       |  1 -
 packages/components/src/Field.js       |  2 +-
 packages/components/src/Flex.js        |  1 -
 packages/components/src/Grid.js        |  1 -
 packages/components/src/Heading.js     |  1 -
 packages/components/src/Image.js       |  1 -
 packages/components/src/Input.js       |  1 -
 packages/components/src/Label.js       |  1 -
 packages/components/src/Link.js        |  9 +--------
 packages/components/src/MenuButton.js  |  3 +--
 packages/components/src/Message.js     |  5 ++---
 packages/components/src/NavLink.js     |  1 -
 packages/components/src/Progress.js    |  1 -
 packages/components/src/Radio.js       |  2 +-
 packages/components/src/SVG.js         |  1 -
 packages/components/src/Select.js      |  1 -
 packages/components/src/Slider.js      |  1 -
 packages/components/src/Spinner.js     |  1 -
 packages/components/src/Text.js        |  9 +--------
 packages/components/src/Textarea.js    |  1 -
 33 files changed, 12 insertions(+), 61 deletions(-)

diff --git a/packages/components/src/Alert.js b/packages/components/src/Alert.js
index d6c0df545..c209397ad 100644
--- a/packages/components/src/Alert.js
+++ b/packages/components/src/Alert.js
@@ -9,7 +9,6 @@ export const Alert = React.forwardRef(function Alert(props, ref) {
       {...props}
       __themeKey="alerts"
       __css={{
-        label: 'Alert',
         display: 'flex',
         alignItems: 'center',
         px: 3,
diff --git a/packages/components/src/AspectImage.js b/packages/components/src/AspectImage.js
index 0a6b20182..ec4df0723 100644
--- a/packages/components/src/AspectImage.js
+++ b/packages/components/src/AspectImage.js
@@ -12,7 +12,6 @@ export const AspectImage = React.forwardRef(function AspectImage(
         ref={ref}
         {...props}
         __css={{
-          label: 'AspectImage',
           objectFit: 'cover',
         }}
       />
diff --git a/packages/components/src/AspectRatio.js b/packages/components/src/AspectRatio.js
index 70e544300..6b29f22cb 100644
--- a/packages/components/src/AspectRatio.js
+++ b/packages/components/src/AspectRatio.js
@@ -9,7 +9,6 @@ export const AspectRatio = React.forwardRef(function AspectRatio(
     <Box
       ref={ref}
       sx={{
-        label: 'AspectRatio',
         position: 'relative',
         overflow: 'hidden',
       }}>
diff --git a/packages/components/src/Avatar.js b/packages/components/src/Avatar.js
index be4897e5b..bda6614eb 100644
--- a/packages/components/src/Avatar.js
+++ b/packages/components/src/Avatar.js
@@ -13,7 +13,6 @@ export const Avatar = React.forwardRef(function Avatar(
       variant="avatar"
       {...props}
       __css={{
-        label: 'Avatar',
         borderRadius: 9999,
       }}
     />
diff --git a/packages/components/src/Badge.js b/packages/components/src/Badge.js
index e3ca5da3c..bcf5df885 100644
--- a/packages/components/src/Badge.js
+++ b/packages/components/src/Badge.js
@@ -9,7 +9,6 @@ export const Badge = React.forwardRef(function Badge(props, ref) {
       {...props}
       __themeKey="badges"
       __css={{
-        label: 'Badge',
         display: 'inline-block',
         verticalAlign: 'baseline',
         fontSize: 0,
diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js
index 5359e208c..181d69c6a 100644
--- a/packages/components/src/Box.js
+++ b/packages/components/src/Box.js
@@ -9,14 +9,13 @@ const shouldForwardProp = createShouldForwardProp([
   ...color.propNames,
 ])
 
-const sx = props => css(props.sx)(props.theme)
-const base = props => css(props.__css)(props.theme)
+const sx = (props) => css(props.sx)(props.theme)
+const base = (props) => css(props.__css)(props.theme)
 const variant = ({ theme, variant, __themeKey = 'variants' }) =>
   css(get(theme, __themeKey + '.' + variant, get(theme, variant)))
 
 export const Box = styled('div', {
   shouldForwardProp,
-  label: 'Box',
 })(
   {
     boxSizing: 'border-box',
@@ -28,7 +27,7 @@ export const Box = styled('div', {
   space,
   color,
   sx,
-  props => props.css
+  (props) => props.css
 )
 
 export default Box
diff --git a/packages/components/src/Button.js b/packages/components/src/Button.js
index 8b749d49c..8a49de069 100644
--- a/packages/components/src/Button.js
+++ b/packages/components/src/Button.js
@@ -10,7 +10,6 @@ export const Button = React.forwardRef(function Button(props, ref) {
       {...props}
       __themeKey="buttons"
       __css={{
-        label: 'Button',
         appearance: 'none',
         display: props.hidden ? undefined : 'inline-block',
         textAlign: 'center',
diff --git a/packages/components/src/Card.js b/packages/components/src/Card.js
index 7b5deb1de..f3f0b0e87 100644
--- a/packages/components/src/Card.js
+++ b/packages/components/src/Card.js
@@ -2,13 +2,5 @@ import React from 'react'
 import Box from './Box'
 
 export const Card = React.forwardRef(function Card(props, ref) {
-  return (
-    <Box
-      ref={ref}
-      variant="primary"
-      {...props}
-      __themeKey="cards"
-      __css={{ label: 'Card' }}
-    />
-  )
+  return <Box ref={ref} variant="primary" {...props} __themeKey="cards" />
 })
diff --git a/packages/components/src/Checkbox.js b/packages/components/src/Checkbox.js
index 3dbf319b8..43c78a8e6 100644
--- a/packages/components/src/Checkbox.js
+++ b/packages/components/src/Checkbox.js
@@ -42,7 +42,7 @@ export const Checkbox = React.forwardRef(function Checkbox(
   ref
 ) {
   return (
-    <Box sx={{ label: 'Checkbox', minWidth: 'min-content' }}>
+    <Box sx={{ minWidth: 'min-content' }}>
       <Box
         ref={ref}
         as="input"
diff --git a/packages/components/src/Close.js b/packages/components/src/Close.js
index 14ddac989..e3504e4b6 100644
--- a/packages/components/src/Close.js
+++ b/packages/components/src/Close.js
@@ -25,7 +25,6 @@ export const Close = React.forwardRef(function Close(
       variant="close"
       {...props}
       children={x}
-      __css={{ label: 'Close' }}
     />
   )
 })
diff --git a/packages/components/src/Container.js b/packages/components/src/Container.js
index 1395c985d..c215dd731 100644
--- a/packages/components/src/Container.js
+++ b/packages/components/src/Container.js
@@ -9,7 +9,6 @@ export const Container = React.forwardRef(function Container(props, ref) {
       {...props}
       __themeKey="layout"
       __css={{
-        label: 'Container',
         width: '100%',
         maxWidth: 'container',
         mx: 'auto',
diff --git a/packages/components/src/Divider.js b/packages/components/src/Divider.js
index d6cf26d03..0c710c7f8 100644
--- a/packages/components/src/Divider.js
+++ b/packages/components/src/Divider.js
@@ -9,7 +9,6 @@ export const Divider = React.forwardRef(function Divider(props, ref) {
       variant="styles.hr"
       {...props}
       __css={{
-        label: 'Divider',
         color: 'gray',
         m: 0,
         my: 2,
diff --git a/packages/components/src/Donut.js b/packages/components/src/Donut.js
index aebee326d..7d76d1ca8 100644
--- a/packages/components/src/Donut.js
+++ b/packages/components/src/Donut.js
@@ -25,7 +25,6 @@ export const Donut = React.forwardRef(function Donut(
       aria-valuemax={max}
       {...props}
       __css={{
-        label: 'Donut',
         color: 'primary',
       }}>
       {title && <title>{title}</title>}
diff --git a/packages/components/src/Embed.js b/packages/components/src/Embed.js
index e83ebb689..5eb2a258a 100644
--- a/packages/components/src/Embed.js
+++ b/packages/components/src/Embed.js
@@ -18,7 +18,6 @@ export const Embed = React.forwardRef(function Embed(
     <Box
       {...props}
       __css={{
-        label: 'Embed',
         width: '100%',
         height: 0,
         paddingBottom: 100 / ratio + '%',
diff --git a/packages/components/src/Field.js b/packages/components/src/Field.js
index 1d8f05842..7ff0777e6 100644
--- a/packages/components/src/Field.js
+++ b/packages/components/src/Field.js
@@ -11,7 +11,7 @@ export const Field = React.forwardRef(function Field(
   const fieldIdentifier = id || name
 
   return (
-    <Box {...getMargin(props)} __css={{ label: 'Field' }}>
+    <Box {...getMargin(props)}>
       <Label htmlFor={fieldIdentifier}>{label}</Label>
       <Control
         ref={ref}
diff --git a/packages/components/src/Flex.js b/packages/components/src/Flex.js
index 5c2eddc8e..881f18c9f 100644
--- a/packages/components/src/Flex.js
+++ b/packages/components/src/Flex.js
@@ -2,6 +2,5 @@ import styled from '@emotion/styled'
 import Box from './Box'
 
 export const Flex = styled(Box)({
-  label: 'Flex',
   display: 'flex',
 })
diff --git a/packages/components/src/Grid.js b/packages/components/src/Grid.js
index e384fe311..541200fee 100644
--- a/packages/components/src/Grid.js
+++ b/packages/components/src/Grid.js
@@ -27,7 +27,6 @@ export const Grid = React.forwardRef(function Grid(
       {...props}
       __themeKey="grids"
       __css={{
-        label: 'Grid',
         display: 'grid',
         gridGap: gap,
         gridTemplateColumns,
diff --git a/packages/components/src/Heading.js b/packages/components/src/Heading.js
index 6e1a99889..061f42929 100644
--- a/packages/components/src/Heading.js
+++ b/packages/components/src/Heading.js
@@ -10,7 +10,6 @@ export const Heading = React.forwardRef(function Heading(props, ref) {
       {...props}
       __themeKey="text"
       __css={{
-        label: 'Heading',
         fontFamily: 'heading',
         fontWeight: 'heading',
         lineHeight: 'heading',
diff --git a/packages/components/src/Image.js b/packages/components/src/Image.js
index 083114345..a201f8e89 100644
--- a/packages/components/src/Image.js
+++ b/packages/components/src/Image.js
@@ -9,7 +9,6 @@ export const Image = React.forwardRef(function Image(props, ref) {
       {...props}
       __themeKey="images"
       __css={{
-        label: 'Image',
         maxWidth: '100%',
         height: 'auto',
         ...props.__css,
diff --git a/packages/components/src/Input.js b/packages/components/src/Input.js
index 59e0fb582..3f17a0553 100644
--- a/packages/components/src/Input.js
+++ b/packages/components/src/Input.js
@@ -10,7 +10,6 @@ export const Input = React.forwardRef(function Input(props, ref) {
       {...props}
       __themeKey="forms"
       __css={{
-        label: 'Input',
         display: 'block',
         width: '100%',
         p: 2,
diff --git a/packages/components/src/Label.js b/packages/components/src/Label.js
index 2f3d30515..3e39c024e 100644
--- a/packages/components/src/Label.js
+++ b/packages/components/src/Label.js
@@ -10,7 +10,6 @@ export const Label = React.forwardRef(function Label(props, ref) {
       {...props}
       __themeKey="forms"
       __css={{
-        label: 'Label',
         width: '100%',
         display: 'flex',
       }}
diff --git a/packages/components/src/Link.js b/packages/components/src/Link.js
index be93b0cfc..d32051afe 100644
--- a/packages/components/src/Link.js
+++ b/packages/components/src/Link.js
@@ -3,13 +3,6 @@ import Box from './Box'
 
 export const Link = React.forwardRef(function Link(props, ref) {
   return (
-    <Box
-      ref={ref}
-      as="a"
-      variant="styles.a"
-      {...props}
-      __themeKey="links"
-      __css={{ label: 'Link' }}
-    />
+    <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 122e7ee75..a90422010 100644
--- a/packages/components/src/MenuButton.js
+++ b/packages/components/src/MenuButton.js
@@ -25,8 +25,7 @@ export const MenuButton = React.forwardRef(function MenuButton(props, ref) {
       title="Menu"
       aria-label="Toggle Menu"
       variant="menu"
-      {...props}
-      __css={{ label: 'MenuButton' }}>
+      {...props}>
       <MenuIcon />
     </IconButton>
   )
diff --git a/packages/components/src/Message.js b/packages/components/src/Message.js
index 1a7855e1b..02be9bc11 100644
--- a/packages/components/src/Message.js
+++ b/packages/components/src/Message.js
@@ -8,10 +8,9 @@ export const Message = React.forwardRef(function Message(props, ref) {
       {...props}
       __themeKey="messages"
       __css={{
-        label: 'Message',
         padding: 3,
-        paddingLeft: t => t.space[3] - t.space[1],
-        borderLeftWidth: t => t.space[1],
+        paddingLeft: (t) => t.space[3] - t.space[1],
+        borderLeftWidth: (t) => t.space[1],
         borderLeftStyle: 'solid',
         borderLeftColor: 'primary',
         borderRadius: 4,
diff --git a/packages/components/src/NavLink.js b/packages/components/src/NavLink.js
index e6633881c..d2b386aef 100644
--- a/packages/components/src/NavLink.js
+++ b/packages/components/src/NavLink.js
@@ -8,7 +8,6 @@ export const NavLink = React.forwardRef(function NavLink(props, ref) {
       variant="nav"
       {...props}
       __css={{
-        label: 'NavLink',
         color: 'inherit',
         textDecoration: 'none',
         fontWeight: 'bold',
diff --git a/packages/components/src/Progress.js b/packages/components/src/Progress.js
index f94cab301..11974dbd0 100644
--- a/packages/components/src/Progress.js
+++ b/packages/components/src/Progress.js
@@ -9,7 +9,6 @@ export const Progress = React.forwardRef(function Progress(props, ref) {
       variant="styles.progress"
       {...props}
       __css={{
-        label: 'Progress',
         display: 'block',
         width: '100%',
         height: '4px',
diff --git a/packages/components/src/Radio.js b/packages/components/src/Radio.js
index 7b9f01d0f..0d9493fa7 100644
--- a/packages/components/src/Radio.js
+++ b/packages/components/src/Radio.js
@@ -42,7 +42,7 @@ export const Radio = React.forwardRef(function Radio(
   ref
 ) {
   return (
-    <Box sx={{ label: 'Radio', minWidth: 'min-content' }}>
+    <Box sx={{ minWidth: 'min-content' }}>
       <Box
         ref={ref}
         as="input"
diff --git a/packages/components/src/SVG.js b/packages/components/src/SVG.js
index 81f57028a..a3f28e1d3 100644
--- a/packages/components/src/SVG.js
+++ b/packages/components/src/SVG.js
@@ -10,6 +10,5 @@ export default ({ size = 24, ...props }) => (
     viewBox="0 0 24 24"
     fill="currentcolor"
     {...props}
-    __css={{ label: 'SVG' }}
   />
 )
diff --git a/packages/components/src/Select.js b/packages/components/src/Select.js
index e66008324..d3e0eaa85 100644
--- a/packages/components/src/Select.js
+++ b/packages/components/src/Select.js
@@ -17,7 +17,6 @@ export const Select = React.forwardRef(function Select(
     <Box
       {...getMargin(props)}
       sx={{
-        label: 'Select',
         display: 'flex',
       }}>
       <Box
diff --git a/packages/components/src/Slider.js b/packages/components/src/Slider.js
index 6dddfca69..aac445bff 100644
--- a/packages/components/src/Slider.js
+++ b/packages/components/src/Slider.js
@@ -21,7 +21,6 @@ export const Slider = React.forwardRef(function Slider(props, ref) {
       {...props}
       __themeKey="forms"
       __css={{
-        label: 'Slider',
         display: 'block',
         width: '100%',
         height: 4,
diff --git a/packages/components/src/Spinner.js b/packages/components/src/Spinner.js
index d779cc85c..57288f4c6 100644
--- a/packages/components/src/Spinner.js
+++ b/packages/components/src/Spinner.js
@@ -39,7 +39,6 @@ export const Spinner = React.forwardRef(function Spinner(
       role="img"
       {...props}
       __css={{
-        label: 'Spinner',
         color: 'primary',
         overflow: 'visible',
       }}>
diff --git a/packages/components/src/Text.js b/packages/components/src/Text.js
index 5836c02f9..dd55b17a8 100644
--- a/packages/components/src/Text.js
+++ b/packages/components/src/Text.js
@@ -3,13 +3,6 @@ import Box from './Box'
 
 export const Text = React.forwardRef(function Text(props, ref) {
   return (
-    <Box
-      as="span"
-      ref={ref}
-      variant="default"
-      {...props}
-      __themeKey="text"
-      __css={{ label: 'Text' }}
-    />
+    <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 97d3fde10..3d2dc2507 100644
--- a/packages/components/src/Textarea.js
+++ b/packages/components/src/Textarea.js
@@ -10,7 +10,6 @@ export const Textarea = React.forwardRef(function Textarea(props, ref) {
       {...props}
       __themeKey="forms"
       __css={{
-        label: 'Textarea',
         display: 'block',
         width: '100%',
         p: 2,

From d4a66d62b682f00f4ff645dd5bacb01ac8a451cc Mon Sep 17 00:00:00 2001
From: David Burles <dburles@gmail.com>
Date: Mon, 14 Dec 2020 09:53:12 +1100
Subject: [PATCH 6/7] add displayName to non-forwardRef components

---
 packages/components/src/Box.js  | 2 ++
 packages/components/src/Flex.js | 2 ++
 packages/components/src/SVG.js  | 6 +++++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/Box.js b/packages/components/src/Box.js
index 181d69c6a..ceeeb1031 100644
--- a/packages/components/src/Box.js
+++ b/packages/components/src/Box.js
@@ -30,4 +30,6 @@ export const Box = styled('div', {
   (props) => props.css
 )
 
+Box.displayName = 'Box'
+
 export default 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/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

From 18349e2419731ae899c73020410bb0466c9378e0 Mon Sep 17 00:00:00 2001
From: David Burles <dburles@gmail.com>
Date: Mon, 14 Dec 2020 19:33:59 +1100
Subject: [PATCH 7/7] add function names to Switch and Paragraph

---
 packages/components/src/Paragraph.js |  51 ++++++-----
 packages/components/src/Switch.js    | 127 ++++++++++++++-------------
 2 files changed, 92 insertions(+), 86 deletions(-)

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/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>
+  )
+})