How to use the @project-r/styleguide.fontFamilies.sansSerifMedium function in @project-r/styleguide

Button,
  mediaQueries,
  Editorial,
  TeaserFrontTileRow,
  TeaserFrontTile,
  TeaserFrontTileHeadline,
  TeaserFrontLead
} from '@project-r/styleguide'
import { countFormat } from '../../lib/utils/format'
import withT from '../../lib/withT'

import Results from './Results'

const styles = {
  number: css({
    fontFamily: fontFamilies.sansSerifMedium,
    whiteSpace: 'nowrap',
    lineHeight: '96px',
    fontSize: 80,
    [mediaQueries.lUp]: {
      lineHeight: '140px',
      fontSize: 116
    }
  }),
  lead: css({
    ...fontStyles.sansSerifRegular23
  }),
  big: css({
    fontFamily: fontFamilies.sansSerifMedium,
    lineHeight: '44px',
    fontSize: 38,
    padding: '0 5%',

}
  }),
  span: css({
    float: 'left',
    paddingLeft: `${GUTTER / 2}px`,
    paddingRight: `${GUTTER / 2}px`,
    minHeight: 1,
    width: '50%'
  }),
  title: css({
    fontFamily: fontFamilies.sansSerifRegular,
    fontSize: 19,
    lineHeight: '28px'
  }),
  packageTitle: css({
    fontFamily: fontFamilies.sansSerifMedium,
    fontSize: 21,
    lineHeight: '32px'
  }),
  packageImage: css({
    float: 'right',
    maxWidth: 150,
    maxHeight: 200,
    paddingLeft: 10,
    [mediaQueries.mUp]: {
      paddingLeft: 30
    }
  })
}

class CustomizePackage extends Component {
  constructor (props) {

position: 'sticky',
    padding: '10px 0',
    borderBottom: `0.5px solid ${colors.divider}`,
    display: 'flex',
    minHeight: 55,
    top: HEADER_HEIGHT - 1,
    [mediaQueries.onlyS]: {
      top: HEADER_HEIGHT_MOBILE - 1
    }
  }),
  strong: css({
    fontFamily: fontFamilies.sansSerifMedium
  }),
  error: css({
    color: colors.error,
    fontFamily: fontFamilies.sansSerifMedium
  }),
  closed: css({
    marginTop: 35,
    background: colors.primaryBg,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 30,
    textAlign: 'center',
    marginBottom: 30
  }),
  progressIcon: css({
    marginLeft: 5,
    marginTop: 3,
    minHeight: 30
  })

fontFamily: fontFamilies.sansSerifRegular,
    fontSize: 17,
    lineHeight: '25px',
    listStyle: 'none',
    margin: '10px 0',
    padding: 0,
  }),
  item: css({
    borderTop: `1px solid ${colors.divider}`,
    padding: '5px 0',
    ':last-child': {
      borderBottom: `1px solid ${colors.divider}`,
    },
  }),
  highlight: css({
    fontFamily: fontFamilies.sansSerifMedium,
    fontWeight: 'normla',
  }),
}

export const Item = ({ children }) => (
  <li>{children}</li>
)

const List = ({ children, ...props }) =&gt; (
  <ul>
    {children}
  </ul>
)

List.Item = Item

position: 'relative',
    [mediaQueries.mUp]: {
      paddingLeft: CONTENT_PADDING
    }
  }),
  hr: css({
    height: 0,
    border: 0,
    borderTop: `1px solid ${colors.divider}`
  }),
  title: css({
    marginBottom: 15
  }),
  label: css({
    fontSize: 17,
    fontFamily: fontFamilies.sansSerifMedium,
    [mediaQueries.mUp]: {
      lineHeight: '25px',
      position: 'absolute',
      left: 0,
      top: BLOCK_PADDING_TOP + 3
    }
  })
}

const Label = ({ children }) =&gt; <div>{children}</div>

const { H1, P } = Interaction

const weekday = swissTime.format('%A')

const Event = withT(

{legend.map((group, i) => (
          
        ))}

paddingLeft: `${GUTTER / 2}px`,
    paddingRight: `${GUTTER / 2}px`,
    [mediaQueries.mUp]: {
      paddingLeft: `${GUTTER}px`,
      paddingRight: `${GUTTER}px`
    },
    minHeight: 1,
    width: '50%'
  }),
  title: css({
    fontFamily: fontFamilies.sansSerifRegular,
    fontSize: 19,
    lineHeight: '28px'
  }),
  packageTitle: css({
    fontFamily: fontFamilies.sansSerifMedium,
    fontSize: 21,
    lineHeight: '32px'
  }),
  packageImage: css({
    float: 'right',
    maxWidth: 150,
    maxHeight: 170,
    paddingLeft: 10,
    [mediaQueries.mUp]: {
      paddingLeft: 30
    }
  }),
  ul: css({
    marginTop: 0,
    marginBottom: 5,
    paddingLeft: 25

borderSpacing: '0 2px',
    minWidth: '100%',
    marginTop: 15,
    fontSize: 14,
    '@media (max-width: 600px)': {},
    '& th': {
      fontFamily: fontFamilies.sansSerifMedium,
      fontWeight: 'normal'
    }
  }),
  td,
  num,
  groupTd: merge(td, groupTd),
  groupTdNum: merge(num, groupTd),
  highlight: css({
    fontFamily: fontFamilies.sansSerifMedium,
    fontWeight: 'normal'
  })
}

const Table = ({ children }) => (
  <div style="{{">
    {children}<table></table>
  </div>
)

const BudgetTable = ({ vt, data, total, pk, sk, fraction }) =&gt; {
  const singleRow = data &amp;&amp; data.length === 1
  return (
    <table>
      <thead>
        <tr></tr></thead></table>

lineHeight: 1.42,
    fontFamily: fontFamilies.serifRegular,
    margin: '20px 0'
  }),
  number: css({
    fontSize: 30,
    fontFamily: fontFamilies.sansSerifMedium
  }),
  videoTitle: css({
    fontSize: 60,
    lineHeight: '75px',
    marginBottom: 20
  }),
  headline: css({
    fontSize: 32,
    fontFamily: fontFamilies.sansSerifMedium
  })
}

const fontSizeBoost = length => {
  if (length < 40) {
    return 26
  }
  if (length < 50) {
    return 17
  }
  if (length < 80) {
    return 8
  }
  if (length < 100) {
    return 4
  }

const styles = {
  list: css({
    ...fontStyles.sansSerifRegular16,
    listStyle: 'none',
    margin: '10px 0',
    padding: 0
  }),
  item: css({
    borderTop: `1px solid ${colors.divider}`,
    padding: '5px 0',
    ':last-child': {
      borderBottom: `1px solid ${colors.divider}`
    }
  }),
  highlight: css({
    fontFamily: fontFamilies.sansSerifMedium,
    fontWeight: 'normal'
  })
}

export const Item = ({ children }) =&gt; <li>{children}</li>

const List = ({ children, ...props }) =&gt; (
  <ul>
    {children}
  </ul>
)

List.Item = Item

export const Highlight = ({ children }) =&gt; (
  <span>{children}</span>