content: import React from 'react';
  import styled from 'styled-components';
  import { A as BaseA } from 'normalized-styled-components';
  import is, { isOr } from 'styled-is';
  import PropTypes from 'prop-types';
  
  const A = styled(BaseA)`
    font-family: ${props => props.theme.font.families};
  `;
  
  const BaseLink = styled(({ component, children, ...rest }) =>
    React.createElement(component, rest, children)
  )`
    color: ${props => props.theme.primary};
    -webkit-text-fill-color: currentcolor;
    cursor: pointer;
    text-decoration: underline;
  
    ${isOr('secondary', 'reversed', 'white')`
      color: ${props => props.theme.white};
      -webkit-text-fill-color: currentcolor;
    `};
  
    ${isOr('tertiary')`
      color: ${props => props.theme.text};
      -webkit-text-fill-color: currentcolor;
    `};
  
    ${is('disabled')`
      color: ${props => props.theme.grey};
      -webkit-text-fill-color: currentcolor;
      pointer-events: none;
    `};
  `;
  
  /**
   * @example ./usage.md
   */
  const Anchor = ({ children, component, ...rest }) => (
    <BaseLink {...rest} activeClassName="active" component={component || A}>
      {children}
    </BaseLink>
  );
  
  Anchor.propTypes = {
    /**
     * The `<a>` text
     */
    children: PropTypes.node,
    secondary: PropTypes.bool
  };
  
  Anchor.defaultProps = {
    secondary: false
  };
  
  export default Anchor;
  