How to use the @project-r/styleguide.mediaQueries.mBreakPoint function in @project-r/styleguide

import {
  PUBLIC_BASE_URL, STATIC_BASE_URL
} from '../../constants'

import {
  Interaction, mediaQueries, fontFamilies,
  Field, Checkbox, A
} from '@project-r/styleguide'

const {P} = Interaction

const SIZES = [
  {minWidth: 0, columns: 3},
  {minWidth: 400, columns: 4},
  {minWidth: 700, columns: 5},
  {minWidth: mediaQueries.mBreakPoint, columns: 3}, // 768
  {minWidth: 900, columns: 4},
  {minWidth: 1000, columns: 5}
]

const PADDING = 5
const styles = {
  grid: css({
    margin: '0 -5px',
    ':after': {
      content: '""',
      display: 'table',
      clear: 'both'
    }
  }),
  item: css({
    cursor: 'pointer',

this.handleResize = () => {
      const isMobile = window.innerWidth < mediaQueries.mBreakPoint
      if (isMobile !== this.state.isMobile) {
        this.setState({ isMobile })
      }
    }
  }

this.measure = () => {
      const isMedium = window.innerWidth < mediaQueries.lBreakPoint
      const isSmall = window.innerWidth < mediaQueries.mBreakPoint
      if (this.sectionRef) {
        const { width, height } = this.sectionRef.getBoundingClientRect()
        this.setState({ width, height, isMedium, isSmall })
      }
    }
  }

this.handleResize = () => {
      const isMobile = window.innerWidth < mediaQueries.mBreakPoint
      if (isMobile !== this.state.isMobile) {
        this.setState({ isMobile })
      }
    }

    this.mobile = () => window.innerWidth < mediaQueries.mBreakPoint

this.handleResize = () => {
      const isMobile = window.innerWidth < mediaQueries.mBreakPoint
      if (isMobile !== this.state.isMobile) {
        this.setState({ isMobile })
      }
    }
    this.handleScroll = () => {

this.getHeaderHeight = () => {
      if (this.props.inNativeApp) {
        return -1
      } else if (window.innerWidth >= mediaQueries.mBreakPoint) {
        return HEADER_HEIGHT
      } else {
        return HEADER_HEIGHT_MOBILE
      }
    }
  }

this.measure = () => {
      const mobile = window.innerWidth < mediaQueries.mBreakPoint
      if (mobile !== this.state.mobile) {
        this.setState(() => ({ mobile }))
      }
      this.onScroll()
    }

this.onScroll = () => {
      const y = window.pageYOffset
      const height = window.innerHeight
      const mobile = window.innerWidth < mediaQueries.mBreakPoint
      const {sticky, setSticky} = this.props

      let status = false
      let sidebar = false
      if (y + HEADER_HEIGHT > this.y) {
        status = true
        if (!mobile && height - HEADER_HEIGHT > this.innerHeight) {
          sidebar = true
        }
      }

      if (sticky.status !== status || sticky.sidebar !== sidebar) {
        setSticky({
          status,
          sidebar
        })

this.setState(() => {
        const windowWidth = window.innerWidth
        const windowHeight = window.innerHeight
        let videoHeight = windowWidth * (9 / 16)
        return {
          mobile: windowWidth < mediaQueries.mBreakPoint,
          windowHeight,
          videoHeight
        }
      })
    }