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

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 {
        __typename
        ... on Document {

...fontStyles.serifTitle22
    },
    ...fontStyles.serifTitle26
  }),
  summaryWrapper: css({
    padding: '13px 20px 15px 20px',
    background: colors.secondaryBg,
    marginTop: 8,
    marginBottom: 8,
    // marginLeft: -26,
    marginRight: 0
  }),
  summary: css({
    width: '100%',
    display: 'flex',
    ...fontStyles.sansSerifRegular16,
    lineHeight: 1.3,
    overflowWrap: 'break-word',
    '& div:nth-child(1)': {
      width: '30%'
    },
    '& div:nth-child(2)': {
      width: '10%'
    },
    '& div:nth-child(3)': {
      width: '35%',
      paddingRight: 10
    },
    '& div:nth-child(4)': {
      width: '15%',
      paddingRight: 15
    },

import { css } from 'glamor'

import withT from '../../lib/withT'

import FieldSet from '../FieldSet'
import Credential from '../Credential'

import { Label, A, fontStyles } from '@project-r/styleguide'

const styles = {
  icons: css({
    padding: '15px 0'
  }),
  credential: css({
    display: 'block',
    ...fontStyles.sansSerifRegular16,
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  })
}

const fields = t => [
  {
    label: t('profile/credentials/label'),
    name: 'credential',
    validator: value =>
      value && value.length > 40 && t('profile/credentials/errors/tooLong')
  }
]

const Credentials = ({
  user,

import { css, merge } from 'glamor'
import { fontStyles, mediaQueries } from '@project-r/styleguide'
import EmptyState from './EmptyState'
import track from '../../lib/piwik'

const styles = {
  list: css({
    listStyle: 'none',
    padding: '0 0 40px',
    margin: 0
  }),
  listItem: css({
    display: 'inline-block',
    marginRight: 30,
    cursor: 'pointer',
    ...fontStyles.sansSerifRegular16,
    [mediaQueries.mUp]: {
      ...fontStyles.sansSerifRegular18,
      marginRight: 50
    }
  }),
  listItemSelected: css({
    textDecoration: 'underline'
  })
}

const trackSearch = (query, filter, resultCount) => {
  track([
    'trackSiteSearch',
    query.toLowerCase(),
    `${filter.key}:${filter.value}`,
    resultCount

transition: 'color .2s',
    '&[disabled]': {
      cursor: 'default',
      color: colors.disabled
    },
    '&[data-active="true"]': {
      color: colors.primary
    }
  })
)

export const textButton = merge(
  button,
  css({
    color: colors.textColor,
    ...fontStyles.sansSerifRegular16,
    display: 'inline-flex',
    flexDirection: 'row',
    padding: 0,
    backgroundColor: 'transparent',
    transition: 'color .2s, background-color 2s',
    '&[disabled]': {
      color: colors.disabled
    },
    '&:hover:not([disabled])': {
      color: colors.primary
    },
    '&[data-active="true"]:not([disabled])': {
      color: colors.primary
    }
  })
)

<br>
                        
                      )}
                      {mandatoryCandidates.length &gt; 0 &amp;&amp; (
                        <span>
                           {vt('vote/election/legendHeart')}
                        </span>
                      )}
                    
                  )}
                  {election.numSeats &gt; 1 &amp;&amp;
                    recommended.length &gt; 0 &amp;&amp;
                    inProgress &amp;&amp; (
                      <button style="{{"> this.selectRecommendation()}
                      &gt;
                        {vt('vote/members/recommendation')}
                      </button>
                    )}
                
              )}
              {dangerousDisabledHTML &amp;&amp; (
                <div style="{{">
                  <div>
                    </div></div>

[mediaQueries.mUp]: {
      float: 'right',
      width: `calc(100% - ${PORTRAIT_SIZE_M + 20}px)`,
      paddingBottom: 30
    }
  }),
  portrait: css({
    width: PORTRAIT_SIZE_S,
    height: PORTRAIT_SIZE_S,
    [mediaQueries.mUp]: {
      width: PORTRAIT_SIZE_M,
      height: PORTRAIT_SIZE_M
    }
  }),
  headInfo: css({
    ...fontStyles.sansSerifRegular16,
    position: 'absolute',
    bottom: 5,
    right: 0,
    left: PORTRAIT_SIZE_S + 10,
    [mediaQueries.mUp]: {
      left: PORTRAIT_SIZE_M + 20
    }
  }),
  headInfoNumber: css({
    display: 'inline-block',
    paddingTop: 3,
    float: 'right',
    marginRight: 10,
    verticalAlign: 'middle',
    [mediaQueries.mUp]: {
      marginRight: 0,

[mediaQueries.mUp]: {
      paddingLeft: 30
    }
  }),
  ul: css({
    marginTop: 0,
    marginBottom: 5,
    paddingLeft: 25
  }),
  ulNote: css({
    marginTop: -5,
    marginBottom: 5
  }),
  smallP: css({
    margin: 0,
    ...fontStyles.sansSerifRegular16
  })
}

const SmallP = ({ children, ...props }) => (
  <p>
    {children}
  </p>
)

class CustomizePackage extends Component {
  constructor(props) {
    super(props)
    this.state = {}
    this.focusRefSetter = ref =&gt; {
      this.focusRef = ref
    }

import React from 'react'

import { css } from 'glamor'
import SignIn from '../../Auth/SignIn'
import SignOut from '../../Auth/SignOut'
import { Link } from '../../../lib/routes'
import withT from '../../../lib/withT'

import { Label, fontStyles, linkRule } from '@project-r/styleguide'

const styles = {
  container: css({
    ...fontStyles.sansSerifRegular16,
    paddingTop: '20px'
  })
}

const Me = ({ me, children, t }) => (
  <div>
    {children}
    {me &amp;&amp; <label>{me.name || me.email}</label>}
    <br>
    {me &amp;&amp; (
      <div>
        
          <a>{t('Frame/Popover/myaccount')}</a>
        
        <br>
        </div></div>

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}`
      }
    }
  }),
  link: css({
    color: 'inherit',
    textDecoration: 'none'
  })