How to use the @guardian/src-foundations.size.large function in @guardian/src-foundations

import { textSans } from "@guardian/src-foundations/typography"
import { focusHalo } from "@guardian/src-foundations/accessibility"

export const fieldset = css`
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	border: 0;
`

export const label = css`
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	min-height: ${size.large}px;

	&:hover {
		input {
			border-color: ${palette.border.checkboxHover};
		}
	}
`

export const labelWithSupportingText = css`
	align-items: flex-start;
	margin-bottom: ${space[3]}px;
`

export const checkbox = css`
	flex: 0 0 auto;
	box-sizing: border-box;

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 tertiary = ({
	button,
}: { button: ButtonTheme } = buttonLight) => css`
	padding: 0;
	background-color: ${button.backgroundTertiary};
	color: ${button.textTertiary};

	&:hover {
		text-decoration: underline;
	}
`

export const defaultSize = css`
	height: ${size.large}px;
	min-height: ${size.large}px;
	padding: 0 ${size.large / 2}px;
	border-radius: ${size.large / 2}px;
`

export const smallSize = css`
	height: ${size.medium}px;
	min-height: ${size.medium}px;
	padding: 0 ${size.medium / 2}px;
	border-radius: ${size.medium / 2}px;
`

export const iconDefault = css`
	svg {
		flex: 0 0 auto;
		display: block;
		fill: currentColor;

export const label = ({ radio }: { radio: RadioTheme } = radioLight) => css`
	cursor: pointer;
	display: flex;
	align-items: center;
	height: ${size.large}px;

	&:hover {
		input {
			border-color: ${radio.borderHover};
		}
	}
`

`

export const tertiary = ({
	button,
}: { button: ButtonTheme } = buttonLight) => css`
	padding: 0;
	background-color: ${button.backgroundTertiary};
	color: ${button.textTertiary};

	&:hover {
		text-decoration: underline;
	}
`

export const defaultSize = css`
	height: ${size.large}px;
	min-height: ${size.large}px;
	padding: 0 ${size.large / 2}px;
	border-radius: ${size.large / 2}px;
`

export const smallSize = css`
	height: ${size.medium}px;
	min-height: ${size.medium}px;
	padding: 0 ${size.medium / 2}px;
	border-radius: ${size.medium / 2}px;
`

export const iconDefault = css`
	svg {
		flex: 0 0 auto;
		display: block;