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

import { Query } from 'containers/Apollo'
import { GoRepo } from 'react-icons/go'
import { useUser } from 'containers/User'
import { OwnerAvatar } from 'containers/OwnerAvatar'
import {
  Container,
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  CardFooter,
  FadeLink,
} from 'components'
import ProductInfo from './ProductInfo'

const RepositoryList = styled.ul`
  margin: -1 0;
  padding: 0;
`

const RepositoryItem = styled.li`
  margin: 0;
  padding: 1 0;
  list-style-type: none;
`

export function Home() {
  const user = useUser()
  if (!user) {
    return 
  }

import React from 'react'
import { Link, Route } from 'react-router-dom'
import styled, { css } from '@xstyled/styled-components'
import { up } from '@xstyled/system'

export const TabList = styled.ul`
  padding: 0;
  margin: 0;
  margin-bottom: -1rpx;
  list-style-type: none;
  display: flex;
  font-weight: medium;
  font-size: 14;
`

export const TabItem = styled.li`
  padding: 0;
  margin: 0;
  border-bottom: 1;
  border-color: transparent;
  transition: base;
  transition-property: border-color;

transition: base;

    &:hover {
      color: accent;
    }
  }
`

const ProjectBody = styled.div`
  position: relative;
  z-index: 1;
  max-width: 70%;
  flex: 0 0 70%;
`

const ProjectTags = styled.ul`
  margin: 0;
  padding: 0;
  margin-top: 3;
  font-family: monospace;
`

const Project = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: base;

  ${p => {
    switch (p.position) {
      case 'right':
        return css`

import React from 'react'
import { Link, Route } from 'react-router-dom'
import styled, { css } from '@xstyled/styled-components'
import { up } from '@xstyled/system'

export const TabList = styled.ul`
  padding: 0;
  margin: 0;
  margin-bottom: -1rpx;
  list-style-type: none;
  display: flex;
  font-weight: medium;
  font-size: 14;
`

export const TabItem = styled.li`
  padding: 0;
  margin: 0;
  border-bottom: 1;
  border-color: transparent;
  transition: base;
  transition-property: border-color;

import { GoRepo } from 'react-icons/go'
import { useUser } from 'containers/User'
import { AbsoluteRedirect } from 'containers/Router'
import { OwnerAvatar } from 'containers/OwnerAvatar'
import { isUserSyncing } from 'modules/user'
import {
  Container,
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  CardFooter,
  FadeLink,
} from 'components'

const RepositoryList = styled.ul`
  margin: -1 0;
  padding: 0;
`

const RepositoryItem = styled.li`
  margin: 0;
  padding: 1 0;
  list-style-type: none;
`

export function Home() {
  const user = useUser()
  if (!user)
    return process.env.NODE_ENV === 'production' ? (
      
    ) : null