How to use the @xstyled/system.up function in @xstyled/system

default: 'primary',
    variants: {
        primary: 'color: red',
        secondary: 'color: blue',
    },
})({});

// Responsive Utilities

breakpoints({
    xs: 'color: red',
    md: 'color: blue',
    lg: 'color: green',
})({});

up('md', 'color: red')({});

down('md', 'color: red')({});

between('md', 'lg', 'color: red')({});

// RPX Transformers

rpxTransformers.px(16).toString();
rpxTransformers.px('16rpx').toString();
rpxTransformers.border(10).toString();
rpxTransformers.border('10px solid').toString();

) : null}
        
      
    
  )
}

const StyledShowcaseImg = styled.img`
  ${variant({
    variants: {
      build: css`
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4;
        max-height: 298.5rpx; // 2x ratio

        ${up(
          'sm',
          css`
            max-height: 380rpx;
          `,
        )}
      `,
      perfect: css`
        ${down(
          'sm',
          css`
            // 2x ration
            width: 93rpx;
            height: 93rpx;
          `,
        )}
      `,

transition: base;
  transition-property: border-color;

  &[aria-current='true'] {
    border-color: darker;
  }
`

export const TabItemLink = styled.a`
  color: darker;
  text-decoration: none;
  padding: 2 3;
  display: block;
  overflow-x: auto;

  ${up(
    'md',
    css`
      padding: 3;
      overflow-x: visible;
    `,
  )}
`

export function RouterTabItem({ children, exact, to }) {
  return (
    
      {({ match }) => (
        
          
            {children}

${up(
    'md',
    css`
      font-size: 24;
      margin-bottom: 0;
    `,
  )}
`

export const HeaderPrimary = styled.div`
  display: flex;
  flex-direction: column;
  margin: 3 0;

  ${up(
    'md',
    css`
      flex-direction: row;
      align-items: center;
      margin: 4 0;
    `,
  )}
`

export const HeaderSecondaryLink = styled(FadeLink)`
  margin-top: 2;
  font-size: 14;
  display: flex;
  align-items: center;
  color: white;
`

return (
    
  )
}

export const FooterPrimary = styled.div`
  margin-bottom: 2;

  ${up(
    'md',
    css`
      margin-bottom: 0;
    `,
  )}
`
export const FooterSecondary = styled.div`
  margin: 0 -2;
`
export function FooterLink(props) {
  return 
}

${up(
    'md',
    css`
      &:hover {
        transform: rotate(180deg) translateY(5%);
        fill: light400;
      }
      z-index: 3;
    `,
  )}
`

const StyledProductShowcaseContainer = styled.box`
  padding: 16rpx 0;

  ${up(
    'md',
    css`
      padding: 40rpx 0;
    `,
  )}

  ${variant({
    variants: {
      gray: css`
        background: ${th.color('light200')};
      `,
      white: css`
        background: darker;
      `,
    },
  })}

return (
    
  )
}

export const FooterPrimary = styled.div`
  margin-bottom: 2;

  ${up(
    'md',
    css`
      margin-bottom: 0;
    `,
  )}
`
export const FooterSecondary = styled.div`
  margin: 0 -2;
`
export function FooterLink(props) {
  return 
}

transition: base;
  transition-property: border-color;

  &[aria-current='true'] {
    border-color: white;
  }
`

export const TabItemLink = styled.a`
  color: white;
  text-decoration: none;
  padding: 2 3;
  display: block;
  overflow-x: auto;

  ${up(
    'md',
    css`
      padding: 3;
      overflow-x: visible;
    `,
  )}
`

export function RouterTabItem({ children, exact, to }) {
  return (
    
      {({ match }) => (
        
          
            {children}

color: darker;
  border-top: 1;
  border-bottom: 1;
  border-color: light300;
`

export const HeaderTitle = styled.h2`
  margin: 0;
  font-weight: 300;
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 18;
  margin-bottom: 2;

  ${up(
    'md',
    css`
      font-size: 24;
      margin-bottom: 0;
    `,
  )}
`

export const HeaderPrimary = styled.div`
  display: flex;
  flex-direction: column;
  margin: 3 0;

  ${up(
    'md',
    css`