How to use the @artsy/palette.themeProps.mediaQueries function in @artsy/palette

const MediaContextProvider: React.SFC> = ({
    onlyRenderAt,
    children,
  }) => {
    const { hover, ...breakpointMediaQueries } = themeProps.mediaQueries
    return (
      
        
          {matches => {
            const matchingBreakpoints = Object.keys(matches).filter(
              key => matches[key]
            )

            // FIXME: Remove
            // console.log(matchingBreakpoints)
            return (

render() {
    const { children, context, headTags = [], ...props } = this.props
    const contextProps = {
      ...props,
      ...context,
    }

    return (
      
        
          
            
              
                
                  
                    
                      
                      {children}
                      {process.env.NODE_ENV === "development" && (
                        
                      )}

export function useMedia(): { [k in Breakpoint]?: boolean } {
  const matches = Object.entries(themeProps.mediaQueries).reduce(
    (acc, [key, value]) => {
      return {
        ...acc,
        [key]: useMatchMedia(value),
      }
    },
    {}
  )
  return matches
}

${props => {
              const { colors } = props.theme
              return `
                background-color: ${colors.white100};
                border-color: ${colors.black10};
                color: ${colors.black100};

                @media ${themeProps.mediaQueries.hover} {
                  &:hover {
                    background-color: ${colors.white100};
                    border-color: ${colors.black100};
                    color: ${colors.black100};
                  }
                }
              `
            }};
          `