How to use the @times-components/styleguide.fontSizes.body function in @times-components/styleguide

font-family: "${fonts.bodyRegular}";
  line-height: 26px;
  font-size: ${fontSizes.bodyMobile}px;
  margin: 0 auto ${spacing(5)};
  padding-right: ${spacing(2)};
  padding-left: ${spacing(2)};
   
  // Clear fix for floated dropcap
  &:first-of-type:after {
    content: "";
    clear: both;
    display: table;
  }

  @media (min-width: ${breakpoints.medium}px) {
    font-size: ${fontSizes.body}px;
    line-height: 30px;
    padding-left: 0;
    padding-right: 0;
    width: 80.8%;
  }

  @media (min-width: ${breakpoints.wide}px) {
    width: 56.2%;
  }
`;

export const DropCap = styled.span`
  float: left;
  color: ${colours.functional.primary};
  padding-right: 10px;
  line-height: 1em;

import React from "react";
import Link from "@times-components/link";
import { colours, fonts, fontSizes } from "@times-components/styleguide";

// SHOULD BE IN STYLES
const responsiveLinkStyles = {
  base: `
      color: ${colours.functional.action};
      font-family: "${fonts.bodyRegular}";
      line-height: 26px;
      font-size: ${fontSizes.bodyMobile}px;
      margin-bottom: 25px;
      margin-top: 0;
  `,
  medium: `
      font-size: ${fontSizes.body}px;
      line-height: 30px;
  `
};

const ArticleLink = ({ children, target, url }) => (
  
    {children}
  
);

ArticleLink.defaultProps = {
  ...Link.defaultProps
};

ArticleLink.propTypes = {
  ...Link.propTypes

@media (min-width: ${breakpoints.wide}px) {
    width: 56.2%;
  }
`;

export const Paragraph = styled.p`
  color: ${colours.functional.primary};
  font-family: "${fonts.bodyRegular}";
  line-height: 26px;
  font-size: ${fontSizes.bodyMobile}px;
  margin-bottom: ${spacing(5)};
  margin-top: 0;
  display: block;

  @media (min-width: ${breakpoints.medium}px) {
    font-size: ${fontSizes.body}px;
    line-height: 30px;
  }
`;

export const InteractiveContainer = styled.div`
  padding-left: ${spacing(2)};
  padding-right: ${spacing(2)};
  margin-bottom: ${spacing(4)};

  @media (min-width: ${breakpoints.medium}px) {
    width: 80.8%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: ${spacing(4)};
  }

flex: 1,
    justifyContent: "space-between",
    maxWidth: 548
  },
  heading: {
    alignSelf: "center",
    fontFamily: fonts.headline,
    fontSize: fontSizes.leadHeadline,
    textAlign: "center",
    color: colours.functional.brandColour,
    marginBottom: 12
  },
  message: {
    alignSelf: "center",
    fontFamily: fonts.bodyRegular,
    fontSize: fontSizes.body,
    textAlign: "center",
    color: colours.functional.secondary
  },
  buttonContainer: {
    justifyContent: "flex-end"
  },
  messagingContainer: {
    flex: 1,
    justifyContent: "flex-start",
    alignSelf: "center",
    marginTop: spacing(4),
    marginLeft: spacing(1),
    marginRight: spacing(1)
  }
});

base: () => `
    font-family: ${fonts.bodyRegular};
    font-size: ${fontSizes.body}px;
    line-height: 1.44;
    text-align: center;
    color: ${colours.functional.secondary};
  `
});

flex: 1,
    justifyContent: "space-between",
    maxWidth: 548
  },
  heading: {
    alignSelf: "center",
    fontFamily: fonts.headline,
    fontSize: fontSizes.leadHeadline,
    textAlign: "center",
    color: colours.functional.brandColour,
    marginBottom: 12
  },
  message: {
    alignSelf: "center",
    fontFamily: fonts.bodyRegular,
    fontSize: fontSizes.body,
    textAlign: "center",
    color: colours.functional.secondary
  },
  buttonContainer: {
    justifyContent: "flex-end"
  },
  messagingContainer: {
    flex: 1,
    justifyContent: "flex-start",
    alignSelf: "center",
    marginTop: spacing(4),
    marginLeft: spacing(1),
    marginRight: spacing(1)
  },
  imageContainer: {
    alignSelf: "center",

@media (min-width: ${breakpoints.wide}px) {
    width: 56.2%;
  }
`;

export const Paragraph = styled.p`
  color: ${colours.functional.primary};
  font-family: "${fonts.bodyRegular}";
  line-height: 26px;
  font-size: ${fontSizes.bodyMobile}px;
  margin-bottom: ${spacing(5)};
  margin-top: 0;
  display: block;

  @media (min-width: ${breakpoints.medium}px) {
    font-size: ${fontSizes.body}px;
    line-height: 30px;
  }
`;

export const InteractiveContainer = styled.div`
  margin-bottom: ${spacing(4)};

  ${props =>
    props.fullWidth
      ? css`
          width: 100%;
        `
      : css`
          padding: 0 ${spacing(2)};

          @media (min-width: ${breakpoints.medium}px) {

base: () => `
    font-family: ${fonts.bodyRegular};
    font-size: ${fontSizes.body}px;
    line-height: 1.44;
    text-align: center;
    color: ${colours.functional.secondary};
  `,
  wideUp: () => `