raft-ui 0.0.1

package/dist/index.mjs

@@ -0,0 +1,4821 @@
+import { a as useTheme, c as ThemeStateContext, i as LabelSub, l as tv, n as LabelAsterisk, o as useThemeFamily, r as LabelOptional, s as ThemeContext, t as Label } from "./label-DWq4ia5I.mjs";
+import { cn } from "./cn.mjs";
+import { Button as Button$1 } from "@base-ui/react/button";
+import { createContext, use, useCallback, useEffect, useId, useMemo, useState, useSyncExternalStore } from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { AlertTriangle, Check, CheckCircle2, ChevronDown, Info, Minus, X } from "lucide-react";
+import { Avatar as Avatar$1, ContextMenu as ContextMenu$1 } from "@base-ui/react";
+import { Menu } from "@base-ui/react/menu";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+import { Input as Input$1 } from "@base-ui/react/input";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+import { Select as Select$1 } from "@base-ui/react/select";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable";
+//#region src/components/spinner/spinner.tsx
+const SPINNER_STYLE = `
+@keyframes raft-braille-spinner {
+  0%,
+  9.99% {
+    content: "⠋";
+  }
+  10%,
+  19.99% {
+    content: "⠙";
+  }
+  20%,
+  29.99% {
+    content: "⠹";
+  }
+  30%,
+  39.99% {
+    content: "⠸";
+  }
+  40%,
+  49.99% {
+    content: "⠼";
+  }
+  50%,
+  59.99% {
+    content: "⠴";
+  }
+  60%,
+  69.99% {
+    content: "⠦";
+  }
+  70%,
+  79.99% {
+    content: "⠧";
+  }
+  80%,
+  89.99% {
+    content: "⠇";
+  }
+  90%,
+  100% {
+    content: "⠏";
+  }
+}
+
+[data-slot="spinner"] [data-spinner-glyph]::before {
+  content: "⠋";
+  animation: raft-braille-spinner 800ms steps(1, end) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-glyph]::before {
+    animation-duration: 1600ms;
+  }
+}
+
+@keyframes raft-elegant-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes raft-elegant-spinner-dash {
+  0% {
+    stroke-dasharray: 1 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+[data-slot="spinner"] [data-spinner-ring] {
+  animation: raft-elegant-spinner-spin 1600ms linear infinite;
+  transform-box: fill-box;
+  transform-origin: center;
+  will-change: transform;
+}
+
+[data-slot="spinner"] [data-spinner-arc] {
+  animation: raft-elegant-spinner-dash 1400ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  stroke-dasharray: 1 150;
+  stroke-dashoffset: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-ring] {
+    animation-duration: 2400ms;
+    will-change: auto;
+  }
+
+  [data-slot="spinner"] [data-spinner-arc] {
+    animation: none;
+    stroke-dasharray: 72 150;
+    stroke-dashoffset: -30;
+  }
+}
+`;
+const spinner = tv({
+	slots: {
+		root: ["relative inline-flex shrink-0 items-center justify-center", "leading-none text-current"],
+		glyph: "inline-block min-w-[1ch] font-mono tabular-nums",
+		ring: "block size-full shrink-0"
+	},
+	variants: {
+		theme: {
+			brutal: {},
+			elegant: {}
+		},
+		size: {
+			sm: {},
+			lg: {}
+		}
+	},
+	defaultVariants: { size: "sm" },
+	compoundVariants: [
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { root: "h-4 text-base" }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { root: "h-6 text-xl" }
+		},
+		{
+			theme: "elegant",
+			size: "sm",
+			class: { root: "size-3.5" }
+		},
+		{
+			theme: "elegant",
+			size: "lg",
+			class: { root: "size-[18px]" }
+		}
+	]
+});
+const spinnerStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-spinner",
+	precedence: "default",
+	children: SPINNER_STYLE
+});
+function Spinner({ size = "sm", className, render, ...props }) {
+	const theme = useThemeFamily();
+	const { root, glyph, ring } = spinner({
+		theme,
+		size
+	});
+	const children = theme === "elegant" ? /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsxs("svg", {
+		"data-spinner-ring": "",
+		"aria-hidden": "true",
+		className: ring(),
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: "opacity-20",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "2.5"
+		}), /* @__PURE__ */ jsx("circle", {
+			"data-spinner-arc": "",
+			className: "opacity-80",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			fill: "none",
+			pathLength: "150",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeWidth: "2.5"
+		})]
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsx("span", {
+		"data-spinner-glyph": "",
+		"aria-hidden": "true",
+		className: glyph()
+	})] });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			role: "status",
+			"aria-label": "Loading",
+			className: root({ className }),
+			children
+		}, props),
+		state: {
+			slot: "spinner",
+			size
+		}
+	});
+}
+//#endregion
+//#region src/components/button/button.tsx
+const buttonVariants = tv({
+	slots: {
+		root: [
+			"relative inline-flex shrink-0 items-center justify-center",
+			"font-heading leading-none whitespace-nowrap select-none",
+			"border-line rounded-none",
+			"shadow-sm transition-all duration-100",
+			"outline outline-[1px] outline-offset-2 outline-transparent",
+			"data-[loading=true]:cursor-wait",
+			"disabled:pointer-events-none disabled:opacity-40 data-[loading=true]:opacity-100",
+			"disabled:transform-none",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+		],
+		content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
+		loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+	},
+	variants: {
+		theme: {
+			brutal: { root: ["border-2 font-bold focus-visible:outline-transparent"] },
+			elegant: { root: [
+				"overflow-clip border-0 font-sans font-medium antialiased",
+				"focus-visible:outline-[var(--button-focus-outline,transparent)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:pointer-events-none before:absolute before:inset-0 before:z-0 before:rounded-[inherit]",
+				"active:not-aria-[haspopup]:scale-[0.985]"
+			] }
+		},
+		variant: {
+			primary: { root: ["border-line-strong bg-primary-400 text-primary-950", "hover:bg-primary-500"] },
+			default: { root: ["border-line-strong bg-layer-panel text-foreground-strong", "hover:bg-layer-panel"] },
+			information: { root: ["border-line-strong bg-info-base text-foreground-inverse", "hover:bg-info-base"] },
+			muted: { root: ["border-line-strong bg-secondary-400 text-secondary-950", "hover:border-line-strong hover:bg-secondary-400"] },
+			accent: { root: ["border-line-strong bg-accent-400 text-accent-950", "hover:bg-accent-500"] },
+			warning: { root: ["border-line-strong bg-warning-base text-foreground-inverse", "hover:bg-warning-base"] },
+			outline: { root: [
+				"border-line-strong bg-transparent text-foreground-strong",
+				"hover:bg-layer-muted",
+				"shadow-none"
+			] },
+			ghost: { root: ["border-transparent bg-transparent text-foreground shadow-none", "hover:border-line-strong hover:bg-layer-muted"] },
+			link: { root: ["border-transparent bg-transparent text-foreground-strong shadow-none underline-offset-4", "hover:underline"] },
+			"danger-secondary": { root: ["border-line-strong bg-danger-lighter text-danger-base", "hover:bg-danger-lighter"] },
+			danger: { root: ["border-line-strong bg-danger-base text-foreground-inverse", "hover:border-[oklch(0.595_0.241_26.758)] hover:bg-[oklch(0.595_0.241_26.758)]"] },
+			"danger-outline": { root: [
+				"border-line-strong bg-transparent text-danger-base",
+				"hover:bg-layer-muted",
+				"shadow-none"
+			] }
+		},
+		size: {
+			xs: { root: [
+				"gap-1 px-2 py-[5px] text-[11px]",
+				"has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5",
+				"[&_svg:not([class*='size-'])]:size-3"
+			] },
+			sm: { root: [
+				"gap-1.5 px-2.5 py-[6px] text-xs",
+				"has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2",
+				"[&_svg:not([class*='size-'])]:size-3.5"
+			] },
+			md: { root: ["gap-2 px-3 py-2 text-sm", "has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5"] },
+			lg: { root: [
+				"gap-2 px-3.5 py-2.5 text-base",
+				"has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3",
+				"[&_svg:not([class*='size-'])]:size-4"
+			] },
+			"icon-xs": { root: ["p-[5px] text-[11px]", "[&_svg:not([class*='size-'])]:size-3"] },
+			"icon-sm": { root: ["p-[6px] text-xs", "[&_svg:not([class*='size-'])]:size-3.5"] },
+			"icon-md": { root: ["p-2 text-sm", "[&_svg:not([class*='size-'])]:size-4"] },
+			"icon-lg": { root: ["p-3 text-sm", "[&_svg:not([class*='size-'])]:size-4"] }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	},
+	compoundVariants: [
+		{
+			theme: "elegant",
+			size: ["xs", "icon-xs"],
+			class: { root: "rounded-sm" }
+		},
+		{
+			theme: "elegant",
+			size: ["sm", "icon-sm"],
+			class: { root: "rounded" }
+		},
+		{
+			theme: "elegant",
+			size: ["md", "icon-md"],
+			class: { root: "rounded-md" }
+		},
+		{
+			theme: "elegant",
+			size: ["lg", "icon-lg"],
+			class: { root: "rounded-md" }
+		},
+		{
+			theme: "brutal",
+			variant: "primary",
+			class: { root: "bg-brutal-yellow text-black hover:bg-brutal-yellow" }
+		},
+		{
+			theme: "brutal",
+			variant: "default",
+			class: { root: "bg-white text-black hover:bg-white" }
+		},
+		{
+			theme: "brutal",
+			variant: "outline",
+			class: { root: "bg-white text-black shadow-sm hover:bg-white" }
+		},
+		{
+			theme: "brutal",
+			variant: "information",
+			class: { root: "bg-brutal-cyan text-black hover:bg-brutal-cyan" }
+		},
+		{
+			theme: "brutal",
+			variant: "muted",
+			class: { root: "bg-brutal-stone text-black hover:bg-brutal-stone" }
+		},
+		{
+			theme: "brutal",
+			variant: "accent",
+			class: { root: "bg-brutal-pink text-black hover:bg-brutal-pink" }
+		},
+		{
+			theme: "brutal",
+			variant: "danger",
+			class: { root: "bg-brutal-red text-black hover:bg-brutal-red" }
+		},
+		{
+			theme: "brutal",
+			variant: "warning",
+			class: { root: "bg-warning-base text-black hover:bg-warning-base" }
+		},
+		{
+			theme: "brutal",
+			size: "xs",
+			class: { root: "h-6 px-2 py-0 text-[11px]" }
+		},
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { root: "h-7 px-2.5 py-0 text-xs" }
+		},
+		{
+			theme: "brutal",
+			size: "md",
+			class: { root: "h-8 px-3 py-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { root: "h-10 px-4 py-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-xs",
+			class: { root: "size-6 p-0 text-[11px]" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-sm",
+			class: { root: "size-7 p-0 text-xs" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-md",
+			class: { root: "size-8 p-0 text-sm" }
+		},
+		{
+			theme: "brutal",
+			size: "icon-lg",
+			class: { root: "size-10 p-0 text-sm" }
+		},
+		{
+			theme: "elegant",
+			variant: "default",
+			class: { root: [
+				"bg-foreground-strong text-foreground-inverse",
+				"[--button-focus-outline:var(--foreground-strong)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--foreground-strong)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.31_0.006_285)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "primary",
+			class: { root: [
+				"bg-primary-400 text-primary-950",
+				"[--button-focus-outline:var(--primary-400)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.15),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.83)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_11%)_0%,oklab(100%_0_0_/_0%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.86_0.15_91.89)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "outline",
+			class: { root: [
+				"bg-layer-panel text-foreground-strong",
+				"[--button-focus-outline:var(--layer-panel)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0_/_0%)_30%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-layer-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "ghost",
+			class: { root: [
+				"bg-transparent text-foreground-muted shadow-none",
+				"[--button-focus-outline:var(--line-muted)]",
+				"before:bg-transparent hover:bg-line-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger-secondary",
+			class: { root: [
+				"bg-danger-lighter text-danger-base",
+				"[--button-focus-outline:var(--state-danger-lighter)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.18),0_0_0_1px_var(--state-danger-light)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_9%)_0%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-danger-light"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger",
+			class: { root: [
+				"bg-danger-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-danger-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--state-danger-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_10%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.56_0.23_26.758)]"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: "danger",
+			class: { root: [
+				"border-line-strong bg-brutal-red text-black",
+				"shadow-sm",
+				"hover:border-line-strong hover:bg-brutal-red",
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: "danger-secondary",
+			class: { root: [
+				"border-line-strong bg-danger-lighter text-[color-mix(in_oklab,var(--state-danger-base)_72%,transparent)]",
+				"shadow-sm",
+				"hover:border-line-strong hover:bg-danger-lighter",
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "danger-outline",
+			class: { root: [
+				"bg-layer-panel text-danger-base",
+				"[--button-focus-outline:var(--layer-panel)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--state-danger-light)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0_/_0%)_30%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-danger-lighter"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "accent",
+			class: { root: [
+				"bg-accent-400 text-white",
+				"[--button-focus-outline:var(--accent-400)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--accent-400)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.72_0.15_0.71)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "warning",
+			class: { root: [
+				"bg-warning-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-warning-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.14),0_0_0_1px_var(--state-warning-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_10%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.65_0.19_44.441)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "link",
+			class: { root: [
+				"bg-transparent text-foreground-muted shadow-none",
+				"[--button-focus-outline:transparent]",
+				"before:bg-transparent hover:bg-transparent hover:text-foreground-muted"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "information",
+			class: { root: [
+				"bg-info-base text-foreground-inverse",
+				"[--button-focus-outline:var(--state-info-base)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.12),0_0_0_1px_var(--state-info-base)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_8%)_0%,oklab(0%_0_0_/_0%)_100%)]",
+				"hover:bg-[oklch(0.74_0.13_219.2)]"
+			] }
+		},
+		{
+			theme: "elegant",
+			variant: "muted",
+			class: { root: [
+				"bg-layer-muted text-foreground-placeholder",
+				"[--button-focus-outline:var(--layer-muted)]",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_0_0_1px_var(--line-subtle)]",
+				"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0_/_5%)_0%,oklab(0%_0_0_/_1%)_100%)]",
+				"hover:bg-line-subtle"
+			] }
+		},
+		{
+			theme: "brutal",
+			variant: [
+				"primary",
+				"default",
+				"information",
+				"muted",
+				"accent",
+				"warning",
+				"outline"
+			],
+			class: { root: [
+				"hover:-translate-y-px hover:shadow-md",
+				"active:not-aria-[haspopup]:translate-x-px active:not-aria-[haspopup]:translate-y-px",
+				"active:shadow-xs"
+			] }
+		}
+	]
+});
+function defaultNativeButton(render) {
+	if (!render || typeof render !== "object" || !("type" in render)) return;
+	const element = render;
+	if (typeof element.type === "string") return element.type === "button";
+}
+function Button({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
+	const { root, content, loadingIndicator } = buttonVariants({
+		theme: useThemeFamily(),
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsxs(Button$1, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "button",
+		className: root({ className }),
+		"data-loading": loading ? "true" : void 0,
+		disabled: disabled || loading,
+		"aria-disabled": loading || void 0,
+		children: [loading ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-loading-indicator",
+			className: loadingIndicator(),
+			children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
+		}) : null, /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-content",
+			"data-loading": loading ? "true" : void 0,
+			className: content(),
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/components/checkbox/checkbox-indicator.tsx
+const checkboxIndicator = tv({
+	slots: { root: [
+		"inline-flex shrink-0 items-center justify-center",
+		"transition-colors",
+		"[&_svg]:shrink-0"
+	] },
+	variants: {
+		theme: {
+			brutal: { root: ["border-2 border-line-strong"] },
+			elegant: {}
+		},
+		shape: {
+			square: { root: "" },
+			circle: { root: "rounded-full" }
+		},
+		size: {
+			sm: { root: ["size-3.5", "[&_svg:not([class*='size-'])]:size-2.5 [&_svg]:[stroke-width:4]"] },
+			md: { root: ["size-4", "[&_svg:not([class*='size-'])]:size-3 [&_svg]:[stroke-width:4]"] },
+			lg: { root: ["size-5", "[&_svg:not([class*='size-'])]:size-[13px] [&_svg]:[stroke-width:3]"] }
+		},
+		fill: {
+			black: { root: "" },
+			yellow: { root: "" }
+		},
+		checked: {
+			true: { root: "" },
+			false: { root: "bg-layer-panel text-transparent" }
+		},
+		disabled: {
+			true: { root: "opacity-50" },
+			false: { root: "" }
+		},
+		previewOnHover: {
+			true: { root: "" },
+			false: { root: "" }
+		}
+	},
+	compoundVariants: [
+		{
+			checked: true,
+			fill: "black",
+			class: { root: "bg-line-strong text-foreground-inverse" }
+		},
+		{
+			checked: true,
+			fill: "yellow",
+			class: { root: "bg-primary-400 text-foreground-strong" }
+		},
+		{
+			checked: false,
+			previewOnHover: true,
+			class: { root: "group-hover:text-foreground/20" }
+		}
+	],
+	defaultVariants: {
+		shape: "square",
+		size: "sm",
+		fill: "black",
+		disabled: false,
+		previewOnHover: false
+	}
+});
+function CheckboxIndicator({ checked, mark = "check", shape, size, fill, disabled, previewOnHover, className, ...props }) {
+	const { root } = checkboxIndicator({
+		theme: useThemeFamily(),
+		shape,
+		size,
+		fill,
+		checked,
+		disabled,
+		previewOnHover
+	});
+	const Icon = mark === "minus" ? Minus : Check;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-slot": "checkbox-indicator-graphic",
+		"aria-hidden": true,
+		className: root({ className }),
+		children: (checked || previewOnHover) && /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+//#endregion
+//#region src/components/checkbox/checkbox.tsx
+const checkbox = tv({
+	slots: {
+		root: [
+			"relative inline-flex shrink-0 touch-manipulation items-center justify-center outline-none",
+			"focus-visible:ring-2 focus-visible:ring-line-focus",
+			"data-disabled:cursor-not-allowed",
+			"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']"
+		],
+		indicator: ["pointer-events-none"],
+		graphic: ["pointer-events-none"],
+		outerRect: ["transition-[fill,stroke] duration-[160ms] ease-out motion-reduce:transition-none"],
+		overlayRect: [
+			"pointer-events-none opacity-0 transition-opacity duration-[160ms] ease-out motion-reduce:transition-none",
+			"group-data-[disabled]/checkbox:opacity-0",
+			"group-hover/checkbox:group-data-[disabled]/checkbox:opacity-0 group-focus-visible/checkbox:group-data-[disabled]/checkbox:opacity-0"
+		],
+		mark: ["absolute left-1/2 top-1/2 shrink-0 origin-center -translate-x-1/2 -translate-y-1/2"],
+		checkMark: [
+			"-rotate-6 scale-[0.82] opacity-0",
+			"transition-[opacity,transform] duration-[180ms] ease-out motion-reduce:transition-none",
+			"motion-reduce:rotate-0 motion-reduce:scale-100"
+		],
+		indeterminateMark: [
+			"invisible scale-x-50 opacity-0",
+			"transition-[opacity,transform] duration-[160ms] ease-out motion-reduce:transition-none",
+			"motion-reduce:scale-x-100"
+		]
+	},
+	variants: {
+		theme: {
+			brutal: {},
+			elegant: {
+				root: [
+					"group/checkbox rounded-[3px] focus:outline-none",
+					"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_2px_2px_-1px_oklch(0_0_0_/_0.04),0_4px_4px_-2px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+					"transition-[box-shadow,transform] duration-100 ease-out motion-reduce:transition-none",
+					"active:scale-[0.96] data-[disabled]:active:scale-100 motion-reduce:active:scale-100"
+				],
+				graphic: ["absolute inset-0 size-full"]
+			}
+		},
+		variant: {
+			default: {},
+			primary: {}
+		},
+		color: {
+			default: {},
+			primary: {}
+		},
+		size: {
+			sm: { root: "size-3.5" },
+			md: { root: "size-4" }
+		}
+	},
+	compoundVariants: [
+		{
+			theme: "elegant",
+			size: "sm",
+			class: { root: "size-4" }
+		},
+		{
+			theme: "elegant",
+			size: "md",
+			class: { root: "size-[18px]" }
+		},
+		{
+			theme: "elegant",
+			variant: "default",
+			color: "default",
+			class: {
+				root: [
+					"data-[checked]:shadow-[0_2px_2px_-1px_oklch(0_0_0_/_0.04),0_4px_4px_-2px_oklch(0_0_0_/_0.02)]",
+					"data-[indeterminate]:shadow-[0_2px_2px_-1px_oklch(0_0_0_/_0.04),0_4px_4px_-2px_oklch(0_0_0_/_0.02)]",
+					"data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+					"data-[checked]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+					"data-[indeterminate]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]"
+				],
+				outerRect: [
+					"fill-layer-panel",
+					"stroke-transparent",
+					"group-hover/checkbox:fill-[oklch(0.976_0.001_286)]",
+					"group-focus-visible/checkbox:fill-foreground-strong",
+					"group-hover/checkbox:group-data-[checked]/checkbox:fill-[oklch(0.38_0.006_285)]",
+					"group-hover/checkbox:group-data-[indeterminate]/checkbox:fill-[oklch(0.38_0.006_285)]",
+					"group-focus-visible/checkbox:group-data-[checked]/checkbox:fill-foreground-strong",
+					"group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:fill-foreground-strong",
+					"group-data-[checked]/checkbox:fill-foreground-strong",
+					"group-data-[indeterminate]/checkbox:fill-foreground-strong",
+					"group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-hover/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-hover/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-focus-visible/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted"
+				],
+				mark: ["text-foreground-inverse group-data-[disabled]/checkbox:text-line"]
+			}
+		},
+		{
+			theme: "elegant",
+			variant: "primary",
+			class: {
+				root: [
+					"data-[checked]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.2),0_1px_1px_-0.5px_oklch(0.85_0.162_91.89_/_0.1),0_2px_2px_-1px_oklch(0.85_0.162_91.89_/_0.06),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.7)]",
+					"data-[indeterminate]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.2),0_1px_1px_-0.5px_oklch(0.85_0.162_91.89_/_0.1),0_2px_2px_-1px_oklch(0.85_0.162_91.89_/_0.06),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.7)]",
+					"data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+					"data-[checked]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+					"data-[indeterminate]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]"
+				],
+				outerRect: [
+					"fill-layer-panel",
+					"stroke-transparent",
+					"group-hover/checkbox:fill-[oklch(0.976_0.001_286)]",
+					"group-focus-visible/checkbox:fill-primary-400",
+					"group-hover/checkbox:group-data-[checked]/checkbox:fill-[oklch(0.86_0.15_91.89)]",
+					"group-hover/checkbox:group-data-[indeterminate]/checkbox:fill-[oklch(0.86_0.15_91.89)]",
+					"group-focus-visible/checkbox:group-data-[checked]/checkbox:fill-primary-400",
+					"group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:fill-primary-400",
+					"group-data-[checked]/checkbox:fill-primary-400",
+					"group-data-[indeterminate]/checkbox:fill-primary-400",
+					"group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-hover/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-hover/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-focus-visible/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted"
+				],
+				overlayRect: ["group-hover/checkbox:group-data-[checked]/checkbox:opacity-100 group-focus-visible/checkbox:group-data-[checked]/checkbox:opacity-100", "group-hover/checkbox:group-data-[indeterminate]/checkbox:opacity-100 group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:opacity-100"],
+				mark: ["text-primary-950 group-data-[disabled]/checkbox:text-line"]
+			}
+		},
+		{
+			theme: "elegant",
+			variant: "default",
+			color: "primary",
+			class: {
+				root: [
+					"data-[checked]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.2),0_1px_1px_-0.5px_oklch(0.85_0.162_91.89_/_0.1),0_2px_2px_-1px_oklch(0.85_0.162_91.89_/_0.06),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.7)]",
+					"data-[indeterminate]:shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.2),0_1px_1px_-0.5px_oklch(0.85_0.162_91.89_/_0.1),0_2px_2px_-1px_oklch(0.85_0.162_91.89_/_0.06),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.7)]",
+					"data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+					"data-[checked]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+					"data-[indeterminate]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]"
+				],
+				outerRect: [
+					"fill-layer-panel",
+					"stroke-transparent",
+					"group-hover/checkbox:fill-[oklch(0.976_0.001_286)]",
+					"group-focus-visible/checkbox:fill-primary-400",
+					"group-hover/checkbox:group-data-[checked]/checkbox:fill-[oklch(0.86_0.15_91.89)]",
+					"group-hover/checkbox:group-data-[indeterminate]/checkbox:fill-[oklch(0.86_0.15_91.89)]",
+					"group-focus-visible/checkbox:group-data-[checked]/checkbox:fill-primary-400",
+					"group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:fill-primary-400",
+					"group-data-[checked]/checkbox:fill-primary-400",
+					"group-data-[indeterminate]/checkbox:fill-primary-400",
+					"group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-hover/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-hover/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-focus-visible/checkbox:group-data-[checked]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted",
+					"group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:group-data-[disabled]/checkbox:fill-layer-muted"
+				],
+				overlayRect: ["group-hover/checkbox:group-data-[checked]/checkbox:opacity-100 group-focus-visible/checkbox:group-data-[checked]/checkbox:opacity-100", "group-hover/checkbox:group-data-[indeterminate]/checkbox:opacity-100 group-focus-visible/checkbox:group-data-[indeterminate]/checkbox:opacity-100"],
+				mark: ["text-primary-950 group-data-[disabled]/checkbox:text-line"]
+			}
+		}
+	],
+	defaultVariants: {
+		color: "default",
+		size: "sm",
+		variant: "default"
+	}
+});
+function CheckboxCheckIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "10",
+		height: "8",
+		viewBox: "0 0 10 8",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": true,
+		className,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M1 3.5L4 6.5L9 1.5",
+			stroke: "currentColor",
+			strokeWidth: "1",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function CheckboxIndeterminateIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "8",
+		height: "2",
+		viewBox: "0 0 8 2",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": true,
+		className,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M0 1H8",
+			stroke: "currentColor",
+			strokeWidth: "1",
+			strokeLinecap: "round"
+		})
+	});
+}
+function ElegantCheckboxGraphic({ classNames }) {
+	const gradientId = `checkbox-hover-${useId().replace(/:/g, "")}`;
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": true,
+		className: classNames.graphic,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+				id: gradientId,
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0%",
+					stopColor: "oklab(100% 0 0 / 14%)"
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "100%",
+					stopColor: "oklab(0% 0 0 / 3%)"
+				})]
+			}) }),
+			/* @__PURE__ */ jsx("rect", {
+				width: "16",
+				height: "16",
+				rx: "3",
+				className: classNames.outerRect
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				width: "16",
+				height: "16",
+				rx: "3",
+				fill: `url(#${gradientId})`,
+				className: classNames.overlayRect
+			})
+		]
+	});
+}
+function Checkbox({ size, color = "default", variant = "default", className, ...props }) {
+	const theme = useThemeFamily();
+	const { root, indicator, graphic, outerRect, overlayRect, mark, checkMark, indeterminateMark } = checkbox({
+		theme,
+		size,
+		color,
+		variant
+	});
+	if (theme === "elegant") return /* @__PURE__ */ jsxs(Checkbox$1.Root, {
+		"data-slot": "checkbox",
+		className: root({ className }),
+		...props,
+		children: [/* @__PURE__ */ jsx(ElegantCheckboxGraphic, { classNames: {
+			graphic: graphic(),
+			outerRect: outerRect(),
+			overlayRect: overlayRect()
+		} }), /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+			keepMounted: true,
+			"data-slot": "checkbox-indicator",
+			className: indicator(),
+			render: (indicatorProps, state) => /* @__PURE__ */ jsxs("span", {
+				...indicatorProps,
+				className: indicator({ className: indicatorProps.className }),
+				children: [/* @__PURE__ */ jsx(CheckboxCheckIcon, { className: mark({ className: checkMark({ className: state.checked && !state.indeterminate ? "rotate-0 scale-100 opacity-100" : "" }) }) }), /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, { className: mark({ className: indeterminateMark({ className: state.indeterminate ? "visible scale-x-100 opacity-100" : "" }) }) })]
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		"data-slot": "checkbox",
+		className: root({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+			keepMounted: true,
+			"data-slot": "checkbox-indicator",
+			className: indicator(),
+			render: (indicatorProps, state) => /* @__PURE__ */ jsx(CheckboxIndicator, {
+				...indicatorProps,
+				checked: state.checked || state.indeterminate,
+				disabled: state.disabled,
+				mark: state.indeterminate ? "minus" : "check",
+				size,
+				fill: variant === "primary" || color === "primary" ? "yellow" : "black"
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/kbd/kbd.tsx
+const kbd = tv({
+	slots: {
+		root: [
+			"pointer-events-none inline-flex w-fit shrink-0 items-center justify-center gap-1",
+			"whitespace-nowrap font-sans text-sm font-medium leading-none select-none",
+			"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3"
+		],
+		group: ["inline-flex items-center gap-1"]
+	},
+	variants: { theme: {
+		brutal: { root: ["text-[13px] text-foreground/70"] },
+		elegant: { root: ["min-w-5 rounded bg-layer-panel px-1.5 py-1 text-[10px]", "font-medium text-foreground-muted ring-1 ring-inset ring-line-muted"] }
+	} }
+});
+function Kbd({ className, ...props }) {
+	const { root } = kbd({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: root({ className }),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	const { group } = kbd({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "kbd-group",
+		className: group({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/context-menu/context-menu.tsx
+const contextMenu = tv({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-50 outline-none"],
+		content: ["max-h-[var(--available-height)] min-w-48 overflow-hidden bg-layer-panel", "outline-none"],
+		item: ["flex w-full cursor-default select-none items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1", "text-left text-sm outline-none transition-colors"],
+		radioItem: ["flex w-full cursor-default select-none items-center gap-2 px-3", "text-left outline-none transition-colors"],
+		submenuTrigger: ["flex w-full cursor-default select-none items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1", "text-left text-sm outline-none transition-colors"],
+		label: [],
+		shortcut: ["ml-auto"],
+		separator: ["border-t-2"],
+		indicator: ["pointer-events-none ml-auto flex size-3 shrink-0 items-center justify-center"]
+	},
+	variants: { theme: {
+		brutal: {
+			content: ["border-2 border-black bg-white shadow-lg"],
+			item: [
+				"py-1.5 font-sans text-sm font-semibold leading-6 text-black hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+			],
+			radioItem: [
+				"h-9 overflow-hidden font-sans text-sm font-semibold leading-6 text-black",
+				"border-b border-black/10 last:border-b-0",
+				"hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+			],
+			submenuTrigger: [
+				"py-1.5 font-sans text-sm font-semibold leading-6 text-black hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30 data-[popup-open]:bg-brutal-yellow/30",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+			],
+			label: ["border-b border-black px-3 py-2", "font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black/60"],
+			shortcut: ["font-sans text-sm font-semibold leading-6"],
+			separator: ["border-black"],
+			indicator: []
+		},
+		elegant: {
+			content: [
+				"gap-0.5 rounded-md bg-layer-popover p-1",
+				"shadow-lg outline-none",
+				"flex flex-col"
+			],
+			item: [
+				"gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+				"text-foreground-muted",
+				"transition-[background-color,color] duration-150",
+				"hover:bg-foreground/[0.04] hover:text-foreground-strong",
+				"data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+				"[&>svg:last-child]:size-3",
+				"[&>svg]:text-foreground-muted",
+				"hover:[&>svg]:text-foreground-strong",
+				"data-[highlighted]:[&>svg]:text-foreground-strong"
+			],
+			radioItem: [
+				"gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+				"text-foreground-muted",
+				"transition-[background-color,color] duration-150",
+				"hover:bg-foreground/[0.04] hover:text-foreground-strong",
+				"data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+				"[&>svg:last-child]:size-3",
+				"[&>svg]:text-foreground-muted",
+				"hover:[&>svg]:text-foreground-strong",
+				"data-[highlighted]:[&>svg]:text-foreground-strong"
+			],
+			submenuTrigger: [
+				"gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+				"text-foreground-muted",
+				"transition-[background-color,color] duration-150",
+				"hover:bg-foreground/[0.04] hover:text-foreground-strong",
+				"data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+				"data-[popup-open]:bg-foreground/[0.04] data-[popup-open]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+				"[&>svg:last-child]:size-3",
+				"[&>svg]:text-foreground-muted",
+				"hover:[&>svg]:text-foreground-strong",
+				"data-[highlighted]:[&>svg]:text-foreground-strong",
+				"data-[popup-open]:[&>svg]:text-foreground-strong"
+			],
+			label: ["-mx-1 border-b border-line-muted px-3 py-2", "text-[11px] font-medium leading-none tracking-[-0.005em] text-foreground/45"],
+			shortcut: ["text-foreground-muted"],
+			separator: ["my-1 -mx-1 h-px border-0 bg-line-muted"],
+			indicator: []
+		}
+	} }
+});
+function ContextMenu(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+function ContextMenuSubmenu(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, {
+		"data-slot": "context-menu-submenu",
+		...props
+	});
+}
+function ContextMenuTrigger({ className, ...props }) {
+	const { trigger } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+		"data-slot": "context-menu-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function ContextMenuPortal(props) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
+		"data-slot": "context-menu-portal",
+		...props
+	});
+}
+function ContextMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance = {
+	side: "none",
+	align: "none",
+	fallbackAxisSide: "none"
+}, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "right", sideOffset = 0, sticky, portalProps, className, ...props }) {
+	const { positioner, content } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
+				"data-slot": "context-menu-content",
+				className: content({ className }),
+				...props
+			})
+		})
+	});
+}
+function ContextMenuItem({ className, ...props }) {
+	const { item } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(ContextMenu$1.Item, {
+		"data-slot": "context-menu-item",
+		className: item({ className }),
+		...props
+	});
+}
+function ContextMenuSubmenuTrigger({ className, ...props }) {
+	const { submenuTrigger } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuTrigger, {
+		"data-slot": "context-menu-submenu-trigger",
+		className: submenuTrigger({ className }),
+		...props
+	});
+}
+function ContextMenuLabel({ className, ...props }) {
+	const { label } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "context-menu-label",
+		className: label({ className }),
+		...props
+	});
+}
+function ContextMenuShortcut({ className, ...props }) {
+	const { shortcut } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Kbd, {
+		"data-slot": "context-menu-shortcut",
+		className: shortcut({ className }),
+		...props
+	});
+}
+function ContextMenuSeparator({ className, ...props }) {
+	const { separator } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+		"data-slot": "context-menu-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function ContextMenuCheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		"aria-hidden": true,
+		className: "size-3 shrink-0",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M1.75391 6.41392L4.4001 9.24985L10.2467 2.98532" })
+		})
+	});
+}
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+function ContextMenuRadioItem({ className, children, ...props }) {
+	const { radioItem, indicator } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+		"data-slot": "context-menu-radio-item",
+		className: radioItem({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx(ContextMenuCheckIcon, {}) })
+		})]
+	});
+}
+function ContextMenuRadioItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, {
+		"data-slot": "context-menu-radio-item-indicator",
+		className,
+		...props
+	});
+}
+function ContextMenuCheckboxItem({ className, children, ...props }) {
+	const { item, indicator } = contextMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+		"data-slot": "context-menu-checkbox-item",
+		className: item({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(ContextMenuCheckIcon, {}) })
+		})]
+	});
+}
+function ContextMenuCheckboxItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, {
+		"data-slot": "context-menu-checkbox-item-indicator",
+		className,
+		...props
+	});
+}
+//#endregion
+//#region src/components/badge/badge.tsx
+const badge = tv({
+	slots: { root: [
+		"inline-flex h-5 w-fit shrink-0 min-w-0 max-w-full items-center gap-1 px-1.5",
+		"overflow-hidden whitespace-nowrap",
+		"text-[10px] font-bold leading-none",
+		"[&_[data-slot='spinner']]:!size-3 [&_[data-slot='spinner']]:!text-xs"
+	] },
+	variants: {
+		theme: {
+			brutal: { root: ["border border-line-strong"] },
+			elegant: { root: [
+				"gap-1.5 rounded-full border border-transparent px-2.5 py-0.5",
+				"[&:has(svg)]:px-2",
+				"[&_svg]:shrink-0 [&_svg]:translate-y-[0.5px]",
+				"text-[11px] font-medium leading-3 tracking-[0.22px]"
+			] }
+		},
+		appearance: {
+			solid: { root: "" },
+			soft: { root: "" },
+			outline: { root: "" }
+		},
+		variant: {
+			default: { root: "bg-layer-panel text-foreground-strong" },
+			primary: { root: "bg-primary-400 text-primary-950" },
+			information: { root: "bg-info-base text-foreground-inverse" },
+			muted: { root: "bg-secondary-400 text-foreground-strong" },
+			accent: { root: "bg-accent-400 text-accent-950" },
+			success: { root: "bg-success-base text-success-dark" },
+			warning: { root: "bg-warning-base text-foreground-inverse" },
+			danger: { root: "bg-[oklch(0.66_0.19_31)] text-foreground-strong" }
+		},
+		uppercase: {
+			true: { root: "uppercase tracking-wide" },
+			false: { root: "" }
+		}
+	},
+	defaultVariants: {
+		appearance: "solid",
+		variant: "default",
+		uppercase: false
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			appearance: "solid",
+			variant: "success",
+			class: { root: "bg-brutal-lime text-black" }
+		},
+		{
+			theme: "brutal",
+			appearance: "solid",
+			variant: "danger",
+			class: { root: "bg-brutal-red text-black" }
+		},
+		{
+			theme: "brutal",
+			appearance: "solid",
+			variant: "information",
+			class: { root: "bg-info-base text-info-dark" }
+		},
+		{
+			theme: "brutal",
+			appearance: "solid",
+			variant: "warning",
+			class: { root: "bg-warning-base text-black" }
+		},
+		{
+			theme: "brutal",
+			appearance: "soft",
+			variant: "default",
+			class: { root: "bg-layer-muted text-foreground-strong" }
+		},
+		{
+			theme: "brutal",
+			appearance: "soft",
+			variant: "muted",
+			class: { root: "bg-secondary-100 text-secondary-900" }
+		},
+		{
+			theme: "brutal",
+			appearance: "soft",
+			variant: "primary",
+			class: { root: "bg-[oklch(0.958_0.047_86)] text-primary-950" }
+		},
+		{
+			theme: "brutal",
+			appearance: "soft",
+			variant: "information",
+			class: { root: "bg-info-lighter text-info-dark" }
+		},
+		{
+			theme: "brutal",
+			appearance: "soft",
+			variant: "accent",
+			class: { root: "bg-accent-100 text-accent-950" }
+		},
+		{
+			theme: "brutal",
+			appearance: "soft",
+			variant: "success",
+			class: { root: "bg-success-lighter text-success-dark" }
+		},
+		{
+			theme: "brutal",
+			appearance: "soft",
+			variant: "warning",
+			class: { root: "bg-warning-lighter text-warning-dark" }
+		},
+		{
+			theme: "brutal",
+			appearance: "soft",
+			variant: "danger",
+			class: { root: "bg-danger-lighter text-danger-dark" }
+		},
+		{
+			theme: "brutal",
+			appearance: "outline",
+			variant: "default",
+			class: { root: "bg-transparent text-foreground-strong" }
+		},
+		{
+			theme: "brutal",
+			appearance: "outline",
+			variant: "muted",
+			class: { root: "bg-transparent text-secondary-900" }
+		},
+		{
+			theme: "brutal",
+			appearance: "outline",
+			variant: "primary",
+			class: { root: "bg-transparent text-primary-700" }
+		},
+		{
+			theme: "brutal",
+			appearance: "outline",
+			variant: "information",
+			class: { root: "bg-transparent text-info-dark" }
+		},
+		{
+			theme: "brutal",
+			appearance: "outline",
+			variant: "accent",
+			class: { root: "bg-transparent text-accent-700" }
+		},
+		{
+			theme: "brutal",
+			appearance: "outline",
+			variant: "success",
+			class: { root: "bg-transparent text-[oklch(0.48_0.12_153.079)]" }
+		},
+		{
+			theme: "brutal",
+			appearance: "outline",
+			variant: "warning",
+			class: { root: "bg-transparent text-warning-dark" }
+		},
+		{
+			theme: "brutal",
+			appearance: "outline",
+			variant: "danger",
+			class: { root: "bg-transparent text-[oklch(0.54_0.19_31)]" }
+		},
+		{
+			theme: "elegant",
+			appearance: "solid",
+			variant: "default",
+			class: { root: "bg-line-muted text-foreground-muted" }
+		},
+		{
+			theme: "elegant",
+			appearance: "solid",
+			variant: "muted",
+			class: { root: "bg-[oklch(0.46_0.004_286)] text-[oklch(0.94_0.001_286)]" }
+		},
+		{
+			theme: "elegant",
+			appearance: "solid",
+			variant: "primary",
+			class: { root: "bg-primary-400 text-primary-950" }
+		},
+		{
+			theme: "elegant",
+			appearance: "solid",
+			variant: "information",
+			class: { root: "bg-info-base text-foreground-inverse" }
+		},
+		{
+			theme: "elegant",
+			appearance: "solid",
+			variant: "accent",
+			class: { root: "bg-accent-400 text-foreground-inverse" }
+		},
+		{
+			theme: "elegant",
+			appearance: "solid",
+			variant: "success",
+			class: { root: "bg-success-base text-foreground-inverse" }
+		},
+		{
+			theme: "elegant",
+			appearance: "solid",
+			variant: "warning",
+			class: { root: "bg-warning-base text-foreground-inverse" }
+		},
+		{
+			theme: "elegant",
+			appearance: "solid",
+			variant: "danger",
+			class: { root: "bg-[oklch(0.68_0.22_26.758)] text-foreground-inverse" }
+		},
+		{
+			theme: "elegant",
+			appearance: "soft",
+			variant: "default",
+			class: { root: "border-transparent bg-layer-muted text-foreground-strong" }
+		},
+		{
+			theme: "elegant",
+			appearance: "soft",
+			variant: "muted",
+			class: { root: "border-transparent bg-secondary-100 text-secondary-900" }
+		},
+		{
+			theme: "elegant",
+			appearance: "soft",
+			variant: "primary",
+			class: { root: "border-transparent bg-[oklch(0.958_0.047_86)] text-primary-950" }
+		},
+		{
+			theme: "elegant",
+			appearance: "soft",
+			variant: "information",
+			class: { root: "border-transparent bg-info-lighter text-info-dark" }
+		},
+		{
+			theme: "elegant",
+			appearance: "soft",
+			variant: "accent",
+			class: { root: "border-transparent bg-accent-100 text-accent-950" }
+		},
+		{
+			theme: "elegant",
+			appearance: "soft",
+			variant: "success",
+			class: { root: "border-transparent bg-success-lighter text-success-dark" }
+		},
+		{
+			theme: "elegant",
+			appearance: "soft",
+			variant: "warning",
+			class: { root: "border-transparent bg-warning-lighter text-warning-dark" }
+		},
+		{
+			theme: "elegant",
+			appearance: "soft",
+			variant: "danger",
+			class: { root: "border-transparent bg-danger-lighter text-danger-dark" }
+		},
+		{
+			theme: "elegant",
+			appearance: "outline",
+			variant: "default",
+			class: { root: "border-line-subtle bg-transparent text-foreground-strong" }
+		},
+		{
+			theme: "elegant",
+			appearance: "outline",
+			variant: "muted",
+			class: { root: "border-secondary-500 bg-transparent text-secondary-900" }
+		},
+		{
+			theme: "elegant",
+			appearance: "outline",
+			variant: "primary",
+			class: { root: "border-primary-500 bg-transparent text-primary-800" }
+		},
+		{
+			theme: "elegant",
+			appearance: "outline",
+			variant: "information",
+			class: { root: "border-info-base bg-transparent text-[oklch(0.48_0.09_219.2)]" }
+		},
+		{
+			theme: "elegant",
+			appearance: "outline",
+			variant: "accent",
+			class: { root: "border-accent-500 bg-transparent text-accent-800" }
+		},
+		{
+			theme: "elegant",
+			appearance: "outline",
+			variant: "success",
+			class: { root: "border-success-base bg-transparent text-success-dark" }
+		},
+		{
+			theme: "elegant",
+			appearance: "outline",
+			variant: "warning",
+			class: { root: "border-warning-base bg-transparent text-warning-dark" }
+		},
+		{
+			theme: "elegant",
+			appearance: "outline",
+			variant: "danger",
+			class: { root: "border-danger-base bg-transparent text-danger-dark" }
+		}
+	]
+});
+function BadgeRoot({ appearance, variant, uppercase, className, render, ...props }) {
+	const theme = useThemeFamily();
+	const resolvedAppearance = appearance ?? "solid";
+	const resolvedUppercase = uppercase ?? false;
+	const { root } = badge({
+		theme,
+		appearance: resolvedAppearance,
+		variant,
+		uppercase: resolvedUppercase
+	});
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: {
+			slot: "badge",
+			appearance: resolvedAppearance,
+			variant,
+			uppercase: resolvedUppercase
+		}
+	});
+}
+function Experimental(props) {
+	return /* @__PURE__ */ jsx(BadgeRoot, {
+		variant: "success",
+		uppercase: true,
+		...props,
+		children: "Experimental"
+	});
+}
+const Badge = Object.assign(BadgeRoot, { Experimental });
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.tsx
+const dropdownMenu = tv({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-50 outline-none"],
+		content: ["max-h-[var(--available-height)] min-w-48 overflow-hidden bg-layer-panel", "outline-none"],
+		item: ["flex w-full cursor-default select-none items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1", "text-left text-sm outline-none transition-colors"],
+		radioItem: ["flex w-full cursor-default select-none items-center gap-2 px-3", "text-left outline-none transition-colors"],
+		submenuTrigger: ["flex w-full cursor-default select-none items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1", "text-left text-sm outline-none transition-colors"],
+		label: [],
+		shortcut: ["ml-auto"],
+		itemCount: ["ml-auto tabular-nums"],
+		separator: ["border-t-2"],
+		indicator: ["pointer-events-none ml-auto flex size-3 shrink-0 items-center justify-center"]
+	},
+	variants: { theme: {
+		brutal: {
+			trigger: ["data-[popup-open]:translate-x-0 data-[popup-open]:translate-y-0", "data-[popup-open]:hover:translate-x-0 data-[popup-open]:hover:translate-y-0"],
+			content: ["border-2 border-black bg-white shadow-lg"],
+			item: [
+				"py-1.5 font-sans text-sm font-semibold leading-6 text-black hover:bg-brutal-yellow data-[highlighted]:bg-brutal-yellow",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+			],
+			radioItem: [
+				"h-9 overflow-hidden font-sans text-sm font-semibold leading-6 text-black",
+				"border-b border-black/10 last:border-b-0",
+				"hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+			],
+			submenuTrigger: [
+				"py-1.5 font-sans text-sm font-semibold leading-6 text-black hover:bg-brutal-yellow data-[highlighted]:bg-brutal-yellow data-[popup-open]:bg-brutal-yellow",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5"
+			],
+			label: ["border-b border-black px-3 py-2", "font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black/60"],
+			shortcut: ["font-sans text-sm font-semibold leading-6"],
+			itemCount: ["rounded border border-black bg-brutal-pink px-1.5 py-0.5", "font-sans text-[10px] leading-none font-bold text-white"],
+			separator: ["border-black"],
+			indicator: []
+		},
+		elegant: {
+			content: [
+				"gap-0.5 rounded-md bg-layer-popover p-1",
+				"shadow-lg outline-none",
+				"flex flex-col"
+			],
+			item: [
+				"gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+				"text-foreground-muted",
+				"transition-[background-color,color] duration-150",
+				"hover:bg-foreground/[0.04] hover:text-foreground-strong",
+				"data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+				"[&>svg:last-child]:size-3",
+				"[&>svg]:text-foreground-muted",
+				"hover:[&>svg]:text-foreground-strong",
+				"data-[highlighted]:[&>svg]:text-foreground-strong"
+			],
+			radioItem: [
+				"gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+				"text-foreground-muted",
+				"transition-[background-color,color] duration-150",
+				"hover:bg-foreground/[0.04] hover:text-foreground-strong",
+				"data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+				"[&>svg:last-child]:size-3",
+				"[&>svg]:text-foreground-muted",
+				"hover:[&>svg]:text-foreground-strong",
+				"data-[highlighted]:[&>svg]:text-foreground-strong"
+			],
+			submenuTrigger: [
+				"gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+				"text-foreground-muted",
+				"transition-[background-color,color] duration-150",
+				"hover:bg-foreground/[0.04] hover:text-foreground-strong",
+				"data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+				"data-[popup-open]:bg-foreground/[0.04] data-[popup-open]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+				"[&>svg:last-child]:size-3",
+				"[&>svg]:text-foreground-muted",
+				"hover:[&>svg]:text-foreground-strong",
+				"data-[highlighted]:[&>svg]:text-foreground-strong",
+				"data-[popup-open]:[&>svg]:text-foreground-strong"
+			],
+			label: ["-mx-1 border-b border-line-muted px-3 py-2", "text-[11px] font-medium leading-none tracking-[-0.005em] text-foreground/45"],
+			shortcut: ["text-foreground-muted"],
+			itemCount: [],
+			separator: ["my-1 -mx-1 h-px border-0 bg-line-muted"],
+			indicator: []
+		}
+	} }
+});
+function DropdownMenu(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuSubmenu(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-submenu",
+		...props
+	});
+}
+function DropdownMenuTrigger({ className, ...props }) {
+	const { trigger } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function DropdownMenuPortal(props) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuPopup({ className, ...props }) {
+	const { content } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-content",
+		className: content({ className }),
+		...props
+	});
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, portalProps, className, ...props }) {
+	const { positioner, content } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				"data-slot": "dropdown-menu-content",
+				className: content({ className }),
+				...props
+			})
+		})
+	});
+}
+function DropdownMenuItem({ className, ...props }) {
+	const { item } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		className: item({ className }),
+		...props
+	});
+}
+function DropdownMenuSubmenuTrigger({ className, ...props }) {
+	const { submenuTrigger } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-submenu-trigger",
+		className: submenuTrigger({ className }),
+		...props
+	});
+}
+function DropdownMenuLabel({ className, ...props }) {
+	const { label } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-label",
+		className: label({ className }),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	const { shortcut } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Kbd, {
+		"data-slot": "dropdown-menu-shortcut",
+		className: shortcut({ className }),
+		...props
+	});
+}
+function DropdownMenuItemCount({ className, ...props }) {
+	const { itemCount } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-slot": "dropdown-menu-item-count",
+		className: itemCount({ className }),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	const { separator } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function DropdownMenuCheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		"aria-hidden": true,
+		className: "size-3 shrink-0",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M1.75391 6.41392L4.4001 9.24985L10.2467 2.98532" })
+		})
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	const { radioItem, indicator } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: radioItem({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
+		})]
+	});
+}
+function DropdownMenuRadioItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		"data-slot": "dropdown-menu-radio-item-indicator",
+		className,
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	const { item, indicator } = dropdownMenu({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: item({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
+		})]
+	});
+}
+function DropdownMenuCheckboxItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		"data-slot": "dropdown-menu-checkbox-item-indicator",
+		className,
+		...props
+	});
+}
+//#endregion
+//#region src/components/tooltip/tooltip.tsx
+const tooltip = tv({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-50 outline-none"],
+		content: [
+			"relative inline-flex max-w-xs items-center gap-1.5 px-2.5 py-1.5",
+			"text-xs leading-4 whitespace-normal",
+			"origin-[var(--transform-origin)] outline-none",
+			"transition-[opacity,transform] duration-100",
+			"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+			"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+			"data-[instant]:transition-none",
+			"[&>svg]:size-3.5 [&>svg]:shrink-0",
+			"has-[[data-slot=kbd]]:py-1.5 has-[[data-slot=kbd]]:pr-1.5",
+			"[&_[data-slot=kbd]]:relative [&_[data-slot=kbd]]:z-10",
+			"[&_[data-slot=kbd]]:h-4 [&_[data-slot=kbd]]:min-w-4 [&_[data-slot=kbd]]:px-1 [&_[data-slot=kbd]]:py-0",
+			"[&_[data-slot=kbd]]:text-[10px] [&_[data-slot=kbd]]:font-semibold [&_[data-slot=kbd]]:leading-none"
+		],
+		arrow: [
+			"pointer-events-none flex",
+			"data-[side=top]:bottom-[-6px]",
+			"data-[side=bottom]:top-[-6px] data-[side=bottom]:rotate-180",
+			"data-[side=left]:right-[-8px] data-[side=left]:-rotate-90",
+			"data-[side=right]:left-[-8px] data-[side=right]:rotate-90",
+			"data-[side=inline-start]:right-[-8px] data-[side=inline-start]:-rotate-90",
+			"data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90"
+		]
+	},
+	variants: { theme: {
+		brutal: {
+			content: [
+				"border-2 border-black bg-white",
+				"font-sans font-bold text-black",
+				"shadow-none",
+				"[&_[data-slot=kbd]]:text-black/60"
+			],
+			arrow: ["hidden"]
+		},
+		elegant: {
+			content: [
+				"rounded-md bg-layer-popover",
+				"font-sans text-xs font-medium tracking-[-0.005em] text-foreground-strong",
+				"shadow-[0_0_0_1px_oklch(0.21_0.006_285_/_0.10),0_1px_1px_oklch(0.21_0.006_285_/_0.04),0_1px_4px_-3px_oklch(0.21_0.006_285_/_0.10)]",
+				"[&_[data-slot=kbd]]:bg-foreground-muted/10 [&_[data-slot=kbd]]:text-foreground-muted [&_[data-slot=kbd]]:ring-0"
+			],
+			arrow: []
+		}
+	} }
+});
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		delay,
+		...props
+	});
+}
+function Tooltip(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props });
+}
+function TooltipTrigger({ className, ...props }) {
+	const { trigger } = tooltip({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		"data-slot": "tooltip-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function TooltipPortal(props) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
+		"data-slot": "tooltip-portal",
+		...props
+	});
+}
+function TooltipArrow({ className, ...props }) {
+	const { arrow } = tooltip({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
+		"data-slot": "tooltip-arrow",
+		className: arrow({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
+	});
+}
+function TooltipArrowSvg(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "12",
+		height: "6",
+		viewBox: "0 0 12 6",
+		fill: "none",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M1 0H11L6 5.25Z",
+			className: "fill-layer-popover"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M1 0.5L6 5.25L11 0.5",
+			className: "stroke-[oklch(0.21_0.006_285_/_0.10)]",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			vectorEffect: "non-scaling-stroke"
+		})]
+	});
+}
+function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "top", sideOffset = 6, sticky, portalProps, className, children, ...props }) {
+	const { positioner, content } = tooltip({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
+				"data-slot": "tooltip-content",
+				className: content({ className }),
+				...props,
+				children: [children, /* @__PURE__ */ jsx(TooltipArrow, {})]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/popover/popover.tsx
+const popover = tv({
+	slots: {
+		trigger: ["select-none"],
+		positioner: ["isolate z-50 outline-none"],
+		content: ["max-h-[var(--available-height)] min-w-[220px] overflow-hidden bg-layer-panel", "outline-none"],
+		header: ["flex items-center justify-between px-3 py-2"],
+		separator: ["border-t"],
+		title: ["m-0 text-[10px] font-bold leading-none"],
+		description: ["m-0 text-xs leading-5"],
+		close: [
+			"inline-flex items-center justify-center",
+			"text-[10px] font-bold",
+			"outline-none transition-colors"
+		],
+		arrow: ["size-2 rotate-45"],
+		backdrop: ["fixed inset-0"],
+		viewport: ["block"]
+	},
+	variants: { theme: {
+		brutal: {
+			content: ["border-2 border-black bg-white shadow-lg"],
+			separator: ["border-black"],
+			title: ["font-sans uppercase tracking-wide text-black/60"],
+			description: ["font-sans text-black"],
+			close: ["font-sans uppercase tracking-wide text-black/60 hover:text-black"],
+			arrow: ["border-l-2 border-t-2 border-black bg-white"],
+			backdrop: ["bg-transparent"]
+		},
+		elegant: {
+			content: ["rounded-md bg-layer-popover", "shadow-xl"],
+			separator: ["border-line-muted"],
+			title: ["text-[11px] font-medium tracking-[-0.005em] text-foreground/45"],
+			description: ["text-xs leading-5 text-foreground-muted"],
+			close: ["text-[11px] font-medium tracking-[-0.005em]", "text-foreground-muted transition-colors duration-150 hover:text-foreground-strong"],
+			arrow: ["border-l border-t border-line-muted bg-layer-popover"],
+			backdrop: ["bg-black/20"]
+		}
+	} }
+});
+function Popover(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
+		"data-slot": "popover",
+		...props
+	});
+}
+function PopoverTrigger({ className, ...props }) {
+	const { trigger } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		"data-slot": "popover-trigger",
+		className: trigger({ className }),
+		...props
+	});
+}
+function PopoverPortal(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Portal, {
+		"data-slot": "popover-portal",
+		...props
+	});
+}
+function PopoverPopup({ className, ...props }) {
+	const { content } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-content",
+		className: content({ className }),
+		...props
+	});
+}
+function PopoverContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, portalProps, className, ...props }) {
+	const { positioner, content } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Popover$1.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+				"data-slot": "popover-content",
+				className: content({ className }),
+				...props
+			})
+		})
+	});
+}
+function PopoverViewport({ className, ...props }) {
+	const { viewport } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Popover$1.Viewport, {
+		"data-slot": "popover-viewport",
+		className: viewport({ className }),
+		...props
+	});
+}
+function PopoverHeader({ className, ...props }) {
+	const { header } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: header({ className }),
+		...props
+	});
+}
+function PopoverSeparator({ className, ...props }) {
+	const { separator } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "popover-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function PopoverTitle({ className, ...props }) {
+	const { title } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Popover$1.Title, {
+		"data-slot": "popover-title",
+		className: title({ className }),
+		...props
+	});
+}
+function PopoverDescription({ className, ...props }) {
+	const { description } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Popover$1.Description, {
+		"data-slot": "popover-description",
+		className: description({ className }),
+		...props
+	});
+}
+function PopoverClose({ className, ...props }) {
+	const { close } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Popover$1.Close, {
+		"data-slot": "popover-close",
+		className: close({ className }),
+		...props
+	});
+}
+function PopoverArrow({ className, ...props }) {
+	const { arrow } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Popover$1.Arrow, {
+		"data-slot": "popover-arrow",
+		className: arrow({ className }),
+		...props
+	});
+}
+function PopoverBackdrop({ className, ...props }) {
+	const { backdrop } = popover({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Popover$1.Backdrop, {
+		"data-slot": "popover-backdrop",
+		className: backdrop({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/input/input.tsx
+const input = tv({
+	slots: { root: ["w-full px-3 py-2 font-heading outline-none"] },
+	variants: { theme: {
+		brutal: {},
+		elegant: {}
+	} },
+	compoundVariants: [{
+		theme: "brutal",
+		class: { root: [
+			"border-2 border-line-strong bg-layer-panel",
+			"shadow-sm focus:shadow-md",
+			"aria-invalid:border-brutal-red aria-invalid:bg-brutal-red/5 aria-invalid:shadow-none aria-invalid:ring-2 aria-invalid:ring-brutal-red/60"
+		] }
+	}, {
+		theme: "elegant",
+		class: { root: [
+			"rounded-md border border-[oklch(0.94_0_0)] bg-layer-field",
+			"px-3 py-2 text-sm text-[oklch(0.205_0_0)] transition duration-200 ease-out dark:text-foreground",
+			"placeholder:text-foreground-placeholder/70",
+			"shadow-none hover:not-aria-invalid:border-[oklch(0.91_0_0)] hover:shadow-[oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0.159_0.016_266.594_/_0.03)_0px_1px_2px_0px]",
+			"focus:border-line-strong/25 focus:bg-layer-field",
+			"focus-visible:ring-2 focus-visible:ring-line-strong/8",
+			"aria-invalid:border-danger-base/45 aria-invalid:hover:border-danger-base/75 aria-invalid:focus-visible:border-danger-base/75 aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-danger-base/12",
+			"disabled:cursor-not-allowed disabled:border-line-subtle/60 disabled:bg-layer-muted/50 disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled",
+			"disabled:hover:border-line-subtle/60 disabled:hover:shadow-none",
+			"aria-invalid:disabled:border-line-subtle/60 aria-invalid:disabled:ring-0"
+		] }
+	}]
+});
+function Input({ suppressPasswordManager, className, ...props }) {
+	const { root } = input({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Input$1, {
+		"data-slot": "input",
+		className: root({ className: [suppressPasswordManager && "keeper-ignore", className] }),
+		"data-1p-ignore": suppressPasswordManager ? "true" : void 0,
+		"data-bwignore": suppressPasswordManager ? "true" : void 0,
+		"data-form-type": suppressPasswordManager ? "other" : void 0,
+		"data-lpignore": suppressPasswordManager ? "true" : void 0,
+		...props
+	});
+}
+//#endregion
+//#region src/components/input-group/input-group.tsx
+const inputGroup = tv({
+	slots: {
+		root: ["group/input-group relative flex w-full min-w-0 items-center", "has-[[data-input-group-trim=inline-end]]:[&_[data-slot=input-group-control]]:pr-0"],
+		addon: [
+			"flex shrink-0 items-center justify-center gap-2 px-3",
+			"select-none",
+			"[&>svg:not([class*='size-'])]:size-3.5"
+		],
+		text: ["flex shrink-0 items-center px-3 text-sm", "select-none whitespace-nowrap"],
+		control: ["min-w-0 flex-1 bg-transparent px-3 py-2 text-sm outline-none"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: [
+					"border-2 border-line-strong bg-layer-panel shadow-sm",
+					"has-[[data-slot=input-group-control]:focus]:not-has-[[data-slot=input-group-control][aria-invalid=true]]:shadow-md",
+					"has-[[data-slot=input-group-control][aria-invalid=true]]:border-brutal-red has-[[data-slot=input-group-control][aria-invalid=true]]:bg-brutal-red/5 has-[[data-slot=input-group-control][aria-invalid=true]]:shadow-none has-[[data-slot=input-group-control][aria-invalid=true]]:ring-2 has-[[data-slot=input-group-control][aria-invalid=true]]:ring-brutal-red/60"
+				],
+				addon: ["text-foreground/50"],
+				text: ["font-heading text-foreground/50"],
+				control: ["font-heading"]
+			},
+			elegant: {
+				root: [
+					"overflow-hidden rounded-md border border-[oklch(0.94_0_0)] bg-layer-field shadow-none",
+					"text-[oklch(0.205_0_0)] transition duration-200 ease-out dark:text-foreground",
+					"hover:border-[oklch(0.91_0_0)] hover:shadow-[oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0.159_0.016_266.594_/_0.03)_0px_1px_2px_0px]",
+					"has-[[data-slot=input-group-control]:focus]:border-line-strong/25 has-[[data-slot=input-group-control]:focus]:bg-layer-field",
+					"has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-line-strong/8",
+					"has-[[data-slot=input-group-control][aria-invalid=true]]:border-danger-base/45 has-[[data-slot=input-group-control][aria-invalid=true]]:hover:border-danger-base/75 has-[[data-slot=input-group-control][aria-invalid=true]:focus]:border-danger-base/75",
+					"has-[[data-slot=input-group-control][aria-invalid=true]:focus-visible]:ring-3 has-[[data-slot=input-group-control][aria-invalid=true]:focus-visible]:ring-danger-base/12",
+					"has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-line-subtle/60 has-[[data-slot=input-group-control]:disabled]:bg-layer-muted/50",
+					"has-[[data-slot=input-group-control]:disabled]:hover:border-line-subtle/60 has-[[data-slot=input-group-control]:disabled]:hover:shadow-none",
+					"has-[[data-slot=input-group-control][aria-invalid=true]:disabled]:border-line-subtle/60 has-[[data-slot=input-group-control][aria-invalid=true]:disabled]:ring-0"
+				],
+				addon: [
+					"text-foreground-muted transition duration-200 ease-out",
+					"group-has-[[data-slot=input-group-control]:focus]/input-group:text-foreground",
+					"group-has-[[data-slot=input-group-control]:disabled]/input-group:text-foreground-disabled"
+				],
+				text: [
+					"text-foreground-placeholder transition duration-200 ease-out",
+					"group-has-[[data-slot=input-group-control]:focus]/input-group:text-foreground-muted",
+					"group-has-[[data-slot=input-group-control]:disabled]/input-group:text-foreground-disabled"
+				],
+				control: [
+					"text-[oklch(0.205_0_0)] placeholder:text-foreground-placeholder/70 dark:text-foreground",
+					"transition duration-200 ease-out placeholder:transition placeholder:duration-200 placeholder:ease-out",
+					"disabled:cursor-not-allowed disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled"
+				]
+			}
+		},
+		align: {
+			"inline-start": {
+				addon: "order-first",
+				text: "order-first"
+			},
+			"inline-end": {
+				addon: "order-last",
+				text: "order-last"
+			}
+		},
+		variant: {
+			default: {},
+			container: {
+				addon: ["self-stretch border-line-subtle/90 bg-layer-muted/35", "text-foreground-placeholder"],
+				text: ["self-stretch border-line-subtle/90 bg-layer-muted/35", "text-foreground-placeholder"]
+			}
+		}
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			variant: "container",
+			class: {
+				addon: "bg-brutal-yellow/30 font-bold text-black/70",
+				text: "bg-brutal-yellow/30 font-bold text-black/70"
+			}
+		},
+		{
+			variant: "default",
+			align: "inline-start",
+			class: {
+				addon: "[&~[data-slot=input-group-control]]:pl-0",
+				text: "[&~[data-slot=input-group-control]]:pl-0"
+			}
+		},
+		{
+			variant: "container",
+			align: "inline-start",
+			class: {
+				addon: "border-r",
+				text: "border-r"
+			}
+		},
+		{
+			theme: "brutal",
+			variant: "container",
+			align: "inline-start",
+			class: {
+				addon: "border-r-2 border-black",
+				text: "border-r-2 border-black"
+			}
+		},
+		{
+			variant: "container",
+			align: "inline-end",
+			class: {
+				addon: "border-l",
+				text: "border-l"
+			}
+		},
+		{
+			theme: "brutal",
+			variant: "container",
+			align: "inline-end",
+			class: {
+				addon: "border-l-2 border-black",
+				text: "border-l-2 border-black"
+			}
+		}
+	],
+	defaultVariants: {
+		align: "inline-start",
+		variant: "default"
+	}
+});
+function InputGroup({ className, ...props }) {
+	const { root } = inputGroup({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		className: root({ className }),
+		...props
+	});
+}
+function InputGroupAddonRoot({ align = "inline-start", variant = "default", className, ...props }) {
+	const { addon } = inputGroup({
+		theme: useThemeFamily(),
+		align,
+		variant
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		"data-variant": variant,
+		"data-input-group-trim": variant === "default" && align === "inline-end" ? align : void 0,
+		className: addon({ className }),
+		...props
+	});
+}
+function TextAddon({ align = "inline-start", variant = "default", className, ...props }) {
+	const { text } = inputGroup({
+		theme: useThemeFamily(),
+		align,
+		variant
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "input-group-text",
+		"data-align": align,
+		"data-variant": variant,
+		"data-input-group-trim": variant === "default" && align === "inline-end" ? align : void 0,
+		className: text({ className }),
+		...props
+	});
+}
+const InputGroupAddon = Object.assign(InputGroupAddonRoot, { Text: TextAddon });
+function InputGroupInput({ className, suppressPasswordManager, ...props }) {
+	const { control } = inputGroup({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Input$1, {
+		"data-slot": "input-group-control",
+		className: control({ className: [suppressPasswordManager && "keeper-ignore", className] }),
+		"data-1p-ignore": suppressPasswordManager ? "true" : void 0,
+		"data-bwignore": suppressPasswordManager ? "true" : void 0,
+		"data-form-type": suppressPasswordManager ? "other" : void 0,
+		"data-lpignore": suppressPasswordManager ? "true" : void 0,
+		...props
+	});
+}
+//#endregion
+//#region src/components/combobox/combobox.tsx
+const combobox = tv({
+	slots: {
+		trigger: [
+			"inline-flex select-none items-center justify-between gap-2",
+			"outline-none transition-colors",
+			"[&_[data-slot='button-content']]:w-full [&_[data-slot='button-content']]:justify-between",
+			"[&>span[data-slot='combobox-trigger-content']]:min-w-0 [&>span[data-slot='combobox-trigger-content']]:flex-1",
+			"[&_[data-slot='combobox-trigger-content']_svg]:!size-3 [&_[data-slot='combobox-trigger-content']_svg]:shrink-0 [&_[data-slot='combobox-trigger-content']_svg]:!stroke-[1.5] [&_[data-slot='combobox-trigger-content']_svg_*]:!stroke-[1.5]",
+			"[&_[data-slot='combobox-trigger-indicator']]:!stroke-[1.5] [&_[data-slot='combobox-trigger-indicator']_*]:!stroke-[1.5]"
+		],
+		triggerIndicator: ["ml-auto flex shrink-0 items-center justify-center opacity-60"],
+		control: [
+			"flex min-w-0 items-center gap-2",
+			"outline-none transition-colors",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+			"[&_[data-slot='combobox-input']]:min-w-0 [&_[data-slot='combobox-input']]:flex-1",
+			"[&_[data-slot='combobox-input']]:border-0 [&_[data-slot='combobox-input']]:bg-transparent [&_[data-slot='combobox-input']]:p-0",
+			"[&_[data-slot='combobox-input']]:shadow-none [&_[data-slot='combobox-input']]:outline-none [&_[data-slot='combobox-input']]:ring-0",
+			"[&_[data-slot='combobox-input']]:focus:border-transparent [&_[data-slot='combobox-input']]:focus:ring-0 [&_[data-slot='combobox-input']]:focus-visible:ring-0",
+			"[&_[data-slot='combobox-clear']]:size-5 [&_[data-slot='combobox-clear']]:min-w-5 [&_[data-slot='combobox-clear']]:shrink-0",
+			"[&_[data-slot='combobox-trigger-indicator']]:size-4",
+			"[&_[data-slot='combobox-trigger-indicator']_svg]:!size-3.5 [&_[data-slot='combobox-trigger-indicator']_svg]:shrink-0"
+		],
+		inputGroup: ["flex items-center gap-2 border-b px-2 py-2"],
+		input: ["w-full outline-none"],
+		positioner: ["isolate z-50 outline-none"],
+		content: ["h-auto max-h-[var(--available-height)] min-w-[220px] overflow-hidden bg-layer-panel", "outline-none"],
+		header: ["flex items-center justify-between px-3 py-2"],
+		separator: ["h-px shrink-0 border-0"],
+		list: ["max-h-64 overflow-y-auto overscroll-contain scroll-py-1"],
+		item: ["flex w-full shrink-0 cursor-default select-none items-center justify-between gap-2 overflow-hidden px-3 py-1.5", "text-left outline-none transition-colors"],
+		itemIndicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center"],
+		label: ["m-0 font-medium"],
+		clear: [
+			"inline-flex h-5 min-w-8 items-center justify-center",
+			"pointer-events-none opacity-0 outline-none transition-colors",
+			"data-[visible]:pointer-events-auto data-[visible]:opacity-100"
+		],
+		empty: ["px-3 py-4 text-center text-sm"],
+		groupLabel: ["px-3 py-2"],
+		chips: ["flex min-h-9 flex-wrap items-center gap-1"],
+		chip: ["inline-flex items-center gap-1"],
+		chipRemove: ["inline-flex items-center justify-center outline-none transition-colors"]
+	},
+	variants: { theme: {
+		brutal: {
+			trigger: [
+				"font-sans text-sm font-semibold text-black",
+				"data-[popup-open]:translate-x-0 data-[popup-open]:translate-y-0",
+				"data-[popup-open]:hover:translate-x-0 data-[popup-open]:hover:translate-y-0"
+			],
+			inputGroup: ["border-black bg-white"],
+			input: ["border-2 border-line-strong bg-layer-panel px-2 py-1 font-mono text-xs", "shadow-[var(--shadow)] focus:shadow-[var(--shadow-hover)]"],
+			content: ["border-2 border-black bg-white shadow-lg"],
+			separator: ["bg-black"],
+			item: [
+				"border-b border-black/10 bg-white font-sans text-sm font-semibold leading-6 text-black last:border-b-0",
+				"hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3"
+			],
+			itemIndicator: ["text-black"],
+			label: ["font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black"],
+			clear: ["font-sans text-[10px] font-bold uppercase tracking-wide text-black hover:text-black", "[&_svg]:![stroke-width:2] [&_svg_*]:![stroke-width:2]"],
+			triggerIndicator: ["text-black opacity-100", "[&_svg]:![stroke-width:2] [&_svg_*]:![stroke-width:2]"],
+			control: [
+				"border-2 border-line-strong bg-white px-2 py-1",
+				"font-sans text-sm font-semibold text-black shadow-[var(--shadow)]",
+				"focus-within:shadow-[var(--shadow-hover)]",
+				"data-[popup-open]:translate-x-0 data-[popup-open]:translate-y-0",
+				"[&_svg]:![stroke-width:1.5] [&_svg_*]:![stroke-width:1.5] [&_svg_*]:fill-none",
+				"[&_[data-slot='combobox-input']]:font-sans [&_[data-slot='combobox-input']]:text-sm [&_[data-slot='combobox-input']]:font-semibold [&_[data-slot='combobox-input']]:text-black",
+				"[&_[data-slot='combobox-input']::placeholder]:text-black/40"
+			],
+			empty: ["font-sans text-sm font-semibold text-black/50"],
+			groupLabel: ["font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black/60"],
+			chips: ["border-2 border-line-strong bg-white px-2 py-1"],
+			chip: ["border border-black bg-brutal-yellow px-1.5 py-0.5 font-sans text-xs font-bold"],
+			chipRemove: ["text-black/50 hover:text-black"]
+		},
+		elegant: {
+			trigger: ["text-sm font-medium tracking-[-0.005em] text-foreground-muted", "[&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5]"],
+			inputGroup: ["border-line-muted bg-layer-popover px-1.5 pt-1 pb-2"],
+			input: [
+				"rounded-sm border border-line-subtle bg-layer-field px-2 py-1 text-sm",
+				"text-foreground outline-none transition duration-150",
+				"placeholder:text-foreground-placeholder/70",
+				"focus:border-line-strong/25 focus-visible:ring-2 focus-visible:ring-line-strong/8"
+			],
+			content: ["rounded-md bg-layer-popover", "shadow-lg"],
+			header: ["pl-2 pr-1.5 pt-2.5 pb-0.5"],
+			separator: ["hidden bg-line-muted"],
+			list: ["flex flex-col gap-0.5 px-1.5 py-1"],
+			item: [
+				"rounded-sm bg-transparent px-2 text-sm font-normal tracking-[-0.005em] text-foreground-muted",
+				"transition-[background-color,color] duration-150",
+				"hover:bg-foreground/[0.04] hover:text-foreground-strong",
+				"data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&_svg:not([class*='size-'])]:size-3.5"
+			],
+			itemIndicator: ["text-foreground-strong"],
+			label: ["text-[11px] leading-none tracking-[-0.005em] text-foreground-strong"],
+			clear: ["text-[11px] font-medium tracking-[-0.005em] text-foreground-muted hover:text-foreground-strong", "[&_svg]:![stroke-width:1.5] [&_svg_*]:![stroke-width:1.5]"],
+			triggerIndicator: ["text-foreground-muted opacity-100", "[&_svg]:![stroke-width:1.5] [&_svg_*]:![stroke-width:1.5]"],
+			control: [
+				"rounded-md border border-line-subtle bg-layer-field px-2.5 py-1.5",
+				"text-sm font-normal text-foreground shadow-[0_1px_1px_oklch(0.21_0.006_285_/_0.05)]",
+				"focus-within:border-line-strong/25 focus-within:ring-2 focus-within:ring-line-strong/8",
+				"[&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5]",
+				"[&_[data-slot='combobox-input']]:text-sm [&_[data-slot='combobox-input']]:font-normal [&_[data-slot='combobox-input']]:text-foreground",
+				"[&_[data-slot='combobox-input']::placeholder]:text-foreground-placeholder/70"
+			],
+			empty: ["text-foreground-muted"],
+			groupLabel: ["text-[11px] font-medium leading-none tracking-[-0.005em] text-foreground/45"],
+			chips: ["rounded-md border border-line-subtle bg-layer-field px-2 py-1", "focus-within:border-line-strong/25 focus-within:ring-2 focus-within:ring-line-strong/8"],
+			chip: ["rounded-sm bg-layer-muted px-1.5 py-0.5 text-xs font-medium text-foreground"],
+			chipRemove: ["text-foreground-muted hover:text-foreground-strong"]
+		}
+	} }
+});
+const ComboboxClearContext = createContext({ visible: false });
+function hasClearableValue(value) {
+	if (Array.isArray(value)) return value.length > 0;
+	return value != null;
+}
+function hasClearableInputValue(value) {
+	if (Array.isArray(value)) return value.length > 0;
+	if (typeof value === "string") return value.length > 0;
+	if (typeof value === "number") return true;
+	return value != null;
+}
+function Combobox({ defaultInputValue, defaultValue, inputValue, onInputValueChange, onValueChange, value, ...props }) {
+	const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultInputValue ?? "");
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const resolvedInputValue = inputValue === void 0 ? uncontrolledInputValue : inputValue;
+	const resolvedValue = value === void 0 ? uncontrolledValue : value;
+	return /* @__PURE__ */ jsx(ComboboxClearContext.Provider, {
+		value: { visible: hasClearableValue(resolvedValue) || hasClearableInputValue(resolvedInputValue) },
+		children: /* @__PURE__ */ jsx(Combobox$1.Root, {
+			"data-slot": "combobox",
+			defaultInputValue,
+			defaultValue,
+			inputValue,
+			value,
+			onInputValueChange: (nextInputValue, eventDetails) => {
+				if (inputValue === void 0) setUncontrolledInputValue(nextInputValue);
+				onInputValueChange?.(nextInputValue, eventDetails);
+			},
+			onValueChange: (nextValue, eventDetails) => {
+				if (value === void 0) setUncontrolledValue(nextValue);
+				onValueChange?.(nextValue, eventDetails);
+			},
+			...props
+		})
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	const { label } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.Label, {
+		"data-slot": "combobox-label",
+		className: label({ className }),
+		...props
+	});
+}
+function ComboboxValue(props) {
+	return /* @__PURE__ */ jsx(Combobox$1.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, render = /* @__PURE__ */ jsx(Button, {
+	variant: "outline",
+	size: "md"
+}), ...props }) {
+	const { trigger } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.Trigger, {
+		"data-slot": "combobox-trigger",
+		render,
+		className: trigger({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "combobox-trigger-content",
+			className: "flex min-w-0 flex-1 items-center gap-1.5",
+			children
+		})
+	});
+}
+function ComboboxTriggerIndicator({ className, ...props }) {
+	const { triggerIndicator } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "combobox-trigger-indicator",
+		className: triggerIndicator({ className }),
+		...props
+	});
+}
+function ComboboxInputGroup({ className, ...props }) {
+	const { inputGroup } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
+		"data-slot": "combobox-input-group",
+		className: inputGroup({ className }),
+		...props
+	});
+}
+function ComboboxControl({ className, ...props }) {
+	const { control } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.InputGroup, {
+		"data-slot": "combobox-control",
+		className: control({ className }),
+		...props
+	});
+}
+function ComboboxInput({ suppressPasswordManager, className, ...props }) {
+	const { input } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		"data-slot": "combobox-input",
+		className: input({ className: [suppressPasswordManager && "keeper-ignore", className] }),
+		"data-1p-ignore": suppressPasswordManager ? "true" : void 0,
+		"data-bwignore": suppressPasswordManager ? "true" : void 0,
+		"data-form-type": suppressPasswordManager ? "other" : void 0,
+		"data-lpignore": suppressPasswordManager ? "true" : void 0,
+		...props
+	});
+}
+function ComboboxPortal(props) {
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, {
+		"data-slot": "combobox-portal",
+		...props
+	});
+}
+function ComboboxPopup({ className, ...props }) {
+	const { content } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "combobox-content",
+		className: content({ className }),
+		...props
+	});
+}
+function ComboboxHeader({ className, ...props }) {
+	const { header } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "combobox-header",
+		className: header({ className }),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	const { separator } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "combobox-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, portalProps, className, initialFocus = false, finalFocus = false, ...props }) {
+	const { positioner, content } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+				"data-slot": "combobox-content",
+				className: content({ className }),
+				initialFocus,
+				finalFocus,
+				...props
+			})
+		})
+	});
+}
+function ComboboxList({ className, ...props }) {
+	const { list } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		"data-slot": "combobox-list",
+		className: list({ className }),
+		...props
+	});
+}
+function ComboboxItem({ className, ...props }) {
+	const { item } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.Item, {
+		"data-slot": "combobox-item",
+		className: item({ className }),
+		...props
+	});
+}
+function ComboboxItemIndicator({ className, children, ...props }) {
+	const { itemIndicator } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+		"data-slot": "combobox-item-indicator",
+		className: itemIndicator({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Check, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0 stroke-[1.5]"
+		})
+	});
+}
+function ComboboxClear({ className, children, keepMounted = true, ...props }) {
+	const theme = useThemeFamily();
+	const { visible } = use(ComboboxClearContext);
+	const { clear } = combobox({ theme });
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		"data-slot": "combobox-clear",
+		"data-visible": visible ? "" : void 0,
+		"aria-hidden": visible ? props["aria-hidden"] : true,
+		keepMounted,
+		className: clear({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		})
+	});
+}
+function ComboboxEmpty({ className, children, ...props }) {
+	const { empty } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		"data-slot": "combobox-empty",
+		...props,
+		children: children == null ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "combobox-empty-content",
+			className: empty({ className }),
+			children
+		})
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		"data-slot": "combobox-group",
+		className,
+		...props
+	});
+}
+function ComboboxGroupLabel({ className, ...props }) {
+	const { groupLabel } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		"data-slot": "combobox-group-label",
+		className: groupLabel({ className }),
+		...props
+	});
+}
+function ComboboxRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Row, {
+		"data-slot": "combobox-row",
+		className,
+		...props
+	});
+}
+function ComboboxCollection(props) {
+	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxChips({ className, ...props }) {
+	const { chips } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
+		"data-slot": "combobox-chips",
+		className: chips({ className }),
+		...props
+	});
+}
+function ComboboxChip({ className, ...props }) {
+	const { chip } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.Chip, {
+		"data-slot": "combobox-chip",
+		className: chip({ className }),
+		...props
+	});
+}
+function ComboboxChipRemove({ className, children, ...props }) {
+	const { chipRemove } = combobox({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+		"data-slot": "combobox-chip-remove",
+		className: chipRemove({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": true,
+			className: "size-3 shrink-0"
+		})
+	});
+}
+//#endregion
+//#region src/components/select/select.tsx
+const select = tv({
+	slots: {
+		trigger: [
+			"inline-flex select-none items-center justify-between gap-2",
+			"outline-none transition-colors",
+			"data-[placeholder]:text-foreground-placeholder",
+			"aria-invalid:border-danger-base/45 aria-invalid:hover:border-danger-base/75 aria-invalid:focus-visible:border-danger-base/75 aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-danger-base/12",
+			"[&_[data-slot='button-content']]:w-full [&_[data-slot='button-content']]:justify-between",
+			"[&>span[data-slot='select-trigger-content']]:min-w-0 [&>span[data-slot='select-trigger-content']]:flex-1",
+			"[&_[data-slot='select-trigger-content']_svg]:!size-3.5 [&_[data-slot='select-trigger-content']_svg]:shrink-0 [&_[data-slot='select-trigger-content']_svg]:!stroke-[1.5] [&_[data-slot='select-trigger-content']_svg_*]:!stroke-[1.5]",
+			"[&_[data-slot='select-icon']]:!stroke-[1.5] [&_[data-slot='select-icon']_*]:!stroke-[1.5]"
+		],
+		icon: ["ml-auto flex shrink-0 items-center justify-center opacity-80"],
+		value: ["flex min-w-0 flex-1 truncate text-left"],
+		positioner: ["isolate z-50 outline-none"],
+		content: ["relative max-h-[var(--available-height)] min-w-[max(var(--anchor-width),220px)] overflow-hidden bg-layer-panel", "outline-none"],
+		list: ["max-h-64 overflow-y-auto overscroll-contain scroll-py-6"],
+		item: ["flex h-8 w-full shrink-0 cursor-default select-none items-center justify-between gap-2 overflow-hidden px-3", "text-left outline-none transition-colors"],
+		itemIndicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center"],
+		itemText: ["min-w-0 flex-1 truncate font-normal"],
+		label: ["m-0 font-medium"],
+		groupLabel: ["px-3 py-2"],
+		separator: ["h-px shrink-0 border-0"],
+		scrollArrow: [
+			"absolute inset-x-0 z-10 flex h-6 w-full cursor-default items-center justify-center",
+			"outline-none transition-colors",
+			"data-[direction=up]:top-0 data-[direction=down]:bottom-0",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0"
+		],
+		empty: ["px-3 py-4 text-center text-sm"]
+	},
+	variants: { theme: {
+		brutal: {
+			trigger: [
+				"font-sans text-sm font-semibold text-black",
+				"[&_[data-slot='button-content']]:font-semibold [&_[data-slot='select-value']]:font-semibold",
+				"[&_[data-slot='select-value']_svg]:!stroke-2 [&_[data-slot='select-value']_svg_*]:!stroke-2",
+				"data-[popup-open]:translate-x-0 data-[popup-open]:translate-y-0",
+				"data-[popup-open]:hover:translate-x-0 data-[popup-open]:hover:translate-y-0"
+			],
+			content: ["border-2 border-black bg-white shadow-lg"],
+			item: [
+				"border-b border-black/10 bg-white font-sans text-sm font-semibold leading-6 text-black last:border-b-0",
+				"[&_[data-slot='select-item-text']]:font-semibold",
+				"hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30",
+				"data-[selected]:bg-brutal-yellow/30",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&_svg:not([class*='size-'])]:size-3",
+				"[&>svg]:!stroke-2 [&>svg_*]:!stroke-2"
+			],
+			itemIndicator: ["text-black [&_svg]:!stroke-[2.25] [&_svg_*]:!stroke-[2.25]"],
+			label: ["font-sans text-[10px] font-semibold uppercase leading-none tracking-wide text-black"],
+			groupLabel: ["font-sans text-[10px] font-semibold uppercase leading-none tracking-wide text-black/60"],
+			separator: ["bg-black"],
+			scrollArrow: ["border-black bg-white text-black", "data-[direction=up]:border-b data-[direction=down]:border-t"],
+			empty: ["font-sans text-sm font-semibold text-black/50"]
+		},
+		elegant: {
+			trigger: [
+				"text-sm font-medium tracking-[-0.005em] text-foreground-muted",
+				"[&_[data-slot='button-content']]:font-medium [&_[data-slot='select-value']]:font-medium",
+				"[&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5]"
+			],
+			content: ["rounded-md bg-layer-popover", "shadow-lg"],
+			list: ["flex flex-col gap-0.5 px-1 py-1"],
+			item: [
+				"rounded-sm bg-transparent px-2 text-sm font-normal tracking-[-0.005em] text-foreground-muted",
+				"transition-[background-color,color] duration-150",
+				"hover:bg-foreground/[0.04] hover:text-foreground-strong",
+				"data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+				"data-[selected]:bg-foreground/[0.04] data-[selected]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&_svg:not([class*='size-'])]:size-3.5"
+			],
+			itemIndicator: ["text-foreground-strong"],
+			label: ["text-[11px] leading-none tracking-[-0.005em] text-foreground-strong"],
+			groupLabel: ["px-2 text-[11px] font-medium leading-none tracking-[-0.005em] text-foreground/45"],
+			separator: ["hidden bg-line-muted"],
+			scrollArrow: ["bg-layer-popover text-foreground-placeholder hover:text-foreground-muted"],
+			empty: ["text-foreground-muted"]
+		}
+	} }
+});
+function Select(props) {
+	return /* @__PURE__ */ jsx(Select$1.Root, {
+		"data-slot": "select",
+		...props
+	});
+}
+function SelectTrigger({ className, children, render = /* @__PURE__ */ jsx(Button, {
+	variant: "outline",
+	size: "md"
+}), ...props }) {
+	const { trigger } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.Trigger, {
+		"data-slot": "select-trigger",
+		render,
+		className: trigger({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "select-trigger-content",
+			className: "flex min-w-0 flex-1 items-center gap-1.5",
+			children
+		})
+	});
+}
+function SelectValue({ className, ...props }) {
+	const { value } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.Value, {
+		"data-slot": "select-value",
+		className: value({ className }),
+		...props
+	});
+}
+function SelectIcon({ className, children, ...props }) {
+	const { icon } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.Icon, {
+		"data-slot": "select-icon",
+		className: icon({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		})
+	});
+}
+function SelectPortal(props) {
+	return /* @__PURE__ */ jsx(Select$1.Portal, {
+		"data-slot": "select-portal",
+		...props
+	});
+}
+function SelectPopup({ className, ...props }) {
+	const { content } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "select-content",
+		className: content({ className }),
+		...props
+	});
+}
+function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, portalProps, className, ...props }) {
+	const { positioner, content } = select({ theme: useThemeFamily() });
+	const positionerNode = /* @__PURE__ */ jsx(Select$1.Positioner, {
+		align,
+		alignItemWithTrigger,
+		alignOffset,
+		anchor,
+		arrowPadding,
+		collisionAvoidance,
+		collisionBoundary,
+		collisionPadding,
+		disableAnchorTracking,
+		positionMethod,
+		side,
+		sideOffset,
+		sticky,
+		className: positioner(),
+		children: /* @__PURE__ */ jsx(Select$1.Popup, {
+			"data-slot": "select-content",
+			className: content({ className }),
+			...props
+		})
+	});
+	return /* @__PURE__ */ jsx(Select$1.Portal, {
+		...portalProps,
+		children: positionerNode
+	});
+}
+function SelectList({ className, ...props }) {
+	const { list } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.List, {
+		"data-slot": "select-list",
+		className: list({ className }),
+		...props
+	});
+}
+function SelectItem({ className, ...props }) {
+	const { item } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.Item, {
+		"data-slot": "select-item",
+		className: item({ className }),
+		...props
+	});
+}
+function SelectItemIndicator({ className, children, ...props }) {
+	const theme = useThemeFamily();
+	const { itemIndicator } = select({ theme });
+	const defaultIndicator = theme === "brutal" ? /* @__PURE__ */ jsx(Check, {
+		"aria-hidden": true,
+		size: 12,
+		className: "shrink-0 !stroke-[2.25]"
+	}) : /* @__PURE__ */ jsx(Check, {
+		"aria-hidden": true,
+		className: "size-3 shrink-0"
+	});
+	return /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
+		"data-slot": "select-item-indicator",
+		className: itemIndicator({ className }),
+		...props,
+		children: children ?? defaultIndicator
+	});
+}
+function SelectItemText({ className, ...props }) {
+	const { itemText } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.ItemText, {
+		"data-slot": "select-item-text",
+		className: itemText({ className }),
+		...props
+	});
+}
+function SelectLabel({ className, ...props }) {
+	const { label } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.Label, {
+		"data-slot": "select-label",
+		className: label({ className }),
+		...props
+	});
+}
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Group, {
+		"data-slot": "select-group",
+		className,
+		...props
+	});
+}
+function SelectGroupLabel({ className, ...props }) {
+	const { groupLabel } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+		"data-slot": "select-group-label",
+		className: groupLabel({ className }),
+		...props
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	const { separator } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "select-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function SelectScrollUpArrow({ className, children, ...props }) {
+	const { scrollArrow } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-arrow",
+		"data-direction": "up",
+		className: scrollArrow({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0 rotate-180"
+		})
+	});
+}
+function SelectScrollDownArrow({ className, children, ...props }) {
+	const { scrollArrow } = select({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-arrow",
+		"data-direction": "down",
+		className: scrollArrow({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		})
+	});
+}
+function SelectArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Arrow, {
+		"data-slot": "select-arrow",
+		className,
+		...props
+	});
+}
+//#endregion
+//#region src/components/radio-group/radio-group.tsx
+const radioGroup = tv({
+	slots: {
+		root: [
+			"grid w-full gap-2",
+			"data-[disabled]:[&>label]:cursor-not-allowed data-[disabled]:[&>label]:text-foreground-disabled",
+			"data-[disabled]:[&>label_*]:text-foreground-disabled"
+		],
+		item: [
+			"relative inline-flex shrink-0 touch-manipulation items-center justify-center rounded-full outline-none",
+			"data-[disabled]:cursor-not-allowed",
+			"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']"
+		],
+		indicator: ["pointer-events-none flex size-full items-center justify-center"],
+		dot: ["block rounded-full bg-current"]
+	},
+	variants: { theme: {
+		brutal: {
+			root: ["font-sans [&>label]:font-medium"],
+			item: [
+				"size-4 border-2 border-line-strong bg-layer-panel text-foreground-strong",
+				"hover:bg-primary-400/30 data-[checked]:bg-primary-400",
+				"data-[disabled]:border-line-muted data-[disabled]:bg-layer-muted data-[disabled]:text-line data-[disabled]:hover:bg-layer-muted",
+				"data-[checked]:data-[disabled]:bg-layer-muted",
+				"focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			],
+			dot: "size-1.5"
+		},
+		elegant: {
+			root: "gap-2.5",
+			item: [
+				"size-3.5 bg-layer-panel text-foreground-inverse",
+				"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_1px_1.5px_-1px_oklch(0_0_0_/_0.035),0_0_0_1px_var(--line-subtle)]",
+				"hover:bg-foreground/[0.04] data-[checked]:bg-foreground-strong",
+				"data-[checked]:shadow-[0_1px_1.5px_-1px_oklch(0_0_0_/_0.08),0_0_0_1px_oklch(0_0_0_/_0.68)]",
+				"data-[disabled]:bg-layer-muted data-[disabled]:text-line data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)] data-[disabled]:hover:bg-layer-muted",
+				"data-[checked]:data-[disabled]:bg-layer-muted data-[checked]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+				"active:scale-[0.96] data-[disabled]:active:scale-100 motion-reduce:active:scale-100",
+				"focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			],
+			dot: "size-1.5"
+		}
+	} }
+});
+function RadioGroup({ ariaLabel, className, ...props }) {
+	const { root } = radioGroup({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		"aria-label": ariaLabel,
+		"data-slot": "radio-group",
+		className: root({ className }),
+		...props
+	});
+}
+function RadioGroupIndicator({ className, children, ...props }) {
+	const { indicator, dot } = radioGroup({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Radio.Indicator, {
+		"data-slot": "radio-group-indicator",
+		className: indicator({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("span", {
+			"data-slot": "radio-group-dot",
+			className: dot()
+		})
+	});
+}
+function RadioGroupItem({ appearance = "default", className, children, ...props }) {
+	const { item } = radioGroup({ theme: useThemeFamily() });
+	const itemClassName = appearance === "none" ? cn("sr-only", "data-[disabled]:cursor-not-allowed", className) : item({ className });
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		className: itemClassName,
+		...props,
+		children: children ?? (appearance === "default" ? /* @__PURE__ */ jsx(RadioGroupIndicator, {}) : null)
+	});
+}
+//#endregion
+//#region src/components/segmented-control/segmented-control.tsx
+const segmentedControl = tv({
+	slots: {
+		root: ["inline-flex max-w-full flex-wrap items-center gap-1"],
+		item: [
+			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
+			"text-xs leading-4 transition-colors",
+			"outline-none disabled:pointer-events-none",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5"
+		],
+		label: ["truncate"],
+		count: ["font-mono text-xs leading-4"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				item: [
+					"border-2 border-line-strong bg-layer-panel px-2 py-1.5 font-semibold text-foreground-strong",
+					"has-[svg]:pl-1.5 has-[[data-slot=segmented-control-count]]:pr-1.5",
+					"[&_svg]:stroke-[2.5]",
+					"hover:bg-primary-400/30 data-[checked]:bg-primary-400 data-[checked]:text-foreground-strong",
+					"data-[disabled]:cursor-not-allowed"
+				],
+				count: ["font-bold text-foreground/65", "group-data-[checked]/segmented-control-item:text-foreground/70"]
+			},
+			elegant: {
+				root: ["gap-1.5"],
+				item: [
+					"rounded-sm bg-layer-panel px-2.5 py-2 font-medium text-foreground-strong antialiased",
+					"has-[svg]:pl-2 has-[[data-slot=segmented-control-count]]:pr-2",
+					"shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_1px_1.5px_-1px_oklch(0_0_0_/_0.035),0_0_0_1px_var(--line-subtle)]",
+					"data-[unchecked]:hover:bg-[color-mix(in_oklch,var(--layer-muted)_55%,var(--layer-panel))]",
+					"data-[checked]:bg-primary-400 data-[checked]:text-primary-950 data-[checked]:hover:bg-[oklch(0.86_0.15_91.89)]",
+					"data-[checked]:shadow-[0_1px_1.5px_-1px_oklch(0.85_0.162_91.89_/_0.08),0_0_0_1px_oklch(0.83_0.14_91.89_/_0.68)]",
+					"focus-visible:ring-2 focus-visible:ring-line-focus",
+					"data-[disabled]:cursor-not-allowed"
+				],
+				count: ["text-foreground-placeholder", "group-data-[checked]/segmented-control-item:text-primary-950/60"]
+			}
+		},
+		disabled: {
+			true: { root: "opacity-50" },
+			false: { root: "" }
+		}
+	},
+	defaultVariants: { disabled: false }
+});
+function SegmentedControl({ ariaLabel, disabled = false, className, ...props }) {
+	const { root } = segmentedControl({
+		disabled,
+		theme: useThemeFamily()
+	});
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		"aria-label": ariaLabel,
+		disabled,
+		"data-slot": "segmented-control",
+		className: root({ className }),
+		...props
+	});
+}
+function SegmentedControlItem({ className, ...props }) {
+	const { item } = segmentedControl({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		render: /* @__PURE__ */ jsx("button", { type: "button" }),
+		nativeButton: true,
+		"data-slot": "segmented-control-item",
+		className: item({ className: `group/segmented-control-item ${className ?? ""}`.trim() }),
+		...props
+	});
+}
+function SegmentedControlLabel({ className, ...props }) {
+	const { label } = segmentedControl();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "segmented-control-label",
+		className: label({ className }),
+		...props
+	});
+}
+function SegmentedControlCount({ className, ...props }) {
+	const { count } = segmentedControl({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "segmented-control-count",
+		className: count({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/textarea/textarea.tsx
+const textarea = tv({
+	slots: { root: ["block w-full min-h-24 resize-y px-3 py-2 outline-none"] },
+	variants: { theme: {
+		brutal: { root: [
+			"border-2 border-line-strong bg-layer-panel font-heading",
+			"shadow-sm focus:shadow-md",
+			"aria-invalid:border-brutal-red aria-invalid:bg-brutal-red/5 aria-invalid:shadow-none aria-invalid:ring-2 aria-invalid:ring-brutal-red/60",
+			"disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none"
+		] },
+		elegant: { root: [
+			"rounded-md border border-[oklch(0.94_0_0)] bg-layer-field shadow-none",
+			"text-sm text-[oklch(0.205_0_0)] transition duration-200 ease-out dark:text-foreground",
+			"placeholder:text-foreground-placeholder/70",
+			"hover:not-aria-invalid:border-[oklch(0.91_0_0)] hover:shadow-[oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0_0_0_/_0)_0px_0px_0px_0px,oklch(0.159_0.016_266.594_/_0.03)_0px_1px_2px_0px]",
+			"focus:border-line-strong/25 focus:bg-layer-field",
+			"focus-visible:ring-2 focus-visible:ring-line-strong/8",
+			"aria-invalid:border-danger-base/45 aria-invalid:hover:border-danger-base/75 aria-invalid:focus-visible:border-danger-base/75 aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-danger-base/12",
+			"disabled:cursor-not-allowed disabled:border-line-subtle/60 disabled:bg-layer-muted/50 disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled",
+			"disabled:hover:border-line-subtle/60 disabled:hover:shadow-none",
+			"aria-invalid:disabled:border-line-subtle/60 aria-invalid:disabled:ring-0"
+		] }
+	} }
+});
+const textareaGroup = tv({
+	slots: { root: ["w-full"] },
+	variants: { theme: {
+		brutal: { root: "flex flex-col items-end gap-1" },
+		elegant: { root: [
+			"relative",
+			"has-[>[data-slot=textarea-counter]]:[&>[data-slot=textarea]]:scroll-pb-6",
+			"has-[>[data-slot=textarea-counter]]:[&>[data-slot=textarea]]:pr-16",
+			"[&>[data-slot=textarea-counter]]:pointer-events-none [&>[data-slot=textarea-counter]]:absolute",
+			"[&>[data-slot=textarea-counter]]:right-3 [&>[data-slot=textarea-counter]]:bottom-2.5 [&>[data-slot=textarea-counter]]:z-10"
+		] }
+	} }
+});
+const textareaCounter = tv({
+	slots: { root: ["font-mono text-xs tabular-nums"] },
+	variants: {
+		theme: {
+			brutal: { root: ["text-foreground/50", "group-data-[invalid]/field:font-bold group-data-[invalid]/field:text-danger-base"] },
+			elegant: { root: ["text-[11px] leading-none text-foreground-placeholder/80 transition duration-200 ease-out", "group-data-[invalid]/field:font-medium group-data-[invalid]/field:text-danger-base"] }
+		},
+		overLimit: {
+			true: { root: "text-danger-base" },
+			false: { root: "" }
+		}
+	},
+	defaultVariants: { overLimit: false }
+});
+function TextareaGroup({ className, ...props }) {
+	const { root } = textareaGroup({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "textarea-group",
+		className: root({ className }),
+		...props
+	});
+}
+function Textarea({ className, ...props }) {
+	const { root } = textarea({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: root({ className }),
+		...props
+	});
+}
+function TextareaCounter({ value, count, limit, getLength, className, ...props }) {
+	const theme = useThemeFamily();
+	const text = value ?? "";
+	const length = count ?? getLength?.(text) ?? text.length;
+	const { root } = textareaCounter({
+		theme,
+		overLimit: length > limit
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "textarea-counter",
+		className: root({ className }),
+		...props,
+		children: [
+			length,
+			"/",
+			limit
+		]
+	});
+}
+//#endregion
+//#region src/components/avatar/avatar.tsx
+const avatar = tv({
+	slots: {
+		root: ["group/avatar relative flex shrink-0 items-center justify-center select-none"],
+		image: ["size-full object-cover"],
+		fallback: [
+			"flex size-full items-center justify-center",
+			"[&>svg]:size-4",
+			"group-data-[size=xl]/avatar:[&>svg]:size-6",
+			"group-data-[size=lg]/avatar:[&>svg]:size-6",
+			"group-data-[size=md]/avatar:[&>svg]:size-[18px]",
+			"group-data-[size=sm]/avatar:[&>svg]:size-4",
+			"group-data-[size=xs]/avatar:[&>svg]:size-3",
+			"group-data-[size=2xs]/avatar:[&>svg]:size-2.5"
+		],
+		badge: [
+			"absolute right-0 bottom-0 z-10 translate-x-1/4 translate-y-1/4 select-none",
+			"inline-flex items-center justify-center rounded-full outline-2 outline-white",
+			"size-2 [&>svg]:hidden",
+			"group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2 group-data-[size=xl]/avatar:[&>svg]:block",
+			"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:[&>svg]:block",
+			"group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-1.5 group-data-[size=md]/avatar:[&>svg]:block",
+			"group-data-[size=sm]/avatar:size-2",
+			"group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:outline",
+			"group-data-[size=2xs]/avatar:size-1.5 group-data-[size=2xs]/avatar:outline"
+		],
+		group: ["group/avatar-group flex items-center"]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: "border-line-strong",
+				fallback: "text-black",
+				badge: ["bg-success-base text-foreground-strong"],
+				group: [
+					"-space-x-1.5",
+					"*:data-[slot=avatar]:outline *:data-[slot=avatar]:outline-2 *:data-[slot=avatar]:outline-primary-50",
+					"*:data-[slot=avatar-group-count]:outline *:data-[slot=avatar-group-count]:outline-2 *:data-[slot=avatar-group-count]:outline-primary-50"
+				]
+			},
+			elegant: {
+				root: ["bg-layer-muted"],
+				image: ["rounded-full"],
+				fallback: [
+					"overflow-hidden bg-layer-muted text-foreground-placeholder/70 text-sm",
+					"rounded-full",
+					"group-data-[size=xs]/avatar:text-xs",
+					"group-data-[size=2xs]/avatar:text-[10px]"
+				],
+				badge: [
+					"translate-x-0 translate-y-0 bg-success-base text-foreground-inverse",
+					"right-0.5 bottom-0.5",
+					"group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1",
+					"group-data-[size=lg]/avatar:right-0.75 group-data-[size=lg]/avatar:bottom-0.75"
+				],
+				group: [
+					"-space-x-2",
+					"*:data-[slot=avatar]:outline *:data-[slot=avatar]:outline-2 *:data-[slot=avatar]:outline-background",
+					"*:data-[slot=avatar-group-count]:outline *:data-[slot=avatar-group-count]:outline-2 *:data-[slot=avatar-group-count]:outline-background"
+				]
+			}
+		},
+		type: {
+			agent: {},
+			human: {}
+		},
+		size: {
+			xl: { root: "size-16" },
+			lg: { root: "size-12" },
+			md: { root: "size-9" },
+			sm: { root: "size-8" },
+			xs: { root: "size-5" },
+			"2xs": { root: "size-[14px]" }
+		}
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			size: [
+				"xl",
+				"lg",
+				"md",
+				"sm"
+			],
+			class: { root: "border-2" }
+		},
+		{
+			theme: "brutal",
+			size: ["xs", "2xs"],
+			class: { root: "border" }
+		},
+		{
+			theme: "brutal",
+			type: "agent",
+			class: { root: "bg-info-base" }
+		},
+		{
+			theme: "brutal",
+			type: "human",
+			class: { root: "bg-brutal-purple text-foreground-strong" }
+		},
+		{
+			theme: "elegant",
+			size: "xl",
+			class: { root: "rounded-full" }
+		},
+		{
+			theme: "elegant",
+			size: "lg",
+			class: { root: "rounded-full" }
+		},
+		{
+			theme: "elegant",
+			size: ["md", "sm"],
+			class: { root: "rounded-full" }
+		},
+		{
+			theme: "elegant",
+			size: "xs",
+			class: { root: "rounded-full" }
+		},
+		{
+			theme: "elegant",
+			size: "2xs",
+			class: { root: "rounded-full" }
+		},
+		{
+			theme: "elegant",
+			type: "agent",
+			class: { root: "text-foreground-muted" }
+		},
+		{
+			theme: "elegant",
+			type: "human",
+			class: { root: "text-foreground-muted" }
+		}
+	]
+});
+function Avatar({ size, type, className, children, ...props }) {
+	const { root } = avatar({
+		theme: useThemeFamily(),
+		type,
+		size
+	});
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: root({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(AvatarFallback, {})
+	});
+}
+function AvatarImage({ className, ...props }) {
+	const { image } = avatar({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		"data-slot": "avatar-image",
+		className: image({ className }),
+		...props
+	});
+}
+function AvatarFallbackIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "18",
+		height: "18",
+		viewBox: "0 0 18 18",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsxs("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "9",
+					cy: "7.75",
+					r: "2"
+				}),
+				/* @__PURE__ */ jsx("path", { d: "M9,16.25c1.407,0,2.716-.407,3.827-1.101-.481-1.67-2.003-2.899-3.827-2.899s-3.347,1.229-3.827,2.899c1.112,.694,2.42,1.101,3.827,1.101Z" }),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "1.889",
+					cy: "10.414",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "2.971",
+					cy: "4.972",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "2.972",
+					cy: "13.027",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "1.89",
+					cy: "7.586",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "4.973",
+					cy: "2.972",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "7.586",
+					cy: "1.889",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "15.029",
+					cy: "13.028",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "16.111",
+					cy: "7.586",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "13.028",
+					cy: "2.971",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "16.11",
+					cy: "10.414",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "15.028",
+					cy: "4.973",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "10.414",
+					cy: "1.89",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				})
+			]
+		})
+	});
+}
+function AvatarFallback({ className, children, ...props }) {
+	const { fallback } = avatar({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: fallback({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(AvatarFallbackIcon, {})
+	});
+}
+function AvatarBadge({ className, ...props }) {
+	const { badge } = avatar({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: badge({ className }),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	const { group } = avatar({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: group({ className }),
+		...props
+	});
+}
+function AvatarGroupCount({ size, className, ...props }) {
+	const theme = useThemeFamily();
+	const { root } = avatar({
+		theme,
+		size
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-group-count",
+		className: root({ class: [theme === "elegant" ? "bg-layer-muted font-medium text-xs leading-none tabular-nums text-foreground-muted" : "bg-secondary-400 font-bold text-xs leading-none tabular-nums text-foreground-strong", className] }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/inline-code/inline-code.tsx
+const inlineCode = tv({
+	slots: { root: [] },
+	variants: { theme: {
+		brutal: { root: "border border-black bg-brutal-yellow/40 px-1 text-sm font-mono text-black [overflow-wrap:anywhere]" },
+		elegant: { root: [
+			"inline-flex items-center rounded px-2 py-0.5",
+			"font-mono text-xs font-medium",
+			"bg-layer-muted text-[oklch(0.38_0_0)] dark:text-[oklch(0.78_0_0)]",
+			"shadow-[0_0.5px_0.5px_-0.5px_oklch(0_0_0_/_0.08)]"
+		] }
+	} }
+});
+function InlineCode({ className, ...props }) {
+	const { root } = inlineCode({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": "inline-code",
+		className: root({ className }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/status/status.tsx
+const STATUS_STYLE = `
+@keyframes raft-status-pulse-background {
+  0% {
+    box-shadow: 0 0 0 1px color-mix(in oklch, var(--status-color) 42%, transparent);
+  }
+  70%,
+  100% {
+    box-shadow: 0 0 0 8px color-mix(in oklch, var(--status-color) 0%, transparent);
+  }
+}
+`;
+const status = tv({
+	extend: tv({
+		slots: { root: ["relative inline-block shrink-0 rounded-full", "[background-color:var(--status-color)]"] },
+		variants: {
+			theme: {
+				brutal: { root: "border border-line-strong" },
+				elegant: {}
+			},
+			variant: {
+				default: { root: "[--status-color:var(--color-gray-400)]" },
+				primary: { root: "[--status-color:var(--color-primary-400)]" },
+				information: { root: "[--status-color:var(--color-info-base)]" },
+				muted: { root: "[--status-color:var(--color-secondary-400)]" },
+				accent: { root: "[--status-color:var(--color-accent-400)]" },
+				success: { root: "[--status-color:var(--color-success-base)]" },
+				warning: { root: "[--status-color:var(--color-warning-base)]" },
+				danger: { root: "[--status-color:var(--color-danger-base)]" }
+			}
+		},
+		defaultVariants: { variant: "default" }
+	}),
+	variants: {
+		theme: {
+			brutal: {},
+			elegant: {}
+		},
+		size: {
+			xs: { root: "size-1" },
+			sm: { root: "size-2" },
+			md: { root: "size-2.5" },
+			lg: { root: "size-[11px]" }
+		},
+		pulse: {
+			true: { root: "" },
+			false: { root: "" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default",
+		pulse: false
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			variant: "success",
+			class: { root: "[--status-color:var(--color-brutal-lime)]" }
+		},
+		{
+			theme: "brutal",
+			variant: "warning",
+			class: { root: "[--status-color:var(--color-warning-base)]" }
+		},
+		{
+			theme: "brutal",
+			pulse: true,
+			class: { root: "animate-pulse" }
+		},
+		{
+			theme: "elegant",
+			pulse: true,
+			class: { root: "[animation:raft-status-pulse-background_1.4s_ease-out_infinite] motion-reduce:animate-none" }
+		}
+	]
+});
+const statusStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-status",
+	precedence: "default",
+	children: STATUS_STYLE
+});
+function StatusRoot({ size, variant, pulse, className, render, ...props }) {
+	const { root } = status({
+		theme: useThemeFamily(),
+		size,
+		variant,
+		pulse
+	});
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({
+			className: root({ className }),
+			children: statusStyle
+		}, props),
+		state: {
+			slot: "status",
+			variant,
+			pulse,
+			size
+		}
+	});
+}
+const Status = StatusRoot;
+//#endregion
+//#region src/components/banner/banner.tsx
+const banner = tv({
+	slots: {
+		root: [""],
+		title: [""],
+		description: [""],
+		action: [""]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				root: [
+					"group/banner grid grid-cols-[0_minmax(0,1fr)] items-start border-2 border-line-strong",
+					"has-[>[data-slot=banner-action]]:grid-cols-[0_minmax(0,1fr)_auto]",
+					"has-[>svg]:grid-cols-[18px_minmax(0,1fr)]",
+					"[&:has(>svg):has(>[data-slot=banner-action])]:grid-cols-[18px_minmax(0,1fr)_auto]",
+					"[&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5",
+					"[&>svg]:size-[18px] [&>svg]:shrink-0 [&>svg]:text-foreground-strong"
+				],
+				title: ["col-start-2 mb-0.5 text-sm font-bold text-foreground-strong", "group-data-[size=sm]/banner:text-xs"],
+				description: ["col-start-2 min-w-0 text-sm text-foreground-strong", "group-data-[size=sm]/banner:text-xs"],
+				action: ["col-start-3 row-span-2 row-start-1 shrink-0"]
+			},
+			elegant: {
+				root: [
+					"group/banner grid w-full items-center gap-x-2 gap-y-0 rounded-sm border-0",
+					"text-[0.8125rem] leading-5 tracking-[-0.005em] text-foreground-strong",
+					"grid-cols-[minmax(0,1fr)]",
+					"has-[>svg]:grid-cols-[auto_minmax(0,1fr)]",
+					"has-[>[data-slot=banner-action]]:grid-cols-[minmax(0,1fr)_auto]",
+					"has-[>svg]:has-[>[data-slot=banner-action]]:grid-cols-[auto_minmax(0,1fr)_auto]",
+					"has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:items-start",
+					"has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:grid-rows-[auto_auto]",
+					"has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:gap-y-1",
+					"[&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:self-center"
+				],
+				title: [
+					"col-start-1 row-start-1 flex h-5 min-w-0 items-center text-[0.84375rem] font-medium leading-5 text-foreground-strong",
+					"group-has-[>svg]/banner:col-start-2",
+					"group-data-[size=sm]/banner:h-4 group-data-[size=sm]/banner:text-[0.8125rem] group-data-[size=sm]/banner:leading-4",
+					"group-data-[size=lg]/banner:h-6 group-data-[size=lg]/banner:text-[0.90625rem] group-data-[size=lg]/banner:leading-6",
+					"group-data-[status=warning]/banner:text-[oklch(0.476_0.114_61.907)]"
+				],
+				description: [
+					"col-start-1 row-start-1 min-w-0 font-normal leading-4 text-foreground-muted",
+					"group-has-[>svg]/banner:col-start-2",
+					"group-has-[>[data-slot=banner-title]]/banner:row-start-2",
+					"group-data-[size=sm]/banner:text-xs group-data-[size=sm]/banner:leading-4",
+					"group-data-[size=lg]/banner:text-[0.875rem] group-data-[size=lg]/banner:leading-5",
+					"group-data-[status=warning]/banner:text-[oklch(0.476_0.114_61.907)]"
+				],
+				action: [
+					"col-start-2 row-start-1 flex h-5 shrink-0 items-center gap-2",
+					"group-has-[>svg]/banner:col-start-3",
+					"group-has-[>[data-slot=banner-title]+[data-slot=banner-description]]/banner:row-span-2",
+					"[&>button:has(svg):last-child]:size-5 [&>button:has(svg):last-child]:min-h-5 [&>button:has(svg):last-child]:min-w-5",
+					"[&>button:has(svg):last-child]:rounded-sm",
+					"[&>button:has(svg):last-child]:border-transparent [&>button:has(svg):last-child]:bg-transparent [&>button:has(svg):last-child]:shadow-none",
+					"[&>button:has(svg):last-child]:text-current/45",
+					"[&>button:has(svg):last-child]:transition-colors [&>button:has(svg):last-child]:duration-200",
+					"[&>button:has(svg):last-child]:hover:border-transparent [&>button:has(svg):last-child]:hover:bg-foreground/5",
+					"[&>button:has(svg):last-child]:hover:text-current/70",
+					"[&>button:has(svg):last-child>svg]:size-4",
+					"group-data-[size=sm]/banner:h-4 group-data-[size=sm]/banner:[&>button:has(svg):last-child]:size-4",
+					"group-data-[size=sm]/banner:[&>button:has(svg):last-child]:min-h-4 group-data-[size=sm]/banner:[&>button:has(svg):last-child]:min-w-4",
+					"group-data-[size=sm]/banner:[&>button:has(svg):last-child>svg]:size-3",
+					"group-data-[size=lg]/banner:h-6 group-data-[size=lg]/banner:[&>button:has(svg):last-child]:size-6",
+					"group-data-[size=lg]/banner:[&>button:has(svg):last-child]:min-h-6 group-data-[size=lg]/banner:[&>button:has(svg):last-child]:min-w-6"
+				]
+			}
+		},
+		status: {
+			default: {},
+			destructive: {},
+			warning: {},
+			info: {},
+			success: {}
+		},
+		size: {
+			sm: {},
+			md: {},
+			lg: {}
+		},
+		align: {
+			top: { action: "self-start" },
+			middle: { action: "self-center" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		align: "middle"
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			status: "default",
+			class: { root: "bg-layer-panel" }
+		},
+		{
+			theme: "brutal",
+			status: "destructive",
+			class: { root: "bg-danger-base/20" }
+		},
+		{
+			theme: "brutal",
+			status: "warning",
+			class: { root: "bg-warning-base/20" }
+		},
+		{
+			theme: "brutal",
+			status: "info",
+			class: { root: "bg-primary-400/30" }
+		},
+		{
+			theme: "brutal",
+			status: "success",
+			class: { root: "bg-success-base/20" }
+		},
+		{
+			theme: "brutal",
+			size: "sm",
+			class: { root: "gap-y-0 p-2 has-[>svg]:gap-x-2 has-[>[data-slot=banner-action]]:gap-x-2" }
+		},
+		{
+			theme: "brutal",
+			size: "md",
+			class: { root: "gap-y-0 p-3 has-[>svg]:gap-x-3 has-[>[data-slot=banner-action]]:gap-x-3" }
+		},
+		{
+			theme: "brutal",
+			size: "lg",
+			class: { root: "gap-y-0 p-4 shadow-sm has-[>svg]:gap-x-3 has-[>[data-slot=banner-action]]:gap-x-3" }
+		},
+		{
+			theme: "elegant",
+			status: "default",
+			class: { root: "bg-layer-muted [&>svg]:text-foreground-muted" }
+		},
+		{
+			theme: "elegant",
+			status: "success",
+			class: { root: "bg-[oklch(0.94_0.035_153.079)] [&>svg]:text-success-base" }
+		},
+		{
+			theme: "elegant",
+			status: "warning",
+			class: { root: "bg-[oklch(0.973_0.071_103.193)] text-[oklch(0.476_0.114_61.907)] [&>svg]:text-[oklch(0.476_0.114_61.907)]" }
+		},
+		{
+			theme: "elegant",
+			status: "info",
+			class: { root: "bg-info-lighter [&>svg]:text-[oklch(0.55_0.11_220)]" }
+		},
+		{
+			theme: "elegant",
+			status: "destructive",
+			class: { root: "bg-danger-lighter [&>svg]:text-danger-base" }
+		},
+		{
+			theme: "elegant",
+			size: "sm",
+			class: { root: "py-2.5 pl-2.5 pr-2 text-xs leading-4 [&>svg]:size-3.5" }
+		},
+		{
+			theme: "elegant",
+			size: "md",
+			class: { root: "px-3 py-3" }
+		},
+		{
+			theme: "elegant",
+			size: "lg",
+			class: { root: "gap-x-2 px-3.5 py-3 text-sm leading-5 [&>svg]:size-[18px]" }
+		}
+	]
+});
+function Banner({ status, size = "md", className, render, ...props }) {
+	const { root } = banner({
+		theme: useThemeFamily(),
+		status,
+		size
+	});
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			className: root({ className }),
+			role: "alert"
+		}, props),
+		state: {
+			slot: "banner",
+			size,
+			status
+		}
+	});
+}
+function BannerTitle({ render, className, ...props }) {
+	const { title } = banner({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: title({ className }) }, props),
+		state: { slot: "banner-title" }
+	});
+}
+function BannerDescription({ render, className, ...props }) {
+	const { description } = banner({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: description({ className }) }, props),
+		state: { slot: "banner-description" }
+	});
+}
+function BannerAction({ align = "middle", render, className, ...props }) {
+	const { action } = banner({
+		theme: useThemeFamily(),
+		align
+	});
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: action({ className }) }, props),
+		state: {
+			slot: "banner-action",
+			align
+		}
+	});
+}
+//#endregion
+//#region src/components/empty-state/empty-state.tsx
+const emptyState = tv({
+	slots: {
+		root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 py-12 text-center"],
+		content: [
+			"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-center",
+			"[&>[data-slot=empty-state-icon]]:mb-0",
+			"[&>[data-slot=empty-state-title]]:mb-0"
+		],
+		icon: ["mb-4 inline-flex items-center justify-center [&_svg]:shrink-0"],
+		title: ["mb-2 w-full max-w-full text-center text-balance font-heading text-lg font-semibold"],
+		description: ["mx-auto w-full max-w-[32ch] text-center text-sm leading-relaxed text-pretty", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground-strong"],
+		actions: ["mt-5"]
+	},
+	variants: { theme: {
+		brutal: {
+			icon: "text-foreground-muted [&_svg]:size-9",
+			title: "text-foreground/60",
+			description: "text-foreground/60"
+		},
+		elegant: {
+			icon: "rounded-md bg-layer-muted p-2 text-foreground-placeholder [&_svg]:size-4.5",
+			title: "text-sm font-medium text-foreground-strong",
+			description: "text-foreground-muted"
+		}
+	} }
+});
+function EmptyState({ render, className, ...props }) {
+	const { root } = emptyState();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "empty-state",
+			className: root({ className })
+		}, props),
+		state: { slot: "empty-state" }
+	});
+}
+function EmptyStateContent({ render, className, ...props }) {
+	const { content } = emptyState();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "empty-state-content",
+			className: content({ className })
+		}, props),
+		state: { slot: "empty-state-content" }
+	});
+}
+function EmptyStateIcon({ render, className, ...props }) {
+	const { icon } = emptyState({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "empty-state-icon",
+			className: icon({ className })
+		}, props),
+		state: { slot: "empty-state-icon" }
+	});
+}
+function EmptyStateTitle({ render, className, ...props }) {
+	const { title } = emptyState({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "empty-state-title",
+			className: title({ className })
+		}, props),
+		state: { slot: "empty-state-title" }
+	});
+}
+function EmptyStateDescription({ render, className, ...props }) {
+	const { description } = emptyState({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "empty-state-description",
+			className: description({ className })
+		}, props),
+		state: { slot: "empty-state-description" }
+	});
+}
+function EmptyStateActions({ render, className, ...props }) {
+	const { actions } = emptyState();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "empty-state-actions",
+			className: actions({ className })
+		}, props),
+		state: { slot: "empty-state-actions" }
+	});
+}
+//#endregion
+//#region src/components/notification-center/notification-center.tsx
+const notificationCenter = tv({
+	slots: {
+		popup: ["flex flex-col overflow-hidden bg-layer-panel"],
+		header: ["flex items-center gap-2 px-4 py-2"],
+		title: ["text-xs"],
+		count: ["ml-auto text-xs"],
+		scroller: ["min-h-0 flex-1 overflow-y-auto overscroll-contain", "[[data-theme=elegant]_&]:bg-white"],
+		list: ["divide-y"],
+		item: ["px-4 py-4"],
+		itemRow: ["flex items-start"],
+		itemIcon: ["mt-0.5 flex size-6 shrink-0 items-center justify-center", "[&_svg]:size-4"],
+		itemContent: ["min-w-0 flex-1"],
+		itemTitle: ["break-words text-sm text-foreground-strong"],
+		itemBody: ["mt-0.5 break-words text-sm"],
+		itemActions: ["mt-3 ml-auto flex items-center justify-end gap-2"],
+		actionButton: []
+	},
+	variants: {
+		theme: {
+			brutal: {
+				popup: ["border-2 border-black bg-white shadow-lg"],
+				header: ["border-b-2 border-line-strong bg-brutal-cream"],
+				title: ["font-bold uppercase tracking-widest text-foreground/60"],
+				count: ["font-mono text-foreground/40"],
+				list: ["divide-y-2 divide-line-strong"],
+				itemRow: ["gap-2"],
+				itemIcon: ["border-2 border-line-strong [&_svg]:text-foreground-strong"],
+				itemTitle: ["font-bold"],
+				actionButton: []
+			},
+			elegant: {
+				popup: ["rounded-md bg-layer-popover", "shadow-lg"],
+				header: ["border-b border-line-muted bg-white pt-2.5"],
+				title: ["text-sm font-medium normal-case tracking-normal text-foreground-strong"],
+				count: ["font-sans text-[11px] font-medium text-foreground-placeholder"],
+				list: ["divide-line-muted"],
+				itemRow: ["gap-2.5"],
+				itemIcon: ["rounded-sm border border-transparent"],
+				itemTitle: ["font-medium"],
+				itemBody: ["text-foreground-muted"],
+				actionButton: ["py-0.5"]
+			}
+		},
+		viewport: {
+			desktop: { popup: "w-[380px]" },
+			mobile: { popup: "w-[min(92vw,360px)]" }
+		},
+		size: {
+			sm: { popup: "h-56" },
+			md: { popup: "h-72" },
+			lg: { popup: "h-96" }
+		},
+		read: {
+			true: { item: "opacity-70" },
+			false: { item: "" }
+		},
+		status: {
+			error: {},
+			warning: {},
+			info: {},
+			success: {}
+		},
+		actionVariant: {
+			primary: {},
+			secondary: {}
+		}
+	},
+	compoundVariants: [
+		{
+			theme: "brutal",
+			actionVariant: "primary",
+			class: { actionButton: "bg-brutal-pink hover:bg-brutal-pink" }
+		},
+		{
+			theme: "brutal",
+			status: "error",
+			class: { itemIcon: "bg-brutal-orange" }
+		},
+		{
+			theme: "brutal",
+			status: "warning",
+			class: { itemIcon: "bg-brutal-orange" }
+		},
+		{
+			theme: "brutal",
+			status: "info",
+			class: { itemIcon: "bg-brutal-yellow" }
+		},
+		{
+			theme: "brutal",
+			status: "success",
+			class: { itemIcon: "bg-brutal-lime" }
+		},
+		{
+			theme: "elegant",
+			status: "error",
+			class: { itemIcon: "bg-danger-base/80 text-danger-dark" }
+		},
+		{
+			theme: "elegant",
+			status: "warning",
+			class: { itemIcon: "bg-warning-base/80 text-warning-dark" }
+		},
+		{
+			theme: "elegant",
+			status: "info",
+			class: { itemIcon: "bg-info-base/80 text-info-dark" }
+		},
+		{
+			theme: "elegant",
+			status: "success",
+			class: { itemIcon: "bg-success-base/80 text-success-dark" }
+		}
+	],
+	defaultVariants: {
+		viewport: "desktop",
+		size: "md",
+		read: false,
+		status: "info",
+		actionVariant: "secondary"
+	}
+});
+function NotificationCenter({ modal = false, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
+		modal,
+		...props
+	});
+}
+function NotificationCenterTrigger(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		"data-slot": "notification-center-trigger",
+		...props
+	});
+}
+function NotificationCenterPopup({ viewport = "desktop", size = "md", className, initialFocus = false, "aria-label": ariaLabel = "Notification center", align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = true, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, portalProps, ...props }) {
+	const { popup } = notificationCenter({
+		theme: useThemeFamily(),
+		viewport,
+		size
+	});
+	return /* @__PURE__ */ jsx(Popover$1.Portal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: "isolate z-50 outline-none",
+			children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+				"aria-label": ariaLabel,
+				"data-slot": "notification-center-popup",
+				"data-size": size,
+				"data-viewport": viewport,
+				initialFocus,
+				className: popup({ className }),
+				...props
+			})
+		})
+	});
+}
+function NotificationCenterHeader({ render, className, ...props }) {
+	const { header } = notificationCenter({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "notification-center-header" }
+	});
+}
+function NotificationCenterTitle({ render, className, ...props }) {
+	const { title } = notificationCenter({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: title({ className }) }, props),
+		state: { slot: "notification-center-title" }
+	});
+}
+function NotificationCenterCount({ render, className, ...props }) {
+	const { count } = notificationCenter({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps({ className: count({ className }) }, props),
+		state: { slot: "notification-center-count" }
+	});
+}
+function NotificationCenterScroller({ render, className, ...props }) {
+	const { scroller } = notificationCenter();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: scroller({ className }) }, props),
+		state: { slot: "notification-center-scroller" }
+	});
+}
+function NotificationCenterList({ render, className, "aria-label": ariaLabel = "Notifications", ...props }) {
+	const { list } = notificationCenter({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "ul",
+		render,
+		props: mergeProps({
+			"aria-label": ariaLabel,
+			className: list({ className })
+		}, props),
+		state: { slot: "notification-center-list" }
+	});
+}
+function NotificationCenterItem({ read = false, render, className, ...props }) {
+	const { item } = notificationCenter({
+		theme: useThemeFamily(),
+		read
+	});
+	return useRender({
+		defaultTagName: "li",
+		render,
+		props: mergeProps({ className: item({ className }) }, props),
+		state: {
+			slot: "notification-center-item",
+			read
+		}
+	});
+}
+function NotificationCenterItemRow({ render, className, ...props }) {
+	const { itemRow } = notificationCenter({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: itemRow({ className }) }, props),
+		state: { slot: "notification-center-item-row" }
+	});
+}
+const STATUS_LABEL = {
+	error: "Error",
+	warning: "Warning",
+	info: "Info",
+	success: "Success"
+};
+const DEFAULT_STATUS_ICON = {
+	error: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	warning: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	info: /* @__PURE__ */ jsx(Info, {}),
+	success: /* @__PURE__ */ jsx(CheckCircle2, {})
+};
+function NotificationCenterItemIcon({ status = "info", render, className, children, "aria-label": ariaLabel = STATUS_LABEL[status], ...props }) {
+	const { itemIcon } = notificationCenter({
+		theme: useThemeFamily(),
+		status
+	});
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"aria-label": ariaLabel,
+			className: itemIcon({ className }),
+			children: children ?? DEFAULT_STATUS_ICON[status]
+		}, props),
+		state: {
+			slot: "notification-center-item-icon",
+			status
+		}
+	});
+}
+function NotificationCenterItemContent({ render, className, ...props }) {
+	const { itemContent } = notificationCenter();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: itemContent({ className }) }, props),
+		state: { slot: "notification-center-item-content" }
+	});
+}
+function NotificationCenterItemTitle({ render, className, ...props }) {
+	const { itemTitle } = notificationCenter({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: itemTitle({ className }) }, props),
+		state: { slot: "notification-center-item-title" }
+	});
+}
+function NotificationCenterItemBody({ render, className, ...props }) {
+	const { itemBody } = notificationCenter({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: itemBody({ className }) }, props),
+		state: { slot: "notification-center-item-body" }
+	});
+}
+function NotificationCenterItemActions({ render, className, ...props }) {
+	const { itemActions } = notificationCenter();
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: itemActions({ className }) }, props),
+		state: { slot: "notification-center-item-actions" }
+	});
+}
+function NotificationCenterActionButton({ variant = "secondary", className, ...props }) {
+	const { actionButton } = notificationCenter({
+		theme: useThemeFamily(),
+		actionVariant: variant
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		size: "xs",
+		variant: variant === "primary" ? "primary" : "outline",
+		className: actionButton({ className }),
+		...props
+	});
+}
+function NotificationCenterEmptyState(props) {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		"data-slot": "notification-center-empty-state",
+		...props
+	});
+}
+//#endregion
+//#region src/components/tabs/tabs.tsx
+const tabs = tv({
+	slots: {
+		root: ["w-full"],
+		list: [""],
+		background: [""],
+		tab: ["relative z-10 flex shrink-0 touch-manipulation items-center gap-1.5 whitespace-nowrap outline-none", "data-[reorderable=true]:cursor-grab data-[reorderable=true]:active:cursor-grabbing"],
+		content: ["relative z-10 inline-flex items-center gap-[inherit]"],
+		label: [""],
+		panel: ["outline-none"],
+		indicator: [""]
+	},
+	variants: {
+		theme: {
+			brutal: {
+				list: ["flex w-max max-w-full overflow-x-auto border-2 border-line-strong bg-layer-panel", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"],
+				background: "hidden",
+				tab: [
+					"bg-layer-panel px-4 py-1.5 text-xs font-semibold transition-colors",
+					"hover:bg-[color-mix(in_oklch,var(--line-strong)_6%,var(--layer-panel))]",
+					"[&+&]:before:absolute [&+&]:before:inset-y-0 [&+&]:before:left-0 [&+&]:before:w-0.5 [&+&]:before:bg-line-strong",
+					"data-[dragging-source=true]:before:hidden",
+					"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:[stroke-width:1.5] [&_svg:not([class*='size-'])]:size-3.5",
+					"data-[active]:bg-primary-400 data-[active]:hover:bg-primary-400",
+					"data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+					"data-[dragging-source=true]:cursor-grabbing"
+				]
+			},
+			elegant: {}
+		},
+		variant: {
+			default: {},
+			underline: {}
+		}
+	},
+	defaultVariants: { variant: "default" },
+	compoundVariants: [{
+		theme: "elegant",
+		variant: "underline",
+		class: {
+			list: [
+				"group/tabs-list relative flex h-12 w-max max-w-full items-center gap-6 px-4",
+				"overflow-x-auto overflow-y-hidden overscroll-contain whitespace-nowrap",
+				"border-b border-line-muted",
+				"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+			],
+			background: ["pointer-events-none absolute inset-x-0 top-0 z-0 h-px bg-line-muted"],
+			tab: [
+				"group/tabs-tab h-12 justify-center px-3 pb-3 pt-3.5",
+				"text-[0.8125rem] font-medium tracking-[-0.005em] text-foreground-placeholder",
+				"transition-colors duration-200 ease-out",
+				"hover:text-foreground-muted",
+				"data-[active]:text-foreground-strong",
+				"data-[active]:hover:text-foreground-strong",
+				"[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:[stroke-width:1.5]",
+				"[&_svg]:text-foreground-placeholder [&_svg]:transition-colors [&_svg]:duration-200 [&_svg]:ease-out",
+				"hover:[&_svg]:text-foreground-muted",
+				"data-[active]:[&_svg]:text-foreground-strong",
+				"data-[active]:hover:[&_svg]:text-foreground-strong",
+				"data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+				"data-[dragging-source=true]:cursor-grabbing"
+			],
+			indicator: [
+				"absolute bottom-0 left-[var(--active-tab-left)] z-10 h-0.5",
+				"w-[var(--active-tab-width)] bg-foreground-strong",
+				"transition-[left,width] duration-300 ease-[cubic-bezier(0.65,0,0.35,1)]"
+			]
+		}
+	}, {
+		theme: "elegant",
+		variant: "default",
+		class: {
+			list: [
+				"group/tabs-list relative isolate flex h-auto w-max max-w-full items-center gap-1",
+				"overflow-x-auto overflow-y-visible overscroll-contain whitespace-nowrap",
+				"p-px",
+				"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+			],
+			background: ["pointer-events-none absolute inset-0 z-0 rounded-[7px] bg-layer-muted"],
+			tab: [
+				"group/tabs-tab h-9 justify-center gap-1.5 rounded-md px-3.5 py-2",
+				"text-[0.8125rem] font-medium tracking-[-0.005em] text-foreground-placeholder",
+				"transition-[background-color,box-shadow,color] duration-150 ease-out",
+				"hover:text-[oklch(42%_.006_285)]",
+				"data-[active]:text-[oklch(38%_.006_285)]",
+				"data-[active]:hover:text-[oklch(38%_.006_285)]",
+				"data-[active]:[&_[data-slot=tabs-label]]:text-[0.8125rem]",
+				"[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:[stroke-width:1.5]",
+				"[&_svg]:text-foreground-placeholder [&_svg]:transition-colors [&_svg]:duration-150 [&_svg]:ease-out",
+				"hover:[&_svg]:text-[oklch(42%_.006_285)]",
+				"data-[active]:[&_svg]:text-[oklch(38%_.006_285)]",
+				"data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+				"data-[dragging-source=true]:cursor-grabbing"
+			],
+			indicator: [
+				"absolute z-0 rounded-md bg-layer-panel",
+				"[left:calc(var(--active-tab-left)+1px)] [top:calc(var(--active-tab-top)+1.671875px)]",
+				"[height:calc(var(--active-tab-height)-3.34375px)] [width:calc(var(--active-tab-width)-2px)]",
+				"shadow-[0_0_0_1px_oklch(0%_0_0/.1),0_1px_1px_-1px_oklch(0%_0_0/.04),0_1px_2px_oklch(0%_0_0/.03)]",
+				"group-has-[>[data-slot=tabs-background]]/tabs-list:shadow-[0_0_0_1px_oklch(0%_0_0/.045),0_1px_1px_-1px_oklch(0%_0_0/.025),0_1px_2px_oklch(0%_0_0/.02)]",
+				"transition-[left,width] duration-300 ease-[cubic-bezier(0.65,0,0.35,1)]"
+			]
+		}
+	}]
+});
+const TabsReorderContext = createContext({ enabled: false });
+const TabsValueContext = createContext(void 0);
+const TabsListVariantContext = createContext("default");
+const REORDER_ENABLED_CONTEXT = { enabled: true };
+function Tabs({ value, defaultValue, onValueChange, className, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const resolvedValue = value ?? uncontrolledValue;
+	const { root } = tabs();
+	return /* @__PURE__ */ jsx(TabsValueContext.Provider, {
+		value: resolvedValue == null ? void 0 : String(resolvedValue),
+		children: /* @__PURE__ */ jsx(Tabs$1.Root, {
+			value,
+			defaultValue,
+			onValueChange: (nextValue, eventDetails) => {
+				if (nextValue == null) return;
+				const typedValue = String(nextValue);
+				if (value === void 0) setUncontrolledValue(typedValue);
+				onValueChange?.(typedValue, eventDetails);
+			},
+			"data-slot": "tabs",
+			className: root({ className }),
+			...props
+		})
+	});
+}
+function TabsList({ className, children, variant = "default", ...props }) {
+	const theme = useThemeFamily();
+	const resolvedVariant = theme === "elegant" ? variant : "underline";
+	const { list } = tabs({
+		theme,
+		variant: resolvedVariant
+	});
+	return /* @__PURE__ */ jsx(TabsListVariantContext.Provider, {
+		value: resolvedVariant,
+		children: /* @__PURE__ */ jsxs(Tabs$1.List, {
+			"data-slot": "tabs-list",
+			"data-variant": resolvedVariant,
+			className: list({ className }),
+			...props,
+			children: [children, theme === "elegant" ? /* @__PURE__ */ jsx(TabsIndicator, {}) : null]
+		})
+	});
+}
+function SortableTabsList({ value, onReorder, children, variant = "default", ...props }) {
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 350,
+		tolerance: 8
+	} }));
+	const tabIds = useMemo(() => value.map(String), [value]);
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: useCallback(({ active, over }) => {
+			if (!over || active.id === over.id) return;
+			const oldIndex = tabIds.indexOf(String(active.id));
+			const newIndex = tabIds.indexOf(String(over.id));
+			if (oldIndex === -1 || newIndex === -1) return;
+			onReorder(arrayMove([...value], oldIndex, newIndex));
+		}, [
+			onReorder,
+			tabIds,
+			value
+		]),
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: tabIds,
+			strategy: horizontalListSortingStrategy,
+			children: /* @__PURE__ */ jsx(TabsReorderContext.Provider, {
+				value: REORDER_ENABLED_CONTEXT,
+				children: /* @__PURE__ */ jsx(TabsList, {
+					variant,
+					...props,
+					children
+				})
+			})
+		})
+	});
+}
+function TabsTab({ value, ...props }) {
+	return /* @__PURE__ */ jsx(TabsTabButton, {
+		value,
+		...props
+	});
+}
+function SortableTabsTab({ value, ...props }) {
+	const reorder = use(TabsReorderContext);
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+		id: value,
+		disabled: !reorder.enabled
+	});
+	if (!reorder.enabled) return /* @__PURE__ */ jsx(TabsTabButton, {
+		value,
+		...props
+	});
+	const { role: _sortableRole, tabIndex: _sortableTabIndex, ...sortableAttributes } = attributes;
+	const baseStyle = typeof props.style === "function" ? void 0 : props.style;
+	const style = {
+		...baseStyle,
+		transform: transform ? `translate3d(${transform.x}px, 0, 0)` : void 0,
+		transition,
+		zIndex: isDragging ? 20 : baseStyle?.zIndex
+	};
+	return /* @__PURE__ */ jsx(TabsTabButton, {
+		value,
+		sortableRef: setNodeRef,
+		"data-dragging-source": isDragging ? "true" : void 0,
+		"data-reorderable": "true",
+		style,
+		...props,
+		...sortableAttributes,
+		...listeners
+	});
+}
+function TabsTabButton({ value, sortableRef, className, children, ...props }) {
+	const theme = useThemeFamily();
+	const variant = use(TabsListVariantContext);
+	const { content, tab } = tabs({
+		theme,
+		variant: theme === "elegant" ? variant : "underline"
+	});
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		ref: (node) => {
+			sortableRef?.(node);
+		},
+		value,
+		"data-slot": "tabs-tab",
+		className: tab({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "tabs-tab-content",
+			className: content(),
+			children
+		})
+	});
+}
+function TabsLabel({ className, ...props }) {
+	const { label } = tabs();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "tabs-label",
+		className: label({ className }),
+		...props
+	});
+}
+function TabsPanel({ className, ...props }) {
+	const { panel } = tabs();
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		"data-slot": "tabs-panel",
+		className: panel({ className }),
+		...props
+	});
+}
+function TabsBackground({ className, ...props }) {
+	const theme = useThemeFamily();
+	const variant = use(TabsListVariantContext);
+	const { background } = tabs({
+		theme,
+		variant: theme === "elegant" ? variant : "underline"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "tabs-background",
+		className: background({ className }),
+		...props
+	});
+}
+function TabsIndicator({ className, ...props }) {
+	const theme = useThemeFamily();
+	const variant = use(TabsListVariantContext);
+	const { indicator } = tabs({
+		theme,
+		variant: theme === "elegant" ? variant : "underline"
+	});
+	return /* @__PURE__ */ jsx(Tabs$1.Indicator, {
+		"data-slot": "tabs-indicator",
+		className: indicator({ className }),
+		...props
+	});
+}
+function useOrderedTabs(items, storedOrder) {
+	return useMemo(() => reconcileTabOrder(items, storedOrder), [items, storedOrder]);
+}
+function reconcileTabOrder(items, order) {
+	const byId = new Map(items.map((item) => [item.id, item]));
+	const next = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const id of order) {
+		const item = byId.get(id);
+		if (!item || seen.has(item.id)) continue;
+		next.push(item);
+		seen.add(item.id);
+	}
+	for (const item of items) {
+		if (seen.has(item.id)) continue;
+		next.push(item);
+		seen.add(item.id);
+	}
+	return next;
+}
+//#endregion
+//#region src/lib/theme/theme-provider.tsx
+function readStoredTheme(storageKey, fallback) {
+	if (typeof window === "undefined" || !storageKey) return fallback;
+	const stored = window.localStorage.getItem(storageKey);
+	return stored === "brutal" || stored === "elegant" ? stored : fallback;
+}
+function readStoredMode(storageKey, fallback) {
+	if (typeof window === "undefined" || !storageKey) return fallback;
+	const stored = window.localStorage.getItem(storageKey);
+	return stored === "light" || stored === "dark" || stored === "system" ? stored : fallback;
+}
+function writeStorage(key, value) {
+	if (typeof window !== "undefined" && key) window.localStorage.setItem(key, value);
+}
+function subscribeSystemMode(onStoreChange) {
+	if (typeof window === "undefined") return () => void 0;
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	media.addEventListener("change", onStoreChange);
+	return () => media.removeEventListener("change", onStoreChange);
+}
+function getSystemMode() {
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeProvider({ theme, defaultTheme = "brutal", onThemeChange, mode, defaultMode = "light", onModeChange, storageKey, modeStorageKey = storageKey ? `${storageKey}-mode` : void 0, syncDom = true, children }) {
+	const [uncontrolledTheme, setUncontrolledTheme] = useState(() => readStoredTheme(storageKey, defaultTheme));
+	const [uncontrolledMode, setUncontrolledMode] = useState(() => readStoredMode(modeStorageKey, defaultMode));
+	const activeTheme = theme ?? uncontrolledTheme;
+	const activeMode = mode ?? uncontrolledMode;
+	const systemMode = useSyncExternalStore(subscribeSystemMode, getSystemMode, () => "light");
+	const resolvedMode = activeMode === "system" ? systemMode : activeMode;
+	const commitTheme = useCallback((nextTheme) => {
+		if (theme === void 0) {
+			setUncontrolledTheme(nextTheme);
+			writeStorage(storageKey, nextTheme);
+		}
+		onThemeChange?.(nextTheme);
+	}, [
+		onThemeChange,
+		storageKey,
+		theme
+	]);
+	const commitMode = useCallback((nextMode) => {
+		if (mode === void 0) {
+			setUncontrolledMode(nextMode);
+			writeStorage(modeStorageKey, nextMode);
+		}
+		onModeChange?.(nextMode);
+	}, [
+		mode,
+		modeStorageKey,
+		onModeChange
+	]);
+	const setTheme = useCallback((nextTheme, options) => {
+		commitTheme(nextTheme);
+		if (nextTheme === "brutal") {
+			commitMode("light");
+			return;
+		}
+		if (options?.mode) commitMode(options.mode);
+	}, [commitMode, commitTheme]);
+	const themeState = useMemo(() => ({
+		theme: activeTheme,
+		setTheme,
+		mode: activeMode,
+		resolvedMode
+	}), [
+		activeMode,
+		activeTheme,
+		resolvedMode,
+		setTheme
+	]);
+	useEffect(() => {
+		if (!syncDom) return;
+		const root = document.documentElement;
+		root.dataset.theme = activeTheme;
+		root.classList.toggle("light", activeTheme === "elegant" && activeMode === "light");
+		root.classList.toggle("dark", activeTheme === "elegant" && activeMode === "dark");
+		root.style.colorScheme = activeTheme === "elegant" ? resolvedMode : "light";
+	}, [
+		activeMode,
+		activeTheme,
+		resolvedMode,
+		syncDom
+	]);
+	return /* @__PURE__ */ jsx(ThemeStateContext.Provider, {
+		value: themeState,
+		children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
+			value: activeTheme,
+			children
+		})
+	});
+}
+//#endregion
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Banner, BannerAction, BannerDescription, BannerTitle, Button, Checkbox, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxHeader, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxTriggerIndicator, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemIndicator, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRadioItemIndicator, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenu, ContextMenuSubmenuTrigger, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuLabel, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubmenu, DropdownMenuSubmenuTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateContent, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupInput, Kbd, KbdGroup, Label, LabelAsterisk, LabelOptional, LabelSub, NotificationCenter, NotificationCenterActionButton, NotificationCenterCount, NotificationCenterEmptyState, NotificationCenterHeader, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemBody, NotificationCenterItemContent, NotificationCenterItemIcon, NotificationCenterItemRow, NotificationCenterItemTitle, NotificationCenterList, NotificationCenterPopup, NotificationCenterScroller, NotificationCenterTitle, NotificationCenterTrigger, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverSeparator, PopoverTitle, PopoverTrigger, PopoverViewport, RadioGroup, RadioGroupIndicator, RadioGroupItem, SegmentedControl, SegmentedControlCount, SegmentedControlItem, SegmentedControlLabel, Select, SelectArrow, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, SortableTabsList, SortableTabsTab, Spinner, Status, Tabs, TabsBackground, TabsIndicator, TabsLabel, TabsList, TabsPanel, TabsTab, Textarea, TextareaCounter, TextareaGroup, ThemeProvider, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, cn, useOrderedTabs, useTheme, useThemeFamily };