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

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.
 *
 *
 * ### Usage
 *

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.
 *
 *
 * ### Usage
 *
 * Example

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)': {

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

const TopNavInner = styled('div')({
  display: 'flex',
  flexDirection: 'column',
  width: `calc(100% - ${SPACING.SCALE_5})`,
  maxWidth: '960px',
  padding: `calc(${SPACING.SCALE_2} * 0.8) ${SPACING.SCALE_3}`,
  boxSizing: 'border-box',
  [MEDIA_QUERIES.LARGESCREEN]: {
    padding: `calc(${SPACING.SCALE_2} * 0.8) 0`,
    flexDirection: 'row',
    width: `calc(100% - ${SPACING.SCALE_6})`,
  },
});

export default TopNavInner;

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',
  },
}));

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

const BottomNavWrapper = styled('div')({
  borderBottom: `10px solid ${BLUE}`,
  maxWidth: '960px',
  margin: '0 auto',
  width: `calc(100% - ${SPACING.SCALE_5})`,
  [MEDIA_QUERIES.LARGESCREEN]: {
    width: `calc(100% - ${SPACING.SCALE_6})`,
  },
});

export default BottomNavWrapper;