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

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

import Group from './molecules/group';
import Icon from './atoms/icon';
import OpenAll from './atoms/open-all';
import SectionButton from './atoms/section-button';
import SectionContent from './atoms/section-content';
import SectionHeader from './atoms/section-header';
import SectionHeading from './atoms/section-heading';
import SectionSummary from './atoms/section-summary';

const AccordionContainer = styled('div')(
  spacing.responsive({ size: 6, property: 'margin', direction: 'bottom' }),
  {
    borderBottom: `1px solid ${BORDER_COLOUR}`,
  },
  spacing.withWhiteSpace(),
);

/**
 *
 * ### Usage
 *
 * Simple
 * ```jsx
 *
 * import Accordion from '@govuk-react/accordion'
 *
 * const checkOpen = state => Object.values(state).every(Boolean);

import styled from 'styled-components';
import { spacing } from '@govuk-react/lib';

const SectionContent = styled('div')(
  spacing.responsive({ size: 3, property: 'padding', direction: 'top' }),
  spacing.responsive({ size: 3, property: 'padding', direction: 'bottom' }),
  {
    ':last-child': {
      marginBottom: 0,
    },
  },
);

export default SectionContent;

import { spacing } from '@govuk-react/lib';
import { MEDIA_QUERIES } from '@govuk-react/constants';

const clearfix = {
  '::after': {
    content: "''",
    display: 'block',
    clear: 'both',
  },
};

const TabList = styled('ul')(
  {
    margin: 0,
  },
  spacing.responsive({ size: 6, property: 'margin', direction: 'bottom' }),
  {
    padding: 0,
    listStyle: 'none',
    [MEDIA_QUERIES.TABLET]: {
      borderBottom: `1px solid ${BORDER_COLOUR}`,
      marginBottom: 0,
      ...clearfix,
    },
  }
);

export default TabList;