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

transition-property: all;
    position: relative;

    :nth-child(2) {
      opacity: 1;
    }
  }

  &[aria-expanded='true'] {
    span {
      :first-child {
        transform: translateY(${th.px('6rpx')}) rotate(45deg);
      }
      :nth-child(2) {
        opacity: 0;
        transform: translateX(${th.px(10)});
      }
      :nth-child(3) {
        transform: translateY(${th.px('-6rpx')}) rotate(-45deg);
      }
    }
  }

  ${up(
    'md',
    css`
      display: none;
    `,
  )}
`

export const Burger = React.forwardRef((props, ref) => {

    soft: p => `0 ${th.px(2)(p)} ${th.px(6)(p)} 0 rgba(0, 0, 0, 0.1)`,
  },

}
  }
`

export const CardLink = styled.a`
  ${Card} {
    transition: base;
  }

  &:focus {
    outline: none;
  }

  &:focus > ${Card}, &:hover > ${Card} {
    transform: translateY(${th.px(-3)}) scale(1.03);
    box-shadow: ${th.px(7)} ${th.px(7)} ${th.px(36)} rgba(0, 0, 0, 0.12);
    border-color: card-border-hover;
    outline: 0;
  }
`

export const CardHeader = styled.box`
  padding: 3;
  background-color: light700;
`

export const CardFooter = CardHeader

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

const move = keyframes`
  to {
    transform: scale(1.2);
  }
`

export const Card = styled.box`
  background: linear-gradient(
    340deg,
    ${th.color('card-gradient-light')} 0%,
    ${th.color('card-gradient-dark')} 100%
  );
  border: 1;
  border-color: card-border;
  box-sizing: border-box;
  box-shadow: ${th.px(5)} ${th.px(5)} ${th.px(15)} rgba(0, 0, 0, 0.12);
  border-radius: 8;

  h4 {
    margin: 2 0;
    color: light100;
    font-weight: 700;
  }

  hr {
    border: 0;
    height: 1px;
    margin: 4 0;
    background-color: light500;
  }

  ul {

width: 20;
    height: 2;
    background-color: lighter;
    transition: base;
    transition-property: all;
    position: relative;

    :nth-child(2) {
      opacity: 1;
    }
  }

  &[aria-expanded='true'] {
    span {
      :first-child {
        transform: translateY(${th.px('6rpx')}) rotate(45deg);
      }
      :nth-child(2) {
        opacity: 0;
        transform: translateX(${th.px(10)});
      }
      :nth-child(3) {
        transform: translateY(${th.px('-6rpx')}) rotate(-45deg);
      }
    }
  }

  ${up(
    'md',
    css`
      display: none;
    `,

:nth-child(2) {
      opacity: 1;
    }
  }

  &[aria-expanded='true'] {
    span {
      :first-child {
        transform: translateY(${th.px('6rpx')}) rotate(45deg);
      }
      :nth-child(2) {
        opacity: 0;
        transform: translateX(${th.px(10)});
      }
      :nth-child(3) {
        transform: translateY(${th.px('-6rpx')}) rotate(-45deg);
      }
    }
  }

  ${up(
    'md',
    css`
      display: none;
    `,
  )}
`

export const Burger = React.forwardRef((props, ref) => {
  return (
    
      <span></span>

animation-direction: alternate-reverse;
    }
  }
`

export const CardLink = styled.a`
  ${Card} {
    transition: base;
  }

  &:focus {
    outline: none;
  }

  &:focus > ${Card}, &:hover > ${Card} {
    transform: translateY(${th.px(-3)}) scale(1.03);
    box-shadow: ${th.px(7)} ${th.px(7)} ${th.px(36)} rgba(0, 0, 0, 0.12);
    border-color: card-border-hover;
    outline: 0;
  }
`

export const CardHeader = styled.box`
  padding: 3;
  background-color: light700;
`

export const CardFooter = CardHeader

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