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

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

const ListItem = styled('li')(
  // including font definition here is belt & braces
  // govuk-frontend doesn't bother to do that
  typography.font({ size: 19 }),
  { marginBottom: SPACING_POINTS[1] },
  spacing.withWhiteSpace()
);

/**
 *
 * ### Usage
 *
 *
 * Simple
 * ```jsx
 * List item example
 * ```
 *
 * With a link
 * ```jsx
 * import { Link } from '@govuk-react/link';
 *

// Constants for chevron sourced from govuk-frontend
const CHEVRON_SIZE = 7;
const CHEVRON_BORDER_WIDTH = 1;
const CHEVRON_BORDER_COLOUR = SECONDARY_TEXT_COLOUR;
const CHEVRON_ALTITUDE_CALCULATED = 5.655;

const BreadcrumbsContainer = styled('div')(
  typography.font({ size: 16 }),
  typography.textColour,
  {
    // margins here are not responsive, hence why they're not specified using withWhiteSpace
    marginTop: SPACING_POINTS[3],
    marginBottom: SPACING_POINTS[2],
  },
  spacing.withWhiteSpace(),
);

const BreadcrumbsList = styled('ol')({
  margin: 0,
  padding: 0,
  listStyleType: 'none',
  display: 'block',
});

const BreadcrumbsListItem = styled('li')({
  display: 'inline-block',
  position: 'relative',
  marginBottom: SPACING_POINTS[1],
  marginLeft: SPACING_POINTS[2],
  paddingLeft: SPACING_POINTS[2] + CHEVRON_ALTITUDE_CALCULATED,
  '::before': {

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

const StyledError = styled('span')(
  typography.font({ size: 19, weight: 'bold' }),
  {
    display: 'block',
    // NB non-responsive spacing
    marginBottom: SPACING_POINTS[3],
    clear: 'both',
    color: ERROR_COLOUR,
  },
  spacing.withWhiteSpace()
);

/**
 *
 * ### Usage
 *
 *
 * Simple
 * ```jsx
 * Example
 * ```
 *
 * ### References
 * - https://github.com/alphagov/govuk-frontend/blob/master/src/components/error-message/_error-message.scss
 */
const ErrorText = props => ;

const StyledList = styled('ul')(
  typography.font({ size: 19 }),
  {
    boxSizing: 'border-box',
    display: 'flex',
    flexDirection: 'column',
    marginTop: SPACING_POINTS[5],
    padding: SPACING_POINTS[2],
    justifyContent: 'space-between',
    width: '100%',
    [MEDIA_QUERIES.LARGESCREEN]: {
      flexDirection: 'row',
    },
  },
  spacing.withWhiteSpace({ marginBottom: 6 })
);

/**
 *
 * ### Usage
 *
 * Simple usage with `asPaginationItem` HOC
 * ```jsx
 * import { asPaginationItem } from '@govuk-react/hoc';
 *
 * const PaginationAnchor = asPaginationItem('a');
 *
 * 
 *   
 *     Previous page
 *   

{
    display: 'block',
    position: 'relative',
    minHeight: radioSize,
    padding: `0 0 0 ${radioSize}px`,
    clear: 'left',
  },
  ({ inline }) =>
    inline && {
      [MEDIA_QUERIES.LARGESCREEN]: {
        float: 'left',
        clear: 'none',
        marginRight: SPACING_POINTS[4],
      },
    },
  spacing.withWhiteSpace({ marginBottom: 2 })
);

const Input = styled('input')(
  {
    position: 'absolute',
    zIndex: 1,
    top: 0,
    left: 0,
    width: radioSize,
    height: radioSize,
    cursor: 'pointer',
    opacity: 0,
    ':checked + span::after': {
      opacity: 1,
    },
    ':focus + span::before': {

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import UnorderedList from '@govuk-react/unordered-list';
import { NTA_LIGHT } from '@govuk-react/constants';
import { spacing } from '@govuk-react/lib';

const StyledContainer = styled('div')(
  { fontFamily: NTA_LIGHT },
  spacing.withWhiteSpace(),
);

const StyledDefinition = styled('li')({
  fontSize: '24px',
  fontWeight: 700,
  lineHeight: 1.25,
  '> a': {
    textDecoration: 'none',
  },
});

/**
 *
 * ### Usage
 *
 *

lineHeight: '1.45',
      backgroundColor: '#f6f8fa',
      borderRadius: '3px',
    },
    '> pre > code': {
      display: 'inline',
      padding: '0',
      margin: '0',
      border: '0',
      overflow: 'visible',
      lineHeight: 'inherit',
      wordWrap: 'normal',
    },
  },
  ({ supportingText }) => typography.font({ size: supportingText ? 16 : 19 }),
  spacing.withWhiteSpace({ marginBottom: 4 })
);

/**
 *
 * Supports bold, italic, links, inline code and block code in Markdown ONLY.
 * This is to ensure we follow GDS as closely as possible.
 * It is worth noting that GDS recommends avoiding bold and italics.
 *
 * Bold should be avoided in general as not only can it dilute the message, it will also
 * cause Screenreaders to increase the volume of any bold text to reflect the increase in
 * font-weight.
 *
 * ### Usage
 *
 * Simple
 * ```jsx

const withWhiteSpace = config => Component => {
  const StyledHoc = styled(
    deprecate(
      Component,
      '(use of withWhiteSpace HOC - Please use `spacing.withWhiteSpace(config)` instead in styled components)'
    )
  )(spacing.withWhiteSpace(config));

  StyledHoc.propTypes = {
    ...spacing.withWhiteSpace.propTypes,
  };

  return StyledHoc;
};

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

const StyledRow = styled('div')(
  {
    display: 'flex',
    flexDirection: 'column',
    margin: `0 -${GUTTER_HALF}`,
    [MEDIA_QUERIES.LARGESCREEN]: {
      flexDirection: 'row',
    },
  },
  spacing.withWhiteSpace()
);

/**
 *
 * ### Usage
 *
 * Example
 * * https://codesandbox.io/s/x917knwm4z
 *
 * Simple
 * ```jsx
 * import GridRow from '@govuk-react/grid-row';
 * import GridCol from '@govuk-react/grid-col';
 *
 * 
 *   

import { BORDER_WIDTH, BORDER_WIDTH_FORM_ELEMENT, FOCUS_WIDTH, SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

const checkboxSize = SPACING_POINTS[7];
const labelPaddingLeftRight = SPACING_POINTS[3];

const StyledCheckbox = styled('label')(
  typography.font({ size: 19 }),
  {
    display: 'block',
    position: 'relative',
    minHeight: checkboxSize,
    padding: `0 0 0 ${checkboxSize}px`,
    clear: 'left',
  },
  spacing.withWhiteSpace({ marginBottom: 2 })
);

const StyledInput = styled('input')(
  {
    position: 'absolute',
    zIndex: 1,
    top: 0,
    left: 0,
    width: checkboxSize,
    height: checkboxSize,
    opacity: 0,
    ':checked + span:after': {
      opacity: 1,
    },
    ':focus + span:before': {
      outline: `${FOCUS_WIDTH} solid transparent`,