How to use the @storybook/design-system.styles.breakpoint function in @storybook/design-system

global as designSystemGlobal,
  loadFontsForStorybook,
  styles,
} from '@storybook/design-system';
import 'storybook-chromatic';

const { GlobalStyle } = designSystemGlobal;

addParameters({
  options: { panelPosition: 'bottom' },
  viewport: {
    viewports: [
      {
        name: 'Design system breakpoint',
        styles: {
          width: `${styles.breakpoint - 1}px`,
          height: '768px',
        },
      },
    ],
  },
});

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},
  hovering: () => {},
};

// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = '';

import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { Button, styles } from '@storybook/design-system';
import CTA from './CTA';

const Wrapper = styled.div`
  padding: 40px 0;

  @media (min-width: ${styles.breakpoint + 1}px) {
    padding: 40px;
  }
`;

const ctaAction = <button>Get started</button>;

storiesOf('Composite|CTA', module)
  .addParameters({ component: CTA })
  .addDecorator(story =&gt; {story()})
  .add('all', () =&gt; (
    &lt;&gt;

import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { Button, styles } from '@storybook/design-system';
import ShadowBoxCTA from './ShadowBoxCTA';

const Wrapper = styled.div`
  padding: 40px 0;

  @media (min-width: ${styles.breakpoint + 1}px) {
    padding: 40px;
  }
`;

const ctaAction = <button>Continue</button>;

storiesOf('Composite|ShadowBoxCTA', module)
  .addParameters({ component: ShadowBoxCTA })
  .addDecorator(story =&gt; {story()})
  .add('default', () =&gt; (
    
  ));