Fix the worst conflicts I've ever delt with

2024-09-11 12:25:42 +03:00 · 2024-08-05 14:01:49 +02:00 · 2024-08-05 14:01:49 +02:00 · 8eb5371b0a
commit 8eb5371b0a
parent 1e342de03a aaf933f42d
75 changed files with 500 additions and 612 deletions
--- a/apps/desktop/src/lib/branch/ActiveBranchStatus.svelte
+++ b/apps/desktop/src/lib/branch/ActiveBranchStatus.svelte
@ -90,7 +90,7 @@
 		style="ghost"
 		outline
 		shrinkable
-		on:click={(e) => {
+		onclick={(e) => {
 			const url = gitHostBranch?.url;
 			if (url) openExternalUrl(url);
 			e.preventDefault();
--- a/apps/desktop/src/lib/branch/BranchDropzone.svelte
+++ b/apps/desktop/src/lib/branch/BranchDropzone.svelte
@ -64,7 +64,7 @@
 						style="ghost"
 						outline
 						icon="plus-small"
-						on:mousedown={async () => await branchController.createBranch({})}>New branch</Button
+						onmousedown={async () => await branchController.createBranch({})}>New branch</Button
 					>
 				</div>
 			</div>
--- a/apps/desktop/src/lib/branch/BranchHeader.svelte
+++ b/apps/desktop/src/lib/branch/BranchHeader.svelte
@ -128,7 +128,7 @@
 			<div class="collapsed-lane__draggable" data-drag-handle>
 				<Icon name="draggable" />
 			</div>
-			<Button style="ghost" outline icon="unfold-lane" help="Expand lane" on:click={expandLane} />
+			<Button style="ghost" outline icon="unfold-lane" help="Expand lane" onclick={expandLane} />
 		</div>

 		<div class="collapsed-lane__info-wrap" bind:clientHeight={headerInfoHeight}>
@ -225,7 +225,7 @@
 							outline
 							help="When selected, new changes will land here"
 							icon="target"
-							on:click={async () => {
+							onclick={async () => {
 								isTargetBranchAnimated = true;
 								await branchController.setSelectedForChanges(branch.id);
 							}}
@ -250,7 +250,7 @@
 							style="ghost"
 							outline
 							icon="kebab"
-							on:click={() => {
+							onclick={() => {
 								contextMenu.toggle();
 							}}
 						/>
--- a/apps/desktop/src/lib/branch/BranchLaneContextMenu.svelte
+++ b/apps/desktop/src/lib/branch/BranchLaneContextMenu.svelte
@ -158,11 +158,11 @@
 	<TextBox label="Remote branch name" id="newRemoteName" bind:value={newRemoteName} focus />

 	{#snippet controls(close)}
-		<Button style="ghost" outline type="reset" on:click={close}>Cancel</Button>
+		<Button style="ghost" outline type="reset" onclick={close}>Cancel</Button>
 		<Button
 			style="pop"
 			kind="solid"
-			on:click={() => {
+			onclick={() => {
 				branchController.updateBranchRemoteName(branch.id, newRemoteName);
 				close();
 			}}
@ -177,11 +177,11 @@
 		Are you sure you want to delete <code class="code-string">{branch.name}</code>?
 	{/snippet}
 	{#snippet controls(close)}
-		<Button style="ghost" outline on:click={close}>Cancel</Button>
+		<Button style="ghost" outline onclick={close}>Cancel</Button>
 		<Button
 			style="error"
 			kind="solid"
-			on:click={async () => {
+			onclick={async () => {
 				await branchController.deleteBranch(branch.id);
 				close();
 			}}
--- a/apps/desktop/src/lib/branch/BranchPreviewHeader.svelte
+++ b/apps/desktop/src/lib/branch/BranchPreviewHeader.svelte
@ -47,7 +47,7 @@
 						style="ghost"
 						outline
 						shrinkable
-						on:click={(e) => {
+						onclick={(e) => {
 							const url = gitHostBranch?.url;
 							if (url) openExternalUrl(url);
 							e.preventDefault();
@ -68,7 +68,7 @@
 						icon="pr-small"
 						style="ghost"
 						outline
-						on:click={(e) => {
+						onclick={(e) => {
 							const url = pr?.htmlUrl;
 							if (url) openExternalUrl(url);
 							e.preventDefault();
@ -88,7 +88,7 @@
 					help="Restores these changes into your working directory"
 					icon="plus-small"
 					loading={isApplying}
-					on:click={async () => {
+					onclick={async () => {
 						isApplying = true;
 						try {
 							if (localBranch) {
--- a/apps/desktop/src/lib/branch/PassphraseBox.svelte
+++ b/apps/desktop/src/lib/branch/PassphraseBox.svelte
@ -39,7 +39,7 @@
 				style="ghost"
 				outline
 				disabled={isSubmitting}
-				on:click={async () => {
+				onclick={async () => {
 					if (!prompt) return;
 					prompt.respond(null);
 				}}
@ -50,7 +50,7 @@
 				style="pop"
 				kind="solid"
 				grow
-				on:click={async () => await submit()}
+				onclick={async () => await submit()}
 				disabled={submitDisabled || isSubmitting}
 				loading={isSubmitting}
 			>
--- a/apps/desktop/src/lib/commit/CommitCard.svelte
+++ b/apps/desktop/src/lib/commit/CommitCard.svelte
@ -125,13 +125,13 @@
 		isExpanded={true}
 	/>
 	{#snippet controls(close)}
-		<Button style="ghost" outline on:click={close}>Cancel</Button>
+		<Button style="ghost" outline onclick={close}>Cancel</Button>
 		<Button
 			style="neutral"
 			kind="solid"
 			grow
 			disabled={!commitMessageValid}
-			on:click={submitCommitMessageModal}
+			onclick={submitCommitMessageModal}
 		>
 			Submit
 		</Button>
@ -304,7 +304,7 @@
 										style="ghost"
 										outline
 										icon="undo-small"
-										on:click={(e) => {
+										onclick={(e) => {
 											currentCommitMessage.set(commit.description);
 											e.stopPropagation();
 											undoCommit(commit);
@ -315,7 +315,7 @@
 										style="ghost"
 										outline
 										icon="edit-small"
-										on:click={openCommitMessageModal}>Edit message</Button
+										onclick={openCommitMessageModal}>Edit message</Button
 									>
 								{/if}
 							</div>
--- a/apps/desktop/src/lib/commit/CommitDialog.svelte
+++ b/apps/desktop/src/lib/commit/CommitDialog.svelte
@ -74,7 +74,7 @@
 					style="ghost"
 					outline
 					id="commit-to-branch"
-					on:click={() => {
+					onclick={() => {
 						$expanded = false;
 					}}
 				>
@ -90,7 +90,7 @@
 			loading={isCommitting}
 			disabled={(isCommitting || !commitMessageValid || $selectedOwnership.isEmpty()) && $expanded}
 			id="commit-to-branch"
-			on:click={() => {
+			onclick={() => {
 				if ($expanded) {
 					commit();
 				} else {
--- a/apps/desktop/src/lib/commit/CommitList.svelte
+++ b/apps/desktop/src/lib/commit/CommitList.svelte
@ -159,7 +159,7 @@
 							style="warning"
 							kind="solid"
 							loading={isIntegratingCommits}
-							on:click={async () => {
+							onclick={async () => {
 								isIntegratingCommits = true;
 								try {
 									await branchController.mergeUpstream($branch.id);
@ -225,7 +225,7 @@
 							kind="solid"
 							wide
 							loading={isPushingCommits}
-							on:click={async () => {
+							onclick={async () => {
 								isPushingCommits = true;
 								try {
 									await branchController.pushBranch($branch.id, $branch.requiresForce);
--- a/apps/desktop/src/lib/commit/CommitMessageInput.svelte
+++ b/apps/desktop/src/lib/commit/CommitMessageInput.svelte
@ -207,25 +207,27 @@
 				disabled={!($aiGenEnabled && aiConfigurationValid)}
 				loading={aiLoading}
 				menuPosition="top"
-				on:click={async () => await generateCommitMessage($branch.files)}
+				onclick={async () => await generateCommitMessage($branch.files)}
 			>
 				Generate message

-				<ContextMenuSection slot="context-menu">
-					<ContextMenuItem
-						label="Extra concise"
-						on:click={() => ($commitGenerationExtraConcise = !$commitGenerationExtraConcise)}
-					>
-						<Checkbox small slot="control" bind:checked={$commitGenerationExtraConcise} />
-					</ContextMenuItem>
+				{#snippet contextMenuSlot()}
+					<ContextMenuSection>
+						<ContextMenuItem
+							label="Extra concise"
+							on:click={() => ($commitGenerationExtraConcise = !$commitGenerationExtraConcise)}
+						>
+							<Checkbox small slot="control" bind:checked={$commitGenerationExtraConcise} />
+						</ContextMenuItem>

-					<ContextMenuItem
-						label="Use emojis 😎"
-						on:click={() => ($commitGenerationUseEmojis = !$commitGenerationUseEmojis)}
-					>
-						<Checkbox small slot="control" bind:checked={$commitGenerationUseEmojis} />
-					</ContextMenuItem>
-				</ContextMenuSection>
+						<ContextMenuItem
+							label="Use emojis 😎"
+							on:click={() => ($commitGenerationUseEmojis = !$commitGenerationUseEmojis)}
+						>
+							<Checkbox small slot="control" bind:checked={$commitGenerationUseEmojis} />
+						</ContextMenuItem>
+					</ContextMenuSection>
+				{/snippet}
 			</DropDownButton>
 		</div>
 	</div>
--- a/apps/desktop/src/lib/components/AIPromptEdit/AIPromptEdit.svelte
+++ b/apps/desktop/src/lib/components/AIPromptEdit/AIPromptEdit.svelte
@ -38,7 +38,7 @@
 		<h3 class="text-base-15 text-bold">
 			{promptUse === 'commits' ? 'Commit message' : 'Branch name'}
 		</h3>
-		<Button style="ghost" outline icon="plus-small" on:click={createNewPrompt}>New prompt</Button>
+		<Button style="ghost" outline icon="plus-small" onclick={createNewPrompt}>New prompt</Button>
 	</div>

 	<div class="content">
--- a/apps/desktop/src/lib/components/AIPromptEdit/Content.svelte
+++ b/apps/desktop/src/lib/components/AIPromptEdit/Content.svelte
@ -141,23 +141,23 @@
 		{#if displayMode === 'writable'}
 			<div class="actions">
 				{#if editing}
-					<Button style="ghost" outline on:click={() => cancel()}>Cancel</Button>
+					<Button style="ghost" outline onclick={() => cancel()}>Cancel</Button>
 					<Button
 						disabled={errorMessages.length > 0}
 						kind="solid"
 						style="pop"
-						on:click={() => save()}>Save Changes</Button
+						onclick={() => save()}>Save Changes</Button
 					>
 				{:else}
 					<Button
 						style="error"
-						on:click={(e) => {
+						onclick={(e) => {
 							e.stopPropagation();
 							deletePrompt();
 						}}
 						icon="bin-small">Delete</Button
 					>
-					<Button style="ghost" outline icon="edit-text" on:click={() => (editing = true)}
+					<Button style="ghost" outline icon="edit-text" onclick={() => (editing = true)}
 						>Edit prompt</Button
 					>
 				{/if}
--- a/apps/desktop/src/lib/components/AIPromptEdit/DialogBubble.svelte
+++ b/apps/desktop/src/lib/components/AIPromptEdit/DialogBubble.svelte
@ -85,12 +85,12 @@
 					icon="bin-small"
 					kind="soft"
 					style="error"
-					on:click={() => dispatcher('removeLastExample')}
+					onclick={() => dispatcher('removeLastExample')}
 				>
 					Remove example
 				</Button>
 			{/if}
-			<Button style="ghost" outline grow on:click={() => dispatcher('addExample')}>
+			<Button style="ghost" outline grow onclick={() => dispatcher('addExample')}>
 				Add new example
 			</Button>
 		</div>
--- a/apps/desktop/src/lib/components/AppUpdater.svelte
+++ b/apps/desktop/src/lib/components/AppUpdater.svelte
@ -21,7 +21,7 @@
 {#if $update?.version && $update?.status !== 'UPTODATE' && !dismissed}
 	<div class="update-banner" class:busy={$update?.status === 'PENDING'}>
 		<div class="floating-button">
-			<Button icon="cross-small" style="ghost" on:click={() => (dismissed = true)} />
+			<Button icon="cross-small" style="ghost" onclick={() => (dismissed = true)} />
 		</div>
 		<div class="img">
 			<div class="circle-img">
@ -109,7 +109,7 @@
 			<Button
 				style="ghost"
 				outline
-				on:mousedown={() => {
+				onmousedown={() => {
 					const notes = $update?.body?.trim() || 'no release notes available';
 					showToast({
 						id: 'release-notes',
@ -130,7 +130,7 @@
 							wide
 							style="pop"
 							kind="solid"
-							on:mousedown={async () => {
+							onmousedown={async () => {
 								await updaterService.installUpdate();
 							}}
 						>
@ -140,7 +140,7 @@
 				{:else if $update.status === 'DONE'}
 					<div class="sliding-gradient"></div>
 					<div class="cta-btn" transition:fade={{ duration: 100 }}>
-						<Button style="pop" kind="solid" wide on:click={() => updaterService.relaunchApp()}
+						<Button style="pop" kind="solid" wide onclick={() => updaterService.relaunchApp()}
 							>Restart</Button
 						>
 					</div>
--- a/apps/desktop/src/lib/components/BackButton.svelte
+++ b/apps/desktop/src/lib/components/BackButton.svelte
@ -6,7 +6,7 @@
 <Button
 	style="ghost"
 	outline
-	on:mousedown={() => {
+	onmousedown={() => {
 		if (history.length > 0) {
 			history.back();
 		} else {
--- a/apps/desktop/src/lib/components/BaseBranch.svelte
+++ b/apps/desktop/src/lib/components/BaseBranch.svelte
@ -46,7 +46,7 @@
 			style="pop"
 			kind="solid"
 			help={`Merges the commits from ${base.branchName} into the base of all applied virtual branches`}
-			on:click={() => {
+			onclick={() => {
 				if ($mergeUpstreamWarningDismissed) {
 					updateBaseBranch();
 				} else {
@ -116,11 +116,11 @@
 	</label>

 	{#snippet controls(close)}
-		<Button style="ghost" outline on:click={close}>Cancel</Button>
+		<Button style="ghost" outline onclick={close}>Cancel</Button>
 		<Button
 			style="pop"
 			kind="solid"
-			on:click={() => {
+			onclick={() => {
 				updateBaseBranch();
 				if (mergeUpstreamWarningDismissedCheckbox) {
 					mergeUpstreamWarningDismissed.set(true);
--- a/apps/desktop/src/lib/components/BaseBranchSwitch.svelte
+++ b/apps/desktop/src/lib/components/BaseBranchSwitch.svelte
@ -115,7 +115,7 @@
 						size="cta"
 						style="ghost"
 						outline
-						on:click={onSetBaseBranchClick}
+						onclick={onSetBaseBranchClick}
 						id="set-base-branch"
 						loading={isSwitching}
 						disabled={(selectedBranch.name === $baseBranch.branchName &&
--- a/apps/desktop/src/lib/components/FilterBranchesButton.svelte
+++ b/apps/desktop/src/lib/components/FilterBranchesButton.svelte
@ -29,7 +29,7 @@
 		style="ghost"
 		outline
 		icon={$filtersActive ? 'filter-applied-small' : 'filter-small'}
-		on:mousedown={onFilterClick}
+		onmousedown={onFilterClick}
 	>
 		Filter
 	</Button>
--- a/apps/desktop/src/lib/components/InsertEmptyCommitAction.svelte
+++ b/apps/desktop/src/lib/components/InsertEmptyCommitAction.svelte
@ -25,7 +25,7 @@
 			width={26}
 			help="Insert empty commit"
 			helpShowDelay={500}
-			on:click={() => dispatch('click')}
+			onclick={() => dispatch('click')}
 		/>
 	</div>
 </div>
--- a/apps/desktop/src/lib/components/Login.svelte
+++ b/apps/desktop/src/lib/components/Login.svelte
@ -19,7 +19,7 @@
 		kind="solid"
 		{wide}
 		icon="signout"
-		on:click={async () => {
+		onclick={async () => {
 			await userService.logout();
 		}}>Log out</Button
 	>
@ -44,7 +44,7 @@
 			loading={$loading}
 			icon="signin"
 			{wide}
-			on:mousedown={async () => {
+			onclick={async () => {
 				await userService.login();
 			}}
 		>
--- a/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte
+++ b/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte
@ -65,7 +65,7 @@
 				kind="solid"
 				icon="undo-small"
 				reversedDirection
-				on:click={() => {
+				onclick={() => {
 					if (baseBranch) branchController.setTarget(baseBranch.branchName);
 				}}
 			>
--- a/apps/desktop/src/lib/components/ProjectSetup.svelte
+++ b/apps/desktop/src/lib/components/ProjectSetup.svelte
@ -44,10 +44,10 @@
 		{@const [remoteName, branchName] = selectedBranch[0].split(/\/(.*)/s)}
 		<KeysForm {remoteName} {branchName} disabled={loading} />
 		<div class="actions">
-			<Button style="ghost" outline disabled={loading} on:mousedown={() => (selectedBranch[0] = '')}
+			<Button style="ghost" outline disabled={loading} onclick={() => (selectedBranch[0] = '')}
 				>Back</Button
 			>
-			<Button style="pop" kind="solid" {loading} on:click={setTarget}>Let's go!</Button>
+			<Button style="pop" kind="solid" {loading} onclick={setTarget}>Let's go!</Button>
 		</div>
 	{:else}
 		<ProjectSetupTarget
--- a/apps/desktop/src/lib/components/ProjectSetupTarget.svelte
+++ b/apps/desktop/src/lib/components/ProjectSetupTarget.svelte
@ -253,7 +253,7 @@
 			style="pop"
 			kind="solid"
 			{loading}
-			on:click={onSetTargetClick}
+			onclick={onSetTargetClick}
 			icon="chevron-right-small"
 			id="set-base-branch"
 		>
--- a/apps/desktop/src/lib/components/ProjectSwitcher.svelte
+++ b/apps/desktop/src/lib/components/ProjectSwitcher.svelte
@ -79,7 +79,7 @@
 		kind="solid"
 		icon="chevron-right-small"
 		disabled={selectedProjectId === project?.id}
-		on:mousedown={() => {
+		onmousedown={() => {
 			if (selectedProjectId) goto(`/${selectedProjectId}/`);
 		}}
 	>
--- a/apps/desktop/src/lib/components/PromptModal.svelte
+++ b/apps/desktop/src/lib/components/PromptModal.svelte
@ -66,14 +66,14 @@
 	<TextBox focus type="password" bind:value disabled={!!$error || loading} />

 	{#snippet controls()}
-		<Button style="ghost" outline type="reset" disabled={loading} on:click={cancel}>Cancel</Button>
+		<Button style="ghost" outline type="reset" disabled={loading} onclick={cancel}>Cancel</Button>
 		<Button
 			style="pop"
 			kind="solid"
 			grow
 			disabled={!!$error || loading}
 			{loading}
-			on:click={async () => await submit()}
+			onclick={async () => await submit()}
 		>
 			Submit
 		</Button>
--- a/apps/desktop/src/lib/components/PullRequestPreview.svelte
+++ b/apps/desktop/src/lib/components/PullRequestPreview.svelte
@ -89,10 +89,8 @@
 	</p>
 	<TextBox label="Choose a remote name" bind:value={remoteName}></TextBox>
 	{#snippet controls(close)}
-		<Button style="ghost" outline on:click={() => closeModal(close)}>Cancel</Button>
-		<Button style="pop" kind="solid" grow on:click={createRemoteAndBranch} {loading}>
-			Confirm
-		</Button>
+		<Button style="ghost" outline onclick={() => closeModal(close)}>Cancel</Button>
+		<Button style="pop" kind="solid" grow onclick={createRemoteAndBranch} {loading}>Confirm</Button>
 	{/snippet}
 </Modal>

@ -141,7 +139,7 @@
 				style="pop"
 				kind="solid"
 				help="Does not create a commit. Can be toggled."
-				on:click={async () => createRemoteModal?.show()}>Apply from fork</Button
+				onclick={async () => createRemoteModal?.show()}>Apply from fork</Button
 			>
 		</div>
 	</div>
--- a/apps/desktop/src/lib/components/RemoveProjectButton.svelte
+++ b/apps/desktop/src/lib/components/RemoveProjectButton.svelte
@ -21,7 +21,7 @@
 	kind="solid"
 	icon="bin-small"
 	reversedDirection
-	on:click={() => {
+	onclick={() => {
 		modal.show();
 	}}
 >
@ -48,13 +48,13 @@
 			reversedDirection
 			loading={isDeleting}
 			icon="bin-small"
-			on:click={() => {
+			onclick={() => {
 				onDeleteClicked().then(close);
 			}}
 		>
 			Remove
 		</Button>
-		<Button style="pop" kind="solid" on:click={close}>Cancel</Button>
+		<Button style="pop" kind="solid" onclick={close}>Cancel</Button>
 	{/snippet}
 </Modal>

--- a/apps/desktop/src/lib/components/ShareIssueModal.svelte
+++ b/apps/desktop/src/lib/components/ShareIssueModal.svelte
@ -217,8 +217,8 @@

 	<!-- Use our own close function -->
 	{#snippet controls(_close)}
-		<Button style="ghost" outline type="reset" on:click={close}>Close</Button>
-		<Button style="pop" kind="solid" type="submit" on:click={async () => await submit()}>
+		<Button style="ghost" outline type="reset" onclick={close}>Close</Button>
+		<Button style="pop" kind="solid" type="submit" onclick={async () => await submit()}>
 			Share with GitButler
 		</Button>
 	{/snippet}
--- a/apps/desktop/src/lib/components/SyncButton.svelte
+++ b/apps/desktop/src/lib/components/SyncButton.svelte
@ -26,7 +26,7 @@
 	icon="update-small"
 	help="Last fetch from upstream"
 	{loading}
-	on:mousedown={async (e) => {
+	onmousedown={async (e) => {
 		e.preventDefault();
 		e.stopPropagation();
 		loading = true;
--- a/apps/desktop/src/lib/components/UpdateBaseButton.svelte
+++ b/apps/desktop/src/lib/components/UpdateBaseButton.svelte
@ -14,7 +14,7 @@
 	style="error"
 	kind="solid"
 	help="Merge upstream commits into common base"
-	on:click={async () => {
+	onclick={async () => {
 		loading = true;
 		try {
 			let infoText = await branchController.updateBaseBranch();
--- a/apps/desktop/src/lib/file/BranchFilesList.svelte
+++ b/apps/desktop/src/lib/file/BranchFilesList.svelte
@ -64,7 +64,7 @@
 				icon="copy"
 				style="ghost"
 				outline
-				on:mousedown={() => copyToClipboard(mergeDiffCommand + $commit.id.slice(0, 7))}
+				onmousedown={() => copyToClipboard(mergeDiffCommand + $commit.id.slice(0, 7))}
 			/>
 		</div>
 	</div>
--- a/apps/desktop/src/lib/file/FileCardHeader.svelte
+++ b/apps/desktop/src/lib/file/FileCardHeader.svelte
@ -60,7 +60,7 @@
 			</div>
 		</div>
 	</div>
-	<Button icon="cross" style="ghost" on:click={() => dispatch('close')} />
+	<Button icon="cross" style="ghost" onclick={() => dispatch('close')} />
 </div>

 <style lang="postcss">
--- a/apps/desktop/src/lib/file/FileContextMenu.svelte
+++ b/apps/desktop/src/lib/file/FileContextMenu.svelte
@ -118,11 +118,11 @@
 		</div>
 	{/snippet}
 	{#snippet controls(close, item)}
-		<Button style="ghost" outline on:click={close}>Cancel</Button>
+		<Button style="ghost" outline onclick={close}>Cancel</Button>
 		<Button
 			style="error"
 			kind="solid"
-			on:click={() => {
+			onclick={() => {
 				branchController.unapplyFiles(item.files);
 				close();
 			}}
--- a/apps/desktop/src/lib/history/History.svelte
+++ b/apps/desktop/src/lib/history/History.svelte
@ -117,7 +117,7 @@
 				<Button
 					style="ghost"
 					icon="cross"
-					on:click={() => {
+					onclick={() => {
 						dispatch('hide');
 					}}
 				/>
--- a/apps/desktop/src/lib/history/SnapshotCard.svelte
+++ b/apps/desktop/src/lib/history/SnapshotCard.svelte
@ -166,7 +166,7 @@
 				style="ghost"
 				outline
 				help="Restores GitButler and your files to the state before this operation. Revert actions can also be undone."
-				on:click={() => {
+				onclick={() => {
 					dispatch('restoreClick');
 				}}>Revert</Button
 			>
--- a/apps/desktop/src/lib/hunk/HunkDiff.svelte
+++ b/apps/desktop/src/lib/hunk/HunkDiff.svelte
@ -339,7 +339,7 @@

 		&.selected {
 			background-color: var(--clr-diff-selected-count-bg);
-			box-shadow: inset -1px 0 0 0 var(--clr-diff-count-border);
+			box-shadow: inset -1px 0 0 0 var(--clr-diff-selected-count-border);
 			color: var(--clr-diff-selected-count-text);
 		}
 	}
--- a/apps/desktop/src/lib/navigation/Footer.svelte
+++ b/apps/desktop/src/lib/navigation/Footer.svelte
@ -15,7 +15,7 @@
 			style="ghost"
 			size="cta"
 			help="Share feedback"
-			on:click={() => events.emit('openSendIssueModal')}
+			onclick={() => events.emit('openSendIssueModal')}
 			wide={isNavCollapsed}
 		/>
 		<Button
@ -23,7 +23,7 @@
 			style="ghost"
 			size="cta"
 			help="Project settings"
-			on:click={async () => await goto(`/${projectId}/settings`)}
+			onclick={async () => await goto(`/${projectId}/settings`)}
 			wide={isNavCollapsed}
 		/>
 		<Button
@ -31,7 +31,7 @@
 			style="ghost"
 			size="cta"
 			help="Project history"
-			on:click={() => events.emit('openHistory')}
+			onclick={() => events.emit('openHistory')}
 			wide={isNavCollapsed}
 		/>
 	</div>
--- a/apps/desktop/src/lib/onboarding/CloneForm.svelte
+++ b/apps/desktop/src/lib/onboarding/CloneForm.svelte
@ -134,13 +134,7 @@
 	<div class="clone__field repositoryTargetPath">
 		<div class="text-base-13 text-semibold clone__field--label">Where to clone</div>
 		<TextBox bind:value={targetDirPath} placeholder={'/Users/tipsy/Documents'} />
-		<Button
-			style="ghost"
-			outline
-			kind="solid"
-			disabled={loading}
-			on:click={handleCloneTargetSelect}
-		>
+		<Button style="ghost" outline kind="solid" disabled={loading} onclick={handleCloneTargetSelect}>
 			Choose..
 		</Button>
 	</div>
@ -156,7 +150,7 @@
 {/if}

 <div class="clone__actions">
-	<Button style="ghost" outline kind="solid" disabled={loading} on:click={handleCancel}>
+	<Button style="ghost" outline kind="solid" disabled={loading} onclick={handleCancel}>
 		Cancel
 	</Button>
 	<Button
@ -165,7 +159,7 @@
 		icon={errors.length > 0 ? 'update-small' : 'chevron-right-small'}
 		disabled={loading}
 		{loading}
-		on:click={cloneRepository}
+		onclick={cloneRepository}
 	>
 		{#if loading}
 			Cloning..
--- a/apps/desktop/src/lib/pr/MergeButton.svelte
+++ b/apps/desktop/src/lib/pr/MergeButton.svelte
@ -37,20 +37,22 @@
 	{wide}
 	{help}
 	{disabled}
-	on:click={() => {
+	onclick={() => {
 		dispatch('click', { method: $action });
 	}}
 >
 	{labels[$action]}
-	<ContextMenuSection slot="context-menu">
-		{#each Object.values(MergeMethod) as method}
-			<ContextMenuItem
-				label={labels[method]}
-				on:click={() => {
-					$action = method;
-					dropDown.close();
-				}}
-			/>
-		{/each}
-	</ContextMenuSection>
+	{#snippet contextMenuSlot()}
+		<ContextMenuSection>
+			{#each Object.values(MergeMethod) as method}
+				<ContextMenuItem
+					label={labels[method]}
+					on:click={() => {
+						$action = method;
+						dropDown.close();
+					}}
+				/>
+			{/each}
+		</ContextMenuSection>
+	{/snippet}
 </DropDownButton>
--- a/apps/desktop/src/lib/pr/PullRequestButton.svelte
+++ b/apps/desktop/src/lib/pr/PullRequestButton.svelte
@ -42,18 +42,20 @@
 	{disabled}
 	{loading}
 	bind:this={dropDown}
-	on:click={() => click({ draft: $preferredAction === Action.CreateDraft })}
+	onclick={() => click({ draft: $preferredAction === Action.CreateDraft })}
 >
 	{labels[$preferredAction]}
-	<ContextMenuSection slot="context-menu">
-		{#each actions as method}
-			<ContextMenuItem
-				label={labels[method]}
-				on:click={() => {
-					preferredAction.set(method);
-					dropDown.close();
-				}}
-			/>
-		{/each}
-	</ContextMenuSection>
+	{#snippet contextMenuSlot()}
+		<ContextMenuSection>
+			{#each actions as method}
+				<ContextMenuItem
+					label={labels[method]}
+					on:click={() => {
+						preferredAction.set(method);
+						dropDown.close();
+					}}
+				/>
+			{/each}
+		</ContextMenuSection>
+	{/snippet}
 </DropDownButton>
--- a/apps/desktop/src/lib/pr/PullRequestCard.svelte
+++ b/apps/desktop/src/lib/pr/PullRequestCard.svelte
@ -170,7 +170,7 @@
 				outline
 				loading={$mrLoading || $checksLoading}
 				help={$timeAgo ? 'Updated ' + $timeAgo : ''}
-				on:click={async () => {
+				onclick={async () => {
 					$checksMonitor?.update();
 					$prMonitor?.refresh();
 				}}
--- a/apps/desktop/src/lib/pr/ViewPrButton.svelte
+++ b/apps/desktop/src/lib/pr/ViewPrButton.svelte
@ -16,12 +16,12 @@
 	outline
 	shrinkable
 	bind:el={viewPrButton}
-	on:click={(e) => {
+	onclick={(e) => {
 		openExternalUrl(url);
 		e.preventDefault();
 		e.stopPropagation();
 	}}
-	on:contextmenu={(e) => {
+	oncontextmenu={(e) => {
 		e.preventDefault();
 		copyLinkContextMenu?.openByMouse(e);
 	}}
--- a/apps/desktop/src/lib/settings/AnalyticsConfirmation.svelte
+++ b/apps/desktop/src/lib/settings/AnalyticsConfirmation.svelte
@ -16,7 +16,7 @@
 			style="pop"
 			kind="solid"
 			icon="chevron-right-small"
-			on:click={() => {
+			onclick={() => {
 				$analyticsConfirmed = true;
 				initAnalyticsIfEnabled();
 			}}
--- a/apps/desktop/src/lib/settings/AuthorizationBanner.svelte
+++ b/apps/desktop/src/lib/settings/AuthorizationBanner.svelte
@ -34,7 +34,7 @@
 			loading={$loading}
 			style="pop"
 			kind="solid"
-			on:click={async () => {
+			onclick={async () => {
 				await userService.login();
 			}}>Log in or Sign up</Button
 		>
--- a/apps/desktop/src/lib/settings/CloudForm.svelte
+++ b/apps/desktop/src/lib/settings/CloudForm.svelte
@ -116,7 +116,7 @@
 			You can apply your own custom prompts to the project. By default, the project uses GitButler
 			prompts, but you can create your own prompts in the general settings.
 		</p>
-		<Button style="ghost" outline icon="edit-text" on:click={async () => await goto('/settings/ai')}
+		<Button style="ghost" outline icon="edit-text" onclick={async () => await goto('/settings/ai')}
 			>Customize prompts</Button
 		>
 	</SectionCard>
--- a/apps/desktop/src/lib/settings/CredentialCheck.svelte
+++ b/apps/desktop/src/lib/settings/CredentialCheck.svelte
@ -107,7 +107,7 @@
 		wide
 		icon="item-tick"
 		disabled={loading}
-		on:click={checkCredentials}
+		onclick={checkCredentials}
 	>
 		{#if loading || checks.length === 0}
 			Test credentials
--- a/apps/desktop/src/lib/settings/GithubIntegration.svelte
+++ b/apps/desktop/src/lib/settings/GithubIntegration.svelte
@ -67,7 +67,7 @@
 </script>

 {#if minimal}
-	<Button style="pop" kind="solid" {disabled} on:click={gitHubStartOauth}>Authorize</Button>
+	<Button style="pop" kind="solid" {disabled} onclick={gitHubStartOauth}>Authorize</Button>
 {:else}
 	<SectionCard orientation="row">
 		<svelte:fragment slot="iconSide">
@ -97,11 +97,11 @@
 			Allows you to view and create Pull Requests from GitButler.
 		</svelte:fragment>
 		{#if $user?.github_access_token}
-			<Button style="ghost" outline {disabled} icon="bin-small" on:click={forgetGitHub}
+			<Button style="ghost" outline {disabled} icon="bin-small" onclick={forgetGitHub}
 				>Forget</Button
 			>
 		{:else}
-			<Button style="pop" kind="solid" {disabled} on:click={gitHubStartOauth}>Authorize</Button>
+			<Button style="pop" kind="solid" {disabled} onclick={gitHubStartOauth}>Authorize</Button>
 		{/if}
 	</SectionCard>
 {/if}
@ -131,7 +131,7 @@
 						kind="soft"
 						icon="copy"
 						disabled={codeCopied}
-						on:click={() => {
+						onclick={() => {
 							copyToClipboard(userCode);
 							codeCopied = true;
 						}}
@ -154,7 +154,7 @@
 						kind="solid"
 						disabled={GhActivationLinkPressed}
 						icon="open-link"
-						on:click={() => {
+						onclick={() => {
 							openExternalUrl('https://github.com/login/device');
 							GhActivationLinkPressed = true;

@ -179,7 +179,7 @@
 						kind="solid"
 						{loading}
 						disabled={loading}
-						on:click={async () => {
+						onclick={async () => {
 							await gitHubOauthCheckStatus(deviceCode);
 						}}
 					>
--- a/apps/desktop/src/lib/settings/PreferencesForm.svelte
+++ b/apps/desktop/src/lib/settings/PreferencesForm.svelte
@ -201,7 +201,7 @@
 				</InfoMessage>
 			{/if}

-			<Button style="pop" kind="solid" wide icon="item-tick" on:click={checkSigning}>
+			<Button style="pop" kind="solid" wide icon="item-tick" onclick={checkSigning}>
 				{#if !checked}
 					Test signing
 				{:else}
--- a/apps/desktop/src/lib/settings/Sidebar.svelte
+++ b/apps/desktop/src/lib/settings/Sidebar.svelte
@ -29,7 +29,7 @@
 					<Button
 						icon="chevron-left"
 						style="ghost"
-						on:mousedown={() => {
+						onmousedown={() => {
 							if (history.length > 0) {
 								history.back();
 							} else {
--- a/apps/desktop/src/lib/shared/CredentialCheck.svelte
+++ b/apps/desktop/src/lib/shared/CredentialCheck.svelte
@ -107,7 +107,7 @@
 		wide
 		icon="item-tick"
 		disabled={loading}
-		on:click={checkCredentials}
+		onclick={checkCredentials}
 	>
 		{#if loading || checks.length === 0}
 			Test credentials
--- a/apps/desktop/src/lib/shared/DropDownButton.svelte
+++ b/apps/desktop/src/lib/shared/DropDownButton.svelte
@ -3,30 +3,50 @@
 	import Button from '@gitbutler/ui/inputs/Button.svelte';
 	import type iconsJson from '@gitbutler/ui/icon/icons.json';
 	import type { ComponentColor, ComponentStyleKind } from '@gitbutler/ui/utils/colorTypes';
+	import type { Snippet } from 'svelte';

-	export let icon: keyof typeof iconsJson | undefined = undefined;
-	export let style: ComponentColor = 'neutral';
-	export let kind: ComponentStyleKind = 'soft';
-	export let outline = false;
-	export let disabled = false;
-	export let loading = false;
-	export let wide = false;
-	export let help = '';
-	export let menuPosition: 'top' | 'bottom' = 'bottom';
+	interface DropDownButtonProps {
+		icon?: keyof typeof iconsJson;
+		style?: ComponentColor;
+		kind?: ComponentStyleKind;
+		outline?: boolean;
+		disabled?: boolean;
+		loading?: boolean;
+		wide?: boolean;
+		help?: string;
+		menuPosition?: 'top' | 'bottom';
+		children: Snippet;
+		contextMenuSlot: Snippet;
+		onclick?: (e: MouseEvent) => void;
+	}

-	let contextMenu: ContextMenu;
-	let iconEl: HTMLElement;
+	const {
+		icon,
+		style = 'neutral',
+		kind = 'soft',
+		outline = false,
+		disabled = false,
+		loading = false,
+		wide = false,
+		help = '',
+		menuPosition = 'bottom',
+		children,
+		contextMenuSlot,
+		onclick
+	}: DropDownButtonProps = $props();

-	let visible = false;
+	let contextMenu = $state<ContextMenu>();
+	let iconEl = $state<HTMLElement>();
+	let visible = $state(false);

 	export function show() {
 		visible = true;
-		contextMenu.open();
+		contextMenu?.open();
 	}

 	export function close() {
 		visible = false;
-		contextMenu.close();
+		contextMenu?.close();
 	}
 </script>

@ -41,9 +61,9 @@
 			reversedDirection
 			disabled={disabled || loading}
 			isDropdownChild
-			on:click
+			{onclick}
 		>
-			<slot />
+			{@render children()}
 		</Button>
 		<Button
 			bind:el={iconEl}
@ -55,9 +75,9 @@
 			{loading}
 			disabled={disabled || loading}
 			isDropdownChild
-			on:click={() => {
+			onclick={() => {
 				visible = !visible;
-				contextMenu.toggle();
+				contextMenu?.toggle();
 			}}
 		/>
 	</div>
@ -69,7 +89,7 @@
 			visible = false;
 		}}
 	>
-		<slot name="context-menu" />
+		{@render contextMenuSlot()}
 	</ContextMenu>
 </div>

--- a/apps/desktop/src/lib/shared/InfoMessage.svelte
+++ b/apps/desktop/src/lib/shared/InfoMessage.svelte
@ -76,12 +76,12 @@
 		{#if primary || secondary}
 			<div class="info-message__actions">
 				{#if secondary}
-					<Button style="ghost" outline on:click={() => dispatch('secondary')}>
+					<Button style="ghost" outline onclick={() => dispatch('secondary')}>
 						{secondary}
 					</Button>
 				{/if}
 				{#if primary}
-					<Button style={primaryButtonMap[style]} kind="solid" on:click={() => dispatch('primary')}>
+					<Button style={primaryButtonMap[style]} kind="solid" onclick={() => dispatch('primary')}>
 						{primary}
 					</Button>
 				{/if}
--- a/apps/desktop/src/lib/shared/LargeDiffMessage.svelte
+++ b/apps/desktop/src/lib/shared/LargeDiffMessage.svelte
@ -16,7 +16,7 @@
 <div class="large-diff-message" class:frame-box={showFrame}>
 	<p class="text-base-13">Change hidden as large diffs may slow down the UI</p>

-	<Button style="ghost" outline on:click={show}>Show anyways</Button>
+	<Button style="ghost" outline onclick={show}>Show anyways</Button>
 </div>

 <style>
--- a/apps/desktop/src/lib/vbranches/types.ts
+++ b/apps/desktop/src/lib/vbranches/types.ts
@ -154,7 +154,6 @@ export class VirtualBranch {

 // Used for dependency injection
 export const BRANCH = Symbol('branch');
-
 export type CommitStatus = 'local' | 'localAndRemote' | 'integrated' | 'remote';

 export class DetailedCommit {
--- a/apps/desktop/src/routes/settings/profile/+page.svelte
+++ b/apps/desktop/src/routes/settings/profile/+page.svelte
@ -139,7 +139,7 @@
 						<TextBox label="Email" bind:value={$user.email} readonly />
 					</div>

-					<Button style="pop" kind="solid" loading={saving}>Update profile</Button>
+					<Button type="submit" style="pop" kind="solid" loading={saving}>Update profile</Button>
 				</div>
 			</form>
 		</SectionCard>
@ -251,7 +251,7 @@
 			Your code remains safe. it only clears the configuration.
 		</svelte:fragment>

-		<Button style="error" kind="soft" on:click={() => deleteConfirmationModal.show()}>
+		<Button style="error" kind="soft" onclick={() => deleteConfirmationModal.show()}>
 			Remove projects…
 		</Button>

@ -259,10 +259,10 @@
 			<p>Are you sure you want to remove all GitButler projects?</p>

 			{#snippet controls(close)}
-				<Button style="error" kind="solid" loading={isDeleting} on:click={onDeleteClicked}>
+				<Button style="error" kind="solid" loading={isDeleting} onclick={onDeleteClicked}>
 					Remove
 				</Button>
-				<Button style="pop" kind="solid" on:click={close}>Cancel</Button>
+				<Button style="pop" kind="solid" onclick={close}>Cancel</Button>
 			{/snippet}
 		</Modal>
 	</SectionCard>
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@ -6,8 +6,6 @@ const config: StorybookConfig = {
 	addons: [
 		getAbsolutePath('@storybook/addon-links'),
 		getAbsolutePath('@storybook/addon-essentials'),
-		getAbsolutePath('@chromatic-com/storybook'),
-		getAbsolutePath('@storybook/addon-interactions'),
 		getAbsolutePath('storybook-dark-mode')
 	],
 	framework: {
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@ -1,9 +1,11 @@
 import type { Preview } from '@storybook/svelte';
 import '../src/styles/main.css';
+import '../src/styles/fonts.css';
 import './stories-styles.css';

 const preview: Preview = {
 	parameters: {
+		backgrounds: { disable: true },
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,
@ -11,7 +13,14 @@ const preview: Preview = {
 			}
 		},
 		darkMode: {
-			stylePreview: true
+			classTarget: 'html',
+			stylePreview: true,
+			dark: {
+				appPreviewBg: '#272321'
+			},
+			light: {
+				appPreviewBg: '#fff'
+			}
 		}
 	}
 };
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -24,17 +24,13 @@
 		"storybook:build": "storybook build"
 	},
 	"devDependencies": {
-		"@chromatic-com/storybook": "^1.6.1",
 		"@csstools/postcss-bundler": "^1.0.15",
-		"@csstools/postcss-minify": "^1.1.5",
 		"@storybook/addon-docs": "^8.2.7",
 		"@storybook/addon-essentials": "^8.2.7",
-		"@storybook/addon-interactions": "^8.2.7",
 		"@storybook/addon-links": "^8.2.7",
 		"@storybook/blocks": "^8.2.7",
 		"@storybook/svelte": "^8.2.7",
 		"@storybook/sveltekit": "^8.2.7",
-		"@storybook/theming": "^8.2.7",
 		"@sveltejs/adapter-static": "catalog:svelte",
 		"@sveltejs/kit": "catalog:svelte",
 		"@sveltejs/package": "^2.3.2",
@ -83,6 +79,7 @@
 		"./dist/*.svelte",
 		"./dist/*.json",
 		"./dist/*.js",
+		"./dist/*.json",
 		"./dist/*.d.ts",
 		"!./dist/*.test.*",
 		"./dist/*.css",
--- a/packages/ui/src/lib/design-tokens.json
+++ b/packages/ui/src/lib/design-tokens.json
@ -3695,7 +3695,7 @@
 					"$extensions": {
 						"mode": {
 							"light": "#ffffff",
-							"dark": "#98c6ff"
+							"dark": "#d6e8ff"
 						},
 						"figma": {
 							"variableId": "VariableID:3935:254",
@ -4097,7 +4097,7 @@
 			"useDTCGKeys": true,
 			"colorMode": "hex",
 			"variableCollections": ["clr-core", "clr", "size", "radius"],
-			"createdAt": "2024-08-03T22:40:57.727Z"
+			"createdAt": "2024-08-04T22:03:52.888Z"
 		}
 	}
 }
--- a/packages/ui/src/lib/inputs/Button.svelte
+++ b/packages/ui/src/lib/inputs/Button.svelte
@ -1,40 +1,93 @@
+<script lang="ts" context="module">
+	export interface ButtonProps {
+		el?: HTMLElement;
+		// Interaction props
+		disabled?: boolean;
+		clickable?: boolean;
+		id?: string | undefined;
+		loading?: boolean;
+		tabindex?: number | undefined;
+		type?: 'submit' | 'reset' | 'button' | undefined;
+		// Layout props
+		shrinkable?: boolean;
+		reversedDirection?: boolean;
+		width?: number | undefined;
+		size?: 'tag' | 'button' | 'cta';
+		wide?: boolean;
+		grow?: boolean;
+		align?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'auto';
+		isDropdownChild?: boolean;
+		// Style props
+		style?: ComponentColor;
+		kind?: ComponentStyleKind;
+		outline?: boolean;
+		dashed?: boolean;
+		solidBackground?: boolean;
+		// Additional elements
+		icon?: keyof typeof iconsJson | undefined;
+		help?: string;
+		helpShowDelay?: number;
+		// Events
+		onclick?: (e: MouseEvent) => void;
+		onmousedown?: (e: MouseEvent) => void;
+		oncontextmenu?: (e: MouseEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+		// Snippets
+		children?: Snippet;
+	}
+</script>
+
 <script lang="ts">
 	import Icon from '$lib/icon/Icon.svelte';
 	import { pxToRem } from '$lib/utils/pxToRem';
 	import { tooltip } from '$lib/utils/tooltip';
 	import type iconsJson from '$lib/icon/icons.json';
 	import type { ComponentColor, ComponentStyleKind } from '$lib/utils/colorTypes';
+	import type { Snippet } from 'svelte';

-	// Interaction props
-	export let el: HTMLAnchorElement | HTMLButtonElement | HTMLElement | null = null;
-	export let disabled = false;
-	export let clickable = true;
-	export let id: string | undefined = undefined;
-	export let loading = false;
-	export let tabindex: number | undefined = undefined;
-	export let type: 'submit' | 'reset' | 'button' | undefined = undefined;
-	// Layout props
-	export let shrinkable = false;
-	export let reversedDirection: boolean = false;
-	export let width: number | undefined = undefined;
-	export let size: 'tag' | 'button' | 'cta' = 'button';
-	export let wide = false;
-	export let grow = false;
-	export let align: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'auto' = 'auto';
-	export let isDropdownChild = false;
-	// Style props
-	export let style: ComponentColor = 'neutral';
-	export let kind: ComponentStyleKind = 'soft';
-	export let outline = false;
-	export let dashed = false;
-	export let solidBackground = false;
-	// Additional elements
-	export let icon: keyof typeof iconsJson | undefined = undefined;
-	export let help = '';
-	export let helpShowDelay = 1200;
+	let {
+		el = $bindable(),
+		disabled = false,
+		clickable = true,
+		id = undefined,
+		loading = false,
+		tabindex,
+		type,
+		shrinkable = false,
+		reversedDirection = false,
+		width,
+		size = 'button',
+		wide = false,
+		grow = false,
+		align = 'auto',
+		isDropdownChild = false,
+		style = 'neutral',
+		kind = 'soft',
+		outline = false,
+		dashed = false,
+		solidBackground = false,
+		icon,
+		help = '',
+		helpShowDelay = 1200,
+		onclick,
+		onmousedown,
+		oncontextmenu,
+		onkeydown,
+		children
+	}: ButtonProps = $props();
+
+	function handleAction(e: MouseEvent) {
+		if (loading || disabled || !clickable) {
+			e.preventDefault();
+			e.stopPropagation();
+		} else {
+			onclick?.(e);
+		}
+	}
 </script>

 <button
+	bind:this={el}
 	class="btn focus-state {style} {kind} {size}-size"
 	class:outline
 	class:dashed
@ -44,7 +97,7 @@
 	class:wide
 	class:grow
 	class:not-clickable={!clickable}
-	class:fixed-width={!$$slots.default && !wide}
+	class:fixed-width={!children && !wide}
 	class:is-dropdown={isDropdownChild}
 	style:align-self={align}
 	style:width={width ? pxToRem(width) : undefined}
@ -52,22 +105,22 @@
 		text: help,
 		delay: helpShowDelay
 	}}
-	bind:this={el}
 	disabled={disabled || loading}
-	on:click
-	on:mousedown
-	on:contextmenu
+	onclick={handleAction}
+	{onmousedown}
+	{oncontextmenu}
+	{onkeydown}
 	{type}
 	{id}
 	tabindex={clickable ? tabindex : -1}
 >
-	{#if $$slots.default}
+	{#if children}
 		<span
 			class="label text-semibold"
 			class:text-base-12={size === 'button' || size === 'cta'}
 			class:text-base-11={size === 'tag'}
 		>
-			<slot />
+			{@render children()}
 		</span>
 	{/if}

@ -117,7 +170,11 @@
 		}
 		&.not-clickable {
 			cursor: default;
-			pointer-events: none;
+
+			&:focus-within {
+				outline: none;
+				animation: none;
+			}
 		}
 		&.shrinkable {
 			overflow: hidden;
--- a/packages/ui/src/stories/Button/DemoAllButtons.stories.ts
+++ b/packages/ui/src/stories/Button/DemoAllButtons.stories.ts
@ -0,0 +1,18 @@
+import DemoAllButtons from './DemoAllButtons.svelte';
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+const meta = {
+	title: 'Inputs / Button / All Buttons',
+	component: DemoAllButtons
+} satisfies Meta<DemoAllButtons>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ButtonClickable: Story = {
+	name: 'All Buttons',
+	args: {
+		label: 'Button',
+		reversedDirection: false
+	}
+};
--- a/packages/ui/src/stories/Button/DemoAllButtons.svelte
+++ b/packages/ui/src/stories/Button/DemoAllButtons.svelte
@ -0,0 +1,80 @@
+<script lang="ts">
+	import Button from '$lib/inputs/Button.svelte';
+
+	interface Props {
+		label: string;
+		reversedDirection?: boolean;
+	}
+
+	const { label, reversedDirection }: Props = $props();
+</script>
+
+{#snippet buttons({ label, outline, style, reversedDirection })}
+	<div class="group">
+		<Button size="cta" {style} icon="plus" {reversedDirection}>{label}</Button>
+		<Button size="cta" {style} kind="solid" {outline} icon="plus" {reversedDirection}
+			>{label}</Button
+		>
+		<Button size="cta" {style} {reversedDirection}>{label}</Button>
+		<Button size="cta" {style} kind="solid" {outline} {reversedDirection}>{label}</Button>
+		<Button size="cta" {style} icon="plus" />
+		<Button size="cta" {style} kind="solid" {outline} icon="plus" />
+	</div>
+	<div class="group">
+		<Button size="button" {style} icon="plus" {reversedDirection}>{label}</Button>
+		<Button size="button" {style} kind="solid" {outline} icon="plus" {reversedDirection}
+			>{label}</Button
+		>
+		<Button size="button" {style} {reversedDirection}>{label}</Button>
+		<Button size="button" {style} kind="solid" {outline} {reversedDirection}>{label}</Button>
+		<Button size="button" {style} icon="plus" />
+		<Button size="button" {style} kind="solid" {outline} icon="plus" />
+	</div>
+	<div class="group">
+		<Button size="tag" {style} icon="plus-small" {reversedDirection}>{label}</Button>
+		<Button size="tag" {style} kind="solid" {outline} icon="plus-small" {reversedDirection}
+			>{label}</Button
+		>
+		<Button size="tag" {style} {reversedDirection}>{label}</Button>
+		<Button size="tag" {style} kind="solid" {outline} {reversedDirection}>{label}</Button>
+		<Button size="tag" {style} icon="plus-small" />
+		<Button size="tag" {style} kind="solid" {outline} icon="plus-small" />
+	</div>
+{/snippet}
+
+<div class="wrapper">
+	{@render buttons({ label, outline: true, style: 'ghost', reversedDirection })}
+	<hr class="divider" />
+	{@render buttons({ label, outline: true, style: 'neutral', reversedDirection })}
+	<hr class="divider" />
+	{@render buttons({ label, outline: true, style: 'pop', reversedDirection })}
+	<hr class="divider" />
+	{@render buttons({ label, outline: true, style: 'success', reversedDirection })}
+	<hr class="divider" />
+	{@render buttons({ label, outline: true, style: 'error', reversedDirection })}
+	<hr class="divider" />
+	{@render buttons({ label, outline: true, style: 'warning', reversedDirection })}
+	<hr class="divider" />
+	{@render buttons({ label, outline: true, style: 'purple', reversedDirection })}
+</div>
+
+<style>
+	.wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+	.group {
+		display: flex;
+		gap: 8px;
+	}
+	.divider {
+		display: block;
+		width: 100%;
+		height: 1px;
+		background-color: #858585;
+		opacity: 0.3;
+		margin: 8px 0;
+		border: none;
+	}
+</style>
--- a/packages/ui/src/stories/Button/DemoButton.stories.ts
+++ b/packages/ui/src/stories/Button/DemoButton.stories.ts
@ -0,0 +1,68 @@
+import DemoButton from './DemoButton.svelte';
+import iconsJson from '$lib/icon/icons.json';
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+const meta = {
+	title: 'Inputs / Button',
+	component: DemoButton
+} satisfies Meta<DemoButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ButtonDefault: Story = {
+	name: 'All Properties',
+	args: {
+		loading: false,
+		disabled: false,
+		clickable: true,
+		size: 'button',
+		icon: 'ai-small',
+		style: 'neutral',
+		kind: 'solid',
+		outline: false,
+		dashed: false,
+		solidBackground: false,
+		help: '',
+		helpShowDelay: 1200,
+		id: 'button',
+		tabindex: 0,
+		type: 'button',
+		shrinkable: false,
+		reversedDirection: false,
+		width: undefined,
+		wide: false,
+		grow: false,
+		align: 'center',
+		isDropdownChild: false,
+		onclick: () => {
+			console.log('Button clicked');
+		}
+	},
+	argTypes: {
+		icon: { control: 'select', options: Object.keys(iconsJson) },
+		type: { control: 'select', options: ['button', 'submit', 'reset'] },
+		width: { control: 'text' },
+		size: { control: 'select', options: ['tag', 'button', 'cta'] },
+		align: {
+			control: 'select',
+			options: ['center', 'left', 'right', 'space-between']
+		},
+		style: {
+			control: 'select',
+			options: ['neutral', 'ghost', 'pop', 'success', 'error', 'warning', 'purple']
+		},
+		kind: { control: 'select', options: ['solid', 'soft'] }
+	}
+};
+
+export const ButtonClickable: Story = {
+	name: 'Not clickable',
+	args: {
+		clickable: false,
+		help: 'This button is not clickable',
+		onclick: () => {
+			console.log('Button clicked');
+		}
+	}
+};
--- a/packages/ui/src/stories/Button/DemoButton.svelte
+++ b/packages/ui/src/stories/Button/DemoButton.svelte
@ -0,0 +1,7 @@
+<script lang="ts">
+	import Button, { type ButtonProps } from '$lib/inputs/Button.svelte';
+
+	const props: ButtonProps = $props();
+</script>
+
+<Button {...props}>Button</Button>
--- a/packages/ui/src/stories/SegmentControl/DemoSegmentControl.stories.ts
+++ b/packages/ui/src/stories/SegmentControl/DemoSegmentControl.stories.ts
@ -0,0 +1,24 @@
+import SegmentControl from './DemoSegmentControl.svelte';
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+const meta = {
+	title: 'Inputs / Segment Control',
+	component: SegmentControl
+} satisfies Meta<SegmentControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SegmentControlStory: Story = {
+	name: 'Segment Control',
+	args: {
+		defaultIndex: 1,
+		fullWidth: false,
+		segments: [
+			{ label: 'First', id: 'first' },
+			{ label: 'Second', id: 'second' },
+			{ label: 'Third', id: 'third' },
+			{ label: 'Fourth', id: 'fourth' }
+		]
+	}
+};
--- a/packages/ui/src/stories/SegmentControl/DemoSegmentControl.svelte
+++ b/packages/ui/src/stories/SegmentControl/DemoSegmentControl.svelte
@ -5,9 +5,13 @@
 	interface Props {
 		defaultIndex: number;
 		fullWidth?: boolean;
+		segments: {
+			id: string;
+			label: string;
+		}[];
 	}

-	const { defaultIndex, fullWidth }: Props = $props();
+	const { defaultIndex, fullWidth, segments }: Props = $props();
 </script>

 <div class="wrapper">
@ -18,9 +22,8 @@
 			console.log('Selected index:', id);
 		}}
 	>
-		<Segment id="first">First</Segment>
-		<Segment id="second">Second</Segment>
-		<Segment id="third">Third</Segment>
-		<Segment id="fourth">Fourth</Segment>
+		{#each segments as segment}
+			<Segment id={segment.id}>{segment.label}</Segment>
+		{/each}
 	</SegmentControl>
 </div>
--- a/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts
+++ b/packages/ui/src/stories/SegmentControl/SegmentControl.stories.ts
@ -1,17 +0,0 @@
-import SegmentControl from './SegmentControl.svelte';
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-const meta = {
-	title: 'Controls / Segment Control',
-	component: SegmentControl
-} satisfies Meta<SegmentControl>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const SegmentControlStory: Story = {
-	args: {
-		defaultIndex: 1,
-		fullWidth: false
-	}
-};
--- a/packages/ui/src/stories/button/Button.stories.ts
+++ b/packages/ui/src/stories/button/Button.stories.ts
@ -1,73 +0,0 @@
-import DemoButton from './ButtonDemo.svelte';
-import iconsJson from '$lib/icon/icons.json';
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-const meta = {
-	component: DemoButton,
-	argTypes: {
-		disabled: {
-			control: 'boolean'
-		},
-		clickable: {
-			control: 'boolean'
-		},
-		loading: {
-			control: 'boolean'
-		},
-		size: {
-			control: 'select',
-			options: ['tag', 'button', 'cta']
-		},
-		style: {
-			control: 'select',
-			options: ['neutral', 'ghost', 'pop', 'success', 'error', 'warning', 'purple', undefined]
-		},
-		kind: {
-			control: 'select',
-			options: ['solid', 'soft', undefined]
-		},
-		outline: {
-			control: 'boolean'
-		},
-		dashed: {
-			control: 'boolean'
-		},
-		icon: {
-			control: 'select',
-			options: [undefined, ...Object.keys(iconsJson)]
-		}
-	}
-} satisfies Meta<DemoButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ButtonDefalut: Story = {
-	args: {
-		contents: 'Testeroni',
-		size: 'button',
-		disabled: false,
-		clickable: true,
-		loading: false,
-		style: 'neutral',
-		kind: 'soft',
-		outline: false,
-		dashed: false,
-		icon: undefined
-	}
-};
-
-export const ButtonWithIcon: Story = {
-	args: {
-		contents: 'Testeroni',
-		size: 'button',
-		disabled: false,
-		clickable: true,
-		loading: false,
-		style: 'pop',
-		kind: 'solid',
-		outline: false,
-		dashed: false,
-		icon: 'ai-small'
-	}
-};
--- a/packages/ui/src/stories/button/ButtonDemo.svelte
+++ b/packages/ui/src/stories/button/ButtonDemo.svelte
@ -1,12 +0,0 @@
-<script lang="ts">
-	import Button from '$lib/inputs/Button.svelte';
-	import type { ComponentProps } from 'svelte';
-
-	type Props = ComponentProps<Button> & { contents: string };
-
-	const { contents, ...args }: Props = $props();
-</script>
-
-<Button {...args}>
-	{contents}
-</Button>
--- a/packages/ui/src/stories/c-colors.mdx
+++ b/packages/ui/src/stories/c-colors.mdx
--- a/packages/ui/src/stories/b-design-tokens.mdx
+++ b/packages/ui/src/stories/b-design-tokens.mdx
--- a/packages/ui/src/stories/a-introduction.mdx
+++ b/packages/ui/src/stories/a-introduction.mdx
--- a/packages/ui/src/styles/core/design-tokens.css
+++ b/packages/ui/src/styles/core/design-tokens.css
@ -387,7 +387,7 @@
 		srgb 0.01568627450980392 0.25882352941176473 0.5372549019607843
 	);
 	--clr-diff-selected-count-border: color(srgb 0 0.3607843137254902 0.7725490196078432);
-	--clr-diff-selected-count-text: color(srgb 0.596078431372549 0.7764705882352941 1);
+	--clr-diff-selected-count-text: color(srgb 0.8392156862745098 0.9098039215686274 1);
 	--clr-diff-count-text: var(--clr-text-3);
 	--clr-diff-deletion-line-bg: color(
 		srgb 0.23529411764705882 0.07450980392156863 0.10588235294117647
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@ -17,9 +17,9 @@
 		".svelte-kit/ambient.d.ts",
 		".svelte-kit/non-ambient.d.ts",
 		".svelte-kit/types/**/$types.d.ts",
+		"terrazzo.config.js",
 		"vite.config.js",
 		"vite.config.ts",
-		"terrazzo.config.js",
 		"src/**/*.js",
 		"src/**/*.ts",
 		"src/**/*.svelte",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -338,24 +338,15 @@ importers:

  packages/ui:
    devDependencies:
-      '@chromatic-com/storybook':
-        specifier: ^1.6.1
-        version: 1.6.1(react@18.3.1)
      '@csstools/postcss-bundler':
        specifier: ^1.0.15
        version: 1.0.15(postcss@8.4.39)
-      '@csstools/postcss-minify':
-        specifier: ^1.1.5
-        version: 1.1.5(postcss@8.4.39)
      '@storybook/addon-docs':
        specifier: ^8.2.7
        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
      '@storybook/addon-essentials':
        specifier: ^8.2.7
        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-interactions':
-        specifier: ^8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vitest@0.34.6)
      '@storybook/addon-links':
        specifier: ^8.2.7
        version: 8.2.7(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
@ -368,9 +359,6 @@ importers:
      '@storybook/sveltekit':
        specifier: ^8.2.7
        version: 8.2.7(@babel/core@7.24.7)(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13)))(postcss-load-config@5.1.0(postcss@8.4.39))(postcss@8.4.39)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(svelte@5.0.0-next.196)(typescript@5.4.5)(vite@5.2.13(@types/node@20.14.13))
-      '@storybook/theming':
-        specifier: ^8.2.7
-        version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
      '@sveltejs/adapter-static':
        specifier: catalog:svelte
        version: 3.0.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13)))(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13)))
@ -438,9 +426,6 @@ packages:
    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
    engines: {node: '>=0.10.0'}

-  '@adobe/css-tools@4.4.0':
-    resolution: {integrity: sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==}
-
  '@ampproject/remapping@2.2.1':
    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
    engines: {node: '>=6.0.0'}
@ -1069,10 +1054,6 @@ packages:
    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
    engines: {node: '>=6.9.0'}

-  '@chromatic-com/storybook@1.6.1':
-    resolution: {integrity: sha512-x1x1NB3j4xpfeSWKr96emc+7ZvfsvH+/WVb3XCjkB24PPbT8VZXb3mJSAQMrSzuQ8+eQE9kDogYHH9Fj3tb/Cw==}
-    engines: {node: '>=16.0.0', yarn: '>=1.22.18'}
-
  '@codemirror/autocomplete@6.16.2':
    resolution: {integrity: sha512-MjfDrHy0gHKlPWsvSsikhO1+BOh+eBHNgfH1OXs1+DAf30IonQldgMM3kxLDTG9ktE7kDLaA1j/l7KMPA4KNfw==}
    peerDependencies:
@ -1155,12 +1136,6 @@ packages:
    peerDependencies:
      postcss: ^8.4

-  '@csstools/postcss-minify@1.1.5':
-    resolution: {integrity: sha512-wWMO5pzWe5DDnUgT3VvrDXJ35jP50g8JX8uQ3A19E2KHHiZt7A2ZMODcR5+6XhVVfYGq/+adIgfNLCc9rNszQg==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss: ^8.4
-
  '@csstools/postcss-rebase-url@1.0.11':
    resolution: {integrity: sha512-cAJDv2o8fpkXVNui1YnDnkW1I0JIfJeXmWKar4GLjfI7f6zfQMx9OQOeat/6Gmqrvhy0bzgQosOYmxGqpnQnEg==}
    engines: {node: ^14 || ^16 || >=18}
@ -1986,11 +1961,6 @@ packages:
    peerDependencies:
      storybook: ^8.2.7

-  '@storybook/addon-interactions@8.2.7':
-    resolution: {integrity: sha512-WZXlwpBNLE483uKuR70A7nm+ZbcZNEmuVz/J1/u7dbi0BUWzmJUa9YIgVeQ/1KTwW8KTkxvB0TuUUH3aA4ZKlA==}
-    peerDependencies:
-      storybook: ^8.2.7
-
  '@storybook/addon-links@8.2.7':
    resolution: {integrity: sha512-BJdR+vdj7S6Rtx8XqBNQzLsRGH/FYHJ6B6BPWGp0awVx0jNWJnxepINQov8i+GAddUVQGCNG+r4LI3QSD3tNAA==}
    peerDependencies:
@ -2090,11 +2060,6 @@ packages:
      react: ^16.8.0 || ^17.0.0 || ^18.0.0
      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0

-  '@storybook/instrumenter@8.2.7':
-    resolution: {integrity: sha512-Zm6Ty4uWFTNchKUviuJ9vfcMb7+qU8eyrFXVY80XRpr62JEWkYj4eCwx4OG8GzlQahTh9aSv9+hzV6p/5Ld4mw==}
-    peerDependencies:
-      storybook: ^8.2.7
-
  '@storybook/manager-api@8.2.6':
    resolution: {integrity: sha512-uv36h/b5RhlajWtEg4cVPBYV8gZs6juux0nIE+6G9i7vt8Ild6gM9tW1KNabgZcaHFiyWJYCNWxJZoKjgUmXDg==}
    peerDependencies:
@ -2141,11 +2106,6 @@ packages:
      svelte: ^4.0.0 || ^5.0.0-next.65
      vite: ^4.0.0 || ^5.0.0

-  '@storybook/test@8.2.7':
-    resolution: {integrity: sha512-7xypGR0zjJaM5MkxIz513SYiGs5vDJZL1bbkG1YKeBMff+ZRpa8y8VDYn/WDWuDw76KcFEXoPsPzKwktGhvnpw==}
-    peerDependencies:
-      storybook: ^8.2.7
-
  '@storybook/theming@8.2.7':
    resolution: {integrity: sha512-+iqm0GfRkshrjjNSOzwl7AD2m+LtJGXJCr93ke1huDK497WUKbX1hbbw51h5E1tEkx0c2wIqUlaqCM+7XMYcpw==}
    peerDependencies:
@ -2283,37 +2243,6 @@ packages:
  '@terrazzo/token-tools@0.0.5':
    resolution: {integrity: sha512-bKYXMTVzKD3ua8MVAgBvN4zYFOqDCbRS7KeRbkiOZ1dsErfQ2RhPuSGGZ3AlsFRdAA7aU6zPXUaK/affDtlD5Q==}

-  '@testing-library/dom@10.1.0':
-    resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==}
-    engines: {node: '>=18'}
-
-  '@testing-library/jest-dom@6.4.5':
-    resolution: {integrity: sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==}
-    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
-    peerDependencies:
-      '@jest/globals': '>= 28'
-      '@types/bun': latest
-      '@types/jest': '>= 28'
-      jest: '>= 28'
-      vitest: '>= 0.32'
-    peerDependenciesMeta:
-      '@jest/globals':
-        optional: true
-      '@types/bun':
-        optional: true
-      '@types/jest':
-        optional: true
-      jest:
-        optional: true
-      vitest:
-        optional: true
-
-  '@testing-library/user-event@14.5.2':
-    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
-    engines: {node: '>=12', npm: '>=6'}
-    peerDependencies:
-      '@testing-library/dom': '>=7.21.4'
-
  '@tootallnate/quickjs-emscripten@0.23.0':
    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}

@ -2332,9 +2261,6 @@ packages:
  '@types/accepts@1.3.7':
    resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==}

-  '@types/aria-query@5.0.4':
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
-
  '@types/babel__code-frame@7.0.6':
    resolution: {integrity: sha512-Anitqkl3+KrzcW2k77lRlg/GfLZLWXBuNgbEcIOU6M92yw42vsd3xV/Z/yAHEj8m+KUjL6bWOVOFqX8PFPJ4LA==}

@ -2627,9 +2553,6 @@ packages:
  '@vitest/expect@0.34.6':
    resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}

-  '@vitest/expect@1.6.0':
-    resolution: {integrity: sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==}
-
  '@vitest/runner@0.34.6':
    resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==}

@ -2642,15 +2565,9 @@ packages:
  '@vitest/spy@0.34.6':
    resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==}

-  '@vitest/spy@1.6.0':
-    resolution: {integrity: sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==}
-
  '@vitest/utils@0.34.6':
    resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}

-  '@vitest/utils@1.6.0':
-    resolution: {integrity: sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==}
-
  '@wdio/cli@8.39.1':
    resolution: {integrity: sha512-CUze/nbOMzgSEp+Qo27dnM5IhlOPAiBJCPX3xO85/kjweqqxmAB1QBKww1Mz9YlNIXineaHrkgqlUQIvEqOJdQ==}
    engines: {node: ^16.13 || >=18}
@ -3043,10 +2960,6 @@ packages:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
    engines: {node: '>=4'}

-  chalk@3.0.0:
-    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
-    engines: {node: '>=8'}
-
  chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}
@ -3069,18 +2982,6 @@ packages:
    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
    engines: {node: '>=10'}

-  chromatic@11.5.6:
-    resolution: {integrity: sha512-ycX/hlZLs69BltwwBNsEXr+As6x5/0rlwp6W/CiHMZ3tpm7dmkd+hQCsb8JGHb1h49W3qPOKQ/Lh9evqcJ1yeQ==}
-    hasBin: true
-    peerDependencies:
-      '@chromatic-com/cypress': ^0.*.* || ^1.0.0
-      '@chromatic-com/playwright': ^0.*.* || ^1.0.0
-    peerDependenciesMeta:
-      '@chromatic-com/cypress':
-        optional: true
-      '@chromatic-com/playwright':
-        optional: true
-
  chromium-bidi@0.4.16:
    resolution: {integrity: sha512-7ZbXdWERxRxSwo3txsBjjmc/NLxqb1Bk30mRb0BMS4YIaiV6zvKZqL/UAH+DdqcDYayDWk2n/y8klkBDODrPvA==}
    peerDependencies:
@ -3238,9 +3139,6 @@ packages:
  css-value@0.0.1:
    resolution: {integrity: sha512-FUV3xaJ63buRLgHrLQVlVgQnQdR4yqdLGaDu7g8CQcWjInDfM9plBTPI9FRfpahju1UBSaMckeb2/46ApS/V1Q==}

-  css.escape@1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-
  cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
@ -3430,12 +3328,6 @@ packages:
    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
    engines: {node: '>=6.0.0'}

-  dom-accessibility-api@0.5.16:
-    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
-
-  dom-accessibility-api@0.6.3:
-    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
-
  dom-serializer@1.4.1:
    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}

@ -3737,9 +3629,6 @@ packages:
    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
    engines: {node: '>=4.0'}

-  estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
-
  esutils@2.0.3:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
    engines: {node: '>=0.10.0'}
@ -3839,10 +3728,6 @@ packages:
  filelist@1.0.4:
    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}

-  filesize@10.1.4:
-    resolution: {integrity: sha512-ryBwPIIeErmxgPnm6cbESAzXjuEFubs+yKYLBZvg3CaiNcmkJChoOGcBSrZ6IwkMwPABwPpVXE6IlNdGJJrvEg==}
-    engines: {node: '>= 10.4.0'}
-
  fill-range@7.0.1:
    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
    engines: {node: '>=8'}
@ -4266,10 +4151,6 @@ packages:
    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
    engines: {node: '>=0.8.19'}

-  indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
-
  indent-string@5.0.0:
    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
    engines: {node: '>=12'}
@ -4716,10 +4597,6 @@ packages:
  lscache@1.3.2:
    resolution: {integrity: sha512-CBZT/pDcaK3I3XGwDLaszDe8hj0pCgbuxd3W79gvHApBSdKVXvR9fillbp6eLvp7dLgtaWm3a1mvmhAqn9uCXQ==}

-  lz-string@1.5.0:
-    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
-    hasBin: true
-
  magic-string@0.30.10:
    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}

@ -5395,10 +5272,6 @@ packages:
    engines: {node: '>=14'}
    hasBin: true

-  pretty-format@27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-
  pretty-format@29.7.0:
    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@ -5494,20 +5367,11 @@ packages:
      react: '>=16.8.0'
      react-dom: '>=16.8.0'

-  react-confetti@6.1.0:
-    resolution: {integrity: sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==}
-    engines: {node: '>=10.18'}
-    peerDependencies:
-      react: ^16.3.0 || ^17.0.1 || ^18.0.0
-
  react-dom@18.3.1:
    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
    peerDependencies:
      react: ^18.3.1

-  react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
-
  react-is@18.2.0:
    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}

@ -5552,10 +5416,6 @@ packages:
    resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==}
    engines: {node: '>=6.0.0'}

-  redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
-
  reflect-metadata@0.2.2:
    resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}

@ -6224,9 +6084,6 @@ packages:
    resolution: {integrity: sha512-QaLaUL1CqblSKKPgLrFW3lZWkWG4pGBQNW+q1ScJB5v1D/nFWtsrD/yZljW/bdawg90ihi4/ftQJ3h6fz1FamA==}
    hasBin: true

-  tween-functions@1.2.0:
-    resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==}
-
  type-check@0.4.0:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
    engines: {node: '>= 0.8.0'}
@ -6682,8 +6539,6 @@ snapshots:

  '@aashutoshrathi/word-wrap@1.2.6': {}

-  '@adobe/css-tools@4.4.0': {}
-
  '@ampproject/remapping@2.2.1':
    dependencies:
      '@jridgewell/gen-mapping': 0.3.5
@ -6769,7 +6624,7 @@ snapshots:
      '@babel/core': 7.24.7
      '@babel/helper-compilation-targets': 7.24.7
      '@babel/helper-plugin-utils': 7.24.7
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
      lodash.debounce: 4.0.8
      resolve: 1.22.4
    transitivePeerDependencies:
@ -7515,18 +7370,6 @@ snapshots:
      '@babel/helper-validator-identifier': 7.24.7
      to-fast-properties: 2.0.0

-  '@chromatic-com/storybook@1.6.1(react@18.3.1)':
-    dependencies:
-      chromatic: 11.5.6
-      filesize: 10.1.4
-      jsonfile: 6.1.0
-      react-confetti: 6.1.0(react@18.3.1)
-      strip-ansi: 7.1.0
-    transitivePeerDependencies:
-      - '@chromatic-com/cypress'
-      - '@chromatic-com/playwright'
-      - react
-
  '@codemirror/autocomplete@6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)':
    dependencies:
      '@codemirror/language': 6.10.2
@ -7683,11 +7526,6 @@ snapshots:
      '@csstools/postcss-rebase-url': 1.0.11(postcss@8.4.39)
      postcss: 8.4.39

-  '@csstools/postcss-minify@1.1.5(postcss@8.4.39)':
-    dependencies:
-      '@csstools/css-tokenizer': 2.4.1
-      postcss: 8.4.39
-
  '@csstools/postcss-rebase-url@1.0.11(postcss@8.4.39)':
    dependencies:
      '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1)
@ -7789,7 +7627,7 @@ snapshots:
  '@eslint/eslintrc@1.4.1':
    dependencies:
      ajv: 6.12.6
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
      espree: 9.6.1
      globals: 13.24.0
      ignore: 5.3.1
@ -7834,7 +7672,7 @@ snapshots:
  '@humanwhocodes/config-array@0.9.5':
    dependencies:
      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
      minimatch: 3.1.2
    transitivePeerDependencies:
      - supports-color
@ -8663,21 +8501,6 @@ snapshots:
      '@storybook/global': 5.0.0
      storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7))

-  '@storybook/addon-interactions@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vitest@0.34.6)':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/test': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vitest@0.34.6)
-      polished: 4.3.1
-      storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7))
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@jest/globals'
-      - '@types/bun'
-      - '@types/jest'
-      - jest
-      - vitest
-
  '@storybook/addon-links@8.2.7(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
    dependencies:
      '@storybook/csf': 0.1.11
@ -8817,13 +8640,6 @@ snapshots:
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)

-  '@storybook/instrumenter@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@vitest/utils': 1.6.0
-      storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7))
-      util: 0.12.5
-
  '@storybook/manager-api@8.2.6(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
    dependencies:
      storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7))
@ -8909,24 +8725,6 @@ snapshots:
      - typescript
      - vite-plugin-glimmerx

-  '@storybook/test@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vitest@0.34.6)':
-    dependencies:
-      '@storybook/csf': 0.1.11
-      '@storybook/instrumenter': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@testing-library/dom': 10.1.0
-      '@testing-library/jest-dom': 6.4.5(vitest@0.34.6)
-      '@testing-library/user-event': 14.5.2(@testing-library/dom@10.1.0)
-      '@vitest/expect': 1.6.0
-      '@vitest/spy': 1.6.0
-      storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7))
-      util: 0.12.5
-    transitivePeerDependencies:
-      - '@jest/globals'
-      - '@types/bun'
-      - '@types/jest'
-      - jest
-      - vitest
-
  '@storybook/theming@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
    dependencies:
      storybook: 8.2.7(@babel/preset-env@7.24.7(@babel/core@7.24.7))
@ -8994,7 +8792,7 @@ snapshots:
  '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13)))(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13))':
    dependencies:
      '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13))
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
      svelte: 5.0.0-next.196
      vite: 5.2.13(@types/node@20.14.13)
    transitivePeerDependencies:
@ -9012,7 +8810,7 @@ snapshots:
  '@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13))':
    dependencies:
      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13)))(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.14.13))
-      debug: 4.3.6(supports-color@8.1.1)
+      debug: 4.3.6
      deepmerge: 4.3.1
      kleur: 4.1.5
      magic-string: 0.30.10
@ -9133,34 +8931,6 @@ snapshots:
      scule: 1.3.0
      wildcard-match: 5.1.3

-  '@testing-library/dom@10.1.0':
-    dependencies:
-      '@babel/code-frame': 7.24.7
-      '@babel/runtime': 7.22.15
-      '@types/aria-query': 5.0.4
-      aria-query: 5.3.0
-      chalk: 4.1.2
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      pretty-format: 27.5.1
-
-  '@testing-library/jest-dom@6.4.5(vitest@0.34.6)':
-    dependencies:
-      '@adobe/css-tools': 4.4.0
-      '@babel/runtime': 7.22.15
-      aria-query: 5.3.0
-      chalk: 3.0.0
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.6.3
-      lodash: 4.17.21
-      redent: 3.0.0
-    optionalDependencies:
-      vitest: 0.34.6(playwright@1.44.1)(safaridriver@0.1.2)(webdriverio@8.39.1(typescript@5.4.5))
-
-  '@testing-library/user-event@14.5.2(@testing-library/dom@10.1.0)':
-    dependencies:
-      '@testing-library/dom': 10.1.0
-
  '@tootallnate/quickjs-emscripten@0.23.0': {}

  '@tsconfig/node10@1.0.11': {}
@ -9175,8 +8945,6 @@ snapshots:
    dependencies:
      '@types/node': 20.14.13

-  '@types/aria-query@5.0.4': {}
-
  '@types/babel__code-frame@7.0.6': {}

  '@types/body-parser@1.19.5':
@ -9520,12 +9288,6 @@ snapshots:
      '@vitest/utils': 0.34.6
      chai: 4.3.10

-  '@vitest/expect@1.6.0':
-    dependencies:
-      '@vitest/spy': 1.6.0
-      '@vitest/utils': 1.6.0
-      chai: 4.3.10
-
  '@vitest/runner@0.34.6':
    dependencies:
      '@vitest/utils': 0.34.6
@ -9548,23 +9310,12 @@ snapshots:
    dependencies:
      tinyspy: 2.2.1

-  '@vitest/spy@1.6.0':
-    dependencies:
-      tinyspy: 2.2.1
-
  '@vitest/utils@0.34.6':
    dependencies:
      diff-sequences: 29.6.3
      loupe: 2.3.7
      pretty-format: 29.7.0

-  '@vitest/utils@1.6.0':
-    dependencies:
-      diff-sequences: 29.6.3
-      estree-walker: 3.0.3
-      loupe: 2.3.7
-      pretty-format: 29.7.0
-
  '@wdio/cli@8.39.1(typescript@5.4.5)':
    dependencies:
      '@types/node': 20.14.13
@ -10123,11 +9874,6 @@ snapshots:
      escape-string-regexp: 1.0.5
      supports-color: 5.5.0

-  chalk@3.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      supports-color: 7.2.0
-
  chalk@4.1.2:
    dependencies:
      ansi-styles: 4.3.0
@ -10155,8 +9901,6 @@ snapshots:

  chownr@2.0.0: {}

-  chromatic@11.5.6: {}
-
  chromium-bidi@0.4.16(devtools-protocol@0.0.1147663):
    dependencies:
      devtools-protocol: 0.0.1147663
@ -10309,8 +10053,6 @@ snapshots:

  css-value@0.0.1: {}

-  css.escape@1.5.1: {}
-
  cssesc@3.0.0: {}

  csstype@3.1.3: {}
@ -10355,6 +10097,10 @@ snapshots:
    dependencies:
      ms: 2.1.2

+  debug@4.3.6:
+    dependencies:
+      ms: 2.1.2
+
  debug@4.3.6(supports-color@8.1.1):
    dependencies:
      ms: 2.1.2
@ -10468,10 +10214,6 @@ snapshots:
    dependencies:
      esutils: 2.0.3

-  dom-accessibility-api@0.5.16: {}
-
-  dom-accessibility-api@0.6.3: {}
-
  dom-serializer@1.4.1:
    dependencies:
      domelementtype: 2.3.0
@ -10957,10 +10699,6 @@ snapshots:

  estraverse@5.3.0: {}

-  estree-walker@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.5
-
  esutils@2.0.3: {}

  etag@1.8.1: {}
@ -11133,8 +10871,6 @@ snapshots:
    dependencies:
      minimatch: 5.1.6

-  filesize@10.1.4: {}
-
  fill-range@7.0.1:
    dependencies:
      to-regex-range: 5.0.1
@ -11637,8 +11373,6 @@ snapshots:

  imurmurhash@0.1.4: {}

-  indent-string@4.0.0: {}
-
  indent-string@5.0.0: {}

  inflight@1.0.6:
@ -12061,8 +11795,6 @@ snapshots:

  lscache@1.3.2: {}

-  lz-string@1.5.0: {}
-
  magic-string@0.30.10:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.4.15
@ -12696,12 +12428,6 @@ snapshots:

  prettier@3.3.2: {}

-  pretty-format@27.5.1:
-    dependencies:
-      ansi-regex: 5.0.1
-      ansi-styles: 5.2.0
-      react-is: 17.0.2
-
  pretty-format@29.7.0:
    dependencies:
      '@jest/schemas': 29.6.3
@ -12813,19 +12539,12 @@ snapshots:
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)

-  react-confetti@6.1.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      tween-functions: 1.2.0
-
  react-dom@18.3.1(react@18.3.1):
    dependencies:
      loose-envify: 1.4.0
      react: 18.3.1
      scheduler: 0.23.2

-  react-is@17.0.2: {}
-
  react-is@18.2.0: {}

  react@18.3.1:
@ -12893,11 +12612,6 @@ snapshots:
    dependencies:
      minimatch: 3.1.2

-  redent@3.0.0:
-    dependencies:
-      indent-string: 4.0.0
-      strip-indent: 3.0.0
-
  reflect-metadata@0.2.2: {}

  regenerate-unicode-properties@10.1.1:
@ -13662,8 +13376,6 @@ snapshots:
      turbo-windows-64: 2.0.9
      turbo-windows-arm64: 2.0.9

-  tween-functions@1.2.0: {}
-
  type-check@0.4.0:
    dependencies:
      prelude-ls: 1.2.1