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

const ToolbarButton = ({ forwardRef, ...rest }) => {
  return ;
};

export default ToolbarButton;

ToolbarButton.propTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  forwardRef: PropTypes.object
};

ToolbarButton.defaultProps = {
  forwardRef: undefined
};

const StyledButton = styled.button(
  {
    alignItems: "center",
    cursor: "pointer",
    display: "flex",
    justifyContent: "center",

    border: "none",
    height: 28,
    width: 28,
    margin: "0 2px",
    transition: "all 0.2s ease",

    ":focus": {
      outline: "none",
      transform: "scale(1.15)"
    },

};

type ButtonProps = {
  /* Affects the visual style of the lozenge */
  appearance: 'default' | 'primary' | 'danger' | 'create' | 'warning',
  /* The value displayed within the lozenge. */
  variant: 'bold' | 'subtle',
};
type Props = ButtonProps & {
  children: Node,
  onClick: MouseEvent => void,
  onRemove: MouseEvent => void,
};

const PillWrapper = styled.div({ display: 'inline-flex' });
const PillButton = styled.button(({ appearance, variant }: Props) => {
  const fontSizeNumeric = 0.75;
  const fontSize = `${fontSizeNumeric}em`;
  const borderRadius = `${fontSizeNumeric * 2}em`;

  return {
    backgroundColor:
      variant === 'bold'
        ? boldBackgroundColor[appearance].default
        : subtleBackgroundColor[appearance].default,
    color: variant === 'bold' ? boldTextColor[appearance] : subtleTextColor[appearance],
    alignItems: 'center',
    border: 0,
    cursor: 'pointer',
    display: 'flex',
    fontSize: fontSize,
    fontWeight: 500,

const StyledListItem = styled.li({
  fontSize: '1rem',
  a: {
    ...listItemStyles,
    textDecoration: 'none',
    display: 'block',
    // paddingLeft: '5px',
    width: '80%',
    '&.active': {
      color: colors.primary,
      pointerEvents: 'none'
    }
  }
})

const ExpandAll = styled.button(listItemStyles, smallCaps, {
  display: 'flex',
  alignItems: 'center',
  marginBottom: 12,
  padding: 0,
  border: 0,
  fontSize: 12,
  lineHeight: 1,
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  svg: {
    marginLeft: -4,
    marginRight: 4
  }
})

position('fixed', 0),
  props =>
    !props.visible && {
      opacity: 0,
      visibility: 'hidden'
    },
  {
    backgroundColor: transparentize(0.5, colors.text2),
    transitionProperty: 'opacity, visibility',
    transitionDuration: '150ms',
    transitionTimingFunction: 'ease-in-out',
    zIndex: 1
  }
);

const ResetButton = styled.button(verticalAlign, size(20), {
  padding: 0,
  border: 0,
  background: 'none',
  cursor: 'pointer',
  outline: 'none',
  color: 'inherit',
  right: 10
});

const ResetIcon = styled(IconClose)(size(14), {
  display: 'block',
  fill: 'currentColor'
});

export default function Search(props) {
  const [focused, setFocused] = useState(false);

flexGrow: 1,
  overflow: 'auto'
});

const Content = styled.div({
  maxWidth: 800
});

const MobileHeader = styled(Header)({
  display: 'none',
  [breakpointMd]: {
    display: 'flex'
  }
});

const MenuButton = styled.button({
  padding: 0,
  marginRight: 20,
  color: 'inherit',
  border: 'none',
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  svg: css(size(24), {
    display: 'block',
    fill: 'currentColor'
  })
});

const MainHeading = styled.h1({
  display: 'flex',
  alignItems: 'center'

});

export const FieldWrapper = styled("div")({
  position: "relative",
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  "& + &": {
    marginTop: "20px"
  },
  span: {
    width: "74px"
  }
});

export const Button = styled.button(props => ({
  backgroundColor: props.selected ? "#F1F9FF" : "#FFFFFF",
  border: props.selected ? "2px solid #0094FF" : "1px solid #E1E1E1",
  boxShadow: "0 1px 6px 0 rgba(0,0,0,0.13)",
  borderRadius: "3px",
  padding: "6px 30px",
  fontFamily: theme.fontFamily,
  fontSize: "16px",
  fontWeight: theme.weight.bold,
  color: props.selected ? theme.color.dark : theme.color.grey,
  "&:hover": {
    cursor: "pointer"
  }
}));

export const TextSize = styled.input({
  textAlign: "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,
  overflow: 'hidden',
  ...theme.brandLink,
}));

const ShortHelpButton = styled.button({
  textTransform: 'uppercase',
  fontSize: 12,
  fontWeight: 'bolder',
  color: 'currentColor',
  border: '1px solid rgba(0, 0, 0, 0.1)',
  textAlign: 'center',
  borderRadius: 2,
  cursor: 'pointer',
  display: 'inlineBlock',
  padding: 0,
  margin: '0 0 0 5px',
  backgroundColor: 'inherit',
  outline: 0,
  width: 30,
  flexShrink: 0,
});

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

import { flex } from 'styles/flex';
import { BUTTONS, SHADOWS, DARKEN } from 'config/enums';
import { colors } from 'styles/colors';
import { hoverAndFocus } from 'styles/mixins';
import { darken as darkenFn } from 'polished';

const defaultShadowColor = '#08080854';

export const acceptStyles = ({ styles }) => styles;

const Button = emotion.button(
  {
    ...flex.horizontal,
    ...flex.centerHorizontal,
    transition: 'all 150ms linear',
    padding: '10px 30px',
    borderRadius: 3,
    fontSize: 14,
    outline: 'none'
  },
  ({ disabled, type = BUTTONS.PRIMARY, shadow = SHADOWS.ALWAYS, darken = DARKEN.SMALL }) => {
    const buttonType = (buttonTypes[type] || buttonTypes[BUTTONS.DEFAULT])({
      shadow
    });

    return {
      border: 'none',

import {graphql} from 'gatsby';
import {size} from 'polished';

const OuterContentWrapper = styled.div({
  flexGrow: 1,
  overflow: 'auto'
});

const MobileHeader = styled(Header)({
  display: 'none',
  [breakpointMd]: {
    display: 'flex'
  }
});

const MenuButton = styled.button({
  padding: 0,
  marginRight: 20,
  color: 'inherit',
  border: 'none',
  background: 'none',
  outline: 'none',
  cursor: 'pointer',
  svg: css(size(24), {
    display: 'block',
    fill: 'currentColor'
  })
});

const anchorPattern = /<a href="([\w/#-]+)">([\w\s.,-]+)&lt;\/a&gt;/gm;

export default class Page extends Component {</a>

import React, { Component } from 'react';
import styled from '@emotion/styled';
import { timing } from 'styles';
import { color } from 'utils';

const ButtonComponent = styled.button(
  {
    display: 'inline-flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    padding: '0 1em',
    height: '2.8em',
    border: 'none',
    outline: 'none',
    background: 'transparent',
    cursor: 'pointer',
    whiteSpace: 'nowrap',
    userSelect: 'none',
    transitionProperty: 'border-color, color',
    transitionDuration: timing.normal,