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

import memoize from 'utils/memoize';
import styled from '@emotion/styled';

// Internal
import AutoSuggest from 'components/AutoSuggest';
import FormField from 'components/FormField';
import Button from 'components/Button';
import Icon from 'components/Icon';
import { openModal } from 'lib/ui';
import AddEditContactModal from 'components/AddEditContactModal';
import plusIcon from 'icons/plus.svg';
import { getAddressNameMap, getRecipientSuggestions } from './selectors';

__ = __context('Send');

const RecipientName = styled.span(({ theme }) => ({
  textTransform: 'none',
  color: theme.primary,
}));

const EmptyMessage = styled.div(({ theme }) => ({
  fontSize: '.9em',
  color: theme.mixer(0.625),
  width: '100%',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
}));

const filterRecipients = memoize((suggestions, inputValue) => {
  if (!suggestions) return [];
  const query = inputValue || '';

NoShrinkText.displayName = 'Elements:NoShrinkText';

const ElementsRowAttributeContainer = styled(NoShrinkText)({
  color: colors.dark80,
  fontWeight: 300,
  marginLeft: 5,
});
ElementsRowAttributeContainer.displayName =
  'Elements:ElementsRowAttributeContainer';

const ElementsRowAttributeKey = styled.span({
  color: colors.tomato,
});
ElementsRowAttributeKey.displayName = 'Elements:ElementsRowAttributeKey';

const ElementsRowAttributeValue = styled.span({
  color: colors.slateDark3,
});
ElementsRowAttributeValue.displayName = 'Elements:ElementsRowAttributeValue';

class PartialHighlight extends PureComponent<{
  selected: boolean;
  highlighted: string | undefined | null;
  content: string;
}> {
  static HighlightedText = styled.span<{selected: boolean}>(props => ({
    backgroundColor: colors.lemon,
    color: props.selected ? `${colors.grapeDark3} !important` : 'auto',
  }));

  render() {
    const {highlighted, content, selected} = this.props;

const StringValue = styled.span({
  color: colors.cherryDark1,
});
StringValue.displayName = 'DataDescription:StringValue';

const ColorValue = styled.span({
  color: colors.blueGrey,
});
ColorValue.displayName = 'DataDescription:ColorValue';

const SymbolValue = styled.span({
  color: 'rgb(196, 26, 22)',
});
SymbolValue.displayName = 'DataDescription:SymbolValue';

const NumberValue = styled.span({
  color: colors.tealDark1,
});
NumberValue.displayName = 'DataDescription:NumberValue';

const ColorBox = styled.span<{color: string}>(props => ({
  backgroundColor: props.color,
  boxShadow: 'inset 0 0 1px rgba(0, 0, 0, 1)',
  display: 'inline-block',
  height: 12,
  marginRight: 5,
  verticalAlign: 'middle',
  width: 12,
}));
ColorBox.displayName = 'DataDescription:ColorBox';

const FunctionKeyword = styled.span({

import styled from '@emotion/styled'
import {
  space,
  width,
  height,
  display,
  fontSize,
  fontWeight,
  lineHeight,
  textAlign,
  color,
  borderRadius,
} from 'styled-system'

const Span = styled.span(
  space,
  width,
  height,
  display,
  fontSize,
  fontWeight,
  lineHeight,
  textAlign,
  color,
  borderRadius,
  {},
)

Span.defaultProps = {}

export default Span

minWidth: 200,
    margin: "28px auto 0 auto",
    padding: 20,

    backgroundRepeat: "no-repeat",
    backgroundSize: "contain"
  },
  ({ theme, uploading, src }) => ({
    border:
      uploading || src
        ? `1px dashed ${theme.constants.color.highlight.primary}`
        : `1px dashed ${theme.constants.color.border.primary}`
  })
);

const UploadLabel = styled.span(
  { marginTop: 20, textAlign: "center", zIndex: 1, marginBottom: 10 },
  ({ theme: { constants }, imageSrc }) => ({
    color: imageSrc ? constants.color.background : constants.color.text.primary
  })
);

const StyledInput = styled(Input)({}, () => ({
  width: "75%",
  maxWidth: 400,
  "> input": { width: "100%", margin: "0 auto" }
}));

const StyledLabel = styled.label({}, () => ({ height: "75%", width: "100%" }));

const FileUploadInput = styled.input({ display: "none" });

import styled from '@emotion/styled';

import Link from 'components/Link';
import NexusAddress from 'components/NexusAddress';
import { openModal } from 'lib/ui';

import TokenDetailsModal from './TokenDetailsModal';

__ = __context('User.Tokens');

const TokenComponent = styled.div(({ theme }) => ({
  padding: '1em 0',
  borderBottom: `1px solid ${theme.mixer(0.125)}`,
}));

const AccountName = styled.span(({ theme }) => ({
  fontWeight: 'bold',
  color: theme.foreground,
}));

const UnNamed = styled(AccountName)(({ theme }) => ({
  fontStyle: 'italic',
  color: theme.mixer(0.8),
}));

const Owner = styled.span(({ theme }) => ({
  color: theme.mixer(0.75),
  fontWeight: '75%',
}));

const Token = ({ token, owner }) => (

import {
  GA_EVENT_CATEGORY_SIDEBAR,
  getVersionBasePath,
  trackEvent
} from '../utils';
import {SidebarNav, colors, headerHeight} from 'gatsby-theme-apollo-core';

const headerPadding = 4;
const ContentHeader = styled.h4({
  color: colors.primary,
  backgroundColor: 'rgba(255, 255, 255, 0.85)',
  position: 'sticky',
  top: headerHeight
});

const HeaderInner = styled.span({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  margin: `-${headerPadding}px 0`,
  padding: `${headerPadding}px 0`,
  paddingRight: 10
});

const HeaderText = styled.span({
  lineHeight: 1.5
});

function getVersionLabel(version) {
  return `Version ${version}`;
}

color: colors.primary,
  backgroundColor: 'rgba(255, 255, 255, 0.85)',
  position: 'sticky',
  top: headerHeight
});

const HeaderInner = styled.span({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  margin: `-${headerPadding}px 0`,
  padding: `${headerPadding}px 0`,
  paddingRight: 10
});

const HeaderText = styled.span({
  lineHeight: 1.5
});

function getVersionLabel(version) {
  return `Version ${version}`;
}

function handleToggleAll(expanded) {
  trackEvent({
    eventCategory: GA_EVENT_CATEGORY_SIDEBAR,
    eventAction: 'toggle all',
    eventLabel: expanded ? 'expand' : 'collapse'
  });
}

function handleToggleCategory(title, expanded) {

/** @jsx jsx */
import { jsx } from '@emotion/core';
import styled from '@emotion/styled';

import { colors, gridSize } from '../theme';

const truncate = {
  minWidth: 0,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
};

export const SubtleText = styled.span({
  color: colors.N60,
});

export const H1 = styled.h1({
  fontSize: 28,
  fontWeight: 300,
  margin: '24px 0',
});
export const Truncate = ({ as: Tag, ...props }) => ;
Truncate.defaultProps = { as: 'div' };
export const Title = ({ as: Tag, crop, margin, ...props }) => {
  const gutter = gridSize * 3;
  const margins = {
    none: { margin: 0 },
    both: { marginBottom: gutter, marginTop: gutter },
    bottom: { marginBottom: gutter, marginTop: 0 },

padding: "0px 24px 10px",
  height: "100%"
}));

const InnerWrapper = styled.div({
  alignItems: "center",
  display: "flex",
  flexDirection: "column",
  height: "95%"
});

const SubTitle = styled.div({}, ({ theme: { constants } }) => ({
  fontSize: constants.fontSize.large
}));

const UploadSection = styled.span(
  {
    alignItems: "center",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",

    position: "relative",

    height: "75%",
    width: "35%",
    minWidth: 200,
    margin: "28px auto 0 auto",
    padding: 20,

    backgroundRepeat: "no-repeat",
    backgroundSize: "contain"