@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/combobox/Combobox.stories.svelte

@@ -1,442 +1,442 @@
 <script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { userEvent, within } from '@storybook/test';
-	import { Root as ComboboxRootForMeta } from './index';
-	import * as Combobox from './index';
-	import { Icon } from '../icons';
-	import IconButton from '../icon-button/IconButton.svelte';
-	import Divider from '../divider/Divider.svelte';
-	import Tag from '../tag/Tag.svelte';
-	import Button from '../button/Button.svelte';
-
-	const { Story } = defineMeta({
-		component: ComboboxRootForMeta,
-		title: 'Design System/Combobox',
-		tags: ['autodocs'],
-		parameters: {
-			design: {
-				type: 'figma',
-				url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3294&t=sCuBI8dX6K6NjNR6-0'
-			}
-		}
-	});
-
-	const fruits = [
-		{ value: 'mango', label: 'Mango' },
-		{ value: 'watermelon', label: 'Watermelon' },
-		{ value: 'apple', label: 'Apple' },
-		{ value: 'pineapple', label: 'Pineapple' },
-		{ value: 'orange', label: 'Orange' },
-		{ value: 'grape', label: 'Grape' },
-		{ value: 'strawberry', label: 'Strawberry' },
-		{ value: 'banana', label: 'Banana' },
-		{ value: 'kiwi', label: 'Kiwi' },
-		{ value: 'peach', label: 'Peach' },
-		{ value: 'cherry', label: 'Cherry' },
-		{ value: 'blueberry', label: 'Blueberry' },
-		{ value: 'raspberry', label: 'Raspberry' },
-		{ value: 'blackberry', label: 'Blackberry' },
-		{ value: 'plum', label: 'Plum' },
-		{ value: 'apricot', label: 'Apricot' },
-		{ value: 'pear', label: 'Pear' },
-		{ value: 'grapefruit', label: 'Grapefruit' }
-	];
-
-	const categories = [
-		{ value: 'citrus', label: 'Citrus', items: ['orange', 'grapefruit', 'lemon'] },
-		{
-			value: 'berries',
-			label: 'Berries',
-			items: ['strawberry', 'blueberry', 'raspberry', 'blackberry']
-		},
-		{ value: 'tropical', label: 'Tropical', items: ['mango', 'pineapple', 'banana', 'kiwi'] },
-		{ value: 'stone', label: 'Stone Fruits', items: ['peach', 'cherry', 'plum', 'apricot'] },
-		{ value: 'other', label: 'Other', items: ['apple', 'pear', 'watermelon', 'grape'] }
-	];
-
-	let searchValue = $state('');
-	let searchValueSingle = $state('');
-	let searchValueGrouped = $state('');
-	let searchValueCustom = $state('');
-
-	let selected = $state<string[]>([]);
-	let selectedSingle = $state<string>('');
-	let selectedGrouped = $state<string[]>([]);
-	let selectedCustom = $state<string[]>([]);
-
-	const filteredFruits = $derived(
-		searchValue === ''
-			? fruits
-			: fruits.filter((fruit) => fruit.label.toLowerCase().includes(searchValue.toLowerCase()))
-	);
-
-	const filteredFruitsSingle = $derived(
-		searchValueSingle === ''
-			? fruits
-			: fruits.filter((fruit) =>
-					fruit.label.toLowerCase().includes(searchValueSingle.toLowerCase())
-				)
-	);
-
-	const filteredFruitsGrouped = $derived(
-		searchValueGrouped === ''
-			? fruits
-			: fruits.filter((fruit) =>
-					fruit.label.toLowerCase().includes(searchValueGrouped.toLowerCase())
-				)
-	);
-
-	const filteredFruitsCustom = $derived(
-		searchValueCustom === ''
-			? fruits
-			: fruits.filter((fruit) =>
-					fruit.label.toLowerCase().includes(searchValueCustom.toLowerCase())
-				)
-	);
-
-	const exactMatch = $derived(
-		filteredFruits.find((fruit) => fruit.value.toLowerCase() === searchValue.toLowerCase())
-	);
-
-	const exactMatchCustom = $derived(
-		filteredFruitsCustom.find(
-			(fruit) => fruit.value.toLowerCase() === searchValueCustom.toLowerCase()
-		)
-	);
-
-	let customAnchor = $state<HTMLElement>(null!);
-	let customAnchorButton = $state<HTMLElement>(null!);
-	let customAnchorSingle = $state<HTMLElement>(null!);
-	let customAnchorGrouped = $state<HTMLElement>(null!);
-	let customAnchorCustom = $state<HTMLElement>(null!);
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { userEvent, within } from '@storybook/test';
+  import { Root as ComboboxRootForMeta } from './index';
+  import * as Combobox from './index';
+  import { Icon } from '../icons';
+  import IconButton from '../icon-button/IconButton.svelte';
+  import Divider from '../divider/Divider.svelte';
+  import Tag from '../tag/Tag.svelte';
+  import Button from '../button/Button.svelte';
+
+  const { Story } = defineMeta({
+    component: ComboboxRootForMeta,
+    title: 'Design System/Combobox',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-3294&t=sCuBI8dX6K6NjNR6-0',
+      },
+    },
+  });
+
+  const fruits = [
+    { value: 'mango', label: 'Mango' },
+    { value: 'watermelon', label: 'Watermelon' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'pineapple', label: 'Pineapple' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'kiwi', label: 'Kiwi' },
+    { value: 'peach', label: 'Peach' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'blueberry', label: 'Blueberry' },
+    { value: 'raspberry', label: 'Raspberry' },
+    { value: 'blackberry', label: 'Blackberry' },
+    { value: 'plum', label: 'Plum' },
+    { value: 'apricot', label: 'Apricot' },
+    { value: 'pear', label: 'Pear' },
+    { value: 'grapefruit', label: 'Grapefruit' },
+  ];
+
+  const categories = [
+    { value: 'citrus', label: 'Citrus', items: ['orange', 'grapefruit', 'lemon'] },
+    {
+      value: 'berries',
+      label: 'Berries',
+      items: ['strawberry', 'blueberry', 'raspberry', 'blackberry'],
+    },
+    { value: 'tropical', label: 'Tropical', items: ['mango', 'pineapple', 'banana', 'kiwi'] },
+    { value: 'stone', label: 'Stone Fruits', items: ['peach', 'cherry', 'plum', 'apricot'] },
+    { value: 'other', label: 'Other', items: ['apple', 'pear', 'watermelon', 'grape'] },
+  ];
+
+  let searchValue = $state('');
+  let searchValueSingle = $state('');
+  let searchValueGrouped = $state('');
+  let searchValueCustom = $state('');
+
+  let selected = $state<string[]>([]);
+  let selectedSingle = $state<string>('');
+  let selectedGrouped = $state<string[]>([]);
+  let selectedCustom = $state<string[]>([]);
+
+  const filteredFruits = $derived(
+    searchValue === ''
+      ? fruits
+      : fruits.filter((fruit) => fruit.label.toLowerCase().includes(searchValue.toLowerCase()))
+  );
+
+  const filteredFruitsSingle = $derived(
+    searchValueSingle === ''
+      ? fruits
+      : fruits.filter((fruit) =>
+          fruit.label.toLowerCase().includes(searchValueSingle.toLowerCase())
+        )
+  );
+
+  const filteredFruitsGrouped = $derived(
+    searchValueGrouped === ''
+      ? fruits
+      : fruits.filter((fruit) =>
+          fruit.label.toLowerCase().includes(searchValueGrouped.toLowerCase())
+        )
+  );
+
+  const filteredFruitsCustom = $derived(
+    searchValueCustom === ''
+      ? fruits
+      : fruits.filter((fruit) =>
+          fruit.label.toLowerCase().includes(searchValueCustom.toLowerCase())
+        )
+  );
+
+  const exactMatch = $derived(
+    filteredFruits.find((fruit) => fruit.value.toLowerCase() === searchValue.toLowerCase())
+  );
+
+  const exactMatchCustom = $derived(
+    filteredFruitsCustom.find(
+      (fruit) => fruit.value.toLowerCase() === searchValueCustom.toLowerCase()
+    )
+  );
+
+  let customAnchor = $state<HTMLElement>(null!);
+  let customAnchorButton = $state<HTMLElement>(null!);
+  let customAnchorSingle = $state<HTMLElement>(null!);
+  let customAnchorGrouped = $state<HTMLElement>(null!);
+  let customAnchorCustom = $state<HTMLElement>(null!);
 </script>
 
 <Story name="Multiple Selection" asChild>
-	<Combobox.Root
-		onOpenChange={(o) => {
-			if (!o) searchValue = '';
-		}}
-		type="multiple"
-		name="favoriteFruit"
-		items={filteredFruits}
-		bind:value={selected}
-	>
-		<div class="flex gap-2">
-			{#each selected as fruit}
-				<Tag>
-					{fruit}
-				</Tag>
-			{/each}
-		</div>
-		<Combobox.Trigger>
-			<div bind:this={customAnchor}>
-				<IconButton rounded={false}>
-					<Icon iconName="Plus" />
-				</IconButton>
-			</div>
-		</Combobox.Trigger>
-		<Combobox.Content {customAnchor} class="flex flex-col justify-between">
-			<div>
-				<Combobox.Input
-					placeholder="Search a fruit"
-					oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
-					autofocus
-				/>
-				<Divider />
-			</div>
-			<div class="flex flex-grow flex-col">
-				{#if filteredFruits.length > 0}
-					<Combobox.Group>
-						<Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
-						{#each filteredFruits as fruit (fruit.value)}
-							<Combobox.Item value={fruit.value} label={fruit.label}>
-								{#snippet children({ selected })}
-									{fruit.label}
-									{#if selected}
-										<Combobox.Indicator />
-									{/if}
-								{/snippet}
-							</Combobox.Item>
-						{:else}
-							<span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
-						{/each}
-					</Combobox.Group>
-				{/if}
-			</div>
-			{#if !exactMatch && searchValue !== ''}
-				<Divider />
-
-				<Combobox.Add
-					onclick={() => {
-						selected.push(searchValue);
-						fruits.push({ value: searchValue, label: searchValue });
-						searchValue = '';
-					}}
-				>
-					<p>Add new fruit</p>
-				</Combobox.Add>
-			{/if}
-		</Combobox.Content>
-	</Combobox.Root>
+  <Combobox.Root
+    onOpenChange={(o) => {
+      if (!o) searchValue = '';
+    }}
+    type="multiple"
+    name="favoriteFruit"
+    items={filteredFruits}
+    bind:value={selected}
+  >
+    <div class="flex gap-2">
+      {#each selected as fruit}
+        <Tag>
+          {fruit}
+        </Tag>
+      {/each}
+    </div>
+    <Combobox.Trigger>
+      <div bind:this={customAnchor}>
+        <IconButton rounded={false}>
+          <Icon iconName="Plus" />
+        </IconButton>
+      </div>
+    </Combobox.Trigger>
+    <Combobox.Content {customAnchor} class="flex flex-col justify-between">
+      <div>
+        <Combobox.Input
+          placeholder="Search a fruit"
+          oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
+          autofocus
+        />
+        <Divider />
+      </div>
+      <div class="flex flex-grow flex-col">
+        {#if filteredFruits.length > 0}
+          <Combobox.Group>
+            <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+            {#each filteredFruits as fruit (fruit.value)}
+              <Combobox.Item value={fruit.value} label={fruit.label}>
+                {#snippet children({ selected })}
+                  {fruit.label}
+                  {#if selected}
+                    <Combobox.Indicator />
+                  {/if}
+                {/snippet}
+              </Combobox.Item>
+            {:else}
+              <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+            {/each}
+          </Combobox.Group>
+        {/if}
+      </div>
+      {#if !exactMatch && searchValue !== ''}
+        <Divider />
+
+        <Combobox.Add
+          onclick={() => {
+            selected.push(searchValue);
+            fruits.push({ value: searchValue, label: searchValue });
+            searchValue = '';
+          }}
+        >
+          <p>Add new fruit</p>
+        </Combobox.Add>
+      {/if}
+    </Combobox.Content>
+  </Combobox.Root>
 </Story>
 
 <Story name="Single Selection" asChild>
-	<Combobox.Root
-		onOpenChange={(o) => {
-			if (!o) searchValueSingle = '';
-		}}
-		type="single"
-		name="singleFruit"
-		items={filteredFruitsSingle}
-		bind:value={selectedSingle}
-	>
-		<Combobox.Trigger>
-			<div bind:this={customAnchorSingle}>
-				<Button variant="secondary" size="sm">
-					{selectedSingle ? selectedSingle : 'Select a fruit'}
-				</Button>
-			</div>
-		</Combobox.Trigger>
-		<Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorSingle}>
-			<div class="flex flex-grow flex-col">
-				{#if filteredFruitsSingle.length > 0}
-					<Combobox.Group>
-						<Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
-						{#each filteredFruitsSingle as fruit (fruit.value)}
-							<Combobox.Item value={fruit.value} label={fruit.label}>
-								{#snippet children({ selected })}
-									{fruit.label}
-									{#if selected}
-										<Combobox.Indicator />
-									{/if}
-								{/snippet}
-							</Combobox.Item>
-						{:else}
-							<span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
-						{/each}
-					</Combobox.Group>
-				{/if}
-			</div>
-		</Combobox.Content>
-	</Combobox.Root>
+  <Combobox.Root
+    onOpenChange={(o) => {
+      if (!o) searchValueSingle = '';
+    }}
+    type="single"
+    name="singleFruit"
+    items={filteredFruitsSingle}
+    bind:value={selectedSingle}
+  >
+    <Combobox.Trigger>
+      <div bind:this={customAnchorSingle}>
+        <Button variant="secondary" size="sm">
+          {selectedSingle ? selectedSingle : 'Select a fruit'}
+        </Button>
+      </div>
+    </Combobox.Trigger>
+    <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorSingle}>
+      <div class="flex flex-grow flex-col">
+        {#if filteredFruitsSingle.length > 0}
+          <Combobox.Group>
+            <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+            {#each filteredFruitsSingle as fruit (fruit.value)}
+              <Combobox.Item value={fruit.value} label={fruit.label}>
+                {#snippet children({ selected })}
+                  {fruit.label}
+                  {#if selected}
+                    <Combobox.Indicator />
+                  {/if}
+                {/snippet}
+              </Combobox.Item>
+            {:else}
+              <span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+            {/each}
+          </Combobox.Group>
+        {/if}
+      </div>
+    </Combobox.Content>
+  </Combobox.Root>
 </Story>
 
 <Story name="Grouped Items" asChild>
-	<Combobox.Root
-		onOpenChange={(o) => {
-			if (!o) searchValueGrouped = '';
-		}}
-		type="multiple"
-		name="groupedFruits"
-		items={filteredFruitsGrouped}
-		bind:value={selectedGrouped}
-	>
-		<div class="flex flex-wrap gap-2">
-			{#each selectedGrouped as fruit}
-				<Tag>
-					{fruit}
-				</Tag>
-			{/each}
-		</div>
-		<Combobox.Trigger>
-			<div bind:this={customAnchorGrouped}>
-				<Button variant="primary" size="sm">
-					<Icon iconName="List" />
-					Select fruits by category
-				</Button>
-			</div>
-		</Combobox.Trigger>
-		<Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorGrouped}>
-			<div>
-				<Combobox.Input
-					placeholder="Search across categories"
-					oninput={(e: Event) => (searchValueGrouped = (e.target as HTMLInputElement).value)}
-					autofocus
-				/>
-				<Divider />
-			</div>
-			<div class="flex max-h-80 flex-grow flex-col overflow-y-auto">
-				{#if searchValueGrouped === ''}
-					{#each categories as category}
-						<Combobox.Group>
-							<Combobox.GroupHeading>{category.label}</Combobox.GroupHeading>
-							{#each category.items as item}
-								{@const fruit = fruits.find((f) => f.value === item)}
-								{#if fruit}
-									<Combobox.Item value={fruit.value} label={fruit.label}>
-										{#snippet children({ selected })}
-											{fruit.label}
-											{#if selected}
-												<Combobox.Indicator />
-											{/if}
-										{/snippet}
-									</Combobox.Item>
-								{/if}
-							{/each}
-						</Combobox.Group>
-					{/each}
-				{:else if filteredFruitsGrouped.length > 0}
-					<Combobox.Group>
-						<Combobox.GroupHeading>Search Results</Combobox.GroupHeading>
-						{#each filteredFruitsGrouped as fruit (fruit.value)}
-							<Combobox.Item value={fruit.value} label={fruit.label}>
-								{#snippet children({ selected })}
-									{fruit.label}
-									{#if selected}
-										<Combobox.Indicator />
-									{/if}
-								{/snippet}
-							</Combobox.Item>
-						{/each}
-					</Combobox.Group>
-				{:else}
-					<span class="text-muted-foreground block px-5 py-2 text-sm"> No results found </span>
-				{/if}
-			</div>
-		</Combobox.Content>
-	</Combobox.Root>
+  <Combobox.Root
+    onOpenChange={(o) => {
+      if (!o) searchValueGrouped = '';
+    }}
+    type="multiple"
+    name="groupedFruits"
+    items={filteredFruitsGrouped}
+    bind:value={selectedGrouped}
+  >
+    <div class="flex flex-wrap gap-2">
+      {#each selectedGrouped as fruit}
+        <Tag>
+          {fruit}
+        </Tag>
+      {/each}
+    </div>
+    <Combobox.Trigger>
+      <div bind:this={customAnchorGrouped}>
+        <Button variant="primary" size="sm">
+          <Icon iconName="List" />
+          Select fruits by category
+        </Button>
+      </div>
+    </Combobox.Trigger>
+    <Combobox.Content class="flex flex-col justify-between" customAnchor={customAnchorGrouped}>
+      <div>
+        <Combobox.Input
+          placeholder="Search across categories"
+          oninput={(e: Event) => (searchValueGrouped = (e.target as HTMLInputElement).value)}
+          autofocus
+        />
+        <Divider />
+      </div>
+      <div class="flex max-h-80 flex-grow flex-col overflow-y-auto">
+        {#if searchValueGrouped === ''}
+          {#each categories as category}
+            <Combobox.Group>
+              <Combobox.GroupHeading>{category.label}</Combobox.GroupHeading>
+              {#each category.items as item}
+                {@const fruit = fruits.find((f) => f.value === item)}
+                {#if fruit}
+                  <Combobox.Item value={fruit.value} label={fruit.label}>
+                    {#snippet children({ selected })}
+                      {fruit.label}
+                      {#if selected}
+                        <Combobox.Indicator />
+                      {/if}
+                    {/snippet}
+                  </Combobox.Item>
+                {/if}
+              {/each}
+            </Combobox.Group>
+          {/each}
+        {:else if filteredFruitsGrouped.length > 0}
+          <Combobox.Group>
+            <Combobox.GroupHeading>Search Results</Combobox.GroupHeading>
+            {#each filteredFruitsGrouped as fruit (fruit.value)}
+              <Combobox.Item value={fruit.value} label={fruit.label}>
+                {#snippet children({ selected })}
+                  {fruit.label}
+                  {#if selected}
+                    <Combobox.Indicator />
+                  {/if}
+                {/snippet}
+              </Combobox.Item>
+            {/each}
+          </Combobox.Group>
+        {:else}
+          <span class="text-muted-foreground block px-5 py-2 text-sm"> No results found </span>
+        {/if}
+      </div>
+    </Combobox.Content>
+  </Combobox.Root>
 </Story>
 
 <Story
-	name="Interaction Test"
-	asChild
-	play={async ({ canvasElement }) => {
-		// Get the canvas element
-		const canvas = within(canvasElement);
+  name="Interaction Test"
+  asChild
+  play={async ({ canvasElement }) => {
+    // Get the canvas element
+    const canvas = within(canvasElement);
 
-		// Find and click the trigger button to open the combobox
-		const triggerButton = canvas.getByTestId('combobox-trigger');
-		await userEvent.click(triggerButton);
+    // Find and click the trigger button to open the combobox
+    const triggerButton = canvas.getByTestId('combobox-trigger');
+    await userEvent.click(triggerButton);
 
-		// Wait for the combobox content to appear in the document
-		await new Promise((resolve) => setTimeout(resolve, 300));
+    // Wait for the combobox content to appear in the document
+    await new Promise((resolve) => setTimeout(resolve, 300));
 
-		// Find the combobox content in the document
-		const comboboxContent = document.querySelector(
-			'[data-testid="combobox-content"]'
-		) as HTMLElement;
-		if (!comboboxContent) {
-			console.log('Combobox content not found');
-			return;
-		}
+    // Find the combobox content in the document
+    const comboboxContent = document.querySelector(
+      '[data-testid="combobox-content"]'
+    ) as HTMLElement;
+    if (!comboboxContent) {
+      console.log('Combobox content not found');
+      return;
+    }
 
-		// Use within to scope queries to the combobox content
-		const contentScope = within(comboboxContent);
-		const searchInput = contentScope.getByTestId('combobox-input');
+    // Use within to scope queries to the combobox content
+    const contentScope = within(comboboxContent);
+    const searchInput = contentScope.getByTestId('combobox-input');
 
-		// Type "berry" in the search input
-		await userEvent.type(searchInput, 'berry');
+    // Type "berry" in the search input
+    await userEvent.type(searchInput, 'berry');
 
-		// Wait for the filtering to complete
-		await new Promise((resolve) => setTimeout(resolve, 300));
+    // Wait for the filtering to complete
+    await new Promise((resolve) => setTimeout(resolve, 300));
 
-		// Find and click on the Strawberry option
-		const strawberryOption = contentScope.getByText('Strawberry');
-		await userEvent.click(strawberryOption);
+    // Find and click on the Strawberry option
+    const strawberryOption = contentScope.getByText('Strawberry');
+    await userEvent.click(strawberryOption);
 
-		// Wait for selection to be processed
+    // Wait for selection to be processed
 
-		// Open the combobox again
+    // Open the combobox again
 
-		// Get the search input again
+    // Get the search input again
 
-		// Clear the previous search and type "mango"
-		await userEvent.clear(searchInput);
-		await userEvent.type(searchInput, 'mango');
+    // Clear the previous search and type "mango"
+    await userEvent.clear(searchInput);
+    await userEvent.type(searchInput, 'mango');
 
-		// Wait for filtering to complete
-		await new Promise((resolve) => setTimeout(resolve, 300));
+    // Wait for filtering to complete
+    await new Promise((resolve) => setTimeout(resolve, 300));
 
-		// Find and click on the Mango option
-		const mangoOption = contentScope.getByText('Mango');
-		await userEvent.click(mangoOption);
+    // Find and click on the Mango option
+    const mangoOption = contentScope.getByText('Mango');
+    await userEvent.click(mangoOption);
 
-		await userEvent.keyboard('{Escape}');
+    await userEvent.keyboard('{Escape}');
 
-		// Test complete
-		console.log('Successfully selected Strawberry and Mango');
-	}}
+    // Test complete
+    console.log('Successfully selected Strawberry and Mango');
+  }}
 >
-	<div data-testid="combobox-container">
-		<Combobox.Root
-			onOpenChange={(o) => {
-				if (!o) searchValue = '';
-			}}
-			type="multiple"
-			name="favoriteFruit"
-			items={filteredFruits}
-			bind:value={selected}
-		>
-			<div class="flex gap-2" data-testid="selected-tags">
-				{#each selected as fruit}
-					<Tag>
-						<div data-value={fruit}>
-							{fruit}
-						</div>
-					</Tag>
-				{/each}
-			</div>
-			<Combobox.Trigger data-testid="combobox-trigger">
-				<div bind:this={customAnchor}>
-					<IconButton rounded={false}>
-						<Icon iconName="Plus" />
-					</IconButton>
-				</div>
-			</Combobox.Trigger>
-			<Combobox.Content
-				{customAnchor}
-				class="flex flex-col justify-between"
-				data-testid="combobox-content"
-			>
-				<div>
-					<Combobox.Input
-						placeholder="Search a fruit"
-						oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
-						autofocus
-						data-testid="combobox-input"
-					/>
-					<Divider />
-				</div>
-				<div class="flex flex-grow flex-col">
-					{#if filteredFruits.length > 0}
-						<Combobox.Group>
-							<Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
-							{#each filteredFruits as fruit (fruit.value)}
-								<Combobox.Item
-									value={fruit.value}
-									label={fruit.label}
-									data-testid={`fruit-option-${fruit.value}`}
-								>
-									{#snippet children({ selected })}
-										{fruit.label}
-										{#if selected}
-											<Combobox.Indicator />
-										{/if}
-									{/snippet}
-								</Combobox.Item>
-							{:else}
-								<span class="block px-5 py-2 text-sm text-muted-foreground">
-									No results found
-								</span>
-							{/each}
-						</Combobox.Group>
-					{/if}
-				</div>
-				{#if !exactMatch && searchValue !== ''}
-					<Divider />
-
-					<Combobox.Add
-						data-testid="add-new-fruit"
-						onclick={() => {
-							selected.push(searchValue);
-							fruits.push({ value: searchValue, label: searchValue });
-							searchValue = '';
-						}}
-					>
-						<p>Add new fruit</p>
-					</Combobox.Add>
-				{/if}
-			</Combobox.Content>
-		</Combobox.Root>
-	</div>
+  <div data-testid="combobox-container">
+    <Combobox.Root
+      onOpenChange={(o) => {
+        if (!o) searchValue = '';
+      }}
+      type="multiple"
+      name="favoriteFruit"
+      items={filteredFruits}
+      bind:value={selected}
+    >
+      <div class="flex gap-2" data-testid="selected-tags">
+        {#each selected as fruit}
+          <Tag>
+            <div data-value={fruit}>
+              {fruit}
+            </div>
+          </Tag>
+        {/each}
+      </div>
+      <Combobox.Trigger data-testid="combobox-trigger">
+        <div bind:this={customAnchor}>
+          <IconButton rounded={false}>
+            <Icon iconName="Plus" />
+          </IconButton>
+        </div>
+      </Combobox.Trigger>
+      <Combobox.Content
+        {customAnchor}
+        class="flex flex-col justify-between"
+        data-testid="combobox-content"
+      >
+        <div>
+          <Combobox.Input
+            placeholder="Search a fruit"
+            oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
+            autofocus
+            data-testid="combobox-input"
+          />
+          <Divider />
+        </div>
+        <div class="flex flex-grow flex-col">
+          {#if filteredFruits.length > 0}
+            <Combobox.Group>
+              <Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+              {#each filteredFruits as fruit (fruit.value)}
+                <Combobox.Item
+                  value={fruit.value}
+                  label={fruit.label}
+                  data-testid={`fruit-option-${fruit.value}`}
+                >
+                  {#snippet children({ selected })}
+                    {fruit.label}
+                    {#if selected}
+                      <Combobox.Indicator />
+                    {/if}
+                  {/snippet}
+                </Combobox.Item>
+              {:else}
+                <span class="block px-5 py-2 text-sm text-muted-foreground">
+                  No results found
+                </span>
+              {/each}
+            </Combobox.Group>
+          {/if}
+        </div>
+        {#if !exactMatch && searchValue !== ''}
+          <Divider />
+
+          <Combobox.Add
+            data-testid="add-new-fruit"
+            onclick={() => {
+              selected.push(searchValue);
+              fruits.push({ value: searchValue, label: searchValue });
+              searchValue = '';
+            }}
+          >
+            <p>Add new fruit</p>
+          </Combobox.Add>
+        {/if}
+      </Combobox.Content>
+    </Combobox.Root>
+  </div>
 </Story>