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

import withPageState from "./pagination-wrapper";
import { PreviousPageIcon, NextPageIcon } from "./pagination-icons";
import Results from "./results";
import PaginationBorder from "./pagination-border";
import PaginationContainer from "./pagination-container";

const styles = StyleSheet.create({
  absolute: {
    left: 0,
    position: "absolute",
    right: 0
  },
  arrow: {
    color: colours.functional.action,
    fontFamily: fonts.supporting,
    fontSize: fontSizes.meta
  }
});

const Pagination = ({
  count,
  generatePageLink,
  onNext,
  onPrev,
  page,
  pageSize,
  hideResults
}) => {
  const finalResult = Math.min(count, page * pageSize);
  const startResult = Math.min(finalResult, (page - 1) * pageSize + 1);
  const message = `Showing ${startResult} - ${finalResult} of ${count} results`;

import {
  colours,
  fonts,
  fontSizes,
  spacing
} from "@times-components/styleguide";

import ResetIcon from "./reset-icon";

const SourcePropType = Image.propTypes.source;

const styles = StyleSheet.create({
  errorBody: {
    color: "white",
    fontFamily: fonts.body,
    fontSize: fontSizes.meta,
    marginBottom: spacing(3),
    opacity: 0.8,
    textAlign: "center"
  },
  errorHead: {
    color: "white",
    fontFamily: fonts.headline,
    fontSize: fontSizes.smallestHeadline,
    marginBottom: spacing(1)
  },
  overlay: {
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.7)",
    flex: 1,
    justifyContent: "center",
    left: 0,

fontFamily: fonts.headline,
    fontSize: headlineFontSizeResolver[breakpoint],
    lineHeight: headlineFontSizeResolver[breakpoint],
    textAlign: "center",
    paddingBottom: spacing(2),
    paddingTop: spacing(1)
  },
  imageContainer: {
    overflow: "hidden",
    width: 97,
    marginBottom: spacing(1)
  },
  strapline: {
    color: colours.functional.secondary,
    fontFamily: fonts.bodyRegular,
    fontSize: fontSizes.meta,
    lineHeight: 20,
    textAlign: "center",
    paddingBottom: 0
  },
  summaryContainer: {
    paddingTop: spacing(1),
    alignItems: "center"
  }
});

import { fontSizes } from "@times-components/styleguide";
import sharedStyles from "./shared";

const styles = {
  ...sharedStyles,
  title: {
    ...sharedStyles.title,
    fontSize: fontSizes.meta,
    marginTop: 5
  }
};

export default styles;

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;

import React from "react";
import { StyleSheet, Text } from "react-native";
import PropTypes from "prop-types";
import { colours, fonts, fontSizes } from "@times-components/styleguide";

const { propTypes: { style: TextPropTypesStyle } } = Text;

const styles = StyleSheet.create({
  title: {
    fontFamily: fonts.bodyRegularSmallCaps,
    fontSize: fontSizes.meta,
    color: colours.functional.secondary
  }
});

const Title = ({ title, style }) => (
  
);

Title.defaultProps = {
  title: "",

justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.7)"
  },
  errorHead: {
    color: "white",
    fontSize: fontSizes.smallestHeadline,
    marginBottom: spacing(1),
    fontFamily: fonts.headline
  },
  errorBody: {
    color: "white",
    textAlign: "center",
    marginBottom: spacing(3),
    opacity: 0.8,
    fontSize: fontSizes.meta,
    fontFamily: fonts.body
  },
  resetButton: {
    flexDirection: "row",
    backgroundColor: colours.functional.action,
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 2
  },
  resetText: {
    color: "white",
    fontFamily: fonts.supporting,
    fontSize: fontSizes.cardMeta,
    lineHeight: 15,
    position: "relative",
    top: 3,