Align height of components that have the same size property value

## Summary
Many components use the 'size' property to allow different sized variants of the components to be used. However, some components have different heights even though they use the same size value.

For example, a default sized icon button is 32px high, whereas a default sized primary button is 40px high.

This causes issues when trying to align content and requires manual work to align them following the guidance around vertical rhythm.

## 💬 Description
This ticket involves reviewing all components and aligning the size property across them all. Some components do not currently use the size property, and therefore will need additional size variants adding to them, for example, switch and text field.

Need to test combinations of components together so that they are easy to align in rows of content without having to add additional alignment to containers.

Guidance suggests that default sized components should be used alongside other default sized components, so this change will make it easier to do that.

## 💰 User value
This makes aligning components much easier and contributes to creating a better sense of vertical rhythm throughout a pages contents.

## Additional info
Tell us anything else useful to help us understand your suggestion.

No files, tests, or entry points are named. Start by inventorying the components' existing size values and comparing their rendered heights, including components that lack a size property. Done means same-size components align in rows without extra container alignment, with combinations tested together.

Written by the indexing model from the issue text.