How to use the @govuk-react/lib.spacing.responsiveMargin function in @govuk-react/lib

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { spacing, typography } from '@govuk-react/lib';

import List from './atoms/list';
import Panel from './atoms/panel';
import Tab from './atoms/tab';
import Title from './atoms/title';

const TabsContainer = styled('div')(
  typography.font({ size: 19 }),
  typography.textColour,
  spacing.responsiveMargin({ size: 1, direction: 'top' }),
  spacing.responsiveMargin({ size: 6, direction: 'bottom' }),
  spacing.withWhiteSpace(),
);

/**
 *
 * ### Import
 * ```js
 * import Tabs from '@govuk-react/tabs';
 * ```
 *
 * ##### Simple Example
 * ```js
 * class App extends Component {
 *   constructor() {
 *     super();

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { ERROR_COLOUR } from 'govuk-colours';
import { spacing } from '@govuk-react/lib';
import { BORDER_WIDTH_FORM_GROUP_ERROR, SPACING_POINTS } from '@govuk-react/constants';

const FormGroup = styled('div')(
  spacing.responsiveMargin({ size: 6, direction: 'bottom' }),
  {
    '& &:last-of-type': {
      marginBottom: 0,
    },
  },
  ({ error }) =>
    error
      ? {
          paddingLeft: SPACING_POINTS[3],
          borderLeft: `${BORDER_WIDTH_FORM_GROUP_ERROR} solid ${ERROR_COLOUR}`,

          '& &': {
            padding: 0,
            border: 0,
          },
        }

import styled from 'styled-components';
import PropTypes from 'prop-types';
import { BORDER_COLOUR } from 'govuk-colours';
import { spacing } from '@govuk-react/lib';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const TabPanel = styled('section')(
  spacing.responsiveMargin({ size: 8, direction: 'bottom' }),
  {
    [MEDIA_QUERIES.TABLET]: {
      marginBottom: spacing.simple(0),
      paddingTop: spacing.simple(6),
      paddingRight: spacing.simple(4),
      paddingBottom: spacing.simple(6),
      paddingLeft: spacing.simple(4),
      border: `1px solid ${BORDER_COLOUR}`,
      borderTop: 0,
      '& > :last-child': {
        marginBottom: 0,
      },
    },
  },
  ({ selected }) => ({
    display: 'block',