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

// Internal
import { newUID } from 'utils/etc';

const indentSpace = 20;

const Field = styled.div(({ indent = 0, theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '1em 0',
  borderBottom: `1px solid ${theme.mixer(0.125)}`,
  marginLeft: indent * indentSpace,
}));

const Label = styled.label({
  position: 'relative',
  paddingRight: '3em',
  flexShrink: 1,
  flexGrow: 1,
});

const SubLabel = styled.div(({ theme }) => ({
  fontSize: '.9em',
  color: theme.mixer(0.75),
}));

const Input = styled.div({
  flexShrink: 0,
  width: 350,
});

// Internal
import { newUID } from 'utils';

const FormFieldComponent = styled.div(
  { marginTop: '1em' },
  ({ inline }) =>
    inline && {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginTop: '',
    }
);

const Label = styled.label(
  {
    display: 'block',
    position: 'relative',
    marginBottom: '.2em',
  },
  ({ capitalize }) =>
    capitalize && {
      textTransform: 'uppercase',
      fontSize: '.8em',
    }
);

const Hint = styled.div(({ theme }) => ({
  position: 'absolute',
  visibility: 'hidden',
  opacity: 0,

// Internal
import { newUID } from 'utils/misc';

const FormFieldComponent = styled.div(
  { marginTop: '1em' },
  ({ inline }) =>
    inline && {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginTop: '',
    }
);

const Label = styled.label(
  {
    display: 'flex',
    alignItems: 'center',
    position: 'relative',
    marginBottom: '.2em',
  },
  ({ capitalize }) =>
    capitalize && {
      textTransform: 'uppercase',
      fontSize: '.8em',
    }
);

const Hint = styled.div(({ theme }) => ({
  position: 'absolute',
  visibility: 'hidden',

import gql from 'graphql-tag';
import { useQuery, useMutation } from '@apollo/react-hooks';
import { useState } from 'react';

import styled from '@emotion/styled';

import Layout from '../../templates/layout';

const FormGroup = styled.div({
  display: 'flex',
  marginBottom: 8,
  width: '100%',
  maxWidth: 500,
});

const Label = styled.label({
  width: 200,
});

const Input = styled.input({
  width: '100%',
  padding: 8,
  fontSize: '1em',
  borderRadius: 4,
  border: '1px solid hsl(200,20%,70%)',
});

const ADD_POST = gql`
  mutation AddPost(
    $title: String!
    $body: String!
    $authorId: ID!

openErrorDialog,
} from 'actions/overlays';
import { loadMyAccounts } from 'actions/accountActionCreators';
import { rpcErrorHandler } from 'utils/form';
import { getAccountOptions, getRegisteredFieldNames } from './selectors';
import AmountField from './AmountField';

const AccountSelectors = styled.div({
  display: 'grid',
  gridTemplateColumns: 'auto 1fr',
  gridTemplateRows: 'auto auto',
  gridGap: '1em .5em',
  alignItems: 'center',
});

const Label = styled.label({
  paddingRight: '2em',
});

const Buttons = styled.div({
  marginTop: '1em',
  display: 'flex',
  justifyContent: 'flex-end',
});

const mapStateToProps = ({
  settings: { minConfirmations, fiatCurrency },
  core: {
    info: { paytxfee },
  },
  myAccounts,
  common: { encrypted, loggedIn },

position: 'relative',
  width: '100%',
  height: '4.5rem',
  marginBottom: '0.5rem',
  borderRadius: '5px',
  border: '2px inset #eee',
})
const centerLabelStyles = {
  top: '1rem',
  fontSize: '1em',
}
const pushedUpLabelStyles = {
  top: '0.4rem',
  fontSize: '0.75em',
}
const Label = styled.label(
  {
    position: 'absolute',
    left: '1rem',
    right: '1rem',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    color: '#999',
    transition: 'top 100ms, font-size 100ms',
    transitionTimingFunction: 'ease-out',
    textAlign: 'left',
  },
  ({ hasValue, hasFocus }) => ({
    ...(hasValue || hasFocus ? pushedUpLabelStyles : centerLabelStyles),
    ':focus': pushedUpLabelStyles,
  }),

getRegisteredFieldNames,
  getAccountBalance,
} from './selectors';
import AmountField from './AmountField';

__ = __context('Send');

const AccountSelectors = styled.div({
  display: 'grid',
  gridTemplateColumns: 'auto 1fr',
  gridTemplateRows: 'auto auto',
  gridGap: '1em .5em',
  alignItems: 'center',
});

const Label = styled.label({
  paddingRight: '2em',
});

const Buttons = styled.div({
  marginTop: '1em',
  display: 'flex',
  justifyContent: 'flex-end',
});

const formName = 'moveBetweenAccounts';
const valueSelector = formValueSelector(formName);
const mapStateToProps = state => {
  const {
    settings: { minConfirmations, fiatCurrency },
    core: {
      info: { locked },

import * as React from 'react';
import styled from '@emotion/styled';
import {themeGet} from '@styled-system/theme-get';
import {useUID} from 'react-uid';
import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
import {ThemeVariants} from '@twilio-paste/theme';
import {Box} from '@twilio-paste/box';
import {useActiveSiteTheme} from '../context/ActiveSiteThemeContext';

interface ThemeSwitcherProps {
  children?: React.ReactElement;
}

const StyledThemeSwitcherLabel = styled.label<{}>(props => ({
  cursor: 'pointer',
  display: 'inline-block',
  fontSize: themeGet('fontSizes.fontSize30')(props),
  lineHeight: themeGet('lineHeights.lineHeight30')(props),
  padding: `${themeGet('space.space20')(props)} ${themeGet('space.space40')(props)}`,
  '&:hover': {
    textDecoration: 'underline',
  },
}));

const StyledThemeSwitcherRadio = styled.input<{}>(props => ({
  opacity: 0,
  position: 'absolute',
  [`&:focus + ${StyledThemeSwitcherLabel}`]: {
    boxShadow: themeGet('shadows.shadowFocus')(props),
    textDecoration: 'underline',

} from 'actions/overlays';

import PinLoginModal from 'components/User/PinLoginModal';

const SmallModal = styled(Modal)(({ theme }) => ({
  width: 'auto',
}));

const Container = styled.div(({ theme }) => ({
  margin: '1em',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
}));

const OptionLabel = styled.label(({ theme }) => ({
  color: theme.primary,
  marginTop: '1.75em',
}));

const Option = styled.div({
  display: 'flex',
  flexDirection: 'row',
});

const Buttons = styled.div({
  margin: '1em',
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
});

} from 'actions/overlays';

import PinLoginModal from 'components/User/PinLoginModal';

const SmallModal = styled(Modal)(({ theme }) => ({
  width: 'auto',
}));

const Container = styled.div(({ theme }) => ({
  margin: '1em',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
}));

const OptionLabel = styled.label(({ theme }) => ({
  color: theme.primary,
  marginTop: '1.75em',
}));

const Option = styled.div({
  display: 'flex',
  flexDirection: 'row',
});

const Buttons = styled.div({
  margin: '1em',
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
});