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

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

const colValues = {
  columnOneQuarter: '25%',
  columnOneThird: '33.3333%',
  columnOneHalf: '50%',
  columnTwoThirds: '66.6667%',
  columnThreeQuarters: '75%',
  columnFull: '100%',
};

const widthFromProps = spacing.withWidth({ noDefault: true });
const desktopWidthFromProps =
  spacing.withWidth({ mediaQuery: MEDIA_QUERIES.DESKTOP, noDefault: true });

function setGrowShrink(style) {
  const hasAutoWidth = [undefined, 'auto'].includes(style.width);

  // No explicit width means auto, so grow/shrink should be set
  return Object.assign(
    {},
    style,
    {
      flexGrow: hasAutoWidth ? 1 : 0,
      flexShrink: hasAutoWidth ? 1 : 0,
    },
  );
}

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

const colValues = {
  columnOneQuarter: '25%',
  columnOneThird: '33.3333%',
  columnOneHalf: '50%',
  columnTwoThirds: '66.6667%',
  columnThreeQuarters: '75%',
  columnFull: '100%',
};

const widthFromProps = spacing.withWidth({ noDefault: true });
const desktopWidthFromProps =
  spacing.withWidth({ mediaQuery: MEDIA_QUERIES.DESKTOP, noDefault: true });

function setGrowShrink(style) {
  const hasAutoWidth = [undefined, 'auto'].includes(style.width);

  // No explicit width means auto, so grow/shrink should be set
  return Object.assign(
    {},
    style,
    {
      flexGrow: hasAutoWidth ? 1 : 0,
      flexShrink: hasAutoWidth ? 1 : 0,
    },
  );
}

const StyledColumn = styled('div')(

import { BORDER_COLOUR } from 'govuk-colours';
import { FONT_WEIGHTS, SPACING_POINTS } from '@govuk-react/constants';
import { spacing, typography } from '@govuk-react/lib';

const Cell = styled('td')(
  ({ numeric, alignRight = numeric, bold }) => ({
    padding: `${SPACING_POINTS[2]}px ${SPACING_POINTS[4]}px ${SPACING_POINTS[2]}px 0`,
    borderBottom: `1px solid ${BORDER_COLOUR}`,
    textAlign: alignRight ? 'right' : 'left',
    fontWeight: bold ? FONT_WEIGHTS.bold : undefined,
    ':last-child': {
      paddingRight: 0,
    },
  }),
  ({ numeric, isHeader }) => (numeric && !isHeader ? typography.font({ tabular: true }) : undefined),
  spacing.withWidth()
);

Cell.propTypes = {
  alignRight: PropTypes.bool,
  children: PropTypes.node.isRequired,
  isHeader: PropTypes.bool,
  numeric: PropTypes.bool,
};

export default Cell;