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

: props.unSelectedBg};
  color: ${getPaletteColor('base')};
  ${space} ${fontSize};
  &:hover {
    background-color: ${props =>
      getPaletteColor(props.bg || props.color, 'light')(props)};
  }
  ${applyVariations('ToggleBadge')}
`

ToggleBadge.displayName = 'ToggleBadge'

ToggleBadge.propTypes = {
  selected: PropTypes.bool,
  ...space.propTypes,
  ...fontSize.propTypes,
  color: deprecatedColorValue(),
  bg: deprecatedPropType('color')
}

ToggleBadge.defaultProps = {
  selected: false,
  px: 2,
  py: 1,
  mx: 1,
  my: 1,
  fontSize: 0,
  color: 'primary',
  unSelectedBg: 'transparent'
}

export default ToggleBadge

border-color: ${themeGet('colors.blue')};
    box-shadow: 0 0 0 1px ${themeGet('colors.blue')};
  }
`
SelectBase.defaultProps = {
  theme,
  fontSize: 1,
  m: 0,
  pl: 12,
  pr: 32,
  py: 14
}

SelectBase.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes
}

const Select = styled(props => (
  
    
    
  
))``

Select.isField = true

export default Select

...order.propTypes
};

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 };

import { space, fontSize, fontWeight, lineHeight, color, textAlign, themeGet as _ } from 'styled-system'

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,

css('p'),
)
p.propTypes = {
  ...fontSize.propTypes,
  ...space.propTypes,
  ...color.propTypes
}
p.defaultProps = {
  fontSize: 2
}

const ul = styled.ul([], {
  textAlign: 'left'
}, fontSize, css('ul'))
ul.propTypes = {
  ...fontSize.propTypes
}
ul.defaultProps = {
  fontSize: 2
}

const ol = styled.ol([], {
  textAlign: 'left'
}, fontSize, css('ol'))
ol.propTypes = {
  ...fontSize.propTypes
}
ol.defaultProps = {
  fontSize: 2
}
const li = styled.li([], css('li'))

cursor: pointer;
  background-color: ${props =>
    props.selected ? props.theme.colors[props.bg] : props.unSelectedBg};
  color: ${props => props.theme.colors[props.color]};
  ${space} ${fontSize};
  &:hover {
    background-color: ${props => props.theme.colors[props.bg]};
  }
`

ToggleBadge.displayName = 'ToggleBadge'

ToggleBadge.propTypes = {
  selected: PropTypes.bool,
  ...space.propTypes,
  ...fontSize.propTypes
}

ToggleBadge.defaultProps = {
  selected: false,
  px: 2,
  py: 1,
  mx: 1,
  my: 1,
  fontSize: 0,
  theme: theme,
  color: 'blue',
  bg: 'lightBlue',
  unSelectedBg: 'transparent'
}

export default ToggleBadge

const Text = styled.div`
  ${color}
  ${space}
  ${fontSize}
  ${fontWeight}
  ${lineHeight}
  ${textAlign}
  ${letterSpacing}
`

Text.defaultProps = {}

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

Text.displayName = 'Text'

export default Text

${fontSize}
  ${fontWeight}
  ${textAlign}
  ${lineHeight}
  ${space}
  ${caps}
  ${regular}
  ${bold}
  ${textShadow}
`)

Text.displayName = 'Text'

Text.propTypes = {
  ...textStyle.propTypes,
  ...fontSize.propTypes,
  ...fontWeight.propTypes,
  ...textAlign.propTypes,
  ...lineHeight.propTypes,
  ...space.propTypes,
  color: deprecatedColorValue(),
  caps: PropTypes.bool,
  regular: PropTypes.bool,
  bold: PropTypes.bool,
  enableTextShadow: PropTypes.bool,
  textShadowSize: PropTypes.oneOf(['sm', 'md']),
  align: deprecatedPropType('textAlign')
}

Text.span = Text.withComponent('span')
Text.p = Text.withComponent('p')
Text.s = Text.withComponent('s')

const Flex = styled('div')({
  display: 'flex'
}, space)

const Spacer = styled('div')({ margin: 'auto' })

const NavLink = styled(Link)({
  display: 'block',
  fontWeight: 'bold',
  textDecoration: 'none',
}, space, fontSize, color, props => props.css)

NavLink.propTypes = {
  ...space.propTypes,
  ...fontSize.propTypes,
  ...color.propTypes,
}

NavLink.defaultProps = {
  py: 1,
  fontSize: 3,
  color: 'inherit',
}

export const Pagination = withRouter(({
  routes = [],
  order = [],
  filter,
  history,
  location,
  match,

const Root = styled('div')`
  font-family: system-ui, sans-serif;
  line-height: 1.5;
`

const Box = styled('div')`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`
Box.propTypes = {
  ...space.propTypes,
  ...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,