How to use the @govuk-react/constants.SPACING.SCALE_1 function in @govuk-react/constants

import { withWhiteSpace } from '@govuk-react/hoc';

const HIDDEN_TEXT_FOCUS_WIDTH = `${parseInt(FOCUS_WIDTH.split('px')[0], 10) + 1}px`;

const StyledSpan = styled('span')({
  textDecoration: 'underline',
  textDecorationSkipInk: 'none',
});

const StyledSummary = styled('summary')({
  cursor: 'pointer',
  color: LINK_COLOUR,
  fontFamily: NTA_LIGHT,
  fontSize: FONT_SIZE.SIZE_19,
  position: 'relative',
  marginBottom: SPACING.SCALE_1,
  ':hover': {
    color: LINK_HOVER_COLOUR,
  },
  ':focus': {
    outline: `${HIDDEN_TEXT_FOCUS_WIDTH} solid ${FOCUS_COLOUR}`,
    // outlineOffset: '-1px', In alpha/govuk-frontend but causes arrow icon to be hidden when open
    background: FOCUS_COLOUR,
  },
});

/**
 *
 * ### Usage
 *
 *
 * Simple

import styled from 'styled-components';
import { MEDIA_QUERIES, SPACING } from '@govuk-react/constants';

const SearchWrapper = styled('div')({
  marginTop: SPACING.SCALE_1,
  width: '50%',
  minWidth: '110px',
  [MEDIA_QUERIES.LARGESCREEN]: {
    width: '100%',
  },
});

export default SearchWrapper;

const Ul = styled('ul')(({ serviceTitle, open }) => ({
  display: open ? 'flex' : 'none',
  flexWrap: 'wrap',
  margin: 0,
  padding: 0,
  marginTop: SPACING.SCALE_1,
  width: '100%',
  [MEDIA_QUERIES.LARGESCREEN]: {
    display: 'flex',
    paddingTop: serviceTitle ? 0 : SPACING.SCALE_5,
    width: 'auto',
  },
}));

BORDER_WIDTH_MOBILE,
  FOCUS_WIDTH,
  LINE_HEIGHT,
  SPACING,
  MEDIA_QUERIES,
  RESPONSIVE_4,
} from '@govuk-react/constants';

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

const StyledErrorText = styled(Link)({
  fontFamily: NTA_LIGHT,
  WebkitFontSmoothing: 'antialiased',
  MozOsxFontSmoothing: 'grayscale',
  fontWeight: 700,
  marginBottom: SPACING.SCALE_1,
  textDecoration: 'underline',
  textDecorationSkipInk: 'none',
  textTransform: 'none',
  cursor: 'pointer',
  fontSize: FONT_SIZE.SIZE_16,
  lineHeight: LINE_HEIGHT.SIZE_16,
  ':visited': {
    color: `${ERROR_COLOUR}`,
  },
  [MEDIA_QUERIES.LARGESCREEN]: {
    fontSize: FONT_SIZE.SIZE_19,
    lineHeight: LINE_HEIGHT.SIZE_19,
  },
  color: `${ERROR_COLOUR}`,
  paddingTop: '4px',
  paddingBottom: '2px',

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { BLUE } from 'govuk-colours';

import { FONT_SIZE, LINE_HEIGHT, MEDIA_QUERIES, SPACING } from '@govuk-react/constants';
import { spacing } from '@govuk-react/lib';

const StyledRelatedItems = styled('div')(
  {
    borderTop: `10px solid ${BLUE}`,
    paddingTop: SPACING.SCALE_1,
    width: '100%',
    [MEDIA_QUERIES.LARGESCREEN]: {
      fontSize: FONT_SIZE.SIZE_16,
      lineHeight: LINE_HEIGHT.SIZE_16,
    },
    '> h3': {
      marginBottom: SPACING.SCALE_2,
    },
    '> ul': {
      marginBottom: SPACING.SCALE_4,
      '> li': {
        marginBottom: `calc(${SPACING.SCALE_2} + 2px)`,
      },
    },
  },
  spacing.withWhiteSpace({ marginBottom: 0 })