How to use the @emotion/css.cx function in @emotion/css

export default function Form(
  {
    className,
    children,
    isValid,
    onSubmit,
    submitName
  }: Props
) {
  return (
    <form
      className={
        cx(
          css({
            padding: '1.2rem'
          }),
          className
        )}
      onSubmit={e => e.preventDefault()}
    >
      {children}
      {
        <input
          // include hidden submit to ensure enter always triggers submit
          // without submit input, browsers disable submit on enter
          type='submit'
          style={{ display: 'none' }}
        />
      }

export default function Pill(
  {
    className,
    children,
    onClick
  }: Props
) {
  return (
    <div
      className={cx(
        css({
          backgroundColor: brandColors.white,
          borderRadius: '1000vh',
          border: `.1rem solid`,
          color: brandColors.active,
          cursor: 'pointer',
          display: 'inline-block',
          padding: '.8rem 1.4rem',
          textAlign: 'center'
        }),
        className
      )}
      onClick={onClick}
    >
      {
        children

export default function TextInput(
  props: Props
) {
  return (
    <input
      {...props}
      className={cx(
        css(formElementStyles),
        css({
          backgroundColor: brandColors.white,
          color: brandColors.black,
          padding: '1rem 1.2rem',
          border: `solid .1rem ${brandColors.lightGray} !important`,
          width: '100%'
        }),
        props.className
      )}
      onChange={({ target }) => props.onChange(target.value)}
    />
  )
}

export default function InputGroup(props) {
  return (
    <div
      className={cx(
        css({
          width: '100%',
          marginBottom: '1rem'
        }),
        props.className
      )}
    >
      {props.children}
    </div>
  )
}

export default function PanelRow(
  {
    className,
    children
  }: Props
) {
  return (
    <div
      className={cx(
        css({
          backgroundColor: brandColors.white,
          borderBottom: `solid .1rem ${brandColors.reallyLightGray} !important`,
          color: brandColors.black,
          padding: '1rem 1.2rem',
          width: '100%'
        }),
        className
      )}
    >
      {children}
    </div>

  )
}

export default function Container(
  {
    className,
    style,
    children
  }: Props
) {
  return (
    <div
      className={
        cx(
          css({
            padding: '1.2rem'
          }),
          className
        )
      }
      style={style}
    >
      {
        children
      }
    </div>
  )
}

? renderIcon()
              : null
          }
          <input
            {...inputProps}
          />
        </div>
      }
      suggestions={options}
      shouldRenderSuggestions={
        shouldSearch
          ? shouldSearch
          : () => true
      }
      theme={{
        container: cx(
          css({
            width: '100%',
            position: 'relative'
          }),
          className
        ),
        input: css({
          ...formElementStyles,
          backgroundColor: brandColors.white,
          color: brandColors.black,
          padding: '1rem 1.2rem',
          width: '100%'
        }),
        suggestionsContainerOpen: css({
          backgroundColor: brandColors.white,
          border: `1px solid ${brandColors.lightGray}`,

export default function Modal(
  {
    children,
    className,
    isCompleteDisabled,
    isOpen,
    onComplete,
    onClose,
    title,
  }: Props
) {
  return (
    <ReactModal
      className={cx(
        css({
          '@media screen and (min-width: 600px)': {
            minWidth: '600px',
            borderRadius: '.3rem'
          },
          '@media screen and (max-width: 600px)': {
            width: '100%',
            height: '100%'
          },
          top: '50%',
          left: '50%',
          right: 'auto',
          bottom: 'auto',
          marginRight: '-50%',
          transform: 'translate(-50%, -50%)',
          position: 'absolute',

export default function PanelSection(props) {
  return (
    <div
      className={css({
        backgroundColor: brandColors.reallyReallyLightGray,
        paddingBottom: '1rem'
      })}
    >
      <div
        className={cx(
          commonCss,
          css({
            borderBottom: `solid .1rem ${brandColors.reallyLightGray} !important`,
            paddingBottom: '1rem',
            paddingTop: '1rem'
          })
        )}
      >
        {props.title}
        {
          props.summary &&
          <div
            className={css({
              fontSize: '.8rem'
            })}
          >