How to use the @xstyled/styled-components.p function in @xstyled/styled-components

import styled from '@xstyled/styled-components'

export const Card = styled.box`
  border-radius: base;
  background-color: gray800;
`

export const CardBody = styled.box`
  padding: 3;
`

export const CardText = styled.p`
  font-size: 13;
`

export const CardTitle = styled.h3`
  font-size: 18;
  font-weight: medium;
  margin: 0;
  color: white;
`

export const CardHeader = styled.headerBox`
  border-bottom: 1;
  border-bottom-color: gray700;
  padding: 2;
`

CardBody as SUICardBody,
  CardTitle as SUICardTitle,
  CardFooter as SUICardFooter,
} from '@smooth-ui/core-sc'

export const Card = styled(SUICard)`
  border-radius: base;
  background-color: light200;
  border: 0;
`

export const CardBody = styled(SUICardBody)`
  padding: 3;
`

export const CardText = styled.p`
  font-size: 13;

  &:first-child {
    margin-top: 0;
  }
`

export const CardTitle = styled(SUICardTitle)`
  font-size: 18;
  font-weight: medium;
  margin: 0;
  color: darker;
`

export const CardHeader = styled(SUICardHeader)`
  border-bottom: 1;

pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(${heroBg});
  background-size: cover;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(to top, transparent 5%, black 95%),
    linear-gradient(to right, transparent 20%, black 80%);
  mask-composite: exclude;
  -webkit-mask-composite: source-in;
`

export const HeroIntro = styled.p`
  font-family: monospace;
  font-size: 16;
  margin: 0;
  color: accent;
`

export const HeroTitle = styled.h1`
  margin: 0;
  font-size: 40;
  font-weight: 700;

  strong {
    color: lighter;
  }

  ${up(