How to use the @times-components/styleguide.fonts.bodyRegular function in @times-components/styleguide

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

paddingBottom: spacing(2)
  },
  headline: {
    fontFamily: fonts.headline,
    fontSize: 20,
    lineHeight: 20,
    marginBottom: spacing(1),
    marginTop: spacing(4),
    textAlign: "center"
  },
  summaryContainer: {
    flex: 1
  },
  strapline: {
    color: colours.functional.secondary,
    fontFamily: fonts.bodyRegular,
    fontSize: 14,
    lineHeight: 20,
    textAlign: "center",
    paddingHorizontal: spacing(8)
  }
};

const mediumBreakpointStyles = {
  container: {
    paddingBottom: spacing(6)
  },
  headline: {
    color: colours.functional.brandColour,
    fontFamily: fonts.headline,
    fontSize: 20,
    lineHeight: 20,

},
  text: {
    textAlign: "center"
  }
};

const mediumBreakpointStyles = {
  container: {
    backgroundColor: colours.functional.border,
    paddingTop: spacing(6),
    marginHorizontal: spacing(6),
    marginVertical: spacing(3)
  },
  heading: {
    color: colours.section.comment,
    fontFamily: fonts.bodyRegular,
    fontSize: 15,
    lineHeight: 15
  },
  headingContainer: {
    paddingTop: spacing(2)
  },
  mastheadContainer: {
    alignItems: "center"
  },
  mastheadStyleST: {
    height: 42,
    width: 227
  },
  mastheadStyleTimes: {
    height: 42,
    width: 237

bold: {
    color: colours.functional.brandColour,
    fontWeight: "bold"
  },
  byline: {
    color: colours.functional.secondary,
    fontFamily: fonts.supporting,
    fontSize: 12,
    marginTop: spacing(2)
  },
  container: {
    paddingBottom: spacing(2)
  },
  paragraph: {
    color: colours.functional.secondary,
    fontFamily: fonts.bodyRegular,
    fontSize: 14,
    lineHeight: 20
  },
  title: {
    color: colours.functional.brandColour,
    fontFamily: fonts.headline,
    fontSize: fontSizes.smallHeadline,
    marginBottom: spacing(1)
  },
  titleWrapper: {
    alignItems: "center"
  }
};

const mediumBreakpointStyles = {
  bold: {

export default breakpoint => ({
  container: {
    flex: 1,
    paddingBottom: spacing(2),
    paddingHorizontal: spacing(4)
  },
  headline: {
    fontFamily: fonts.headline,
    fontSize: headlineFontSizeResolver[breakpoint],
    lineHeight: headlineFontSizeResolver[breakpoint],
    marginBottom: spacing(1),
    marginTop: spacing(4),
    textAlign: "center"
  },
  strapline: {
    fontFamily: fonts.bodyRegular,
    fontSize: 14,
    lineHeight: 20,
    textAlign: "center"
  },
  summaryContainer: {
    flex: 1
  }
});

paddingBottom: spacing(2)
  },
  headline: {
    color: colours.functional.brandColour,
    fontFamily: fonts.headline,
    fontSize: fontSizes.tileLeadHeadline,
    lineHeight: 35,
    paddingHorizontal: spacing(2),
    textAlign: "center"
  },
  imageContainer: {
    overflow: "hidden",
    width: "30%"
  },
  strapline: {
    fontFamily: fonts.bodyRegular,
    color: colours.functional.secondary,
    fontSize: fontSizes.meta,
    lineHeight: 20,
    paddingHorizontal: spacing(8),
    textAlign: "center"
  },
  summaryContainer: {
    alignItems: "center",
    paddingTop: spacing(2),
    paddingBottom: spacing(3)
  }
};

export default styles;

bold: {
    color: colours.functional.brandColour,
    fontWeight: "bold"
  },
  byline: {
    color: colours.functional.secondary,
    fontFamily: fonts.supporting,
    fontSize: 12,
    marginTop: spacing(2)
  },
  container: {
    padding: spacing(3)
  },
  paragraph: {
    color: colours.functional.secondary,
    fontFamily: fonts.bodyRegular,
    fontSize: 14,
    lineHeight: 20
  },
  title: {
    ...smallBreakpointStyles.title,
    fontSize: 20,
    lineHeight: 20,
    marginBottom: spacing(1)
  },
  titleWithoutMargin: {
    ...smallBreakpointStyles.title,
    fontSize: 20,
    lineHeight: 20,
    marginBottom: 0
  },
  titleWrapper: {

body: {
    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: {

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

  @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 =>

body: {
    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)
  }
});