How to use the @govuk-react/constants.MEDIA_QUERIES.TABLET function in @govuk-react/constants

if (colValues[key] && value === true) {
          if (process.env.NODE_ENV !== 'production') {
            const newKey = key.replace('column', '').replace(/^([A-Z][a-z]+)([A-Z])/, '$1-$2').toLocaleLowerCase();
            // eslint-disable-next-line no-console
            console.warn(`deprecated prop ${key} used in GridCol, please replace with setWidth="${newKey}"`);
          }
          widthValue = colValues[key];
        }
      });
      widthStyle = {
        [MEDIA_QUERIES.TABLET]: {
          width: widthValue,
        },
      };
    }
    widthStyle[MEDIA_QUERIES.TABLET] = setGrowShrink(widthStyle[MEDIA_QUERIES.TABLET]);

    const desktopWidthStyle = desktopWidthFromProps({ setWidth: props.setDesktopWidth });

    if (desktopWidthStyle) {
      desktopWidthStyle[MEDIA_QUERIES.DESKTOP] =
        setGrowShrink(desktopWidthStyle[MEDIA_QUERIES.DESKTOP]);
    }

    return Object.assign(
      {},
      widthStyle,
      desktopWidthStyle,
    );
  },
);

({ size }) => {
    const actualSize = Number.isNaN(Number(size)) ? CAPTION_SIZES[size] : size;

    // bottom margin - hard-coded values because they're a bit odd
    const marginStyle = actualSize > 19 ? { marginBottom: SPACING_POINTS[1] } : undefined;
    const marginResponsiveStyle = actualSize === 24 ?
      { [MEDIA_QUERIES.TABLET]: { marginBottom: 0 } } : undefined;

    return {
      ...marginStyle,
      ...marginResponsiveStyle,
    };
  },
  {

return [
      { listStyleType: type },
      type === 'none'
        ? {
            paddingLeft: 0,
          }
        : {
            paddingLeft: SPACING_POINTS[4],
          },
      // TODO consider whether these spacing adjusts should be for all non-`none` styles
      // NB the inclusion of these ensures that withWhiteSpace's mb prop doesn't work on ListItem
      ['disc', 'decimal'].includes(type)
        ? {
            [`> ${ListItem}`]: {
              marginBottom: 0,
              [MEDIA_QUERIES.TABLET]: {
                marginBottom: SPACING_POINTS[1],
              },
            },
          }
        : {
            // Style when not disc/decimal
            [`> ${ListItem}`]: {
              marginBottom: SPACING_POINTS[1],
            },
          },
    ];
  }
);

({ size }) => {
    const actualSize = Number.isNaN(Number(size)) ? HEADING_SIZES[size] : size;
    const scaleInfo = TYPOGRAPHY_SCALE[actualSize];

    return Object.assign(
      {},
      {
        marginBottom: scaleInfo.mobile.spacing,
        [MEDIA_QUERIES.TABLET]: {
          marginBottom: scaleInfo.tablet.spacing,
        },
      },
    );
  },
  spacing.withWhiteSpace(),

import { MEDIA_QUERIES } from '@govuk-react/constants';

const spacingSimple1 = spacing.simple(1);
const spacingSimple2 = spacing.simple(2);
const spacingSimple3 = spacing.simple(3);
const spacingSimple4 = spacing.simple(4);
const spacingSimple5 = spacing.simple(5);

const StyledListItem = styled('li')({
  marginLeft: spacingSimple5,
  ':before': {
    content: "'\\2014  '",
    marginLeft: -spacingSimple5,
    paddingRight: spacingSimple1,
  },
  [MEDIA_QUERIES.TABLET]: {
    marginLeft: 0,
    ':before': {
      content: 'none',
    },
  },
});

const StyledHyperLink = styled('a')(
  typography.font({ size: 19 }),
  link.common(),
  link.styleDefault,
  {
    display: 'inline-block',
    paddingTop: spacingSimple2,
    paddingBottom: spacingSimple2,
  },

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

const TabsTitle = styled('h2')(typography.font({ size: 19 }), {
  marginBottom: spacing.simple(1),
  [MEDIA_QUERIES.TABLET]: {
    display: 'none',
  },
});

export default TabsTitle;

({ selected }) => ({
    display: 'block',
    [MEDIA_QUERIES.TABLET]: {
      display: !selected && 'none',
    },
  })
);

return ({ setWidth = config.width } = {}) => {
    if (setWidth) {
      const width = WIDTHS[setWidth] || setWidth;
      const { mediaQuery = MEDIA_QUERIES.TABLET, noDefault } = config;

      return {
        width: noDefault ? undefined : '100%',
        [mediaQuery]: {
          width,
        },
      };
    }

    return undefined;
  };
}

({ level, size = LEVEL_SIZE[level] }) => {
    const actualSize = Number.isNaN(Number(size)) ? HEADING_SIZES[size] : size;
    const scaleInfo = TYPOGRAPHY_SCALE[actualSize];

    return Object.assign(
      {},
      {
        marginBottom: scaleInfo.mobile.spacing,
        [MEDIA_QUERIES.TABLET]: {
          marginBottom: scaleInfo.tablet.spacing,
        },
      },
    );
  },
  spacing.withWhiteSpace(),