How to use the @emotion/styled.a function in @emotion/styled

}))

const StyledAnchor = styled.a({
  display: 'flex',
  alignItems: 'center',
  height: '100%',
  padding: '0 4px',
  fontSize: 18,
  color: colors.primary,
  textDecoration: 'none',
  ':hover': {
    opacity: colors.hoverOpacity
  }
})

const SubpageAnchor = styled.a({
  display: 'block',
  color: colors.text1,
  textDecoration: 'none',
  whiteSpace: 'nowrap',
  ':hover': {
    opacity: colors.hoverOpacity
  },
  ':not(:last-child)': {
    marginBottom: 8
  }
})

export default function NavItem(props) {
  return (
    
      {props.children}

space,
  width,
  maxWidth,
  display,
  alignItems,
  justifyContent,
  fontSize,
  fontWeight,
  textAlign,
  color,
  borders,
  borderColor,
  borderRadius
} from "styled-system"

const A = styled.a(
  space,
  width,
  maxWidth,
  display,
  fontSize,
  fontWeight,
  textAlign,
  color,
  alignItems,
  justifyContent,
  borders,
  borderColor,
  borderRadius,
  {
    boxSizing: "border-box",
    textDecoration: "none",

space,
  width,
  maxWidth,
  display,
  alignItems,
  justifyContent,
  fontSize,
  fontWeight,
  textAlign,
  color,
  borders,
  borderColor,
  borderRadius
} from "styled-system"

const TextLink = styled.a(
  space,
  width,
  maxWidth,
  display,
  fontSize,
  fontWeight,
  textAlign,
  color,
  alignItems,
  justifyContent,
  borders,
  borderColor,
  borderRadius,
  {
    transition: ".25s ease-in color",
    boxSizing: "border-box",

opacity: 0,
    visibility: 'hidden',
    transitionProperty: 'opacity, visibility',
    transitionDuration: '200ms',
    transitionTimingFunction: 'ease-in-out'
  },
  ':hover': {
    zIndex: 1,
    [subpageElements]: {
      opacity: 1,
      visibility: 'visible'
    }
  }
}));

const StyledAnchor = styled.a({
  display: 'flex',
  alignItems: 'center',
  height: '100%',
  padding: '0 4px',
  fontSize: 18,
  color: colors.primary,
  textDecoration: 'none',
  ':hover': {
    opacity: colors.hoverOpacity
  }
});

const SubpageAnchor = styled.a({
  display: 'block',
  color: colors.text1,
  textDecoration: 'none',

maxWidth,
  display,
  alignItems,
  justifyContent,
  fontSize,
  fontWeight,
  textAlign,
  color,
  borders,
  borderColor,
  borderRadius
} from "styled-system"

import theme from "../theme"

const A = styled.a(
  space,
  width,
  maxWidth,
  display,
  alignItems,
  justifyContent,
  fontSize,
  fontWeight,
  textAlign,
  color,
  borders,
  borderColor,
  borderRadius,
  {
    boxSizing: "border-box",
    textDecoration: "none",

}
});

const AsideHeading = styled.h4({
  fontWeight: 600
});

const AsideLinkWrapper = styled.h5({
  display: 'flex',
  marginBottom: 0,
  ':not(:last-child)': {
    marginBottom: 16
  }
});

const AsideLinkInner = styled.a({
  display: 'flex',
  alignItems: 'center',
  color: colors.text2,
  textDecoration: 'none',
  ':hover': {
    color: colors.text3
  },
  svg: {
    width: 20,
    height: 20,
    marginRight: 6,
    fill: 'currentColor'
  }
});

function AsideLink(props) {

import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';

const Wrapper = styled.div(({ theme }) => ({
  margin: '0 0 10px',
  display: 'flex',
  ...theme.brand,
}));

const HeadingLink = styled.a(({ theme }) => ({
  textDecoration: 'none',
  flexGrow: 1,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  border: '1px solid rgba(0, 0, 0, 0.1)',
  borderRadius: 2,
  textTransform: 'uppercase',
  letterSpacing: '1.5px',
  fontSize: '12px',
  fontWeight: 'bolder',
  color: 'currentColor',
  textAlign: 'center',
  cursor: 'pointer',
  padding: '5px',
  margin: 0,

import {colors} from '@apollo/space-kit/colors';

const Container = styled.div({
  display: 'flex',
  flexShrink: 0,
  width: 240,
  [breakpoints.lg]: {
    width: 'auto',
    marginRight: 0
  },
  [breakpoints.md]: {
    display: 'none'
  }
});

const StyledLink = styled.a({
  display: 'flex',
  alignItems: 'center',
  color: colors.indigo.dark,
  lineHeight: 2,
  textDecoration: 'none',
  ':hover': {
    color: colors.indigo.darker
  }
});

const StyledIcon = styled(IconProceed)({
  height: '0.75em',
  marginLeft: '0.5em'
});

export default function HeaderButton() {

color: colors.text3
  },
  ':not(:last-child)': {
    marginRight: 24
  }
});

const SocialLinks = styled.div({
  display: 'flex',
  marginLeft: 'auto',
  [breakpoints.md]: {
    marginTop: 8
  }
});

const SocialLink = styled.a({
  color: colors.text2,
  ':hover': {
    color: colors.text3
  },
  ':not(:last-child)': {
    marginRight: 24
  },
  svg: {
    ...size(24),
    display: 'block',
    fill: 'currentColor'
  }
});

export default function DocsetSwitcher(props) {
  const menuRef = useRef(null);

const AsideHeading = styled.h3({
  fontWeight: 600,
  fontSize: '1.225rem',
  marginBottom: '1.0875rem',
})

const AsideLinkWrapper = styled.h4({
  display: 'flex',
  fontSize: '1rem',
  marginBottom: 0,
  ':not(:last-child)': {
    marginBottom: 16,
  },
})

const AsideLinkInner = styled.a({
  display: 'flex',
  alignItems: 'center',
  color: colors.text2,
  textDecoration: 'none',
  ':hover': {
    color: colors.text3,
  },
  svg: {
    width: 20,
    height: 20,
    marginRight: 6,
    fill: 'currentColor',
  },
})

function AsideLink(props) {