import PropTypes from 'prop-types' ; import styled from 'styled-components' ; import { fontSize , color , space } from 'styled-system' ; import defaultTheme from './../theme' ; const defaultValues = { theme : defaultTheme , bg : 'light' , color : 'link' , fontSize : 1 , px : 3 , } ; const fromTheme = props => { const values = { ... defaultValues , ... props , } ; return { ... fontSize ( values ) , ... space ( values ) , ... color ( values ) , fontWeight : values . theme . regular , color : values . theme . colors . grey [ 600 ] , '&:hover, &:focus' : { color : values . theme . colors . link , background : values . theme . colors . grey [ 50 ] , } , } ; } ; const MenuItem = styled . div `
  min-height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 140px;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;

  &:hover,
  &:focus {
    text-decoration: none;
  }

  ${ fromTheme }
` ; MenuItem . displayName = 'MenuItem' ; MenuItem . propTypes = { /**
     * Menu item contents.
     */ children : PropTypes . node , } ; export default MenuItem ;