Currency
Currency is an input field used for currency.
You're doing it wrong!
<script lang="ts">
	import { Currency } from 'stwui';
	const currency_usd = "svg-path";
	const phone = "svg-path";
	const email = "svg-path";
</script>
<Currency name="currency-1" placeholder="Basic" />
<Currency name="currency-2">
	<Currency.Label slot="label">Label</Currency.Label>
	<Currency.Leading slot="leading" data={currency_usd} />
	<Currency.Trailing slot="trailing" data={phone} />
</Currency>
<Currency name="currency-3" error="There has been an error">
	<Currency.Label slot="label">Label</Currency.Label>
	<Currency.Leading slot="leading" data={email} />
</Currency>Currency Props
| name | string | |
| error | string | undefined | |
| placholder | string | undefined | |
| value | string | undefined | |
| autocomplete | 'on' | 'off' | undefined | |
| autocapitalize | 'off' | 'none' | 'sentences' | 'words' | 'characters' | off | 
| readonly | boolean | |
| disabled | boolean | false | 
Currency Slots
| label | <Currency.Label slot="label" /> | 
| leading | <Currency.Leading slot="leading" /> | 
| trailing | <Currency.Trailing slot="trailing" /> | 
Currency.Label Slots
| default | 
Currency.Leading Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 | 
| size | string | 24px | 
| width | string | 24px | 
| height | string | 24px | 
| color | string | currentColor | 
| stroke | string | undefined | |
| fill | string | currentColor | 
Currency.Trailing Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 | 
| size | string | 24px | 
| width | string | 24px | 
| height | string | 24px | 
| color | string | currentColor | 
| stroke | string | undefined | |
| fill | string | currentColor | 
