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

border:
    borderWidth === 0
      ? '0'
      : `${borderWidth}px solid ${getPaletteColor('base')({
          color: borderColor,
          ...props
        })}`
})

const Card = styled(Box)`
  ${boxShadow} ${boxBorder} ${borderRadius}
  ${applyVariations('Card')}
`

Card.propTypes = {
  ...borderRadius.propTypes,
  boxShadowSize: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
  borderColor: deprecatedColorValue(),
  color: deprecatedColorValue(),
  borderWidth: PropTypes.oneOf([0, 1, 2])
}

Card.defaultProps = {
  borderColor: 'border',
  borderRadius: 1,
  borderWidth: 1
}

Card.displayName = 'Card'

export default Card

Button.defaultProps = {
  m: 0,
  px: 3,
  py: 2,
  fontSize: 1,
  borderRadius: 2,
  color: 'white',
  bg: 'blue'
}

Button.propTypes = {
  ...color.propTypes,
  ...space.propTypes,
  ...fontSize.propTypes,
  ...borderRadius.propTypes
}

Button.displayName = 'Button'

export default Button

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

<input type="color">
  
))`
  ${borderRadius}
  position:relative;
  overflow:hidden;

  input {
    height: 100%;
    position:relative;
    z-index:-1;
  }
`

ColorInput.propTypes = {
  ...borderRadius.propTypes
}

overflow:hidden;
  position:relative;

  img {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    transform: translate(-50%, -50%);
  }
`
Image.propTypes = {
  ...space.propTypes,
  ...size.propTypes,
  ...boxShadow.propTypes,
  ...borderRadius.propTypes,
  ...border.propTypes
}

export const Photo = styled(Image)`
`
Photo.defaultProps = {
  size: '180px',
  border: 'faint',
  boxShadow: 'lg',
  borderRadius: '5px'
}

const CIDPhotoCache = {}
export const CIDPhoto = ({ src: cid, placeholder = placeholderImage, ...props }) => {
  const [src, setSrc] = useState(CIDPhotoCache[cid] || placeholder)
  useEffect(() => {

&:hover, &:focus, &:active {
    background: ${p => darken(0.05, themeGet(`colors.${p.bg}`, '#555')(p))};
    outline: none;
  }

  &[disabled]{
    background: #555;
    opacity:.5;

  }
`

Button.propTypes = {
  ...space.propTypes,
  ...color.propTypes,
  ...borderRadius.propTypes,
  sm: PropTypes.bool,
  lg: PropTypes.bool,
  block: PropTypes.bool
}

Button.defaultProps = {
  bg: 'primary',
  color: '#fff',
  borderRadius: '5px'
}

export const LinkButton = ({ to, ...props }) => {
  const { history } = useContext(RouterContext)
  const handleClick = (e) => {
    if (props.onClick) props.onClick(e)
    e.preventDefault()

space,
  textAlign,
  textTransform,
  top,
  width,
  zIndex,
);
Box.displayName = 'Box';

export const basePropTypes = {
  ...alignContent.propTypes,
  ...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,

...gridColumnGap.propTypes,
  ...gridColumn.propTypes,
  ...gridRow.propTypes,
  ...gridArea.propTypes,
  ...gridAutoFlow.propTypes,
  ...gridAutoRows.propTypes,
  ...gridAutoColumns.propTypes,
  ...gridTemplateRows.propTypes,
  ...gridTemplateColumns.propTypes,
  ...gridTemplateAreas.propTypes,
  ...background.propTypes,
  ...backgroundImage.propTypes,
  ...backgroundSize.propTypes,
  ...backgroundPosition.propTypes,
  ...backgroundRepeat.propTypes,
  ...borderRadius.propTypes,
  ...borderColor.propTypes,
  ...borders.propTypes,
  ...boxShadow.propTypes,
  ...opacity.propTypes,
  ...overflow.propTypes,
  ...position.propTypes,
  ...zIndex.propTypes,
  ...top.propTypes,
  ...right.propTypes,
  ...bottom.propTypes,
  ...left.propTypes,
  ...textStyle.propTypes,
  ...colorStyle.propTypes,
  ...buttonStyle.propTypes,
};

line-height: 1.5;
  ${fontWeight} ${borderRadius};
`

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

RatingBadge.propTypes = {
  ...fontWeight.propTypes,
  ...borderRadius.propTypes
}

export default RatingBadge

export const Box = styled.div`
  ${borderRadius}
  ${space}
  ${width}
  ${color}
  ${flex}
  ${flexDirection}
  ${alignItems}
  ${alignSelf}
  ${justifyContent}
  ${justifySelf}
  ${flexWrap}
  display:flex;
`
Box.propTypes = {
  ...borderRadius.propTypes,
  ...space.propTypes,
  ...width.propTypes,
  ...color.propTypes,
  ...flex.propTypes,
  ...flexDirection.propTypes,
  ...alignItems.propTypes,
  ...alignSelf.propTypes,
  ...justifyContent.propTypes,
  ...justifySelf.propTypes,
  ...flexWrap.propTypes
}