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

& > p:first-child {
    margin-top: 0;
  }

  & > p:last-child {
    margin-bottom: 0;
  }

  ${borderColor};
`

Blockquote.displayName = 'gatsby-ui.Blockquote'
Blockquote.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  borderColor: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  fontWeight: propTypes.responsive,
  lineHeight: propTypes.responsive,
  textAlign: propTypes.responsive,
  ...space.propTypes
}
Blockquote.defaultProps = {
  as: 'blockquote',
  borderColor: 'grays.2',
  color: 'grays.8',
  p: 0,
  pl: 3,
  my: 4,
  ml: 0,

${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};
`

Code.displayName = 'gatsby-ui.Code'

${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
}

${flexDirection}
  ${flexWrap}
  ${height}
  ${justifyContent}
  ${space}
  ${width}
`

Flex.displayName = 'gatsby-ui.Flex'
Flex.propTypes = {
  as: propTypes.numberOrString,
  alignItems: propTypes.responsive,
  flexDirection: propTypes.responsive,
  flexWrap: propTypes.responsive,
  height: propTypes.responsive,
  justifyContent: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}

${alignItems}
  ${flexDirection}
  ${flexWrap}
  ${height}
  ${justifyContent}
  ${space}
  ${width}
`

Flex.displayName = 'gatsby-ui.Flex'
Flex.propTypes = {
  as: propTypes.numberOrString,
  alignItems: propTypes.responsive,
  flexDirection: propTypes.responsive,
  flexWrap: propTypes.responsive,
  height: propTypes.responsive,
  justifyContent: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}

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


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

}

  & > p:last-child {
    margin-bottom: 0;
  }

  ${borderColor};
`

Blockquote.displayName = 'gatsby-ui.Blockquote'
Blockquote.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  borderColor: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  fontWeight: propTypes.responsive,
  lineHeight: propTypes.responsive,
  textAlign: propTypes.responsive,
  ...space.propTypes
}
Blockquote.defaultProps = {
  as: 'blockquote',
  borderColor: 'grays.2',
  color: 'grays.8',
  p: 0,
  pl: 3,
  my: 4,
  ml: 0,
  mr: 0,
  fontSize: 3
}

/** @component */
export const UnorderedList = styled(Text)`
  & *:matches(ol, ul) {
    padding-left: 40px;
  }
`

ListItem.displayName = 'gatsby-ui.ListItem'
ListItem.defaultProps = {
  as: 'li',
  fontSize: 2,
  lineHeight: 'copy'
}
ListItem.propTypes = {
  as: propTypes.numberOrString,
  bg: propTypes.responsive,
  color: propTypes.responsive,
  fontSize: propTypes.responsive,
  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
}

}


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

${color}
  ${display}
  ${flex}
  ${order}
  ${space}
  ${textAlign}
  ${width}
`

Box.displayName = 'gatsby-ui.Box'
Box.propTypes = {
  as: propTypes.responsive,
  alignSelf: propTypes.responsive,
  bg: propTypes.responsive,
  borderColor: propTypes.responsive,
  boxShadow: propTypes.responsive,
  color: propTypes.responsive,
  display: propTypes.responsive,
  flex: propTypes.responsive,
  order: propTypes.responsive,
  textAlign: propTypes.responsive,
  width: propTypes.responsive,
  ...space.propTypes
}