message: Update SimpleCurrencyInput component
diff: -import React from 'react';
  +/** @jsx jsx */
  +
  import PropTypes from 'prop-types';
  -import styled, { css, cx } from 'react-emotion';
  +import styled from '@emotion/styled';
  +import { css, ClassNames, jsx } from '@emotion/core';
  import { withTheme } from 'emotion-theming';
  import { themePropType } from '../../../../util/shared-prop-types';
  @@ -33,7 +35,7 @@ const iconInvalidStyles = ({ theme, invalid, disabled }) =>
  // This is dymanic and cannot be done in pure CSS. No need for
  // a label.
  -const iconOverrideWidthStyles = ({ symbol = '' }) => css`
  +const iconOverrideWidthStyles = ({ symbol = '' }) => `
  width: ${symbol.length}ch;
  `;
  @@ -48,17 +50,17 @@ const inputStyles = css`
  text-align: right;
  `;
  -const inputPrependStyles = ({ theme, symbol = '', prependSymbol }) =>
  +const inputPrependStyles = ({ theme, symbol = '', prependSymbol, stringCss }) =>
  prependSymbol &&
  - css`
  + stringCss`
  label: currency-input__input--prepend-symbol;
  padding-left: ${theme.spacings.exa};
  padding-left: calc(${theme.spacings.giga} + ${symbol.length}ch);
  `;
  -const inputAppendStyles = ({ theme, symbol = '', prependSymbol }) =>
  +const inputAppendStyles = ({ theme, symbol = '', prependSymbol, stringCss }) =>
  !prependSymbol &&
  - css`
  + stringCss`
  label: currency-input__input--prepend-symbol;
  padding-right: ${theme.spacings.exa};
  padding-right: calc(${theme.spacings.giga} + ${symbol.length}ch);
  @@ -76,18 +78,21 @@ const SimpleCurrencyInput = ({
  disabled,
  numberMask,
  ...props
  -}) => {
  - const iconWidthClassName = iconOverrideWidthStyles({ symbol });
  +}) => (
  + <ClassNames>
  + {({ css: stringCss, cx }) => {
  const inputClassName = cx(
  inputStyles,
  inputPrependStyles({
  theme,
  symbol,
  + stringCss,
  prependSymbol
  }),
  inputAppendStyles({
  theme,
  symbol,
  + stringCss,
  prependSymbol
  })
  );
  @@ -99,7 +104,10 @@ const SimpleCurrencyInput = ({
  prependSymbol && (
  <CurrencyIcon
  {...{ hasWarning, invalid, disabled }}
  - className={cx(className, iconWidthClassName)}
  + css={css`
  + ${iconOverrideWidthStyles({ symbol })};
  + `}
  + className={className}
  symbol={symbol}
  >
  {symbol}
  @@ -110,7 +118,10 @@ const SimpleCurrencyInput = ({
  !prependSymbol && (
  <CurrencyIcon
  {...{ hasWarning, invalid, disabled }}
  - className={cx(className, iconWidthClassName)}
  + css={css`
  + ${iconOverrideWidthStyles({ symbol })};
  + `}
  + className={className}
  symbol={symbol}
  >
  {symbol}
  @@ -122,7 +133,9 @@ const SimpleCurrencyInput = ({
  {...{ ...props, hasWarning, invalid, disabled }}
  />
  );
  -};
  + }}
  + </ClassNames>
  +);
  SimpleCurrencyInput.propTypes = {
  theme: themePropType.isRequired,
  