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

// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { boolean, select, text } from '@storybook/addon-knobs';
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { RootTheme } from '../../theme';
// SUBJECT
import * as README from './README.md';
import { ControlLabel } from './ControlLabel.component';
import { Radio } from '../Radio';
import { Toggle } from '../Toggle';
import { Checkbox } from '../Checkbox';

const StyledStory = styled.div`
    padding: 1rem;
    color: #555;
`;

storiesOf('Components/Form/ControlLabel', module)
    .addParameters({ readme: { sidebar: README } })
    .add('Default', () =>
        React.createElement(() => {
            const [checked, setChecked] = React.useState(true);

            const labelPlacement = select<'left' | 'right'>(
                'labelPlacement',
                ['left', 'right'],
                'right'
            );
            const disabled = boolean('disabled', false);

/* eslint-disable jsx-a11y/accessible-emoji */
import React from 'react'
import { Link } from 'gatsby'
import styled, { Box } from '@xstyled/styled-components'
import { FaTwitter, FaGithub, FaLinkedin, FaEnvelope } from 'react-icons/fa'
import { Location } from '@reach/router'
import { Container } from '../components/Container'
import { useLangKey, toEnglish, toFrench } from '../components/I18nContext'

const Copyright = styled.div`
  color: light400;
  font-size: 12;
  font-family: monospace;
`

const Socials = styled.div`
  margin-left: auto;
  margin-right: -2;
  display: flex;
`

const SocialLink = styled.a`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44;

// REACT
import * as React from 'react';
// VENDOR
import styled from '@xstyled/styled-components';
import classnames from 'classnames';

export const StyledContent = styled.div`
    box-sizing: border-box;
    width: 100%;

    order: 0;
    flex-grow: 1;
`;

export interface ModalContentProps {
    children?: any;
    className?: string;
}

export const ModalContent = ({ children, className }: ModalContentProps) => (
    
        {children}

import styled, { Box } from '@xstyled/styled-components'
import { Query } from 'containers/Apollo'
import { GoRepo } from 'react-icons/go'
import { getTotalAssetsSize } from 'modules/stats'
import {
  Container,
  Card,
  CardHeader,
  CardTitle,
  CardBody,
  FadeLink,
  FileSize,
} from 'components'
import { useOwner } from './OwnerContext'

const Stat = styled.div`
  display: flex;
`

const StatLabel = styled.span`
  flex: 1;
`
const StatValue = styled.span`
  flex: 0 0 auto;
  color: white;
`

export function RepositorySummary({ repository }) {
  if (!repository.overviewBuild) {
    return <div>No info to display</div>
  }
  const {

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`
      flex-direction: row;
      align-items: center;
      margin: 4 0;
    `,
  )}
`

export const HeaderSecondaryLink = styled(FadeLink)`
  margin-top: 2;

`

export function FooterBody(props) {
  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 
}

import React from 'react'
import styled, { up, css } from '@xstyled/styled-components'
import { PageContainer, Container } from '../components/Container'
import dotBg from '../assets/dot-bg.svg'
import heroBg from '../assets/hero.svg'

const Dots = styled.div`
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(${dotBg});
  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;
`

const MixBackground = styled.div`
  pointer-events: none;

import React from 'react'
import { Link } from 'gatsby'
import styled, { ThemeProvider, css } from '@xstyled/styled-components'
import { usePrismTheme } from 'smooth-doc/components'
import { variant, th } from '@xstyled/system'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

const Editor = styled.div`
  background-color: secondary-bg;
  font-weight: 300;
  height: 400px;
  overflow-y: scroll;
  border-radius: 5;
  caret-color: ${th.color('white')};
  text-align: left;
  padding: 10px;

  textarea {
    margin: 0;
  }

  textarea:focus {
    outline: none;
  }

interface CellProps {
    area?: string;
    center?: boolean;
    children?: any;
    className?: string;
    debug?: boolean;
    height?: number | BreakpointType | undefined;
    left?: number | BreakpointType | undefined;
    middle?: boolean;
    responsiveCSS?: BreakpointType[];
    top?: number | BreakpointType | undefined;
    width?: number | BreakpointType | undefined;
}

const StyledCell = styled.div`
    height: 100%;
    min-width: 0;

    ${({responsiveCSS}) => {
        return responsiveCSS && responsiveCSS.map((k: BreakpointType) => {
            return breakpoints(k);
        });
    }}

    ${({ left }) => left && `grid-column-start: ${left}`};
    ${({ width }) => width && `grid-column-end: span ${width}`};
    ${({ top }) => top && `grid-row-start: ${top}`};
    ${({ height }) => height && `grid-row-end: span ${height}`};

    ${({ center }) => center && `text-align: center`};
    ${({ area }) => area && `grid-area: ${area}`};

line-height: 2.5;
    margin: 0 2;
  }
`

const neon = p => {
  const red = th.color('danger')(p)

  return keyframes`
    from {
      text-shadow: 0 0 10px ${red}, 0 0 20px ${red};
    }
  `
}

const Neon = styled.div`
  animation: ${neon} 1.5s ease-in-out infinite alternate;
  color: danger;
`

const Line = styled.div`
  margin: 0 2;
  flex: 1;
  border-bottom: 1px solid;
  border-bottom-color: light500;
`

const locales = {
  en: {
    share: `Share article`,
  },
  fr: {