add InputGroup component

src/lib/InputGroup.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		class?: ClassValue | undefined | null;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: classList, children }: Props = $props();
+</script>
+
+<div class={['mt-4 flex min-w-80 items-end gap-2', classList]}>{@render children?.()}</div>

src/lib/index.ts

@@ -5,6 +5,7 @@ export { default as Combobox } from './Combobox.svelte';
 export { default as FramelessButton } from './FramelessButton.svelte';
 export { default as InjectGoogleMaps } from './InjectGoogleMaps.svelte';
 export { default as InjectUmami } from './InjectUmami.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
 export { default as Label } from './Label.svelte';
 export { default as Link } from './Link.svelte';
 export { default as PhoneInput } from './PhoneInput.svelte';

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import Combobox from '$lib/Combobox.svelte';
 	import Dateinput from '$lib/Dateinput.svelte';
 	import FramelessButton from '$lib/FramelessButton.svelte';
+	import InputGroup from '$lib/InputGroup.svelte';
 	import Link from '$lib/Link.svelte';
 	import PhoneInput from '$lib/PhoneInput.svelte';
 	import PinInput from '$lib/PinInput.svelte';
@@ -117,8 +118,10 @@
 <div class="component">
 	<p class="title">Styled Raw Input, Text Input</p>
 
-	<StyledRawInput placeholder="Type here..." />
+	<InputGroup>
-	<TextInput label="Write something here" placeholder="Enter text..." />
+		<StyledRawInput placeholder="Type here..." class="basis-1/2" />
+		<TextInput label="Write something here" placeholder="Enter text..." class="basis-1/2" />
+	</InputGroup>
 </div>
 
 <div class="component">