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

...alignItems.propTypes,
  ...alignSelf.propTypes,
  ...backgroundImage.propTypes,
  ...borders.propTypes,
  ...borderRadius.propTypes,
  ...bottom.propTypes,
  ...color.propTypes,
  ...display.propTypes,
  ...flex.propTypes,
  ...flexBasis.propTypes,
  ...flexDirection.propTypes,
  ...flexWrap.propTypes,
  ...fontFamily.propTypes,
  ...fontSize.propTypes,
  ...fontStyle.propTypes,
  ...fontWeight.propTypes,
  ...height.propTypes,
  ...justifyContent.propTypes,
  ...left.propTypes,
  ...lineHeight.propTypes,
  ...maxHeight.propTypes,
  ...maxWidth.propTypes,
  ...minHeight.propTypes,
  ...minWidth.propTypes,
  ...order.propTypes,
  ...position.propTypes,
  ...right.propTypes,
  ...ratio.propTypes,
  ...space.propTypes,
  ...textAlign.propTypes,
  textTransform: PropTypes.string,
  ...top.propTypes,

${textStyle};
  ${colorStyle};
  ${buttonStyle};
`;

const Box = props => ;

Box.propTypes = {
  ...space.propTypes,
  ...width.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
  ...fontFamily.propTypes,
  ...textAlign.propTypes,
  ...lineHeight.propTypes,
  ...fontWeight.propTypes,
  ...fontStyle.propTypes,
  ...letterSpacing.propTypes,
  ...display.propTypes,
  ...maxWidth.propTypes,
  ...minWidth.propTypes,
  ...height.propTypes,
  ...maxHeight.propTypes,
  ...minHeight.propTypes,
  ...verticalAlign.propTypes,
  ...alignItems.propTypes,
  ...justifyContent.propTypes,
  ...flexWrap.propTypes,
  ...flexDirection.propTypes,
  ...flex.propTypes,
  ...alignContent.propTypes,
  ...justifyItems.propTypes,

${props =>
    props.bg
      ? `background-color: ${getPaletteColor(props.bg, 'base')(props)};`
      : ''}

  ${space} ${fontSize} ${fontWeight} ${width};
  ${nowrap}
  ${accessiblyHide}
  ${applyVariations('Label')}
`

Label.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  color: deprecatedColorValue(),
  ...fontWeight.propTypes,
  ...width.propTypes
}

Label.defaultProps = {
  fontSize: '10px',
  fontWeight: 'bold',
  color: 'border.light'
}

Label.displayName = 'Label'
Label.isLabel = true

export default Label

import Box from './box'

import {
  fontFamily,
  fontWeight,
  textAlign,
  lineHeight,
  letterSpacing,
  maxWidth
} from 'styled-system'

const Text = styled(Box)(fontFamily, fontWeight, textAlign, lineHeight, letterSpacing, maxWidth)

Text.propTypes = {
  ...fontFamily.propTypes,
  ...fontWeight.propTypes,
  ...textAlign.propTypes,
  ...lineHeight.propTypes,
  ...maxWidth.propTypes,
  ...letterSpacing.propTypes
}

Text.defaultProps = {
  mb: '1.563rem'
}

export default Text

fontSize,
  fontWeight,
  letterSpacing,
  lineHeight,
  space,
  textAlign
)

Text.displayName = 'Text'
Text.defaultProps = {
  m: 0
}
Text.propTypes = {
  ...fontFamily.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...letterSpacing.propTypes,
  ...lineHeight.propTypes,
  ...space.propTypes,
  ...textAlign.propTypes
}

export default Text

...width.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
}

const Text = styled.div`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${color}
`
Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes,
}

const Heading = Text.withComponent('h1')

Heading.defaultProps = {
  fontSize: 5,
  lineHeight: 1.5,
  m: 0,
}

class App extends React.Component {
  render() {
    return (

Container.defaultProps = {
  mx: 'auto'
}

export const Text = styled.div(
  space,
  color,
  fontSize,
  fontWeight
)

Text.propTypes = {
  ...space.propTypes,
  ...color.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
}

export const Heading = styled.h2({
  margin: 0
}, space, fontSize, fontWeight, color)

Heading.propTypes = {
  ...space.propTypes,
  ...color.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
}

export const Pre = styled.pre({
  margin: 0,
  fontFamily: 'Menlo, monospace',

export const Text = styled.p`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${color}
  ${textAlign}
  ${p => p.allCaps && css`
    text-transform:uppercase;
  `}
`
Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes,
  ...textAlign.propTypes
}
Text.defaultProps = {
  m: 0
}

export const Header = styled(Text.withComponent('h1'))`
  letter-spacing: -0.03em;
  text-shadow: 1px 2px 3px ${_('colors.textShadow')};
`
Header.defaultProps = {
  fontSize: 5,
  fontWeight: 600,
  lineHeight: 1.17,

display: inline-block;
  line-height: 1.5;
  ${fontWeight} ${borderRadius};
  ${applyVariations('RatingBadge')}
`

RatingBadge.defaultProps = {
  fontWeight: 'bold',
  px: 2,
  color: 'white',
  bg: 'orange',
  borderRadius: 1
}

RatingBadge.propTypes = {
  ...fontWeight.propTypes,
  ...borderRadius.propTypes,
  bg: deprecatedPropType('color')
}

export default RatingBadge

};

const Text = styled('div')`
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${fontStyle}
  ${textAlign}
  ${color}
`;

Text.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...lineHeight.propTypes,
  ...color.propTypes
};

const Heading = Text.withComponent('h1');

Heading.defaultProps = {
  fontSize: 5,
  lineHeight: 1.5,
  m: 0
};

export { Box, Text, Heading, Flex };