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

export const radio = ({ radio }: { radio: RadioTheme } = radioLight) => css`
	flex: 0 0 auto;
	cursor: pointer;
	box-sizing: border-box;
	display: inline-block;
	width: ${size.small}px;
	height: ${size.small}px;
	margin: 0 ${space[1]}px 0 0;

	border: 2px solid currentColor;
	border-radius: 50%;
	position: relative;
	transition: box-shadow ${transitions.short};
	transition-delay: 0.08s;

	color: ${radio.border};

	&:checked {
		color: ${radio.backgroundChecked};
	}

	&:focus {
		${focusHalo};

}
	}
`

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;
	display: inline-block;
	cursor: pointer;
	width: ${size.small}px;
	height: ${size.small}px;
	margin: 0 ${space[1]}px 0 0;

	border: 2px solid currentColor;
	position: relative;
	transition: box-shadow ${transitions.short};
	transition-delay: 0.08s;

	color: ${palette.border.checkbox};

	&:checked {
		border: 2px solid ${palette.border.checkboxChecked};

		& ~ span:before {
			right: 0;
		}
		& ~ span:after {