Update the use and structure of styles (#4524)

* update the structure in the UI package * remove styles from the app * tokens update * fix serif font style * style: reduce margin-bottom in NotOnGitButlerBranch component. remove unused css * style: Update background color on hover in Board component. * fix fonts duplication * styles restructuring * GitButler WIP Commit * watch command changed --------- Co-authored-by: GitButler <gitbutler@gitbutler.com>
2024-09-11 12:25:42 +03:00 · 2024-07-29 11:29:54 +02:00 · 2024-07-29 11:29:54 +02:00 · 88b8f4b1bb
commit 88b8f4b1bb
parent d37dcefdf5
53 changed files with 837 additions and 1885 deletions
--- a/apps/desktop/src/lib/components/Board.svelte
+++ b/apps/desktop/src/lib/components/Board.svelte
@ -375,7 +375,7 @@
 		overflow: hidden;

 		&:hover {
-			background-color: var(--clr-bg-2);
+			background-color: var(--clr-bg-1-muted);
 		}

 		& span {
--- a/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte
+++ b/apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte
@ -90,12 +90,7 @@

 <style lang="postcss">
 	.project-name {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-		line-height: 120%;
-		color: var(--clr-scale-ntrl-30);
-		margin-bottom: 20px;
+		margin-bottom: 12px;
 	}

 	.switchrepo__title {
--- a/apps/desktop/src/lib/hunk/HunkLines.svelte
+++ b/apps/desktop/src/lib/hunk/HunkLines.svelte
@ -94,7 +94,7 @@
 		display: flex;
 		width: 100%;
 		min-width: max-content;
-		font-family: monospace;
+		font-family: var(--mono-font-family);
 		background-color: var(--clr-bg-1);
 		white-space: pre;
 		tab-size: var(--tab-size);
--- a/apps/desktop/src/routes/+layout.svelte
+++ b/apps/desktop/src/routes/+layout.svelte
@ -1,5 +1,6 @@
 <script lang="ts">
-	import '../styles/main.css';
+	import '@gitbutler/ui/fonts.css';
+	import '@gitbutler/ui/main.css';

 	import { PromptService as AIPromptService } from '$lib/ai/promptService';
 	import { AIService } from '$lib/ai/service';
--- a/apps/desktop/src/styles/card.css
+++ b/apps/desktop/src/styles/card.css
@ -1,33 +0,0 @@
-.card {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--clr-border-2);
-	border-radius: var(--radius-m);
-	background: var(--clr-bg-1);
-}
-
-.card__header {
-	display: flex;
-	justify-content: space-between;
-	padding: 16px;
-	gap: 8px;
-	border-bottom: 1px solid var(--clr-border-2);
-}
-
-.card__title {
-	padding: 4px 6px;
-}
-
-.card__content {
-	display: flex;
-	flex-direction: column;
-	padding: 16px;
-}
-
-.card__footer {
-	display: flex;
-	gap: 6px;
-	padding: 16px;
-	justify-content: space-between;
-	border-top: 1px solid var(--clr-border-2);
-}
--- a/apps/desktop/src/styles/fonts.css
+++ b/apps/desktop/src/styles/fonts.css
@ -1,37 +0,0 @@
-@font-face {
-	font-family: 'PP Editorial New';
-	src: url('/fonts/PPEditorialNew-Regular.woff2') format('woff2');
-}
-
-@font-face {
-	font-family: 'Spline Sans Mono';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url('/fonts/SplineSansMono-Regular.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-		U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-		U+FFFD;
-}
-
-@font-face {
-	font-family: 'Spline Sans Mono';
-	font-style: normal;
-	font-weight: 500;
-	font-display: swap;
-	src: url('/fonts/SplineSansMono-Medium.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-		U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-		U+FFFD;
-}
-
-@font-face {
-	font-family: 'Spline Sans Mono';
-	font-style: normal;
-	font-weight: 600;
-	font-display: swap;
-	src: url('/fonts/SplineSansMono-Semibold.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-		U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-		U+FFFD;
-}
--- a/apps/desktop/src/styles/main.css
+++ b/apps/desktop/src/styles/main.css
@ -1,195 +0,0 @@
-@layer reset;
-
-@import './reset.css';
-@import 'inter-ui/inter.css';
-@import './fonts.css';
-@import './diff.css';
-@import './syntax-highlighting.css';
-@import './tokens.css';
-@import './text-classes.css';
-@import './card.css';
-@import './tooltip.css';
-@import './text-input.css';
-@import './commit-lines.css';
-@import './markdown.css';
-@import './draggable.css';
-
-/* CSS VARIABLES */
-:root {
-	--transition-fast: 0.06s ease-in-out;
-	--transition-medium: 0.15s ease-in-out;
-	--transition-slow: 0.2s ease-in-out;
-
-	/* Z-index */
-	--z-ground: 1;
-	--z-lifted: 2;
-	--z-floating: 3;
-	--z-modal: 4;
-	--z-tooltip: 9;
-	--z-blocker: 10;
-
-	/* TODO: add focus color */
-	--focus-color: var(--clr-scale-pop-50);
-	--resizer-color: var(--clr-scale-pop-50);
-}
-
-/* scrollbar helpers */
-.hide-native-scrollbar {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
-.truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-/* custom scrollbar */
-.scrollbar,
-pre {
-	&::-webkit-scrollbar {
-		background-color: transaparent;
-		width: 14px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background-color: transaparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: var(--clr-border-1);
-		background-clip: padding-box;
-		border-radius: 12px;
-		border: 4px solid rgba(0, 0, 0, 0);
-		opacity: 0.3;
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		opacity: 0.8;
-	}
-
-	&::-webkit-scrollbar-button {
-		display: none;
-	}
-}
-
-.link {
-	text-decoration: underline;
-
-	&:hover {
-		text-decoration: none;
-	}
-}
-
-/**
- * Prevents elements within drop-zones from firing mouse events, making
- * it much easier to manage in/out/over/leave events since they fire less
- * frequently.
- */
-.drop-zone-hover * {
-	pointer-events: none;
-}
-
-/* FOCUS STATE */
-
-.focus-state {
-	&:focus-within {
-		outline: 1px solid transaparent;
-		animation: focus-animation var(--transition-fast) forwards;
-	}
-}
-
-@keyframes focus-animation {
-	0% {
-		outline-offset: 0;
-	}
-	100% {
-		outline-offset: 2px;
-		outline: 1px solid var(--focus-color);
-	}
-}
-
-/* CODE */
-.code-string {
-	font-family: 'Spline Sans Mono', monospace;
-	border-radius: var(--radius-s);
-	background: var(--clr-scale-ntrl-80);
-	padding: 1px 4px;
-}
-
-/* TRANSITION ANIMATION */
-
-.transition-fly {
-	animation: transition-fly 0.25s forwards ease-in-out;
-}
-
-@keyframes transition-fly {
-	0% {
-		transform: translateY(6px);
-		opacity: 0;
-	}
-	100% {
-		transform: translateY(0);
-		opacity: 1;
-	}
-}
-
-/* STATES */
-
-.wiggle {
-	animation: wiggle-animation 0.35s forwards;
-}
-
-@keyframes wiggle-animation {
-	0% {
-		transform: translateX(-3px);
-	}
-	25% {
-		transform: translateX(3px);
-	}
-	50% {
-		transform: translateX(-2px);
-	}
-	75% {
-		transform: translateX(2px);
-	}
-	100% {
-		transform: translateX(0);
-	}
-}
-
-.locked-file-animation {
-	--locked-color: oklch(from var(--clr-scale-warn-50) l c h / 0.2);
-	border: 1px solid var(--clr-bg-1);
-	animation: locked-file-animation 1.4s ease-out forwards;
-}
-
-@keyframes locked-file-animation {
-	0% {
-		transform: translateX(-3px);
-		background-color: var(--clr-bg-1);
-	}
-	10% {
-		transform: translateX(3px);
-		background-color: var(--locked-color);
-	}
-	15% {
-		transform: translateX(-3px);
-	}
-	25% {
-		transform: translateX(3px);
-		background-color: var(--locked-color);
-	}
-	30%,
-	70% {
-		transform: translateX(0);
-	}
-	100% {
-		background-color: var(--clr-bg-1);
-	}
-}
--- a/apps/desktop/src/styles/markdown.css
+++ b/apps/desktop/src/styles/markdown.css
@ -1,87 +0,0 @@
-.markdown {
-	& p:last-child,
-	& ul:last-child,
-	& ol:last-child,
-	& blockquote:last-child,
-	& pre:last-child,
-	& hr:last-child {
-		margin-bottom: 0;
-	}
-
-	h1 {
-		font-size: 2em;
-		margin-bottom: 0.8em;
-	}
-	h2 {
-		font-size: 1.5em;
-		margin-bottom: 0.8em;
-	}
-	h3 {
-		font-size: 1.17em;
-		margin-bottom: 0.8em;
-	}
-	h4 {
-		font-size: 1em;
-		margin-bottom: 0.8em;
-	}
-
-	p {
-		margin-bottom: 1.2em;
-	}
-
-	ul {
-		display: block;
-		list-style-type: disc;
-		margin: 1em 0;
-		padding: 0 0 0 2em;
-	}
-
-	ol {
-		display: block;
-		list-style-type: decimal;
-		margin: 1em 0;
-		padding: 0 0 0 2em;
-	}
-
-	li {
-		margin: 0.5em 0;
-	}
-
-	blockquote {
-		margin: 1em 0;
-		padding: 0 0 0 2em;
-	}
-
-	pre {
-		margin: 1em 0;
-		padding: 1em;
-		background-color: var(--clr-scale-ntrl-90);
-		border: 1px solid var(--clr-scale-ntrl-70);
-		overflow: auto;
-		border-radius: var(--radius-m);
-	}
-
-	code {
-		font-family: monospace;
-		background-color: var(--clr-scale-ntrl-90);
-		border: 1px solid var(--clr-scale-ntrl-70);
-		padding: 0 0.5em;
-	}
-
-	a {
-		text-decoration: underline;
-	}
-
-	hr {
-		box-sizing: content-box;
-		height: 0;
-		overflow: visible;
-		margin: 2em 0;
-		opacity: 0.2;
-	}
-
-	b,
-	strong {
-		font-weight: bolder;
-	}
-}
--- a/apps/desktop/src/styles/reset.css
+++ b/apps/desktop/src/styles/reset.css
@ -1,257 +0,0 @@
-/* BOILERPLATE CSS */
-/* reset all styles */
-@layer reset {
-	/* base */
-	*,
-	:after,
-	:before {
-		box-sizing: border-box;
-		border: 0 solid;
-	}
-
-	html {
-		overscroll-behavior: none;
-	}
-
-	body {
-		font-family: 'Inter', sans-serif;
-		font-size: 13px;
-		line-height: inherit;
-		height: 100vh;
-		width: 100vw;
-		overflow-y: hidden;
-		padding: 0;
-		margin: 0;
-		line-height: inherit;
-
-		color: var(--clr-text-1);
-		background-color: var(--clr-bg-2);
-
-		/* optimise font rendering */
-		-webkit-font-smoothing: antialiased;
-		text-rendering: optimizeLegibility;
-
-		/* prevents background from being selected */
-		user-select: none;
-	}
-
-	/* elements */
-	hr {
-		height: 0;
-		color: inherit;
-		border-top-width: 1px;
-	}
-
-	abbr:where([title]) {
-		-webkit-text-decoration: underline dotted;
-		text-decoration: underline dotted;
-	}
-
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		font-size: inherit;
-		font-weight: inherit;
-	}
-
-	a {
-		color: inherit;
-		text-decoration: inherit;
-	}
-
-	b,
-	strong {
-		font-weight: bolder;
-	}
-
-	code,
-	kbd,
-	pre,
-	samp {
-		font-family:
-			Söhne Mono,
-			monospace;
-		font-feature-settings: normal;
-		font-variation-settings: normal;
-		font-size: 1em;
-	}
-
-	small {
-		font-size: 80%;
-	}
-
-	sub,
-	sup {
-		font-size: 75%;
-		line-height: 0;
-		position: relative;
-		vertical-align: baseline;
-	}
-
-	sub {
-		bottom: -0.25em;
-	}
-
-	sup {
-		top: -0.5em;
-	}
-
-	table {
-		text-indent: 0;
-		border-color: inherit;
-		border-collapse: collapse;
-	}
-
-	button,
-	input,
-	optgroup,
-	select,
-	textarea {
-		font-family: inherit;
-		font-feature-settings: inherit;
-		font-variation-settings: inherit;
-		font-size: 100%;
-		font-weight: inherit;
-		line-height: inherit;
-		letter-spacing: inherit;
-		color: inherit;
-		margin: 0;
-		padding: 0;
-	}
-
-	button,
-	select {
-		text-transform: none;
-	}
-
-	button,
-	input:where([type='button']),
-	input:where([type='reset']),
-	input:where([type='submit']) {
-		-webkit-appearance: button;
-		background-color: transparent;
-		background-image: none;
-	}
-
-	:-moz-focusring {
-		outline: auto;
-	}
-
-	:-moz-ui-invalid {
-		box-shadow: none;
-	}
-
-	progress {
-		vertical-align: baseline;
-	}
-
-	::-webkit-inner-spin-button,
-	::-webkit-outer-spin-button {
-		height: auto;
-	}
-
-	[type='search'] {
-		-webkit-appearance: textfield;
-		outline-offset: -2px;
-	}
-
-	::-webkit-search-decoration {
-		-webkit-appearance: none;
-	}
-
-	::-webkit-file-upload-button {
-		-webkit-appearance: button;
-		font: inherit;
-	}
-
-	summary {
-		display: list-item;
-	}
-
-	blockquote,
-	dd,
-	dl,
-	figure,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6,
-	hr,
-	p,
-	pre {
-		margin: 0;
-	}
-
-	fieldset {
-		margin: 0;
-	}
-
-	fieldset,
-	legend {
-		padding: 0;
-	}
-
-	menu,
-	ol,
-	ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-
-	dialog {
-		padding: 0;
-	}
-
-	textarea {
-		resize: vertical;
-	}
-
-	input::-moz-placeholder,
-	textarea::-moz-placeholder {
-		opacity: 1;
-		color: #9ca3af;
-	}
-
-	input::placeholder,
-	textarea::placeholder {
-		opacity: 1;
-		color: #9ca3af;
-	}
-
-	[role='button'],
-	button {
-		cursor: pointer;
-	}
-
-	:disabled {
-		cursor: default;
-	}
-
-	audio,
-	canvas,
-	embed,
-	iframe,
-	img,
-	object,
-	svg,
-	video {
-		display: block;
-		vertical-align: middle;
-	}
-
-	img,
-	video {
-		max-width: 100%;
-		height: auto;
-	}
-
-	[hidden] {
-		display: none;
-	}
-}
--- a/apps/desktop/src/styles/syntax-highlighting.css
+++ b/apps/desktop/src/styles/syntax-highlighting.css
@ -1,197 +0,0 @@
-.token-variable {
-	color: #8953800;
-}
-
-.token-property {
-	color: #0550ae;
-}
-
-.token-type {
-	color: #116329;
-}
-
-.token-variable-special {
-	color: #953800;
-}
-
-.token-definition {
-	color: #953800;
-}
-
-/* .token-builtin {
-		color: #d3869b;
-} */
-
-.token-number {
-	color: #0550ae;
-}
-
-.token-string {
-	color: #0550ae;
-}
-
-.token-string-special {
-	color: #0a3069;
-}
-
-/* .token-atom {
-		color: #0a3069;
-} */
-
-.token-keyword {
-	color: #cf222e;
-}
-
-.token-comment {
-	color: #6e7781;
-}
-
-.token-meta {
-	color: #1f2328;
-}
-
-.token-invalid {
-	color: #82071e;
-}
-
-.token-tag {
-	color: #116329;
-}
-
-.token-attribute {
-	color: #1f2328;
-}
-
-.token-attribute-value {
-	color: var(--color-token-attribute-value);
-}
-
-.token-inserted {
-	color: #116329;
-}
-
-.token-deleted {
-	color: #82071e;
-}
-
-.token-heading {
-	color: var(--color-token-variable-special);
-	font-weight: bold;
-}
-
-.token-link {
-	color: var(--color-token-variable-special);
-	text-decoration: underline;
-}
-
-.token-strikethrough {
-	text-decoration: strike-through;
-}
-
-.token-strong {
-	font-weight: bold;
-}
-
-.token-emphasis {
-	font-style: italic;
-}
-
-.dark {
-	.token-variable {
-		color: #79c0ff;
-	}
-
-	.token-property {
-		color: #79c0ff;
-	}
-
-	.token-type {
-		color: #7ee787;
-	}
-
-	.token-variable-special {
-		color: #79c0ff;
-	}
-
-	.token-definition {
-		color: #ffa657;
-	}
-
-	/* .token-builtin {
-			color: #d3869b;
-    } */
-
-	.token-number {
-		color: #a5d6ff;
-	}
-
-	.token-string {
-		color: #79c0ff;
-	}
-
-	.token-string-special {
-		color: #a5d6ff;
-	}
-
-	/* .token-atom {
-			color: #0a3069;
-    } */
-
-	.token-keyword {
-		color: #ff7b72;
-	}
-
-	.token-comment {
-		color: #8b949e;
-	}
-
-	.token-meta {
-		color: #ffa657;
-	}
-
-	.token-invalid {
-		color: #ffa198;
-	}
-
-	.token-tag {
-		color: #7ee787;
-	}
-
-	.token-attribute {
-		color: #e6edf3;
-	}
-
-	.token-attribute-value {
-		color: var(--color-token-attribute-value);
-	}
-
-	.token-inserted {
-		color: #7ee787;
-	}
-
-	.token-deleted {
-		color: #ffa198;
-	}
-
-	.token-heading {
-		color: var(--color-token-variable-special);
-		font-weight: bold;
-	}
-
-	.token-link {
-		color: var(--color-token-variable-special);
-		text-decoration: underline;
-	}
-
-	.token-strikethrough {
-		text-decoration: strike-through;
-	}
-
-	.token-strong {
-		font-weight: bold;
-	}
-
-	.token-emphasis {
-		font-style: italic;
-	}
-}
--- a/apps/desktop/src/styles/text-classes.css
+++ b/apps/desktop/src/styles/text-classes.css
@ -1,186 +0,0 @@
-:root {
-	--base-font-family: 'Inter', sans-serif;
-	--serif-font-family: 'PP Editorial New', serif;
-	--base-font-weight: 500;
-	--semidold-font-weight: 600;
-	--bold-font-weight: 700;
-	--base-line-height: 120%;
-	--text-body-line-height: 150%;
-}
-
-/* text Base Classes */
-.text-base-8 {
-	font-family: var(--base-font-family);
-	font-size: 0.5rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-9 {
-	font-family: var(--base-font-family);
-	font-size: 0.563rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-10 {
-	font-family: var(--base-font-family);
-	font-size: 0.625rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-11 {
-	font-family: var(--base-font-family);
-	font-size: 0.6875rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-12 {
-	font-family: var(--base-font-family);
-	font-size: 0.75rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-13 {
-	font-family: var(--base-font-family);
-	font-size: 0.8125rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-14 {
-	font-family: var(--base-font-family);
-	font-size: 0.875rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-15 {
-	font-family: var(--base-font-family);
-	font-size: 0.938rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-16 {
-	font-family: var(--base-font-family);
-	font-size: 1rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-base-18 {
-	font-family: var(--base-font-family);
-	font-size: 1.125rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--base-line-height);
-}
-
-/* text Base Body Classes */
-.text-base-body-10 {
-	font-family: var(--base-font-family);
-	font-size: 0.625rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--text-body-line-height);
-}
-
-.text-base-body-11 {
-	font-family: var(--base-font-family);
-	font-size: 0.6875rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--text-body-line-height);
-}
-
-.text-base-body-12 {
-	font-family: var(--base-font-family);
-	font-size: 0.75rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--text-body-line-height);
-}
-
-.text-base-body-13 {
-	font-family: var(--base-font-family);
-	font-size: 0.8125rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--text-body-line-height);
-}
-
-.text-base-body-14 {
-	font-family: var(--base-font-family);
-	font-size: 0.875rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--text-body-line-height);
-}
-
-.text-base-body-15 {
-	font-family: var(--base-font-family);
-	font-size: 0.938rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--text-body-line-height);
-}
-
-.text-base-body-16 {
-	font-family: var(--base-font-family);
-	font-size: 1rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--text-body-line-height);
-}
-
-.text-base-body-18 {
-	font-family: var(--base-font-family);
-	font-size: 1.125rem;
-	font-weight: var(--base-font-weight);
-	line-height: var(--text-body-line-height);
-}
-
-/* text Head Classes */
-.text-head-20 {
-	font-family: var(--base-font-family);
-	font-size: 1.25rem;
-	font-weight: var(--bold-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-head-22 {
-	font-family: var(--base-font-family);
-	font-size: 1.375rem;
-	font-weight: var(--bold-font-weight);
-	line-height: var(--base-line-height);
-}
-
-.text-head-24 {
-	font-family: var(--base-font-family);
-	font-size: 1.5rem;
-	font-weight: var(--bold-font-weight);
-	line-height: var(--base-line-height);
-}
-
-/* Serif Classes */
-.text-serif-40 {
-	font-family: var(--serif-font-family);
-	font-size: 2.5rem;
-	line-height: var(--text-body-line-height);
-}
-
-.text-serif-24 {
-	font-family: var(--serif-font-family);
-	font-size: 1.5rem;
-	line-height: var(--text-body-line-height);
-}
-
-/* modifiers */
-
-.text-light {
-	font-weight: var(--light-font-weight);
-}
-
-.text-semibold {
-	font-weight: var(--semidold-font-weight);
-}
-
-.text-bold {
-	font-weight: var(--bold-font-weight);
-}
--- a/apps/desktop/static/fonts/SplineSansMono-Medium.woff2
+++ b/apps/desktop/static/fonts/SplineSansMono-Medium.woff2
--- a/apps/desktop/static/fonts/SplineSansMono-Regular.woff2
+++ b/apps/desktop/static/fonts/SplineSansMono-Regular.woff2
--- a/apps/desktop/static/fonts/SplineSansMono-Semibold.woff2
+++ b/apps/desktop/static/fonts/SplineSansMono-Semibold.woff2
--- a/apps/desktop/vite.config.ts
+++ b/apps/desktop/vite.config.ts
@ -40,7 +40,7 @@ export default defineConfig({
 		port: 1420,
 		strictPort: true,
 		fs: {
-			allow: ['../../']
+			strict: false
 		}
 	},
 	// to make use of `TAURI_DEBUG` and other env variables
--- a/package.json
+++ b/package.json
@ -11,7 +11,7 @@
 		"dev:ui": "pnpm --filter @gitbutler/ui storybook",
 		"dev:web": "turbo run --filter @gitbutler/web dev --no-daemon",
 		"dev:desktop": "pnpm tauri dev",
-		"dev:internal-tauri": "turbo run --filter @gitbutler/desktop dev --no-daemon",
+		"dev:internal-tauri": "turbo watch --filter @gitbutler/desktop dev package",
 		"test": "turbo run test --no-daemon",
 		"test:watch": "pnpm --filter @gitbutler/desktop run test:watch",
 		"build": "turbo run build --no-daemon",
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -13,13 +13,17 @@
 		"dev": "vite dev",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "pnpm check --watch",
-		"package": "svelte-kit sync && svelte-package",
-		"prepublishOnly": "npm run package",
+		"package": "svelte-kit sync && svelte-package && pnpm run pack-styles",
+		"prepublishOnly": "pnpm run package",
 		"prepare": "svelte-kit sync",
+		"pack-styles": "postcss ./src/styles/main.css -o ./dist/styles/main.css && pnpm run copy-fonts",
 		"storybook": "storybook dev --no-open -p 6006",
-		"storybook:build": "storybook build"
+		"storybook:build": "storybook build",
+		"copy-fonts": "postcss ./src/styles/fonts.css -o ./dist/fonts.css && cpy './src/styles/fonts/**/*.woff2' './dist/fonts' --parents"
 	},
 	"devDependencies": {
+		"@csstools/postcss-bundler": "^1.0.15",
+		"@csstools/postcss-minify": "^1.1.5",
 		"@storybook/addon-essentials": "^8.1.10",
 		"@storybook/addon-interactions": "^8.1.10",
 		"@storybook/addon-links": "^8.1.10",
@ -30,6 +34,14 @@
 		"@sveltejs/kit": "catalog:svelte",
 		"@sveltejs/package": "^2.3.2",
 		"@sveltejs/vite-plugin-svelte": "catalog:svelte",
+		"autoprefixer": "^10.4.19",
+		"cpy-cli": "^5.0.0",
+		"postcss": "^8.4.38",
+		"postcss-cli": "^11.0.0",
+		"postcss-minify": "^1.1.0",
+		"postcss-nesting": "^12.1.5",
+		"postcss-pxtorem": "^6.1.0",
+		"rimraf": "^6.0.1",
 		"storybook": "^8.1.10",
 		"svelte": "catalog:svelte",
 		"svelte-check": "catalog:svelte",
@ -46,12 +58,20 @@
 		"./*": {
 			"import": "./dist/*.js",
 			"types": "./dist/*.d.ts"
+		},
+		"./main.css": {
+			"import": "./dist/styles/main.css"
+		},
+		"./fonts.css": {
+			"import": "./dist/fonts.css"
 		}
 	},
 	"files": [
 		"./dist/*.svelte",
 		"./dist/*.js",
 		"./dist/*.d.ts",
-		"!./dist/*.test.*"
+		"!./dist/*.test.*",
+		"./dist/*.css",
+		"./dist/*.woff2"
 	]
 }
--- a/packages/ui/postcss.config.cjs
+++ b/packages/ui/postcss.config.cjs
@ -0,0 +1,25 @@
+const autoprefixer = require('autoprefixer');
+const pxToRem = require('postcss-pxtorem');
+const postcssNesting = require('postcss-nesting');
+const postcssBundler = require('@csstools/postcss-bundler');
+const postcssMinify = require('postcss-minify');
+
+const config = {
+	plugins: [
+		pxToRem({
+			rootValue: 16,
+			unitPrecision: 5,
+			propList: ['*'],
+			selectorBlackList: [],
+			replace: true,
+			mediaQuery: false,
+			minPixelValue: 0
+		}),
+		autoprefixer(),
+		postcssNesting(),
+		postcssBundler(),
+		postcssMinify()
+	]
+};
+
+module.exports = config;
--- a/packages/ui/src/lib/utils/tooltip.ts
+++ b/packages/ui/src/lib/utils/tooltip.ts
@ -102,8 +102,8 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 		tooltip.style.left = `${leftPos}px`;
 	}

-	node.addEventListener('pointerenter', onMouseOver);
-	node.addEventListener('pointerleave', onMouseLeave);
+	node.addEventListener('mouseover', onMouseOver);
+	node.addEventListener('mouseleave', onMouseLeave);

 	return {
 		update(opts: ToolTipOptions | string | undefined) {
@ -112,8 +112,8 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 		destroy() {
 			tooltip?.remove();
 			timeoutId && clearTimeout(timeoutId);
-			node.removeEventListener('pointerenter', onMouseOver);
-			node.removeEventListener('pointerleave', onMouseLeave);
+			node.removeEventListener('mouseover', onMouseOver);
+			node.removeEventListener('mouseleave', onMouseLeave);
 		}
 	};
 }
--- a/packages/ui/src/styles/card.css
+++ b/packages/ui/src/styles/card.css
@ -1,33 +0,0 @@
-.card {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--clr-border-2);
-	border-radius: var(--radius-m);
-	background: var(--clr-bg-1);
-}
-
-.card__header {
-	display: flex;
-	justify-content: space-between;
-	padding: 16px;
-	gap: 8px;
-	border-bottom: 1px solid var(--clr-border-2);
-}
-
-.card__title {
-	padding: 4px 6px;
-}
-
-.card__content {
-	display: flex;
-	flex-direction: column;
-	padding: 16px;
-}
-
-.card__footer {
-	display: flex;
-	gap: 6px;
-	padding: 16px;
-	justify-content: space-between;
-	border-top: 1px solid var(--clr-border-2);
-}
--- a/packages/ui/src/styles/commit-lines.css
+++ b/packages/ui/src/styles/commit-lines.css
@ -1,53 +0,0 @@
-.commit-line {
-	position: relative;
-	width: 100%;
-	height: 100%;
-
-	--border-color: var(--clr-commit-shadow);
-	--border-style: solid;
-	--border-dashed: dashed;
-
-	&.none {
-		--border-color: transparent;
-	}
-
-	&.remote {
-		--border-color: var(--clr-commit-upstream);
-	}
-
-	&.local {
-		--border-color: var(--clr-commit-local);
-	}
-
-	&.local-and-remote {
-		--border-color: var(--clr-commit-remote);
-	}
-
-	&.shadow {
-		--border-color: var(--clr-commit-shadow);
-	}
-
-	&.integrated {
-		--border-color: var(--clr-commit-shadow);
-	}
-
-	&.dashed {
-		--border-style: none;
-
-		&:before {
-			content: '';
-			position: absolute;
-			top: 0;
-			right: 0;
-			width: 2px;
-			height: calc(100% + 1px);
-			background: repeating-linear-gradient(
-				0,
-				transparent,
-				transparent 2px,
-				var(--border-color) 2px,
-				var(--border-color) 4px
-			);
-		}
-	}
-}
--- a/packages/ui/src/styles/components/commit-lines.css
+++ b/packages/ui/src/styles/components/commit-lines.css
--- a/packages/ui/src/styles/components/diff.css
+++ b/packages/ui/src/styles/components/diff.css
--- a/packages/ui/src/styles/components/draggable.css
+++ b/packages/ui/src/styles/components/draggable.css
--- a/packages/ui/src/styles/components/text-input.css
+++ b/packages/ui/src/styles/components/text-input.css
--- a/packages/ui/src/styles/components/tooltip.css
+++ b/packages/ui/src/styles/components/tooltip.css
--- a/packages/ui/src/styles/core/design-tokens.css
+++ b/packages/ui/src/styles/core/design-tokens.css
@ -249,8 +249,8 @@
 	--clr-commit-remote: var(--clr-core-ntrl-50);
 	--clr-commit-shadow: var(--clr-core-ntrl-40);
 	--clr-commit-upstream: var(--clr-core-warn-50);
-	--clr-illustration-bg: #174543;
-	--clr-illustration-fill: #adcfb1;
+	--clr-illustration-bg: #214f4d;
+	--clr-illustration-fill: #d8e3c1;
 	--clr-illustration-outline: #142222;
 	--clr-overlay-bg: #00000059;
 	--clr-scale-err-5: var(--clr-core-err-95);
--- a/packages/ui/src/styles/core/reset.css
+++ b/packages/ui/src/styles/core/reset.css
--- a/packages/ui/src/styles/core/variables.css
+++ b/packages/ui/src/styles/core/variables.css
@ -0,0 +1,18 @@
+/* CSS VARIABLES */
+:root {
+	--transition-fast: 0.06s ease-in-out;
+	--transition-medium: 0.15s ease-in-out;
+	--transition-slow: 0.2s ease-in-out;
+
+	/* Z-index */
+	--z-ground: 1;
+	--z-lifted: 2;
+	--z-floating: 3;
+	--z-modal: 4;
+	--z-tooltip: 9;
+	--z-blocker: 10;
+
+	/* TODO: add focus color */
+	--focus-color: var(--clr-scale-pop-50);
+	--resizer-color: var(--clr-scale-pop-50);
+}
--- a/packages/ui/src/styles/diff.css
+++ b/packages/ui/src/styles/diff.css
@ -1,47 +0,0 @@
-:root {
-	--hunk-line-selected-bg: #60a5fa;
-	--hunk-line-selected-border: #2563eb;
-}
-
-:root.dark {
-	--hunk-line-selected-bg: #044289;
-	--hunk-line-selected-border: #005cc5;
-}
-
-.inner-diff {
-	border-radius: 2px;
-}
-
-.diff-line-marker-addition,
-.diff-line-addition {
-	--override-addition-background-color: hsl(144deg 55% 49% / 20%);
-
-	background-color: var(--override-addition-background-color);
-}
-
-.diff-line-marker-deletion,
-.diff-line-deletion {
-	--override-deletion-background-color: rgba(220, 38, 38, 0.2);
-
-	background-color: var(--override-deletion-background-color);
-}
-
-.diff-line-addition .inner-diff {
-	--override-addition-inner-diff-background-color: hsl(144deg 55% 49% / 60%);
-
-	background-color: var(--override-addition-inner-diff-background-color);
-}
-
-.diff-line-deletion .inner-diff {
-	--override-deletion-inner-diff-background-color: rgba(220, 38, 38, 0.3);
-
-	background-color: var(--override-deletion-inner-diff-background-color);
-}
-
-.diff-line-spacer {
-	color: rgb(229, 231, 235);
-	text-align: left;
-	background-color: rgba(24, 24, 27, 1);
-	padding-left: 8px;
-	padding-right: 8px;
-}
--- a/packages/ui/src/styles/fonts.css
+++ b/packages/ui/src/styles/fonts.css
@ -1,37 +1,83 @@
@font-face {
 	font-family: 'PP Editorial New';
-	src: url('/fonts/PPEditorialNew-Regular.woff2') format('woff2');
+	src: url('fonts/pp-editorial/PPEditorialNew-Regular.woff2') format('woff2');
 }

@font-face {
-	font-family: 'Spline Sans Mono';
+	font-family: 'Geist Mono';
 	font-style: normal;
 	font-weight: 400;
 	font-display: swap;
-	src: url('/fonts/SplineSansMono-Regular.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-		U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-		U+FFFD;
+	src: url('fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
 }
-
@font-face {
-	font-family: 'Spline Sans Mono';
+	font-family: 'Geist Mono';
 	font-style: normal;
 	font-weight: 500;
 	font-display: swap;
-	src: url('/fonts/SplineSansMono-Medium.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-		U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-		U+FFFD;
+	src: url('fonts/geist-mono/GeistMono-Medium.woff2') format('woff2');
+}
+@font-face {
+	font-family: 'Geist Mono';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url('fonts/geist-mono/GeistMono-Bold.woff2') format('woff2');
 }

@font-face {
-	font-family: 'Spline Sans Mono';
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url('fonts/inter/Inter-Regular.woff2') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 400;
+	font-display: swap;
+	src: url('fonts/inter/Inter-Italic.woff2') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 500;
+	font-display: swap;
+	src: url('fonts/inter/Inter-Medium.woff2') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 500;
+	font-display: swap;
+	src: url('fonts/inter/Inter-MediumItalic.woff2') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 600;
 	font-display: swap;
-	src: url('/fonts/SplineSansMono-Semibold.woff2') format('woff2');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-		U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-		U+FFFD;
+	src: url('fonts/inter/Inter-SemiBold.woff2') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 600;
+	font-display: swap;
+	src: url('fonts/inter/Inter-SemiBoldItalic.woff2') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url('fonts/inter/Inter-Bold.woff2') format('woff2');
+}
+@font-face {
+	font-family: 'Inter';
+	font-style: italic;
+	font-weight: 700;
+	font-display: swap;
+	src: url('fonts/inter/Inter-BoldItalic.woff2') format('woff2');
 }
--- a/packages/ui/src/styles/fonts/geist-mono/GeistMono-Bold.woff2
+++ b/packages/ui/src/styles/fonts/geist-mono/GeistMono-Bold.woff2
--- a/packages/ui/src/styles/fonts/geist-mono/GeistMono-Medium.woff2
+++ b/packages/ui/src/styles/fonts/geist-mono/GeistMono-Medium.woff2
--- a/packages/ui/src/styles/fonts/geist-mono/GeistMono-Regular.woff2
+++ b/packages/ui/src/styles/fonts/geist-mono/GeistMono-Regular.woff2
--- a/packages/ui/src/styles/fonts/inter/Inter-Bold.woff2
+++ b/packages/ui/src/styles/fonts/inter/Inter-Bold.woff2
--- a/packages/ui/src/styles/fonts/inter/Inter-BoldItalic.woff2
+++ b/packages/ui/src/styles/fonts/inter/Inter-BoldItalic.woff2
--- a/packages/ui/src/styles/fonts/inter/Inter-Italic.woff2
+++ b/packages/ui/src/styles/fonts/inter/Inter-Italic.woff2
--- a/packages/ui/src/styles/fonts/inter/Inter-Medium.woff2
+++ b/packages/ui/src/styles/fonts/inter/Inter-Medium.woff2
--- a/packages/ui/src/styles/fonts/inter/Inter-MediumItalic.woff2
+++ b/packages/ui/src/styles/fonts/inter/Inter-MediumItalic.woff2
--- a/packages/ui/src/styles/fonts/inter/Inter-Regular.woff2
+++ b/packages/ui/src/styles/fonts/inter/Inter-Regular.woff2
--- a/packages/ui/src/styles/fonts/inter/Inter-SemiBold.woff2
+++ b/packages/ui/src/styles/fonts/inter/Inter-SemiBold.woff2
--- a/packages/ui/src/styles/fonts/inter/Inter-SemiBoldItalic.woff2
+++ b/packages/ui/src/styles/fonts/inter/Inter-SemiBoldItalic.woff2
--- a/packages/ui/src/styles/fonts/pp-editorial/PPEditorialNew-Regular.woff2
+++ b/packages/ui/src/styles/fonts/pp-editorial/PPEditorialNew-Regular.woff2
--- a/packages/ui/src/styles/main.css
+++ b/packages/ui/src/styles/main.css
@ -1,35 +1,25 @@
-@layer reset;
+/* BASE */
+@import './core/reset.css';
+@import './core/design-tokens.css';
+@import './core/variables.css';

-@import './reset.css';
-@import './fonts.css';
-@import './diff.css';
-@import './syntax-highlighting.css';
-@import './tokens.css';
-@import './text-classes.css';
-@import './card.css';
-@import './tooltip.css';
-@import './text-input.css';
-@import './commit-lines.css';
-@import './markdown.css';
+/* UTILITY */
+@import './utility/text.css';

-/* CSS VARIABLES */
-:root {
-	--transition-fast: 0.06s ease-in-out;
-	--transition-medium: 0.15s ease-in-out;
-	--transition-slow: 0.2s ease-in-out;
+/* SHARABLE */
+@import './sharable/card.css';
+@import './sharable/markdown.css';
+@import './sharable/syntax-highlighting.css';

-	/* Z-index */
-	--z-ground: 1;
-	--z-lifted: 2;
-	--z-floating: 3;
-	--z-modal: 4;
-	--z-tooltip: 9;
-	--z-blocker: 10;
+/* COMPONENTS */
+@import './components/diff.css';
+@import './components/tooltip.css';
+@import './components/text-input.css';
+@import './components/commit-lines.css';
+@import './components/draggable.css';

-	/* TODO: add focus color */
-	--focus-color: var(--clr-scale-pop-50);
-	--resizer-color: var(--clr-scale-pop-50);
-}
+/* LAYERS PRIORITY */
+@layer reset, sharable;

 /* scrollbar helpers */
 .hide-native-scrollbar {
@ -106,7 +96,6 @@ pre {
 	0% {
 		outline-offset: 0;
 	}
-
 	100% {
 		outline-offset: 2px;
 		outline: 1px solid var(--focus-color);
@ -115,10 +104,10 @@ pre {

 /* CODE */
 .code-string {
-	font-family: 'Spline Sans Mono', monospace;
+	font-family: var(--mono-font-family);
 	border-radius: var(--radius-s);
-	background: oklch(from var(--clr-scale-ntrl-50) l c h / 0.2);
-	padding: 2px 4px;
+	background: var(--clr-scale-ntrl-80);
+	padding: 1px 4px;
 }

 /* TRANSITION ANIMATION */
@ -132,7 +121,6 @@ pre {
 		transform: translateY(6px);
 		opacity: 0;
 	}
-
 	100% {
 		transform: translateY(0);
 		opacity: 1;
@ -149,19 +137,15 @@ pre {
 	0% {
 		transform: translateX(-3px);
 	}
-
 	25% {
 		transform: translateX(3px);
 	}
-
 	50% {
 		transform: translateX(-2px);
 	}
-
 	75% {
 		transform: translateX(2px);
 	}
-
 	100% {
 		transform: translateX(0);
 	}
@ -178,26 +162,21 @@ pre {
 		transform: translateX(-3px);
 		background-color: var(--clr-bg-1);
 	}
-
 	10% {
 		transform: translateX(3px);
 		background-color: var(--locked-color);
 	}
-
 	15% {
 		transform: translateX(-3px);
 	}
-
 	25% {
 		transform: translateX(3px);
 		background-color: var(--locked-color);
 	}
-
 	30%,
 	70% {
 		transform: translateX(0);
 	}
-
 	100% {
 		background-color: var(--clr-bg-1);
 	}
--- a/packages/ui/src/styles/sharable/card.css
+++ b/packages/ui/src/styles/sharable/card.css
@ -0,0 +1,35 @@
+@layer sharable {
+	.card {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--clr-border-2);
+		border-radius: var(--radius-m);
+		background: var(--clr-bg-1);
+	}
+
+	.card__header {
+		display: flex;
+		justify-content: space-between;
+		padding: 16px;
+		gap: 8px;
+		border-bottom: 1px solid var(--clr-border-2);
+	}
+
+	.card__title {
+		padding: 4px 6px;
+	}
+
+	.card__content {
+		display: flex;
+		flex-direction: column;
+		padding: 16px;
+	}
+
+	.card__footer {
+		display: flex;
+		gap: 6px;
+		padding: 16px;
+		justify-content: space-between;
+		border-top: 1px solid var(--clr-border-2);
+	}
+}
--- a/packages/ui/src/styles/sharable/markdown.css
+++ b/packages/ui/src/styles/sharable/markdown.css
@ -1,58 +1,61 @@
-.markdown {
-	& p:last-child,
-	& ul:last-child,
-	& ol:last-child,
-	& blockquote:last-child,
-	& pre:last-child,
-	& hr:last-child {
+@layer sharable {
+	.markdown p:last-child,
+	.markdown ul:last-child,
+	.markdown ol:last-child,
+	.markdown blockquote:last-child,
+	.markdown pre:last-child,
+	.markdown hr:last-child {
 		margin-bottom: 0;
 	}

-	h1 {
+	.markdown h1 {
 		font-size: 2em;
 		margin-bottom: 0.8em;
 	}
-	h2 {
+
+	.markdown h2 {
 		font-size: 1.5em;
 		margin-bottom: 0.8em;
 	}
-	h3 {
+
+	.markdown h3 {
 		font-size: 1.17em;
 		margin-bottom: 0.8em;
 	}
-	h4 {
+
+	.markdown h4 {
 		font-size: 1em;
 		margin-bottom: 0.8em;
 	}

-	p {
+	.markdown p {
 		margin-bottom: 1.2em;
 	}

-	ul {
+	.markdown ul {
 		display: block;
 		list-style-type: disc;
 		margin: 1em 0;
 		padding: 0 0 0 2em;
 	}

-	ol {
+	.markdown ol {
 		display: block;
 		list-style-type: decimal;
 		margin: 1em 0;
 		padding: 0 0 0 2em;
 	}

-	li {
+	.markdown li {
 		margin: 0.5em 0;
 	}

-	blockquote {
+	.markdown blockquote {
 		margin: 1em 0;
 		padding: 0 0 0 2em;
 	}

-	pre {
+	.markdown pre {
 		margin: 1em 0;
 		padding: 1em;
 		background-color: var(--clr-scale-ntrl-90);
@ -61,18 +64,18 @@
 		border-radius: var(--radius-m);
 	}

-	code {
+	.markdown code {
 		font-family: monospace;
 		background-color: var(--clr-scale-ntrl-90);
 		border: 1px solid var(--clr-scale-ntrl-70);
 		padding: 0 0.5em;
 	}

-	a {
+	.markdown a {
 		text-decoration: underline;
 	}

-	hr {
+	.markdown hr {
 		box-sizing: content-box;
 		height: 0;
 		overflow: visible;
@ -80,8 +83,8 @@
 		opacity: 0.2;
 	}

-	b,
-	strong {
+	.markdown b,
+	.markdown strong {
 		font-weight: bolder;
 	}
 }
--- a/packages/ui/src/styles/sharable/syntax-highlighting.css
+++ b/packages/ui/src/styles/sharable/syntax-highlighting.css
@ -0,0 +1,183 @@
+@layer sharable {
+	.token-variable {
+		color: #8953800;
+	}
+
+	.token-property {
+		color: #0550ae;
+	}
+
+	.token-type {
+		color: #116329;
+	}
+
+	.token-variable-special {
+		color: #953800;
+	}
+
+	.token-definition {
+		color: #953800;
+	}
+
+	.token-number {
+		color: #0550ae;
+	}
+
+	.token-string {
+		color: #0550ae;
+	}
+
+	.token-string-special {
+		color: #0a3069;
+	}
+
+	.token-keyword {
+		color: #cf222e;
+	}
+
+	.token-comment {
+		color: #6e7781;
+	}
+
+	.token-meta {
+		color: #1f2328;
+	}
+
+	.token-invalid {
+		color: #82071e;
+	}
+
+	.token-tag {
+		color: #116329;
+	}
+
+	.token-attribute {
+		color: #1f2328;
+	}
+
+	.token-attribute-value {
+		color: var(--color-token-attribute-value);
+	}
+
+	.token-inserted {
+		color: #116329;
+	}
+
+	.token-deleted {
+		color: #82071e;
+	}
+
+	.token-heading {
+		color: var(--color-token-variable-special);
+		font-weight: bold;
+	}
+
+	.token-link {
+		color: var(--color-token-variable-special);
+		text-decoration: underline;
+	}
+
+	.token-strikethrough {
+		text-decoration: strike-through;
+	}
+
+	.token-strong {
+		font-weight: bold;
+	}
+
+	.token-emphasis {
+		font-style: italic;
+	}
+
+	/* DARK */
+
+	.dark .token-variable {
+		color: #79c0ff;
+	}
+
+	.dark .token-property {
+		color: #79c0ff;
+	}
+
+	.dark .token-type {
+		color: #7ee787;
+	}
+
+	.dark .token-variable-special {
+		color: #79c0ff;
+	}
+
+	.dark .token-definition {
+		color: #ffa657;
+	}
+
+	.dark .token-number {
+		color: #a5d6ff;
+	}
+
+	.dark .token-string {
+		color: #79c0ff;
+	}
+
+	.dark .token-string-special {
+		color: #a5d6ff;
+	}
+
+	.dark .token-keyword {
+		color: #ff7b72;
+	}
+
+	.dark .token-comment {
+		color: #8b949e;
+	}
+
+	.dark .token-meta {
+		color: #ffa657;
+	}
+
+	.dark .token-invalid {
+		color: #ffa198;
+	}
+
+	.dark .token-tag {
+		color: #7ee787;
+	}
+
+	.dark .token-attribute {
+		color: #e6edf3;
+	}
+
+	.dark .token-attribute-value {
+		color: var(--color-token-attribute-value);
+	}
+
+	.dark .token-inserted {
+		color: #7ee787;
+	}
+
+	.dark .token-deleted {
+		color: #ffa198;
+	}
+
+	.dark .token-heading {
+		color: var(--color-token-variable-special);
+		font-weight: bold;
+	}
+
+	.dark .token-link {
+		color: var(--color-token-variable-special);
+		text-decoration: underline;
+	}
+
+	.dark .token-strikethrough {
+		text-decoration: strike-through;
+	}
+
+	.dark .token-strong {
+		font-weight: bold;
+	}
+
+	.dark .token-emphasis {
+		font-style: italic;
+	}
+}
--- a/packages/ui/src/styles/syntax-highlighting.css
+++ b/packages/ui/src/styles/syntax-highlighting.css
@ -1,197 +0,0 @@
-.token-variable {
-	color: #8953800;
-}
-
-.token-property {
-	color: #0550ae;
-}
-
-.token-type {
-	color: #116329;
-}
-
-.token-variable-special {
-	color: #953800;
-}
-
-.token-definition {
-	color: #953800;
-}
-
-/* .token-builtin {
-		color: #d3869b;
-} */
-
-.token-number {
-	color: #0550ae;
-}
-
-.token-string {
-	color: #0550ae;
-}
-
-.token-string-special {
-	color: #0a3069;
-}
-
-/* .token-atom {
-		color: #0a3069;
-} */
-
-.token-keyword {
-	color: #cf222e;
-}
-
-.token-comment {
-	color: #6e7781;
-}
-
-.token-meta {
-	color: #1f2328;
-}
-
-.token-invalid {
-	color: #82071e;
-}
-
-.token-tag {
-	color: #116329;
-}
-
-.token-attribute {
-	color: #1f2328;
-}
-
-.token-attribute-value {
-	color: var(--color-token-attribute-value);
-}
-
-.token-inserted {
-	color: #116329;
-}
-
-.token-deleted {
-	color: #82071e;
-}
-
-.token-heading {
-	color: var(--color-token-variable-special);
-	font-weight: bold;
-}
-
-.token-link {
-	color: var(--color-token-variable-special);
-	text-decoration: underline;
-}
-
-.token-strikethrough {
-	text-decoration: strike-through;
-}
-
-.token-strong {
-	font-weight: bold;
-}
-
-.token-emphasis {
-	font-style: italic;
-}
-
-.dark {
-	.token-variable {
-		color: #79c0ff;
-	}
-
-	.token-property {
-		color: #79c0ff;
-	}
-
-	.token-type {
-		color: #7ee787;
-	}
-
-	.token-variable-special {
-		color: #79c0ff;
-	}
-
-	.token-definition {
-		color: #ffa657;
-	}
-
-	/* .token-builtin {
-			color: #d3869b;
-    } */
-
-	.token-number {
-		color: #a5d6ff;
-	}
-
-	.token-string {
-		color: #79c0ff;
-	}
-
-	.token-string-special {
-		color: #a5d6ff;
-	}
-
-	/* .token-atom {
-			color: #0a3069;
-    } */
-
-	.token-keyword {
-		color: #ff7b72;
-	}
-
-	.token-comment {
-		color: #8b949e;
-	}
-
-	.token-meta {
-		color: #ffa657;
-	}
-
-	.token-invalid {
-		color: #ffa198;
-	}
-
-	.token-tag {
-		color: #7ee787;
-	}
-
-	.token-attribute {
-		color: #e6edf3;
-	}
-
-	.token-attribute-value {
-		color: var(--color-token-attribute-value);
-	}
-
-	.token-inserted {
-		color: #7ee787;
-	}
-
-	.token-deleted {
-		color: #ffa198;
-	}
-
-	.token-heading {
-		color: var(--color-token-variable-special);
-		font-weight: bold;
-	}
-
-	.token-link {
-		color: var(--color-token-variable-special);
-		text-decoration: underline;
-	}
-
-	.token-strikethrough {
-		text-decoration: strike-through;
-	}
-
-	.token-strong {
-		font-weight: bold;
-	}
-
-	.token-emphasis {
-		font-style: italic;
-	}
-}
--- a/packages/ui/src/styles/text-input.css
+++ b/packages/ui/src/styles/text-input.css
@ -1,32 +0,0 @@
-.text-input {
-	padding: 4px 10px;
-	color: var(--clr-scale-ntrl-0);
-	background-color: var(--clr-bg-1);
-	border: 1px solid var(--clr-border-2);
-	border-radius: var(--radius-s);
-	transition: border-color var(--transition-fast);
-
-	&::placeholder {
-		color: var(--clr-text-3);
-	}
-
-	&:hover {
-		border-color: var(--clr-border-1);
-	}
-
-	&:focus,
-	&:focus-within {
-		border-color: var(--clr-border-1);
-		outline: none;
-	}
-
-	&:invalid {
-		border-color: var(--clr-theme-err-element);
-	}
-
-	&:disabled {
-		color: var(--clr-scale-ntrl-60);
-		border-color: var(--clr-scale-ntrl-70);
-		background-color: var(--clr-bg-2);
-	}
-}
--- a/packages/ui/src/styles/tokens.css
+++ b/packages/ui/src/styles/tokens.css
@ -1,368 +0,0 @@
-/**
- * Design Tokens
- * Autogenerated from tokens.json.
- * DO NOT EDIT!
- */
-
-:root {
-	--clr-bg-1: var(--clr-core-ntrl-100);
-	--clr-bg-1-muted: var(--clr-core-ntrl-95);
-	--clr-bg-2: var(--clr-core-ntrl-90);
-	--clr-bg-2-muted: var(--clr-core-ntrl-80);
-	--clr-bg-3: var(--clr-core-ntrl-80);
-	--clr-bg-3-muted: var(--clr-core-ntrl-70);
-	--clr-border-1: var(--clr-core-ntrl-60);
-	--clr-border-2: var(--clr-core-ntrl-70);
-	--clr-border-3: var(--clr-core-ntrl-80);
-	--clr-commit-local: var(--clr-core-pop-50);
-	--clr-commit-remote: var(--clr-core-ntrl-50);
-	--clr-commit-shadow: var(--clr-core-ntrl-60);
-	--clr-commit-upstream: var(--clr-core-warn-50);
-	--clr-core-err-5: #260d0f;
-	--clr-core-err-10: #4c1a1f;
-	--clr-core-err-20: #6b242b;
-	--clr-core-err-30: #95323c;
-	--clr-core-err-40: #bd4852;
-	--clr-core-err-50: #dc606b;
-	--clr-core-err-60: #edb0ba;
-	--clr-core-err-70: #f7d9dc;
-	--clr-core-err-80: #fbe5e7;
-	--clr-core-err-90: #fdf1f4;
-	--clr-core-err-95: #fffafc;
-	--clr-core-ntrl-0: #0a0a0a;
-	--clr-core-ntrl-5: #1a1614;
-	--clr-core-ntrl-10: #272321;
-	--clr-core-ntrl-20: #302c2b;
-	--clr-core-ntrl-30: #4f4b48;
-	--clr-core-ntrl-40: #67635e;
-	--clr-core-ntrl-50: #867e79;
-	--clr-core-ntrl-60: #b4afac;
-	--clr-core-ntrl-70: #d4d0ce;
-	--clr-core-ntrl-80: #eae9e8;
-	--clr-core-ntrl-90: #f3f3f2;
-	--clr-core-ntrl-95: #f7f7f6;
-	--clr-core-ntrl-100: #ffffff;
-	--clr-core-pop-5: #0e2a29;
-	--clr-core-pop-10: #174543;
-	--clr-core-pop-20: #1c5451;
-	--clr-core-pop-30: #256f6b;
-	--clr-core-pop-40: #2a928d;
-	--clr-core-pop-50: #48a8a3;
-	--clr-core-pop-60: #97cecb;
-	--clr-core-pop-70: #c6e7e5;
-	--clr-core-pop-80: #daf1f0;
-	--clr-core-pop-90: #e9f7f6;
-	--clr-core-pop-95: #f4fbfa;
-	--clr-core-purp-5: #281d44;
-	--clr-core-purp-10: #3f2c68;
-	--clr-core-purp-20: #4b3479;
-	--clr-core-purp-30: #5e429a;
-	--clr-core-purp-40: #7657b7;
-	--clr-core-purp-50: #9978dd;
-	--clr-core-purp-60: #c2acf1;
-	--clr-core-purp-70: #dfd3f8;
-	--clr-core-purp-80: #e9e0fa;
-	--clr-core-purp-90: #f2edfc;
-	--clr-core-purp-95: #f9f6fd;
-	--clr-core-succ-5: #0d261a;
-	--clr-core-succ-10: #1c402f;
-	--clr-core-succ-20: #22533c;
-	--clr-core-succ-30: #2a7e57;
-	--clr-core-succ-40: #469b73;
-	--clr-core-succ-50: #4eb182;
-	--clr-core-succ-60: #a1ceb9;
-	--clr-core-succ-70: #cae8da;
-	--clr-core-succ-80: #d6f0e4;
-	--clr-core-succ-90: #e8f7f0;
-	--clr-core-succ-95: #f6fcfb;
-	--clr-core-warn-5: #261c0d;
-	--clr-core-warn-10: #432d0f;
-	--clr-core-warn-20: #604116;
-	--clr-core-warn-30: #8a5914;
-	--clr-core-warn-40: #c77f1a;
-	--clr-core-warn-50: #dc9b14;
-	--clr-core-warn-60: #f4bb6c;
-	--clr-core-warn-70: #feddae;
-	--clr-core-warn-80: #ffe8c7;
-	--clr-core-warn-90: #fff2e0;
-	--clr-core-warn-95: #fdf7ed;
-	--clr-illustration-bg: #d6f0ee;
-	--clr-illustration-fill: #fcfcf1;
-	--clr-illustration-outline: #475050;
-	--clr-overlay-bg: #d6d6d666;
-	--clr-scale-err-5: var(--clr-core-err-5);
-	--clr-scale-err-10: var(--clr-core-err-10);
-	--clr-scale-err-20: var(--clr-core-err-20);
-	--clr-scale-err-30: var(--clr-core-err-30);
-	--clr-scale-err-40: var(--clr-core-err-40);
-	--clr-scale-err-50: var(--clr-core-err-50);
-	--clr-scale-err-60: var(--clr-core-err-60);
-	--clr-scale-err-70: var(--clr-core-err-70);
-	--clr-scale-err-80: var(--clr-core-err-80);
-	--clr-scale-err-90: var(--clr-core-err-90);
-	--clr-scale-err-95: var(--clr-core-err-95);
-	--clr-scale-ntrl-0: var(--clr-core-ntrl-0);
-	--clr-scale-ntrl-5: var(--clr-core-ntrl-5);
-	--clr-scale-ntrl-10: var(--clr-core-ntrl-10);
-	--clr-scale-ntrl-20: var(--clr-core-ntrl-20);
-	--clr-scale-ntrl-30: var(--clr-core-ntrl-30);
-	--clr-scale-ntrl-40: var(--clr-core-ntrl-40);
-	--clr-scale-ntrl-50: var(--clr-core-ntrl-50);
-	--clr-scale-ntrl-60: var(--clr-core-ntrl-60);
-	--clr-scale-ntrl-70: var(--clr-core-ntrl-70);
-	--clr-scale-ntrl-80: var(--clr-core-ntrl-80);
-	--clr-scale-ntrl-90: var(--clr-core-ntrl-90);
-	--clr-scale-ntrl-95: var(--clr-core-ntrl-95);
-	--clr-scale-ntrl-100: var(--clr-core-ntrl-100);
-	--clr-scale-pop-5: var(--clr-core-pop-5);
-	--clr-scale-pop-10: var(--clr-core-pop-10);
-	--clr-scale-pop-20: var(--clr-core-pop-20);
-	--clr-scale-pop-30: var(--clr-core-pop-30);
-	--clr-scale-pop-40: var(--clr-core-pop-40);
-	--clr-scale-pop-50: var(--clr-core-pop-50);
-	--clr-scale-pop-60: var(--clr-core-pop-60);
-	--clr-scale-pop-70: var(--clr-core-pop-70);
-	--clr-scale-pop-80: var(--clr-core-pop-80);
-	--clr-scale-pop-90: var(--clr-core-pop-90);
-	--clr-scale-pop-95: var(--clr-core-pop-95);
-	--clr-scale-purp-5: var(--clr-core-purp-5);
-	--clr-scale-purp-10: var(--clr-core-purp-10);
-	--clr-scale-purp-20: var(--clr-core-purp-20);
-	--clr-scale-purp-30: var(--clr-core-purp-30);
-	--clr-scale-purp-40: var(--clr-core-purp-40);
-	--clr-scale-purp-50: var(--clr-core-purp-50);
-	--clr-scale-purp-60: var(--clr-core-purp-60);
-	--clr-scale-purp-70: var(--clr-core-purp-70);
-	--clr-scale-purp-80: var(--clr-core-purp-80);
-	--clr-scale-purp-90: var(--clr-core-purp-90);
-	--clr-scale-purp-95: var(--clr-core-purp-95);
-	--clr-scale-succ-5: var(--clr-core-succ-5);
-	--clr-scale-succ-10: var(--clr-core-succ-10);
-	--clr-scale-succ-20: var(--clr-core-succ-20);
-	--clr-scale-succ-30: var(--clr-core-succ-30);
-	--clr-scale-succ-40: var(--clr-core-succ-40);
-	--clr-scale-succ-50: var(--clr-core-succ-50);
-	--clr-scale-succ-60: var(--clr-core-succ-60);
-	--clr-scale-succ-70: var(--clr-core-succ-70);
-	--clr-scale-succ-80: var(--clr-core-succ-80);
-	--clr-scale-succ-90: var(--clr-core-succ-90);
-	--clr-scale-succ-95: var(--clr-core-succ-95);
-	--clr-scale-warn-5: var(--clr-core-warn-5);
-	--clr-scale-warn-10: var(--clr-core-warn-10);
-	--clr-scale-warn-20: var(--clr-core-warn-20);
-	--clr-scale-warn-30: var(--clr-core-warn-30);
-	--clr-scale-warn-40: var(--clr-core-warn-40);
-	--clr-scale-warn-50: var(--clr-core-warn-50);
-	--clr-scale-warn-60: var(--clr-core-warn-60);
-	--clr-scale-warn-70: var(--clr-core-warn-70);
-	--clr-scale-warn-80: var(--clr-core-warn-80);
-	--clr-scale-warn-90: var(--clr-core-warn-90);
-	--clr-scale-warn-95: var(--clr-core-warn-95);
-	--clr-text-1: var(--clr-core-ntrl-5);
-	--clr-text-2: var(--clr-core-ntrl-50);
-	--clr-text-3: var(--clr-core-ntrl-60);
-	--clr-theme-err-bg: var(--clr-core-err-90);
-	--clr-theme-err-element: var(--clr-core-err-50);
-	--clr-theme-err-element-hover: var(--clr-core-err-40);
-	--clr-theme-err-on-element: var(--clr-core-err-95);
-	--clr-theme-err-on-soft: var(--clr-core-err-20);
-	--clr-theme-err-soft: var(--clr-core-err-80);
-	--clr-theme-err-soft-hover: var(--clr-core-err-70);
-	--clr-theme-ntrl-element: var(--clr-core-ntrl-30);
-	--clr-theme-ntrl-element-hover: var(--clr-core-ntrl-20);
-	--clr-theme-ntrl-on-element: var(--clr-core-ntrl-100);
-	--clr-theme-ntrl-on-soft: var(--clr-scale-ntrl-0);
-	--clr-theme-ntrl-soft: var(--clr-core-ntrl-90);
-	--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-80);
-	--clr-theme-pop-bg: var(--clr-core-pop-90);
-	--clr-theme-pop-element: var(--clr-core-pop-50);
-	--clr-theme-pop-element-hover: var(--clr-core-pop-40);
-	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
-	--clr-theme-pop-on-soft: var(--clr-core-pop-20);
-	--clr-theme-pop-soft: var(--clr-core-pop-80);
-	--clr-theme-pop-soft-hover: var(--clr-core-pop-70);
-	--clr-theme-purp-bg: var(--clr-core-purp-90);
-	--clr-theme-purp-element: var(--clr-core-purp-50);
-	--clr-theme-purp-element-hover: var(--clr-core-purp-40);
-	--clr-theme-purp-on-element: var(--clr-core-purp-95);
-	--clr-theme-purp-on-soft: var(--clr-core-purp-20);
-	--clr-theme-purp-soft: var(--clr-core-purp-80);
-	--clr-theme-purp-soft-hover: var(--clr-core-purp-70);
-	--clr-theme-succ-bg: var(--clr-core-succ-90);
-	--clr-theme-succ-element: var(--clr-core-succ-50);
-	--clr-theme-succ-element-hover: var(--clr-core-succ-40);
-	--clr-theme-succ-on-element: var(--clr-core-succ-95);
-	--clr-theme-succ-on-soft: var(--clr-core-succ-20);
-	--clr-theme-succ-soft: var(--clr-core-succ-80);
-	--clr-theme-succ-soft-hover: var(--clr-core-succ-70);
-	--clr-theme-warn-bg: var(--clr-core-warn-90);
-	--clr-theme-warn-element: var(--clr-core-warn-50);
-	--clr-theme-warn-element-hover: var(--clr-core-warn-40);
-	--clr-theme-warn-on-element: var(--clr-core-warn-95);
-	--clr-theme-warn-on-soft: var(--clr-core-warn-20);
-	--clr-theme-warn-soft: var(--clr-core-warn-80);
-	--clr-theme-warn-soft-hover: var(--clr-core-warn-70);
-	--fx-shadow-l: 0 10px 40px 0 #0000001a;
-	--fx-shadow-m: 0 6px 30px 0 #00000014;
-	--fx-shadow-s: 0 4px 14px 0 #0000000f;
-	--radius-l: 0.75rem;
-	--radius-m: 0.375rem;
-	--radius-s: 0.25rem;
-	--size-2: 0.125rem;
-	--size-4: 0.25rem;
-	--size-6: 0.375rem;
-	--size-8: 0.5rem;
-	--size-10: 0.625rem;
-	--size-12: 0.75rem;
-	--size-14: 0.875rem;
-	--size-16: 1rem;
-	--size-20: 1.25rem;
-	--size-24: 1.5rem;
-	--size-26: 1.625rem;
-	--size-28: 1.75rem;
-	--size-32: 2rem;
-	--size-36: 2.25rem;
-	--size-40: 2.5rem;
-	--size-48: 3rem;
-	--size-56: 3.5rem;
-	--size-64: 4rem;
-	--size-80: 5rem;
-	--size-96: 6rem;
-	--size-button: 1.75rem;
-	--size-card-padding: 0.875rem;
-	--size-cta: 2rem;
-	--size-icon: 1rem;
-	--size-tag: 1.375rem;
-}
-
-:root.dark {
-	--clr-bg-1: var(--clr-core-ntrl-10);
-	--clr-bg-1-muted: var(--clr-core-ntrl-20);
-	--clr-bg-2: var(--clr-core-ntrl-5);
-	--clr-bg-2-muted: var(--clr-core-ntrl-10);
-	--clr-bg-3: var(--clr-core-ntrl-0);
-	--clr-bg-3-muted: var(--clr-core-ntrl-5);
-	--clr-border-1: var(--clr-core-ntrl-40);
-	--clr-border-2: var(--clr-core-ntrl-30);
-	--clr-border-3: var(--clr-core-ntrl-20);
-	--clr-commit-local: var(--clr-core-pop-50);
-	--clr-commit-remote: var(--clr-core-ntrl-50);
-	--clr-commit-shadow: var(--clr-core-ntrl-40);
-	--clr-commit-upstream: var(--clr-core-warn-50);
-	--clr-illustration-bg: #174543;
-	--clr-illustration-fill: #adcfb1;
-	--clr-illustration-outline: #142222;
-	--clr-overlay-bg: #00000059;
-	--clr-scale-err-5: var(--clr-core-err-95);
-	--clr-scale-err-10: var(--clr-core-err-90);
-	--clr-scale-err-20: var(--clr-core-err-80);
-	--clr-scale-err-30: var(--clr-core-err-70);
-	--clr-scale-err-40: var(--clr-core-err-60);
-	--clr-scale-err-50: var(--clr-core-err-50);
-	--clr-scale-err-60: var(--clr-core-err-40);
-	--clr-scale-err-70: var(--clr-core-err-30);
-	--clr-scale-err-80: var(--clr-core-err-20);
-	--clr-scale-err-90: var(--clr-core-err-10);
-	--clr-scale-err-95: var(--clr-core-err-5);
-	--clr-scale-ntrl-0: var(--clr-core-ntrl-100);
-	--clr-scale-ntrl-5: var(--clr-core-ntrl-95);
-	--clr-scale-ntrl-10: var(--clr-core-ntrl-90);
-	--clr-scale-ntrl-20: var(--clr-core-ntrl-80);
-	--clr-scale-ntrl-30: var(--clr-core-ntrl-70);
-	--clr-scale-ntrl-40: var(--clr-core-ntrl-60);
-	--clr-scale-ntrl-50: var(--clr-core-ntrl-50);
-	--clr-scale-ntrl-60: var(--clr-core-ntrl-40);
-	--clr-scale-ntrl-70: var(--clr-core-ntrl-30);
-	--clr-scale-ntrl-80: var(--clr-core-ntrl-20);
-	--clr-scale-ntrl-90: var(--clr-core-ntrl-10);
-	--clr-scale-ntrl-95: var(--clr-core-ntrl-5);
-	--clr-scale-ntrl-100: var(--clr-core-ntrl-0);
-	--clr-scale-pop-5: var(--clr-core-pop-95);
-	--clr-scale-pop-10: var(--clr-core-pop-90);
-	--clr-scale-pop-20: var(--clr-core-pop-80);
-	--clr-scale-pop-30: var(--clr-core-pop-70);
-	--clr-scale-pop-40: var(--clr-core-pop-60);
-	--clr-scale-pop-50: var(--clr-core-pop-50);
-	--clr-scale-pop-60: var(--clr-core-pop-40);
-	--clr-scale-pop-70: var(--clr-core-pop-30);
-	--clr-scale-pop-80: var(--clr-core-pop-20);
-	--clr-scale-pop-90: var(--clr-core-pop-10);
-	--clr-scale-pop-95: var(--clr-core-pop-5);
-	--clr-scale-purp-5: var(--clr-core-purp-95);
-	--clr-scale-purp-10: var(--clr-core-purp-90);
-	--clr-scale-purp-20: var(--clr-core-purp-80);
-	--clr-scale-purp-30: var(--clr-core-purp-70);
-	--clr-scale-purp-40: var(--clr-core-purp-60);
-	--clr-scale-purp-50: var(--clr-core-purp-50);
-	--clr-scale-purp-60: var(--clr-core-purp-40);
-	--clr-scale-purp-70: var(--clr-core-purp-30);
-	--clr-scale-purp-80: var(--clr-core-purp-20);
-	--clr-scale-purp-90: var(--clr-core-purp-10);
-	--clr-scale-purp-95: var(--clr-core-purp-5);
-	--clr-scale-succ-5: var(--clr-core-succ-95);
-	--clr-scale-succ-10: var(--clr-core-succ-90);
-	--clr-scale-succ-20: var(--clr-core-succ-80);
-	--clr-scale-succ-30: var(--clr-core-succ-70);
-	--clr-scale-succ-40: var(--clr-core-succ-60);
-	--clr-scale-succ-50: var(--clr-core-succ-50);
-	--clr-scale-succ-60: var(--clr-core-succ-40);
-	--clr-scale-succ-70: var(--clr-core-succ-30);
-	--clr-scale-succ-80: var(--clr-core-succ-20);
-	--clr-scale-succ-90: var(--clr-core-succ-10);
-	--clr-scale-succ-95: var(--clr-core-succ-5);
-	--clr-scale-warn-5: var(--clr-core-warn-95);
-	--clr-scale-warn-10: var(--clr-core-warn-90);
-	--clr-scale-warn-20: var(--clr-core-warn-80);
-	--clr-scale-warn-30: var(--clr-core-warn-70);
-	--clr-scale-warn-40: var(--clr-core-warn-60);
-	--clr-scale-warn-50: var(--clr-core-warn-50);
-	--clr-scale-warn-60: var(--clr-core-warn-40);
-	--clr-scale-warn-70: var(--clr-core-warn-30);
-	--clr-scale-warn-80: var(--clr-core-warn-20);
-	--clr-scale-warn-90: var(--clr-core-warn-10);
-	--clr-scale-warn-95: var(--clr-core-warn-5);
-	--clr-text-1: var(--clr-core-ntrl-95);
-	--clr-text-2: var(--clr-core-ntrl-60);
-	--clr-text-3: var(--clr-core-ntrl-40);
-	--clr-theme-err-bg: var(--clr-core-err-10);
-	--clr-theme-err-element: var(--clr-core-err-40);
-	--clr-theme-err-element-hover: var(--clr-core-err-30);
-	--clr-theme-err-on-element: var(--clr-core-err-95);
-	--clr-theme-err-on-soft: var(--clr-core-err-90);
-	--clr-theme-err-soft: var(--clr-core-err-20);
-	--clr-theme-err-soft-hover: var(--clr-core-err-30);
-	--clr-theme-ntrl-element: var(--clr-core-ntrl-80);
-	--clr-theme-ntrl-element-hover: var(--clr-core-ntrl-95);
-	--clr-theme-ntrl-on-element: var(--clr-core-ntrl-0);
-	--clr-theme-ntrl-on-soft: var(--clr-core-ntrl-90);
-	--clr-theme-ntrl-soft: var(--clr-core-ntrl-20);
-	--clr-theme-ntrl-soft-hover: var(--clr-core-ntrl-30);
-	--clr-theme-pop-bg: var(--clr-core-pop-10);
-	--clr-theme-pop-element: var(--clr-core-pop-40);
-	--clr-theme-pop-element-hover: var(--clr-core-pop-30);
-	--clr-theme-pop-on-element: var(--clr-core-ntrl-100);
-	--clr-theme-pop-on-soft: var(--clr-core-pop-90);
-	--clr-theme-pop-soft: var(--clr-core-pop-10);
-	--clr-theme-pop-soft-hover: var(--clr-core-pop-20);
-	--clr-theme-purp-bg: var(--clr-core-purp-10);
-	--clr-theme-purp-element: var(--clr-core-purp-40);
-	--clr-theme-purp-element-hover: var(--clr-core-purp-30);
-	--clr-theme-purp-on-element: var(--clr-core-purp-90);
-	--clr-theme-purp-on-soft: var(--clr-core-purp-90);
-	--clr-theme-purp-soft: var(--clr-core-purp-10);
-	--clr-theme-purp-soft-hover: var(--clr-core-purp-20);
-	--clr-theme-succ-bg: var(--clr-core-succ-10);
-	--clr-theme-succ-element: var(--clr-core-succ-40);
-	--clr-theme-succ-element-hover: var(--clr-core-succ-30);
-	--clr-theme-succ-on-element: var(--clr-core-succ-90);
-	--clr-theme-succ-on-soft: var(--clr-core-succ-90);
-	--clr-theme-succ-soft: var(--clr-core-succ-10);
-	--clr-theme-succ-soft-hover: var(--clr-core-succ-20);
-	--clr-theme-warn-bg: var(--clr-core-warn-10);
-	--clr-theme-warn-element: var(--clr-core-warn-40);
-	--clr-theme-warn-element-hover: var(--clr-core-warn-30);
-	--clr-theme-warn-on-element: var(--clr-core-warn-90);
-	--clr-theme-warn-on-soft: var(--clr-core-warn-90);
-	--clr-theme-warn-soft: var(--clr-core-warn-20);
-	--clr-theme-warn-soft-hover: var(--clr-core-warn-30);
-}
--- a/packages/ui/src/styles/tooltip.css
+++ b/packages/ui/src/styles/tooltip.css
@ -1,33 +0,0 @@
-.tooltip {
-	pointer-events: none;
-	background-color: var(--clr-core-ntrl-10);
-	border-radius: var(--radius-s);
-	border: 1px solid var(--clr-core-ntrl-30);
-	color: var(--clr-core-ntrl-60);
-	display: inline-block;
-	padding: 6px 8px;
-	z-index: var(--z-tooltip);
-
-	max-width: 180px;
-	position: absolute;
-	left: -9999px;
-	top: -9999px;
-
-	opacity: 0;
-	animation: showup-tooltip-animation 0.1s ease-out forwards;
-
-	&.no-max-width {
-		max-width: unset;
-	}
-}
-
-@keyframes showup-tooltip-animation {
-	from {
-		opacity: 0;
-		transform: translateY(-0.2rem) scale(0.9);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0) scale(1);
-	}
-}
--- a/packages/ui/src/styles/utility/text.css
+++ b/packages/ui/src/styles/utility/text.css
@ -1,4 +1,5 @@
 :root {
+	--mono-font-family: 'Geist Mono', monospace;
 	--base-font-family: 'Inter', sans-serif;
 	--serif-font-family: 'PP Editorial New', serif;
 	--base-font-weight: 500;
@ -165,12 +166,6 @@
 	line-height: var(--text-body-line-height);
 }

-.text-serif-24 {
-	font-family: var(--serif-font-family);
-	font-size: 1.5rem;
-	line-height: var(--text-body-line-height);
-}
-
 /* modifiers */

 .text-light {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -4,28 +4,6 @@ settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false

-catalogs:
-  default:
-    vite:
-      specifier: 5.2.13
-      version: 5.2.13
-  svelte:
-    '@sveltejs/adapter-static':
-      specifier: 3.0.2
-      version: 3.0.2
-    '@sveltejs/kit':
-      specifier: 2.5.18
-      version: 2.5.18
-    '@sveltejs/vite-plugin-svelte':
-      specifier: 3.1.1
-      version: 3.1.1
-    svelte:
-      specifier: 5.0.0-next.196
-      version: 5.0.0-next.196
-    svelte-check:
-      specifier: 3.8.4
-      version: 3.8.4
-
 importers:

  .:
@ -310,6 +288,12 @@ importers:

  packages/ui:
    devDependencies:
+      '@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-essentials':
        specifier: ^8.1.10
        version: 8.1.10(@types/react@18.3.3)(prettier@3.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -340,6 +324,30 @@ importers:
      '@sveltejs/vite-plugin-svelte':
        specifier: catalog:svelte
        version: 3.1.1(svelte@5.0.0-next.196)(vite@5.2.13(@types/node@20.5.9))
+      autoprefixer:
+        specifier: ^10.4.19
+        version: 10.4.19(postcss@8.4.39)
+      cpy-cli:
+        specifier: ^5.0.0
+        version: 5.0.0
+      postcss:
+        specifier: ^8.4.38
+        version: 8.4.39
+      postcss-cli:
+        specifier: ^11.0.0
+        version: 11.0.0(postcss@8.4.39)
+      postcss-minify:
+        specifier: ^1.1.0
+        version: 1.1.0(postcss@8.4.39)
+      postcss-nesting:
+        specifier: ^12.1.5
+        version: 12.1.5(postcss@8.4.39)
+      postcss-pxtorem:
+        specifier: ^6.1.0
+        version: 6.1.0(postcss@8.4.39)
+      rimraf:
+        specifier: ^6.0.1
+        version: 6.0.1
      storybook:
        specifier: ^8.1.10
        version: 8.1.10(@babel/preset-env@7.24.7(@babel/core@7.24.7))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -1060,6 +1068,34 @@ packages:
    resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
    engines: {node: '>=0.1.90'}

+  '@csstools/css-parser-algorithms@2.7.1':
+    resolution: {integrity: sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^2.4.1
+
+  '@csstools/css-tokenizer@2.4.1':
+    resolution: {integrity: sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==}
+    engines: {node: ^14 || ^16 || >=18}
+
+  '@csstools/postcss-bundler@1.0.15':
+    resolution: {integrity: sha512-cDeDnVOX+khvy0vp8zqMLW0Yja51pHBT14se4c1WI0jgLVqihBU363qK8APeHQCJqTUCln0z9MeY/6m7lWaDug==}
+    engines: {node: ^14 || ^16 || >=18}
+    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}
+    peerDependencies:
+      postcss: ^8.4
+
  '@csstools/selector-resolve-nested@1.1.0':
    resolution: {integrity: sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==}
    engines: {node: ^14 || ^16 || >=18}
@ -2685,6 +2721,10 @@ packages:
    resolution: {integrity: sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==}
    engines: {node: '>= 8.0.0'}

+  aggregate-error@4.0.1:
+    resolution: {integrity: sha512-0poP0T7el6Vq3rstR8Mn4V/IQrpBLO6POkUSrN7RhyY+GF/InCFShQzsQ39T25gkHhLgSLByyAz+Kjb+c2L98w==}
+    engines: {node: '>=12'}
+
  ajv@6.12.6:
    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}

@ -2767,6 +2807,10 @@ packages:
    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
    engines: {node: '>= 0.4'}

+  arrify@3.0.0:
+    resolution: {integrity: sha512-tLkvA81vQG/XqE2mjDkGQHoOINtMHtysSnemrmoGe6PydDPMRbVugqyk4A6V/WDWEfm3l+0d8anA9r8cv/5Jaw==}
+    engines: {node: '>=12'}
+
  assert@2.1.0:
    resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}

@ -2956,6 +3000,10 @@ packages:
  class-transformer@0.5.1:
    resolution: {integrity: sha512-SQa1Ws6hUbfC98vKGxZH3KFY0Y1lm5Zm0SY8XX9zbK7FJCyVEac3ATW0RIpwzW+oOfmHE5PMPufDG9hCfoEOMw==}

+  clean-stack@4.2.0:
+    resolution: {integrity: sha512-LYv6XPxoyODi36Dp976riBtSY27VmFo+MKqEU9QCCWyTrdEPDog+RWA7xQWHi6Vbp61j5c4cdzzX1NidnwtUWg==}
+    engines: {node: '>=12'}
+
  cli-cursor@3.1.0:
    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
    engines: {node: '>=8'}
@ -2968,6 +3016,10 @@ packages:
    resolution: {integrity: sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==}
    engines: {node: 10.* || >= 12.*}

+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
  clone-deep@4.0.1:
    resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
    engines: {node: '>=6'}
@ -3039,6 +3091,19 @@ packages:
  core-util-is@1.0.3:
    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}

+  cp-file@10.0.0:
+    resolution: {integrity: sha512-vy2Vi1r2epK5WqxOLnskeKeZkdZvTKfFZQCplE3XWsP+SUJyd5XAUFC9lFgTjjXJF2GMne/UML14iEmkAaDfFg==}
+    engines: {node: '>=14.16'}
+
+  cpy-cli@5.0.0:
+    resolution: {integrity: sha512-fb+DZYbL9KHc0BC4NYqGRrDIJZPXUmjjtqdw4XRRg8iV8dIfghUX/WiL+q4/B/KFTy3sK6jsbUhBaz0/Hxg7IQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  cpy@10.1.0:
+    resolution: {integrity: sha512-VC2Gs20JcTyeQob6UViBLnyP0bYHkBh6EiKzot9vi2DmeGlFT9Wd7VG3NBrkNx/jYvFBeyDOMMHdHQhbtKLgHQ==}
+    engines: {node: '>=16'}
+
  crelt@1.0.6:
    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}

@ -3154,6 +3219,10 @@ packages:
    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
    engines: {node: '>= 0.8'}

+  dependency-graph@0.11.0:
+    resolution: {integrity: sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==}
+    engines: {node: '>= 0.6.0'}
+
  deprecation@2.3.1:
    resolution: {integrity: sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==}

@ -3358,6 +3427,10 @@ packages:
    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
    engines: {node: '>=10'}

+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
  eslint-compat-utils@0.5.1:
    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
    engines: {node: '>=12'}
@ -3688,6 +3761,10 @@ packages:
    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
    engines: {node: '>=6.9.0'}

+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
  get-func-name@2.0.2:
    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}

@ -3706,6 +3783,10 @@ packages:
    resolution: {integrity: sha512-ro+DiMu5DXgRBabqXupW38h7WPZ9+Ad8UjwhvsmmN8w1sU7ab0nzAXvVZ4kqYg57OrqomRtJvepX5/xvFKNtjA==}
    engines: {node: '>=12.17'}

+  get-stdin@9.0.0:
+    resolution: {integrity: sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==}
+    engines: {node: '>=12'}
+
  get-stream@6.0.1:
    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
    engines: {node: '>=10'}
@ -3750,6 +3831,11 @@ packages:
    engines: {node: '>=16 || 14 >=14.18'}
    hasBin: true

+  glob@11.0.0:
+    resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
  glob@7.2.3:
    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
    deprecated: Glob versions prior to v9 are no longer supported
@ -3785,6 +3871,10 @@ packages:
    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
    engines: {node: '>=10'}

+  globby@13.2.2:
+    resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
  globby@14.0.1:
    resolution: {integrity: sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==}
    engines: {node: '>=18'}
@ -3932,6 +4022,10 @@ packages:
    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
    engines: {node: '>=8'}

+  indent-string@5.0.0:
+    resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
+    engines: {node: '>=12'}
+
  inflight@1.0.6:
    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@ -4137,6 +4231,10 @@ packages:
    resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
    engines: {node: '>=14'}

+  jackspeak@4.0.1:
+    resolution: {integrity: sha512-cub8rahkh0Q/bw1+GxP7aeSe29hHHn2V4m29nnDlvCdlgU+3UGxkZp7Z53jLUdpX3jdTO0nJZUDl3xvbWc2Xog==}
+    engines: {node: 20 || >=22}
+
  jake@10.9.1:
    resolution: {integrity: sha512-61btcOHNnLnsOdtLgA5efqQWjnSi/vow5HbI7HMdKKWqvrKR1bLK3BPlJn9gcSaP2ewuamUSMB5XEy76KUIS2w==}
    engines: {node: '>=10'}
@ -4194,6 +4292,10 @@ packages:
  jsonfile@6.1.0:
    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}

+  junk@4.0.1:
+    resolution: {integrity: sha512-Qush0uP+G8ZScpGMZvHUiRfI0YBWuB3gVBYlI0v0vvOJt5FLicco+IkP0a50LqTTQhmts/m6tP5SWE+USyIvcQ==}
+    engines: {node: '>=12.20'}
+
  keyv@4.5.4:
    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}

@ -4285,6 +4387,10 @@ packages:
    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
    engines: {node: 14 || >=16.14}

+  lru-cache@11.0.0:
+    resolution: {integrity: sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==}
+    engines: {node: 20 || >=22}
+
  lru-cache@5.1.1:
    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}

@ -4342,6 +4448,10 @@ packages:
  memoizerific@1.11.3:
    resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}

+  meow@12.1.1:
+    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
+    engines: {node: '>=16.10'}
+
  merge-descriptors@1.0.1:
    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}

@ -4385,6 +4495,10 @@ packages:
    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
    engines: {node: '>=4'}

+  minimatch@10.0.1:
+    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
+    engines: {node: 20 || >=22}
+
  minimatch@3.1.2:
    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}

@ -4477,6 +4591,9 @@ packages:
  neo-async@2.6.2:
    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}

+  nested-error-stacks@2.1.1:
+    resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==}
+
  no-case@3.0.4:
    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}

@ -4596,6 +4713,14 @@ packages:
    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
    engines: {node: '>=10'}

+  p-event@5.0.1:
+    resolution: {integrity: sha512-dd589iCQ7m1L0bmC5NLlVYfy3TbBEsMUfWx9PyAgPeIcFZ/E2yaTZ4Rz4MiBmmJShviiftHVXOqfnfzJ6kyMrQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  p-filter@3.0.0:
+    resolution: {integrity: sha512-QtoWLjXAW++uTX67HZQz1dbTpqBfiidsB6VtQUC9iR85S120+s0T5sO6s+B5MLzFcZkrEd/DGMmCjR+f2Qpxwg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
  p-limit@2.3.0:
    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
    engines: {node: '>=6'}
@ -4620,6 +4745,18 @@ packages:
    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
    engines: {node: '>=10'}

+  p-map@5.5.0:
+    resolution: {integrity: sha512-VFqfGDHlx87K66yZrNdI4YGtD70IRyd+zSvgks6mzHPRNkoKy+9EKP4SFC77/vTTQYmRmti7dvqC+m5jBrBAcg==}
+    engines: {node: '>=12'}
+
+  p-map@6.0.0:
+    resolution: {integrity: sha512-T8BatKGY+k5rU+Q/GTYgrEf2r4xRMevAN5mtXc2aPc4rS1j3s+vWTaO2Wag94neXuCAUAs8cxBL9EeB5EA6diw==}
+    engines: {node: '>=16'}
+
+  p-timeout@5.1.0:
+    resolution: {integrity: sha512-auFDyzzzGZZZdHz3BtET9VEz0SE/uMEAx7uWfGPucfzEwwe/xH0iVeZibQmANYE/hp9T2+UUZT5m+BKyrDp3Ew==}
+    engines: {node: '>=12'}
+
  p-try@2.2.0:
    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
    engines: {node: '>=6'}
@ -4678,6 +4815,10 @@ packages:
    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
    engines: {node: '>=16 || 14 >=14.18'}

+  path-scurry@2.0.0:
+    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+    engines: {node: 20 || >=22}
+
  path-to-regexp@0.1.7:
    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}

@ -4719,6 +4860,10 @@ packages:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
    engines: {node: '>=8.6'}

+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
  pify@4.0.1:
    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
    engines: {node: '>=6'}
@ -4760,6 +4905,13 @@ packages:
    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
    engines: {node: '>= 0.4'}

+  postcss-cli@11.0.0:
+    resolution: {integrity: sha512-xMITAI7M0u1yolVcXJ9XTZiO9aO49mcoKQy6pCDFdMh9kGqhzLVpWxeD/32M/QBmkhcGypZFFOLNLmIW4Pg4RA==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.0.0
+
  postcss-load-config@3.1.4:
    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
    engines: {node: '>= 10'}
@ -4787,6 +4939,11 @@ packages:
      tsx:
        optional: true

+  postcss-minify@1.1.0:
+    resolution: {integrity: sha512-9D64ueIW0DL2FdLajQTlXrnTN8Ox9NjuXqigKMmB819RhdClNPYx5Zp3i5x0ghjjy3vGrLBBYEYvJjY/1eMNbw==}
+    peerDependencies:
+      postcss: ^8.0
+
  postcss-nesting@12.1.5:
    resolution: {integrity: sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==}
    engines: {node: ^14 || ^16 || >=18}
@ -4798,6 +4955,12 @@ packages:
    peerDependencies:
      postcss: ^8.0.0

+  postcss-reporter@7.1.0:
+    resolution: {integrity: sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      postcss: ^8.1.0
+
  postcss-safe-parser@6.0.0:
    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
    engines: {node: '>=12.0'}
@ -4981,6 +5144,9 @@ packages:
    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
    engines: {node: '>=0.10.0'}

+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
  read-pkg-up@7.0.1:
    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
    engines: {node: '>=8'}
@ -5046,6 +5212,10 @@ packages:
  rehype-slug@6.0.0:
    resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}

+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
  require-in-the-middle@7.3.0:
    resolution: {integrity: sha512-nQFEv9gRw6SJAwWD2LrL0NmQvAcO7FBwJbwmr2ttPAacfy0xuiOjE5zt+zM4xDyuyvUaxBi/9gb2SoCyNEVJcw==}
    engines: {node: '>=8.6.0'}
@ -5091,6 +5261,11 @@ packages:
    deprecated: Rimraf versions prior to v4 are no longer supported
    hasBin: true

+  rimraf@6.0.1:
+    resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
  rollup@4.18.0:
    resolution: {integrity: sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==}
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@ -5201,6 +5376,10 @@ packages:
    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
    engines: {node: '>=8'}

+  slash@4.0.0:
+    resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
+    engines: {node: '>=12'}
+
  slash@5.1.0:
    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
    engines: {node: '>=14.16'}
@ -5476,6 +5655,9 @@ packages:
  text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}

+  thenby@1.3.4:
+    resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==}
+
  through2@2.0.5:
    resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}

@ -5929,6 +6111,10 @@ packages:
    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
    engines: {node: '>=0.4'}

+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
  yallist@3.1.1:
    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}

@ -5944,6 +6130,14 @@ packages:
    engines: {node: '>= 14'}
    hasBin: true

+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
  yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
@ -5955,6 +6149,28 @@ packages:
  zimmerframe@1.1.2:
    resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}

+catalogs:
+  default:
+    vite:
+      specifier: 5.2.13
+      version: 5.2.13
+  svelte:
+    '@sveltejs/adapter-static':
+      specifier: 3.0.2
+      version: 3.0.2
+    '@sveltejs/kit':
+      specifier: 2.5.18
+      version: 2.5.18
+    '@sveltejs/vite-plugin-svelte':
+      specifier: 3.1.1
+      version: 3.1.1
+    svelte:
+      specifier: 5.0.0-next.196
+      version: 5.0.0-next.196
+    svelte-check:
+      specifier: 3.8.4
+      version: 3.8.4
+
 snapshots:

  '@aashutoshrathi/word-wrap@1.2.6': {}
@ -6938,6 +7154,30 @@ snapshots:
  '@colors/colors@1.5.0':
    optional: true

+  '@csstools/css-parser-algorithms@2.7.1(@csstools/css-tokenizer@2.4.1)':
+    dependencies:
+      '@csstools/css-tokenizer': 2.4.1
+
+  '@csstools/css-tokenizer@2.4.1': {}
+
+  '@csstools/postcss-bundler@1.0.15(postcss@8.4.39)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.7.1(@csstools/css-tokenizer@2.4.1)
+      '@csstools/css-tokenizer': 2.4.1
+      '@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)
+      '@csstools/css-tokenizer': 2.4.1
+      postcss: 8.4.39
+
  '@csstools/selector-resolve-nested@1.1.0(postcss-selector-parser@6.1.0)':
    dependencies:
      postcss-selector-parser: 6.1.0
@ -9114,6 +9354,11 @@ snapshots:
    dependencies:
      humanize-ms: 1.2.1

+  aggregate-error@4.0.1:
+    dependencies:
+      clean-stack: 4.2.0
+      indent-string: 5.0.0
+
  ajv@6.12.6:
    dependencies:
      fast-deep-equal: 3.1.3
@ -9212,6 +9457,8 @@ snapshots:
      is-array-buffer: 3.0.4
      is-shared-array-buffer: 1.0.3

+  arrify@3.0.0: {}
+
  assert@2.1.0:
    dependencies:
      call-bind: 1.0.7
@ -9440,6 +9687,10 @@ snapshots:

  class-transformer@0.5.1: {}

+  clean-stack@4.2.0:
+    dependencies:
+      escape-string-regexp: 5.0.0
+
  cli-cursor@3.1.0:
    dependencies:
      restore-cursor: 3.1.0
@ -9452,6 +9703,12 @@ snapshots:
    optionalDependencies:
      '@colors/colors': 1.5.0

+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
  clone-deep@4.0.1:
    dependencies:
      is-plain-object: 2.0.4
@ -9518,6 +9775,28 @@ snapshots:

  core-util-is@1.0.3: {}

+  cp-file@10.0.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      nested-error-stacks: 2.1.1
+      p-event: 5.0.1
+
+  cpy-cli@5.0.0:
+    dependencies:
+      cpy: 10.1.0
+      meow: 12.1.1
+
+  cpy@10.1.0:
+    dependencies:
+      arrify: 3.0.0
+      cp-file: 10.0.0
+      globby: 13.2.2
+      junk: 4.0.1
+      micromatch: 4.0.5
+      nested-error-stacks: 2.1.1
+      p-filter: 3.0.0
+      p-map: 6.0.0
+
  crelt@1.0.6: {}

  cross-spawn@7.0.3:
@ -9635,6 +9914,8 @@ snapshots:

  depd@2.0.0: {}

+  dependency-graph@0.11.0: {}
+
  deprecation@2.3.1: {}

  dequal@2.0.3: {}
@ -9889,6 +10170,8 @@ snapshots:

  escape-string-regexp@4.0.0: {}

+  escape-string-regexp@5.0.0: {}
+
  eslint-compat-utils@0.5.1(eslint@9.5.0):
    dependencies:
      eslint: 9.5.0
@ -10389,6 +10672,8 @@ snapshots:

  gensync@1.0.0-beta.2: {}

+  get-caller-file@2.0.5: {}
+
  get-func-name@2.0.2: {}

  get-intrinsic@1.2.1:
@ -10410,6 +10695,8 @@ snapshots:

  get-npm-tarball-url@2.1.0: {}

+  get-stdin@9.0.0: {}
+
  get-stream@6.0.1: {}

  get-stream@8.0.1: {}
@ -10465,6 +10752,15 @@ snapshots:
      package-json-from-dist: 1.0.0
      path-scurry: 1.11.1

+  glob@11.0.0:
+    dependencies:
+      foreground-child: 3.2.1
+      jackspeak: 4.0.1
+      minimatch: 10.0.1
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 2.0.0
+
  glob@7.2.3:
    dependencies:
      fs.realpath: 1.0.0
@ -10507,6 +10803,14 @@ snapshots:
      merge2: 1.4.1
      slash: 3.0.0

+  globby@13.2.2:
+    dependencies:
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.1
+      merge2: 1.4.1
+      slash: 4.0.0
+
  globby@14.0.1:
    dependencies:
      '@sindresorhus/merge-streams': 2.3.0
@ -10671,6 +10975,8 @@ snapshots:

  indent-string@4.0.0: {}

+  indent-string@5.0.0: {}
+
  inflight@1.0.6:
    dependencies:
      once: 1.4.0
@ -10846,6 +11152,12 @@ snapshots:
    optionalDependencies:
      '@pkgjs/parseargs': 0.11.0

+  jackspeak@4.0.1:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
  jake@10.9.1:
    dependencies:
      async: 3.2.5
@ -10912,6 +11224,8 @@ snapshots:
    optionalDependencies:
      graceful-fs: 4.2.11

+  junk@4.0.1: {}
+
  keyv@4.5.4:
    dependencies:
      json-buffer: 3.0.1
@ -10989,6 +11303,8 @@ snapshots:

  lru-cache@10.2.2: {}

+  lru-cache@11.0.0: {}
+
  lru-cache@5.1.1:
    dependencies:
      yallist: 3.1.1
@ -11042,6 +11358,8 @@ snapshots:
    dependencies:
      map-or-similar: 1.5.0

+  meow@12.1.1: {}
+
  merge-descriptors@1.0.1: {}

  merge-stream@2.0.0: {}
@ -11069,6 +11387,10 @@ snapshots:

  min-indent@1.0.1: {}

+  minimatch@10.0.1:
+    dependencies:
+      brace-expansion: 2.0.1
+
  minimatch@3.1.2:
    dependencies:
      brace-expansion: 1.1.11
@ -11139,6 +11461,8 @@ snapshots:

  neo-async@2.6.2: {}

+  nested-error-stacks@2.1.1: {}
+
  no-case@3.0.4:
    dependencies:
      lower-case: 2.0.2
@ -11289,6 +11613,14 @@ snapshots:
      strip-ansi: 6.0.1
      wcwidth: 1.0.1

+  p-event@5.0.1:
+    dependencies:
+      p-timeout: 5.1.0
+
+  p-filter@3.0.0:
+    dependencies:
+      p-map: 5.5.0
+
  p-limit@2.3.0:
    dependencies:
      p-try: 2.2.0
@ -11313,6 +11645,14 @@ snapshots:
    dependencies:
      p-limit: 3.1.0

+  p-map@5.5.0:
+    dependencies:
+      aggregate-error: 4.0.1
+
+  p-map@6.0.0: {}
+
+  p-timeout@5.1.0: {}
+
  p-try@2.2.0: {}

  package-json-from-dist@1.0.0: {}
@ -11362,6 +11702,11 @@ snapshots:
      lru-cache: 10.2.2
      minipass: 7.1.2

+  path-scurry@2.0.0:
+    dependencies:
+      lru-cache: 11.0.0
+      minipass: 7.1.2
+
  path-to-regexp@0.1.7: {}

  path-type@4.0.0: {}
@ -11396,6 +11741,8 @@ snapshots:

  picomatch@2.3.1: {}

+  pify@2.3.0: {}
+
  pify@4.0.1: {}

  pirates@4.0.6: {}
@ -11432,6 +11779,25 @@ snapshots:

  possible-typed-array-names@1.0.0: {}

+  postcss-cli@11.0.0(postcss@8.4.39):
+    dependencies:
+      chokidar: 3.6.0
+      dependency-graph: 0.11.0
+      fs-extra: 11.2.0
+      get-stdin: 9.0.0
+      globby: 14.0.1
+      picocolors: 1.0.1
+      postcss: 8.4.39
+      postcss-load-config: 5.1.0(postcss@8.4.39)
+      postcss-reporter: 7.1.0(postcss@8.4.39)
+      pretty-hrtime: 1.0.3
+      read-cache: 1.0.0
+      slash: 5.1.0
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - jiti
+      - tsx
+
  postcss-load-config@3.1.4(postcss@8.4.39):
    dependencies:
      lilconfig: 2.1.0
@ -11446,6 +11812,12 @@ snapshots:
    optionalDependencies:
      postcss: 8.4.39

+  postcss-minify@1.1.0(postcss@8.4.39):
+    dependencies:
+      postcss: 8.4.39
+      postcss-selector-parser: 6.1.0
+      postcss-value-parser: 4.2.0
+
  postcss-nesting@12.1.5(postcss@8.4.39):
    dependencies:
      '@csstools/selector-resolve-nested': 1.1.0(postcss-selector-parser@6.1.0)
@ -11457,6 +11829,12 @@ snapshots:
    dependencies:
      postcss: 8.4.39

+  postcss-reporter@7.1.0(postcss@8.4.39):
+    dependencies:
+      picocolors: 1.0.1
+      postcss: 8.4.39
+      thenby: 1.3.4
+
  postcss-safe-parser@6.0.0(postcss@8.4.39):
    dependencies:
      postcss: 8.4.39
@ -11624,6 +12002,10 @@ snapshots:
    dependencies:
      loose-envify: 1.4.0

+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
  read-pkg-up@7.0.1:
    dependencies:
      find-up: 4.1.0
@ -11723,6 +12105,8 @@ snapshots:
      hast-util-to-string: 3.0.0
      unist-util-visit: 5.0.0

+  require-directory@2.1.1: {}
+
  require-in-the-middle@7.3.0:
    dependencies:
      debug: 4.3.4
@ -11764,6 +12148,11 @@ snapshots:
    dependencies:
      glob: 7.2.3

+  rimraf@6.0.1:
+    dependencies:
+      glob: 11.0.0
+      package-json-from-dist: 1.0.0
+
  rollup@4.18.0:
    dependencies:
      '@types/estree': 1.0.5
@ -11912,6 +12301,8 @@ snapshots:

  slash@3.0.0: {}

+  slash@4.0.0: {}
+
  slash@5.1.0: {}

  sorcery@0.11.0:
@ -12215,6 +12606,8 @@ snapshots:

  text-table@0.2.0: {}

+  thenby@1.3.4: {}
+
  through2@2.0.5:
    dependencies:
      readable-stream: 2.3.8
@ -12643,6 +13036,8 @@ snapshots:

  xtend@4.0.2: {}

+  y18n@5.0.8: {}
+
  yallist@3.1.1: {}

  yallist@4.0.0: {}
@ -12651,6 +13046,18 @@ snapshots:

  yaml@2.4.2: {}

+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.1.2
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
  yocto-queue@0.1.0: {}

  yocto-queue@1.0.0: {}