import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
import styled from 'styled-components';
export function createStyledIcon(Icon) {
  const StyledIcon = /*#__PURE__*/styled(Icon).withConfig({
    displayName: "base__StyledIcon",
    componentId: "sc-a9u0e1-0"
  })(["vertical-align:middle;", " ", ""], _ref => {
    let {
      color,
      theme
    } = _ref;
    return color && {
      color: theme.colors[color]
    };
  }, _ref2 => {
    let {
      size,
      theme
    } = _ref2;
    return size && {
      height: typeof size === 'number' ? theme.helpers.remCalc(size) : theme.spacing[size],
      width: typeof size === 'number' ? theme.helpers.remCalc(size) : theme.spacing[size]
    };
  });
  StyledIcon.defaultProps = {
    theme: defaultTheme,
    size: 'xLarge'
  };
  return StyledIcon;
}