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

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

const OuterContainer = styled('div')({
  paddingTop: SPACING.SCALE_5,
  textAlign: 'center',
});

// This is currently 'width-container' and not 'main' from govuk-frontend
// Maybe we should deprecate this component in favour of Page.Main and Page.WidthContainer?
const InnerContainer = styled('div')({
  maxWidth: SITE_WIDTH,
  marginLeft: SPACING.SCALE_3,
  marginRight: SPACING.SCALE_3,
  textAlign: 'left',
  [MEDIA_QUERIES.LARGESCREEN]: {
    marginLeft: SPACING.SCALE_5,
    marginRight: SPACING.SCALE_5,
  },
  // no 1020px breakpoint in constants yet, not sure why
  '@media only screen and (min-width:1020px)': {
    margin: '0 auto',
  },
});

/**
 *
 * Provides a container which aligns to the topNav component,
 * is centered, and provides top padding.

const StyledHeader = styled('div')(
  // Setting focus styles on header
  // so that summary that is not part of the button is included in focus
  ({ focused }) =>
    (focused
      ? {
        outline: `${FOCUS_WIDTH} solid ${YELLOW}`,
        outlineOffset: 0,
      }
      : undefined),
  {
    position: 'relative',
    // Safe area on the right to avoid clashing with icon
    paddingRight: '40px',
    paddingBottom: SPACING.SCALE_3,

    // Section headers have a pointer cursor as an additional affordance
    cursor: 'pointer',
    // Section headers have a grey background on hover as an additional affodance
    ':hover': {
      backgroundColor: GREY_4,
      '@media (hover: none)': {
        backgroundColor: 'initial',
      },
    },
  },
);

const SectionHeader = ({ children, focused, ...props }) => (
  
    {children}

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { LINK_COLOUR } from 'govuk-colours';
import { SPACING } from '@govuk-react/constants';
import { link, typography } from '@govuk-react/lib';

const StyledButton = styled('button')(
  typography.font({ size: 24, weight: 'bold' }),
  link.common(),
  {
    width: '100%',
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    paddingTop: SPACING.SCALE_3,
    paddingBottom: 0,
    paddingLeft: 0,
    borderWidth: 0,
    // Headings in section headers have link colours as an additional affodance
    color: LINK_COLOUR,
    background: 'none',
    textAlign: 'left',
    cursor: 'pointer',
    ':focus': {
      outline: 'none',
      background: 'none',
    },
    ':after': {
      content: '""',
      position: 'absolute',
      top: 0,

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

const LogoSearchWrapper = styled('div')({
  display: 'flex',
  justifyContent: 'space-between',
  [MEDIA_QUERIES.LARGESCREEN]: {
    display: 'block',
    paddingRight: SPACING.SCALE_3,
    width: '33.33%',
  },
});

export default LogoSearchWrapper;

({ errorText }) =>
    errorText
      ? {
          borderLeft: `4px solid ${ERROR_COLOUR}`,
          marginRight: SPACING.SCALE_3,
          paddingLeft: SPACING.SCALE_2,
        }
      : undefined,
  spacing.withWhiteSpace({ marginBottom: 6 })

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

const Li = styled('li')({
  flex: '1 0 50%',
  width: '100%',
  listStyleType: 'none',
  margin: 0,
  padding: '3px 0',
  borderBottom: `1px solid ${PROPOSITION_BORDER}`,
  [MEDIA_QUERIES.LARGESCREEN]: {
    borderBottom: 0,
    flex: 'none',
    width: 'auto',
    paddingRight: SPACING.SCALE_3,
  },
});

export default Li;

({ error }) => ({
    borderLeft: error ? `${BORDER_WIDTH_MOBILE} solid ${ERROR_COLOUR}` : undefined,
    marginRight: error ? SPACING.SCALE_3 : undefined,
    paddingLeft: error ? SPACING.SCALE_2 : undefined,
  }),
  spacing.withWhiteSpace({ marginBottom: 0 })

({ error }) => ({
    borderLeft: error ? `4px solid ${ERROR_COLOUR}` : undefined,
    marginRight: error ? SPACING.SCALE_3 : undefined,
    paddingLeft: error ? SPACING.SCALE_2 : undefined,
  }),
  spacing.withWhiteSpace({ marginBottom: 0 })

({ errorText }) => ({
    borderLeft: errorText ? `4px solid ${ERROR_COLOUR}` : undefined,
    marginRight: errorText ? SPACING.SCALE_3 : undefined,
    paddingLeft: errorText ? SPACING.SCALE_2 : undefined,
  }),
);