Fix as type errors

src/Avatar.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import styled from 'styled-components'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
 
 type StyledAvatarProps = {
   /** Sets the width and height of the avatar. */
@@ -22,7 +22,7 @@ function getBorderRadius({size, square}: StyledAvatarProps) {
   }
 }
 
-const StyledAvatar = styled.img.attrs<StyledAvatarProps>(props => ({
+const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   height: props.size,
   width: props.size,
 }))<StyledAvatarProps>`
@@ -35,11 +35,13 @@ const StyledAvatar = styled.img.attrs<StyledAvatarProps>(props => ({
   ${sx}
 `
 
-export type AvatarProps = StyledAvatarProps & React.ComponentPropsWithoutRef<'img'>
-const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(({size = 20, alt = '', ...rest}, ref) => (
-  <StyledAvatar ref={ref} alt={alt} size={size} {...rest} />
-))
-
-Avatar.displayName = 'Avatar'
+// TODO: Remove defaultProps to be compatible with the next major version of React
+// Reference: https://github.com/primer/react/issues/2758
+Avatar.defaultProps = {
+  size: 20,
+  alt: '',
+  square: false,
+}
 
+export type AvatarProps = ComponentProps<typeof Avatar>
 export default Avatar

src/Flash.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
 
 const variants = variant({
   variants: {
@@ -46,7 +46,7 @@ type StyledFlashProps = {
   full?: boolean
 } & SxProp
 
-const StyledFlash = styled.div<StyledFlashProps>`
+const Flash = styled.div<StyledFlashProps>`
   position: relative;
   color: ${get('colors.fg.default')};
   padding: ${get('space.3')};
@@ -67,11 +67,11 @@ const StyledFlash = styled.div<StyledFlashProps>`
   ${sx};
 `
 
-export type FlashProps = StyledFlashProps & React.ComponentPropsWithoutRef<'div'>
-const Flash = React.forwardRef<HTMLDivElement, FlashProps>(({variant = 'default', ...rest}, ref) => (
-  <StyledFlash ref={ref} variant={variant} {...rest} />
-))
-
-Flash.displayName = 'Flash'
+// TODO: Remove defaultProps to be compatible with the next major version of React
+// Reference: https://github.com/primer/react/issues/2758
+Flash.defaultProps = {
+  variant: 'default',
+}
 
+export type FlashProps = ComponentProps<typeof Flash>
 export default Flash

src/Label.tsx

@@ -1,12 +1,9 @@
-import React from 'react'
 import styled from 'styled-components'
 import {variant} from 'styled-system'
 import {get} from './constants'
 import sx, {BetterSystemStyleObject, SxProp} from './sx'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
-import {ComponentProps} from './utils/types'
 
-type StyledLabelProps = {
+export type LabelProps = {
   /** The color of the label */
   variant?: LabelColorOptions
   /** How large the label is rendered */
@@ -79,7 +76,7 @@ const sizes: Record<LabelSizeKeys, BetterSystemStyleObject> = {
   },
 }
 
-const StyledLabel = styled.span<StyledLabelProps>`
+const Label = styled.span<LabelProps>`
   align-items: center;
   background-color: transparent;
   border-width: 1px;
@@ -95,11 +92,11 @@ const StyledLabel = styled.span<StyledLabelProps>`
   ${sx};
 `
 
-const Label = React.forwardRef(({size = 'small', variant = 'default', ...rest}, ref) => (
-  <StyledLabel ref={ref} size={size} variant={variant} {...rest} />
-)) as PolymorphicForwardRefComponent<'span', StyledLabelProps>
-
-Label.displayName = 'Label'
+// TODO: Remove defaultProps to be compatible with the next major version of React
+// Reference: https://github.com/primer/react/issues/2758
+Label.defaultProps = {
+  size: 'small',
+  variant: 'default',
+}
 
-export type LabelProps = ComponentProps<typeof Label>
 export default Label

src/Truncate.tsx

@@ -1,8 +1,6 @@
-import React from 'react'
 import styled from 'styled-components'
 import {maxWidth, MaxWidthProps} from 'styled-system'
 import sx, {SxProp} from './sx'
-import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
 import {ComponentProps} from './utils/types'
 
 type StyledTruncateProps = {
@@ -12,7 +10,7 @@ type StyledTruncateProps = {
 } & MaxWidthProps &
   SxProp
 
-const StyledTruncate = styled.div<StyledTruncateProps>`
+const Truncate = styled.div<StyledTruncateProps>`
   display: ${props => (props.inline ? 'inline-block' : 'inherit')};
   overflow: hidden;
   text-overflow: ellipsis;
@@ -23,11 +21,13 @@ const StyledTruncate = styled.div<StyledTruncateProps>`
   ${sx};
 `
 
-const Truncate = React.forwardRef(({expandable = false, inline = false, maxWidth = 125, ...rest}, ref) => (
-  <StyledTruncate ref={ref} maxWidth={maxWidth} expandable={expandable} inline={inline} {...rest} />
-)) as PolymorphicForwardRefComponent<'div', StyledTruncateProps>
-
-Truncate.displayName = 'Truncate'
+// TODO: Remove defaultProps to be compatible with the next major version of React
+// Reference: https://github.com/primer/react/issues/2758
+Truncate.defaultProps = {
+  expandable: false,
+  inline: false,
+  maxWidth: 125,
+}
 
 export type TruncateProps = ComponentProps<typeof Truncate>
 export default Truncate