How to use the styled-system.propTypes.numberOrString function in styled-system

import {space, propTypes} from 'styled-system'

import {Text} from './Text'

/** @component */
export const Link = styled(Text)`
  text-decoration: none;
  cursor: pointer;
`

Link.displayName = 'gatsby-ui.Link'
Link.defaultProps = {
  as: 'a'
}
Link.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  fontWeight: propTypes.responsive,
  lineHeight: propTypes.responsive,
  textAlign: propTypes.responsive,
  ...space.propTypes
}

export const Code = styled(Text)`
  font-family: ${fontFamilies.mono};

  ${borderRadius};
`

Code.displayName = 'gatsby-ui.Code'
Code.defaultProps = {
  as: 'code',
  borderRadius: 4,
  bg: 'grays.1',
  color: 'grays.9',
  px: 2
}
Code.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  borderRadius: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  fontWeight: propTypes.responsive,
  lineHeight: propTypes.responsive,
  textAlign: propTypes.responsive,
  ...space.propTypes
}

${color}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${space}
  ${textAlign}
`

Text.displayName = 'gatsby-ui.Text'
Text.defaultProps = {
  m: 0,
  fontSize: 3,
  lineHeight: 'copy'
}
Text.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  fontWeight: propTypes.responsive,
  lineHeight: propTypes.responsive,
  textAlign: propTypes.responsive,
  ...space.propTypes
}

/** @component */
export const Code = styled(Text)`
  font-family: ${fontFamilies.mono};

  ${borderRadius};
`

}

Icon.displayName = 'gatsby-ui.Icon'
Icon.defaultProps = {
  color: '#000',
  size: 64
}
Icon.propTypes = {
  /**
   * Color of the icon
   */
  color: propTypes.numberOrString,
  /**
   * Size of the SVG
   */
  size: propTypes.numberOrString
}

import styled from 'styled-components'
import {space, width, maxWidth, propTypes} from 'styled-system'

/** @component */
export const Image = styled.img`
  ${maxWidth}
  ${space}
  ${width}
`

Image.displayName = 'gatsby-ui.Image'
Image.defaultProps = {
  maxWidth: '100%'
}
Image.propTypes = {
  as: propTypes.numberOrString,
  maxWidth: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}

import {maxWidth, space, width, propTypes} from 'styled-system'

/** @component */
export const Measure = styled.div`
  ${maxWidth}
  ${space}
  ${width}
`

Measure.displayName = 'gatsby-ui.Measure'
Measure.defaultProps = {
  maxWidth: 'measure'
}
Measure.propTypes = {
  as: propTypes.numberOrString,
  maxWidth: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}

fontWeight: propTypes.responsive,
  lineHeight: propTypes.responsive,
  textAlign: propTypes.responsive,
  ...space.propTypes
}


OrderedList.displayName = 'gatsby-ui.OrderedList'
OrderedList.defaultProps = {
  as: 'ol',
  pl: 0,
  mt: 1,
  mb: 3
}
OrderedList.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  fontWeight: propTypes.responsive,
  lineHeight: propTypes.responsive,
  textAlign: propTypes.responsive,
  ...space.propTypes
}


UnorderedList.displayName = 'gatsby-ui.UnorderedList'
UnorderedList.defaultProps = {
  as: 'ul',
  pl: 0,
  mt: 1,
  mb: 3

border-left: none;
  border-right: none;

  ${borderColor}
  ${maxWidth}
  ${space}
  ${width}
`

Divider.displayName = 'gatsby-ui.Divider'
Divider.defaultProps = {
  borderColor: 'grays.1',
  my: 4
}
Divider.propTypes = {
  as: propTypes.numberOrString,
  borderColor: propTypes.responsive,
  maxWidth: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}

/** @component */
export const Container = styled.div`
  ${space}
  ${width}
  ${maxWidth}
`

Container.displayName = 'gatsby-ui.Container'
Container.defaultProps = {
  maxWidth: 1420,
  m: 'auto',
  px: 3
}
Container.propTypes = {
  as: propTypes.numberOrString,
  maxWidth: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}

${borderColor}
  ${color}
  ${fontSize}
  ${space}
  ${width}
`

Input.displayName = 'gatsby-ui.Input'
Input.defaultProps = {
  bg: 'transparent',
  borderColor: 'grays.1',
  p: 2,
  fontSize: 2
}
Input.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  borderColor: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}