ToggleSwitch

<Stack direction="horizontal" align="center">
  <div id="default-toggle-label">Label</div>
  <ToggleSwitch aria-labelledby="default-toggle-label" />
</Stack>

<Stack gap="none">
  <Stack direction="horizontal" align="center" gap="spacious">
    <Text id="captioned-toggle-label" sx={{display: 'block', fontWeight: 'var(--base-text-weight-semibold)'}}>
      Label
    </Text>
    <ToggleSwitch aria-labelledby="captioned-toggle-label" aria-describedby="captioned-toggle-caption" />
  </Stack>
  <Text
    id="captioned-toggle-caption"
    sx={{color: 'var(--fgColor-muted)', display: 'block', fontSize: 'var(--text-body-size-small)'}}
  >
    Switch caption
  </Text>
</Stack>

<Stack>
  <Stack direction="horizontal" align="center">
    <div id="size-toggle-label">Default</div>
    <ToggleSwitch aria-labelledby="size-toggle-label" />
  </Stack>
  <Stack direction="horizontal" align="center">
    <div id="size-toggle-label-small">Small</div>
    <ToggleSwitch size="small" aria-labelledby="size-toggle-label-small" />
  </Stack>
</Stack>

<Stack direction="horizontal" align="center">
  <div id="statusAfterSwitch-toggle-label">Label</div>
  <ToggleSwitch statusLabelPosition="end" aria-labelledby="statusAfterSwitch-toggle-label" />
</Stack>

<Stack direction="horizontal" align="center">
  <div id="loading-toggle-label">Label</div>
  <ToggleSwitch loading aria-labelledby="loading-toggle-label" />
</Stack>