How to use the @guardian/src-foundations/typography.textSans.medium function in @guardian/src-foundations

right: 0;
			}
			& ~ span:after {
				top: 0;
			}
		}
	}
`

export const labelText = css`
	${textSans.medium()};
	color: ${palette.text.primary};
`

export const labelTextWithSupportingText = css`
	${textSans.medium()};
`

export const supportingText = css`
	${textSans.small()};
	color: ${palette.text.secondary};
`

export const tick = css`
	@supports (appearance: none) {
		/* overall positional properties */
		position: absolute;
		top: 15px;
		left: 9px;
		width: 6px;
		height: 12px;
		transform: rotate(45deg);

import { css } from "@emotion/core"
import { size, space, transitions } from "@guardian/src-foundations"
import { buttonLight, ButtonTheme } from "@guardian/src-foundations/themes"
import { textSans } from "@guardian/src-foundations/typography"
import { focusHalo } from "@guardian/src-foundations/accessibility"

export const button = css`
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	${textSans.medium({ fontWeight: "bold" })};
	box-sizing: border-box;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: ${transitions.medium};
	text-decoration: none;

	&:focus {
		${focusHalo};
	}
`

export const primary = ({
	button,
}: { button: ButtonTheme } = buttonLight) => css`
	background-color: ${button.backgroundPrimary};

export const textInput = ({
	textInput,
}: { textInput: TextInputTheme } = textInputLight) => css`
	height: ${size.large}px;
	${textSans.medium()};
	color: ${textInput.textInput};
	background-color: ${textInput.backgroundInput};
	border: 2px solid ${palette.border.textInput};
	padding: 0 ${space[2]}px;

	&:focus {
		${focusHalo};
	}
`

export const inlineError = ({
	inlineError,
}: { inlineError: InlineErrorTheme } = inlineErrorLight) => css`
	display: flex;
	align-items: center;
	${textSans.medium()};
	color: ${inlineError.text};
	margin-bottom: ${space[1]}px;

	svg {
		fill: currentColor;
		width: 30px;
	}
`

&:checked {
			&:after {
				transform: scale(0.6);
			}
		}
	}
`

export const labelText = ({ radio }: { radio: RadioTheme } = radioLight) => css`
	${textSans.medium()};
	color: ${radio.text};
`

export const labelTextWithSupportingText = css`
	${textSans.medium({ fontWeight: "bold" })};
`

export const supportingText = ({
	radio,
}: { radio: RadioTheme } = radioLight) => css`
	${textSans.small()};
	color: ${radio.textSupporting};
`

export const horizontal = css`
	flex-direction: row;

	label {
		margin-right: ${space[2]}px;
	}
`