Better Switch Markup

[rushi]

We use the Switch from https://headlessui.com/react/switch which seems to have too verbose of a markup. Their reasons maybe valid but I feel it's too much to write so much markup just for a switch. For context when you want a switch with a label you write:

<Switch.Group>
    <Switch.Label direction="left">Hello World</Switch.Label>
    <Switch isChecked={checked} size="small" onChange={setChecked} />
</Switch.Group>

Xola needs a label all the time and rarely needs a label. So I'm thinking something like:

<SwitchWithLabel isChecked direction="left" size="small" onChange={setChecked}>
   Hello World
</SwitchWithLabel>

When you need a Switch without the label:

<Switch isChecked={checked} size="small" onChange={setChecked} />