How to use the @project-r/styleguide.fontStyles.sansSerifRegular14 function in @project-r/styleguide

const styles = {
  button: css({
    outline: 'none',
    WebkitAppearance: 'none',
    background: 'transparent',
    border: 'none',
    padding: '0',
    cursor: 'pointer'
  }),
  previewTitle: css({
    // ...fontStyles.sansSerifMedium22,
    // lineHeight: '24px'
  }),
  previewCredits: css({
    ...fontStyles.sansSerifRegular14,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular16
    }
  }),
  noResults: css({
    color: colors.disabled
  })
}

const { P } = Interaction

const query = gql`
query getSearchResults($search: String, $after: String, $sort: SearchSortInput, $filters: [SearchGenericFilterInput!], $trackingId: ID) {
  search(first: 5, after: $after, search: $search, sort: $sort, filters: $filters, trackingId: $trackingId) {
    nodes {
      entity {

const PTiny = ({ children, note }) => (
  <div>
    {children}
  </div>
)

import { nest } from 'd3-collection'
import gql from 'graphql-tag'
import Link from '../Link/Href'
import withT from '../../lib/withT'

import {
  Loader,
  FormatTag,
  colors,
  fontStyles,
  mediaQueries
} from '@project-r/styleguide'

const styles = {
  h2: css({
    ...fontStyles.sansSerifRegular14,
    color: '#979797',
    margin: '0 0 15px 0',
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular16,
      margin: '12px 0 15px 0'
    }
  }),
  section: css({
    marginBottom: '25px',
    [mediaQueries.mUp]: {
      marginBottom: '30px',
      '& + &': {
        borderTop: `1px solid ${colors.divider}`
      }
    }
  }),

marginTop: 15,
    height: 90,
    position: 'sticky',

    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  }),
  optionText: css({
    fontSize: 19
  }),
  link: css({
    marginTop: 10,
    textAlign: 'center',
    ...fontStyles.sansSerifRegular14
  }),
  error: css({
    textAlign: 'center',
    width: '80%',
    margin: '10px auto',
    color: colors.error
  }),
  thankyou: css({
    padding: '30px 20px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center'
  }),
  confirm: css({
    textAlign: 'center'

if (node.type === 'text') {
    return node.value
  } else {
    if (node.children) {
      return node.children.map(renderCredits).join('')
    }
  }
}

const styles = {
  previewTitle: css({
    ...fontStyles.sansSerifMedium22,
    lineHeight: '24px'
  }),
  previewCredits: css({
    ...fontStyles.sansSerifRegular14,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular16
    }
  })
}

const ArticleItem = ({ title, credits }) => (
  <div>
    <h3>{title}</h3>
    <div>
      {credits &amp;&amp; credits.map(renderCredits).join('')}
    </div>
  </div>
)

class ArticleQuestion extends Component {

position: 'absolute',
    top: 10,
    right: 5
  }),
  expanded: css({
    marginBottom: pxToRem(30),
    marginTop: pxToRem(20)
  }),
  links: css({
    [mediaQueries.mUp]: {
      display: 'flex',
      justifyContent: 'space-between'
    }
  }),
  link: css({
    ...convertStyleToRem(fontStyles.sansSerifRegular14),
    display: 'block',
    cursor: 'pointer'
  }),
  dropdownItem: css({
    fontSize: pxToRem(16),
    [mediaQueries.mUp]: {
      fontSize: 'inherit'
    }
  })
}

class NotificationOptions extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {

}),
  textAreaEmpty: css({
    color: colors.lightText,
    '::-webkit-input-placeholder': {
      color: colors.lightText
    }
  }),
  maxLength: css({
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'flex-end',
    marginBottom: '-10px',
    padding: '0 12px'
  }),
  remaining: css({
    ...fontStyles.sansSerifRegular14,
    lineHeight: '20px',
    padding: '0 5px'
  })
}

class TextInput extends Component {
  getStats = () => {
    const { text = '', maxLength } = this.props
    return {
      count: text.length,
      progress: (text.length / maxLength) * 100
    }
  }

  renderProgress = () => {
    const { maxLength } = this.props

import PropTypes from 'prop-types'
import { css } from 'glamor'
import { convertStyleToRem, fontStyles } from '@project-r/styleguide'

import NotificationsIcon from 'react-icons/lib/md/notifications'
import NotificationsOffIcon from 'react-icons/lib/md/notifications-off'

const DEFAULT_SIZE = 24

export const styles = {
  link: css({
    cursor: 'pointer',
    display: 'block'
  }),
  text: css({
    ...convertStyleToRem(fontStyles.sansSerifRegular14),
    display: 'block'
  })
}

const Icon = ({ off, fill, children, size = DEFAULT_SIZE, style, onClick }) => {
  const Icon = off ? NotificationsOffIcon : NotificationsIcon

  return (
    <a style="{style}">
      
      {children &amp;&amp; (
        <span style="{{"></span></a>

height: thumbSize,
  background: colors.primary,
  cursor: 'pointer',
  outline: 'none'
}

const trackStyle = {
  background: colors.secondaryBg,
  height: trackHeight
}

const styles = {
  label: css({
    minHeight: thumbSize,
    display: 'inline-block',
    ...fontStyles.sansSerifRegular14,
    color: colors.secondary,
    paddingTop: 0
  }),
  slider: css({
    WebkitAppearance: 'none',
    background: 'transparent',
    outline: 'none',
    width: 260,
    padding: 0,
    marginTop: 0,
    marginRight: 10,
    marginBottom: 0,
    marginLeft: 0,
    verticalAlign: 'middle',
    ':focus': {
      outline: 'none'

const FontSizeOverlay = ({ t, onClose }) => {
  const [fontSize, setFontSize] = useFontSize(DEFAULT_FONT_SIZE)
  const fontPercentage = useRef()
  fontPercentage.current = `${Math.round(
    (100 * fontSize) / DEFAULT_FONT_SIZE
  )}%`

  const styles = {
    label: css({
      ...fontStyles.sansSerifRegular14,
      color: colors.secondary
    }),
    preview: css({
      borderTop: `1px solid ${colors.text}`,
      fontSize: fontSize
    }),
    subhead: css({
      marginTop: 12,
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      fontSize: '1.1875em',
      lineHeight: '1.25',
      [mediaQueries.mUp]: {
        fontSize: '1.5em'
      }