How to use the @times-components/styleguide.breakpoints.medium function in @times-components/styleguide

/* eslint-disable react/require-default-props */
import React from "react";
import styled from "styled-components";
import { breakpoints } from "@times-components/styleguide";
import PropTypes from "prop-types";

const respStylesSelector = selector => ({ responsiveLinkStyles }) =>
  (responsiveLinkStyles && responsiveLinkStyles[selector]) || "";

const RespLink = styled.a`
  text-decoration: ${props =>
    props.underlined && props.responsiveLinkStyles ? "underline" : "none"};

  ${respStylesSelector("base")};

  @media (min-width: ${breakpoints.medium}px) {
    ${respStylesSelector("medium")};
  }
`;

const Link = ({
  children,
  url,
  onPress = () => {},
  target = null,
  underlined = true,
  responsiveLinkStyles = null
}) => {
  const props = {
    underlined,
    target,
    responsiveLinkStyles

import { View } from "react-native";
import styled from "styled-components";
import { breakpoints, spacing } from "@times-components/styleguide";

const LinkContainer = styled(View)`
  padding-left: ${spacing(2)};
  padding-right: ${spacing(2)};

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

export default LinkContainer;

display: none;
    }

    .supportSummaryClass {
      display: none;
    }

    .summaryHidden {
      display: none;
    }

    .leadSummary125Class {
      display: block;
    }

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

      .leadImageContainerClass {
        flex: 1;
        margin-bottom: 0;
        min-width: auto;
      }

      .leadContentContainerClass {
        flex-basis: 0 !important;
        flex-grow: 1;
        margin-bottom: ${spacing(2)};
        min-width: 300px;

}
`;

export const MetaContainer = styled(View)`
  align-items: center;

  @media (min-width: ${breakpoints.medium}px) {
    flex-direction: row;
    flex-wrap: wrap;
  }
`;

export const Separator = styled(View)`
  display: none;

  @media (min-width: ${breakpoints.medium}px) {
    background-color: ${colours.functional.keyline};
    display: flex;
    height: ${spacing(3)};
    margin: 0 ${spacing(2)};
    width: 1px;
  }
`;

export const StandfirstContainer = styled(Text)`
  @media (min-width: ${breakpoints.medium}px) {
    font-size: ${fontSizes.infoTitle}px;
    line-height: ${lineHeight({
      font: "bodyRegular",
      fontSize: "infoTitle"
    })}px;
    margin-bottom: ${spacing(5)};

margin-top: 0px;
  }
`;

export const Meta = styled(View)`
  width: 100%;

  @media (min-width: ${breakpoints.medium}px) {
    margin-top: 0;
  }
`;

export const MetaContainer = styled(View)`
  align-items: center;

  @media (min-width: ${breakpoints.medium}px) {
    flex-direction: row;
    flex-wrap: wrap;
  }
`;

export const Separator = styled(View)`
  display: none;

  @media (min-width: ${breakpoints.medium}px) {
    background-color: ${colours.functional.keyline};
    display: flex;
    height: ${spacing(3)};
    margin: 0 ${spacing(2)};
    width: 1px;
  }
`;

export const KeyFactsResponsiveContainer = styled(View)`
  margin: 5px 10px;

  @media (min-width: ${breakpoints.medium}px) {
    flex-direction: row;
    margin: 10px auto;
    width: 80.8%;
  }

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

export const KeyFactsResponsiveWrapper = styled(View)`
  @media (min-width: ${breakpoints.medium}px) {
    width: 80%;
  }
`;

export const KeyFactsTitleResponsive = styled(Text)`
  @media (min-width: ${breakpoints.medium}px) {
    padding-right: ${spacing(4)};
    width: 20%;
  }
`;

@media (min-width: ${breakpoints.wide}px) {
    max-width: 56.2%;
    padding-top: ${spacing(10)};
    padding-bottom: ${spacing(3)};
  }
`;

export const ResponsiveName = styled.h1`
  font-family: "${fonts.headline}";
  font-size: ${fontSizes.pageHeadline}px;
  color: ${colours.functional.brandColour};
  padding-bottom: ${spacing(4)};
  text-align: center;

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

export const ResponsiveDivider = styled(View)`
  border-top-color: ${colours.functional.keyline};
  border-top-style: solid;
  border-top-width: 1px;
  margin: 0 auto ${spacing(5)} auto;
  width: 200px;

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

@media (min-width: ${breakpoints.medium}px) {
    width: 50%;
    float: left;
    margin-right: ${spacing(4)};
    margin-bottom: 0px;
    margin-top: ${spacing(1)};
    padding-left: 0px;
    padding-right: 0px;
  }
`;

export const PullQuoteContainer = styled(View)`
  display: block;

  @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%;
  }
`;

import styled from "styled-components";
import { breakpoints, colours, spacing } from "@times-components/styleguide";

export const MetaTextElement = styled(Text)`
  @media (min-width: ${breakpoints.wide}px) {
    border-top: 1px solid ${colours.functional.keyline};
    line-height: 18px;
    padding-bottom: ${spacing(5)};
  }
`;

export const Meta = styled(View)`
  margin-left: ${spacing(2)};
  margin-right: ${spacing(2)};

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

  @media (min-width: ${breakpoints.wide}px) {
    padding-top: ${spacing(0)};
    margin-bottom: ${spacing(0)};
    padding-bottom: ${spacing(0)};
  }
`;

import { View } from "react-native";
import styled from "styled-components";
import { breakpoints, spacing } from "@times-components/styleguide";

export default styled(View)`
  padding-left: ${spacing(2)};
  padding-right: ${spacing(2)};

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