How to use the @govuk-react/constants.MEDIA_QUERIES.MAX function in @govuk-react/constants

// tracking https://github.com/alphagov/govuk-frontend/blob/master/src/objects/_width-container.scss
import styled from 'styled-components';
import { spacing } from '@govuk-react/lib';

import { GUTTER, GUTTER_HALF, MEDIA_QUERIES, SITE_WIDTH } from '@govuk-react/constants';

const WidthContainer = styled('div')(
  {
    maxWidth: SITE_WIDTH,
    margin: `0 ${GUTTER_HALF}`,
    [MEDIA_QUERIES.TABLET]: {
      margin: `0 ${GUTTER}`,
    },
    [MEDIA_QUERIES.MAX]: {
      margin: '0 auto',
    },
  },
  spacing.withWhiteSpace()
);

export default WidthContainer;

Navigation item 3
      Navigation item 4
      Navigation item 5
      Navigation item 6
    
    
      Navigation item 1
      Navigation item 2
      Navigation item 3
    
  
);

const WideContainer = styled(Footer.WidthContainer)({
  maxWidth: 'inherit',
  [MEDIA_QUERIES.MAX]: {
    margin: `0 ${GUTTER}`,
  },
});

export const FooterWithCustomWidth = () =&gt; <footer>;

export const FooterWithCopyright = () =&gt; <footer>;

export const FooterWithMetaLinks = () =&gt; withRoutes(<footer>);

export const FooterWithSingleMetaLink = () =&gt;
  withRoutes(
    <footer>
          Item 1</footer></footer></footer></footer>

const stories = storiesOf('Layout/Page', module);
const examples = storiesOf('Layout/Page/Examples', module);

stories.addDecorator(withDocsCustom(ReadMe));

stories.add('Component default', () => (
  <div>
    }&gt;
      <h1>Page Title</h1>
    
  </div>
));

const WideContainer = styled(Page.WidthContainer)({
  maxWidth: 'inherit',
  [MEDIA_QUERIES.MAX]: {
    margin: `0 ${GUTTER}`,
  },
});

examples.add('Custom width container (no width limit)', () =&gt; (
  <div>
    
      <h3>Page container has no maxWidth</h3>
    
  </div>
));

const MainContainer = styled(Page.Main)({
  backgroundColor: '#ddd',
});