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

&: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;
`

export const CardTitle = styled.h3`
  font-size: 22;
  font-weight: 500;
  margin: 0 0 2;
  color: light100;
`

export const CardText = styled.pBox`
  margin: 0;
  text-align: justify;

  a {
    transition: base;

css`
      font-size: 21;
    `,
  )};
`

const Alternate = styled.div`
  font-size: 0.8em;
  border: 1px solid;
  border-color: light500;
  border-radius: 6;
  padding: 2;
  background-color: light800;
`

const DiscussEdit = styled.box`
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 5 -2;

  font-size: 18;

  > * {
    padding: 0 2;
  }

  a {
    color: lighter;
    transition: base;

    &:hover {

import React from 'react'
import styled from '@xstyled/styled-components'

export const Container = styled.box`
  max-width: container-base;
  padding-left: 4;
  padding-right: 4;
  margin: 0 auto;
`

export function PageContainer(props) {
  return 
}

import React from 'react'
import { LiveConfig } from 'smooth-doc/components'
import styled, * as xstyledSc from '@xstyled/styled-components'
import * as xstyledSystem from '@xstyled/system'

const { css } = xstyledSc

const CustomBox = styled.box`
  white-space: normal;

  ${p =>
    p.col &&
    css`
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
      background-color: rgba(189, 73, 50, 0.15);
      border: 1;
      border-color: rgba(189, 73, 50, 0.2);
      font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;
    `}

import React from 'react'
import styled, { Box, up, css, th } from '@xstyled/styled-components'
import { useField } from 'react-final-form'
import { validate as validateEmail } from 'email-validator'
import { useLangKey } from './I18nContext'

const FormField = styled.box`
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
`

const FormFieldLabel = styled.label`
  font-family: monospace;
  font-size: 15;
  color: accent;
  margin-bottom: 2;
  display: flex;
  justify-content: space-between;
`

export const Input = styled.input`
  line-height: 1.2;

import React from 'react'
import styled from '@xstyled/styled-components'
import { Text, Box } from '@smooth-ui/core-sc'
import LayoutBody from 'components/LayoutBody'

const HeaderContainer = styled.box`
  min-height: 300;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: light200;
`

const ProductHeader = props => {
  const { beast, children, display1, headline } = props

  return (

export function getColor(node) {
  const { name } = node
  const dotIndex = name.indexOf('.')

  if (dotIndex !== -1 && dotIndex !== 0 && dotIndex !== name.length - 1) {
    return colors.file
  }
  if (node.parent && node.parent.data.name === 'node_modules') {
    return '#599e59'
  }

  return colors[name] || colors.default
}

const Container = styled.box`
  position: relative;
  margin: 0 auto;

  .rv-sunburst__series--radial__arc {
    stroke: ${th.color('gray800')} !important;
    stroke-opacity: 1;
    stroke-width: 1;
    transition: base;
    transition-property: opacity;
    cursor: pointer;

    &:hover {
      opacity: 0.5 !important;
    }
  }
`

export function getColor(node) {
  const { name } = node
  const dotIndex = name.indexOf('.')

  if (dotIndex !== -1 && dotIndex !== 0 && dotIndex !== name.length - 1) {
    return colors.file
  }
  if (node.parent && node.parent.data.name === 'node_modules') {
    return '#599e59'
  }

  return colors[name] || colors.default
}

const Container = styled.box`
  position: relative;
  margin: 0 auto;

  .rv-sunburst__series--radial__arc {
    stroke: ${th.color('gray800')} !important;
    stroke-opacity: 1;
    stroke-width: 1;
    transition: base;
    transition-property: opacity;
    cursor: pointer;

    &:hover {
      opacity: 0.5 !important;
    }
  }
`

.loading {
    transition: opacity 300ms;
    opacity: 0.5;
  }

  .ace_gutter {
    ${down(
      'sm',
      css`
        width: 5px !important;
      `,
    )}
  }
`

const PlaygroundContainer = styled.box`
  display: flex;
  flex-direction: column;
  background-color: lighter;
  height: calc(100vh - 67px);

  ${up(
    'md',
    css`
      flex-direction: row;
    `,
  )}
`

const PlaygroundEditors = styled(Box)`
  display: flex;
  flex: 1;

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;