@dynamic-labs-sdk/droplet 1.14.0 → 1.17.0

package/dist/index.cjs

@@ -25,7 +25,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
-const require_toggle_row = require('./toggle-row-B7XCm0Z-.cjs');
+const require_toggle_row = require('./toggle-row-BafR1dY7.cjs');
 let react = require("react");
 let motion_react = require("motion/react");
 let _hugeicons_react = require("@hugeicons/react");
@@ -45,10 +45,10 @@ _radix_ui_react_collapsible = __toESM(_radix_ui_react_collapsible);
 let cmdk = require("cmdk");
 let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
 _radix_ui_react_dialog = __toESM(_radix_ui_react_dialog);
-let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-let lucide_react = require("lucide-react");
 let _radix_ui_react_popover = require("@radix-ui/react-popover");
 _radix_ui_react_popover = __toESM(_radix_ui_react_popover);
+let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+let lucide_react = require("lucide-react");
 let _radix_ui_react_radio_group = require("@radix-ui/react-radio-group");
 _radix_ui_react_radio_group = __toESM(_radix_ui_react_radio_group);
 let _radix_ui_react_scroll_area = require("@radix-ui/react-scroll-area");
@@ -64,7 +64,7 @@ let next_link = require("next/link");
 next_link = __toESM(next_link);
 
 //#region src/components/unsaved-changes-bar/unsaved-changes-bar.tsx
-const spring$3 = {
+const spring$4 = {
 	bounce: 0,
 	duration: .35,
 	type: "spring"
@@ -102,7 +102,7 @@ const ProgressiveBlur = () => {
 	});
 };
 const popTransition = {
-	...spring$3,
+	...spring$4,
 	duration: .25
 };
 const StatusIcon = ({ state }) => {
@@ -201,7 +201,7 @@ const UnsavedChangesBar = ({ hasChanges, onSave, onReset, suppressed = false })
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		exit: { opacity: 0 },
-		transition: spring$3,
+		transition: spring$4,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressiveBlur, {})
 	}, "blur") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "fixed bottom-10 left-1/2 -translate-x-1/2 z-50",
@@ -221,7 +221,7 @@ const UnsavedChangesBar = ({ hasChanges, onSave, onReset, suppressed = false })
 				scale: .95,
 				y: 20
 			},
-			transition: spring$3,
+			transition: spring$4,
 			style: { willChange: "opacity, transform" },
 			className: "flex items-center gap-1.5 rounded-xl bg-zinc-900 dark:bg-[oklch(0.940_0.008_231)] shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_8px_24px_-4px_rgba(0,0,0,0.25),0_20px_50px_-8px_rgba(0,0,0,0.20)] dark:shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_8px_20px_-4px_rgba(0,0,0,0.10),0_20px_50px_-8px_rgba(0,0,0,0.08)] pl-3 pr-1.5 py-1.5",
 			children: [
@@ -333,12 +333,12 @@ const AccordionTrigger = ({ className, children, ...props }) => {
 		className: "flex",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_accordion.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: require_toggle_row.cn("focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md px-1 py-4 text-left text-sm font-medium touch-manipulation transition-[color,background-color,opacity] duration-150 ease-out outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 cursor-pointer", className),
+			className: require_toggle_row.cn("focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md px-1 py-4 text-left text-sm font-medium touch-manipulation transition-[color,background-color,opacity] duration-150 ease-out motion-reduce:transition-none outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 cursor-pointer", className),
 			...props,
 			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
 				icon: _hugeicons_core_free_icons.ArrowRight01Icon,
 				size: 16,
-				className: "text-muted-foreground/60 pointer-events-none shrink-0 transition-transform duration-200 [*[data-state=open]>&]:rotate-90"
+				className: "text-muted-foreground/60 pointer-events-none shrink-0 transition-transform duration-200 ease-out motion-reduce:transition-none [*[data-state=open]>&]:rotate-90"
 			})]
 		})
 	});
@@ -355,6 +355,86 @@ const AccordionContent = ({ className, children, ...props }) => {
 	});
 };
 
+//#endregion
+//#region src/components/ui/tray/resolveTrayLayout.tsx
+/**
+* Resolves the droplet "tray" layout for a container (Dialog/Card/Sheet/AlertDialog).
+*
+* Convention (footer-priority): a container gets exactly one muted tray — the
+* **footer** when actions are present, otherwise the **header** (e.g. Table/CodeBlock).
+* The non-tray slots form the raised white shelf. Pass an explicit `tray` to override.
+*
+* Returns the partitioned pieces so each container can assemble its own shell +
+* shelf markup with the shared `--tray-*` tokens.
+*/
+const resolveTrayLayout = ({ children, isHeader, isFooter, tray = "auto" }) => {
+	const elements = react.Children.toArray(children).filter(react.isValidElement);
+	const header = elements.find(isHeader);
+	const footer = elements.find(isFooter);
+	let edge;
+	if (tray === "auto") if (footer) edge = "footer";
+	else if (header) edge = "header";
+	else edge = "none";
+	else edge = tray;
+	let trayChild = void 0;
+	if (edge === "footer") trayChild = footer;
+	else if (edge === "header") trayChild = header;
+	const shelf = react.Children.toArray(children).filter((child) => {
+		if (!(0, react.isValidElement)(child)) return true;
+		if (edge === "footer" && isFooter(child)) return false;
+		if (edge === "header" && isHeader(child)) return false;
+		return true;
+	});
+	return {
+		edge,
+		shelf,
+		trayChild
+	};
+};
+
+//#endregion
+//#region src/components/ui/tray/renderTrayLayout.tsx
+/**
+* Builds the shared droplet "tray" markup for a container (Dialog/Card/AlertDialog/…).
+*
+* Centralizes BOTH the convention (via {@link resolveTrayLayout}) and the render —
+* the muted shell classes + the raised white shelf wrapper + the tray-slot
+* placement — so every container (and new ones like Table/CodeBlock) shares one
+* implementation and can't drift. Each container keeps its own root element
+* (portal, animations, `shadow-elevated` vs `shadow-card`) and just merges
+* `shellClassName` + renders `content`.
+*
+* Note: this composes the tray treatment; it does **not** make any container
+* depend on `Card`. Containers stay independent primitives sharing a treatment.
+*/
+const renderTrayLayout = ({ children, isHeader, isFooter, tray = "auto", shelfClassName }) => {
+	const { edge, shelf, trayChild } = resolveTrayLayout({
+		children,
+		isFooter,
+		isHeader,
+		tray
+	});
+	if (edge === "none") return {
+		content: children,
+		edge,
+		shellClassName: "bg-card"
+	};
+	const shellClassName = require_toggle_row.cn("flex flex-col bg-[var(--tray-chrome)] px-[var(--tray-inset)]", edge === "footer" ? "pt-[var(--tray-inset)]" : "pb-[var(--tray-inset)]");
+	return {
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			edge === "header" && trayChild,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-slot": "tray-shelf",
+				className: require_toggle_row.cn("flex flex-1 flex-col overflow-hidden bg-card rounded-[var(--tray-shelf-radius)] shadow-[var(--tray-shelf-shadow)]", shelfClassName),
+				children: shelf
+			}),
+			edge === "footer" && trayChild
+		] }),
+		edge,
+		shellClassName
+	};
+};
+
 //#endregion
 //#region src/components/ui/alert-dialog/alert-dialog.tsx
 const AlertDialog = _radix_ui_react_alert_dialog.Root;
@@ -365,15 +445,25 @@ const AlertDialogOverlay = ({ className, ...props }) => /* @__PURE__ */ (0, reac
 	className: require_toggle_row.cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--overlay-md)] backdrop-blur-[2px] will-change-[opacity] duration-200 motion-reduce:animate-none", className),
 	...props
 });
-const AlertDialogContent = ({ className, size = "default", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_alert_dialog.Content, {
-	"data-slot": "alert-dialog-content",
-	"data-size": size,
-	className: require_toggle_row.cn("bg-muted overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-[16px] border-0 shadow-none duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md will-change-[opacity,transform] motion-reduce:animate-none", className),
-	...props
-})] });
+const AlertDialogContent = ({ className, size = "default", tray = "auto", children, ...props }) => {
+	const { edge, shellClassName, content } = renderTrayLayout({
+		children,
+		isFooter: (el) => el.type === AlertDialogFooter,
+		isHeader: (el) => el.type === AlertDialogHeader,
+		tray
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AlertDialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertDialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_alert_dialog.Content, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		"data-tray": edge,
+		className: require_toggle_row.cn("overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-[16px] border-0 shadow-[var(--shadow-elevated)] duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md will-change-[opacity,transform] motion-reduce:animate-none", shellClassName, className),
+		...props,
+		children: content
+	})] });
+};
 const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-slot": "alert-dialog-header",
-	className: require_toggle_row.cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 px-5 py-4 border-b bg-card text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+	className: require_toggle_row.cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 px-5 py-4 bg-card text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
 	...props
 });
 const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -383,7 +473,7 @@ const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, react
 });
 const AlertDialogTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_alert_dialog.Title, {
 	"data-slot": "alert-dialog-title",
-	className: require_toggle_row.cn("text-lg font-semibold text-balance sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+	className: require_toggle_row.cn("text-[17px] font-semibold text-balance sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
 	...props
 });
 const AlertDialogDescription = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_alert_dialog.Description, {
@@ -391,7 +481,7 @@ const AlertDialogDescription = ({ className, ...props }) => /* @__PURE__ */ (0,
 	className: require_toggle_row.cn("text-muted-foreground text-sm text-pretty", className),
 	...props
 });
-const AlertDialogAction = ({ className, variant = "default", size = "default", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toggle_row.Button, {
+const AlertDialogAction = ({ className, variant = "destructive", size = "default", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toggle_row.Button, {
 	variant,
 	size,
 	asChild: true,
@@ -436,11 +526,121 @@ const AvatarFallback = ({ className, ...props }) => {
 		...props
 	});
 };
+const AvatarBadge = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "avatar-badge",
+		className: require_toggle_row.cn("bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		...props
+	});
+};
+const AvatarGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "avatar-group",
+		className: require_toggle_row.cn("*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2", className),
+		...props
+	});
+};
+const AvatarGroupCount = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "avatar-group-count",
+		className: require_toggle_row.cn("bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		...props
+	});
+};
+
+//#endregion
+//#region src/components/ui/alert/alert.tsx
+const spring$3 = {
+	bounce: 0,
+	duration: .35,
+	type: "spring"
+};
+const alertVariants = (0, class_variance_authority.cva)("flex gap-3 rounded-xl border px-3.5 py-3 text-sm transition-[color,background-color,border-color] duration-150 motion-reduce:transition-none", {
+	defaultVariants: { variant: "neutral" },
+	variants: { variant: {
+		danger: "bg-[var(--danger-light)] text-[var(--text-danger)] border-[var(--border-danger)]/30",
+		info: "bg-[var(--brand-light)] text-[var(--text-link)] border-[var(--border-selected)]/30",
+		neutral: "bg-secondary text-secondary-foreground border-[var(--border-default)]",
+		success: "bg-[var(--success-light)] text-[var(--text-success)] border-[var(--border-success)]/30",
+		warning: "bg-[var(--warning-light)] text-[var(--text-warning)] border-[var(--border-warning)]/30"
+	} }
+});
+/** Maps each semantic variant to its Hugeicons icon. */
+const variantIcons = {
+	danger: _hugeicons_core_free_icons.AlertCircleIcon,
+	info: _hugeicons_core_free_icons.InformationCircleIcon,
+	neutral: _hugeicons_core_free_icons.InformationCircleIcon,
+	success: _hugeicons_core_free_icons.CheckmarkCircle02Icon,
+	warning: _hugeicons_core_free_icons.Alert01Icon
+};
+/**
+* An inline semantic callout for contextual feedback.
+*
+* Variants mirror the Badge semantic system: `neutral` (default) | `info` |
+* `success` | `warning` | `danger`. Each variant carries a matching background
+* tint, border, and leading icon drawn from the design-token set.
+*
+* - `danger` and `warning` use `role="alert"` (assertive); others use
+*   `role="status"` (polite) to avoid interrupting screen-reader flow.
+* - Use `dismissible` + `onDismiss` for user-closeable callouts.
+*
+* @example
+* <Alert variant="warning" title="Quota almost reached">
+*   You have used 90% of your monthly API calls.
+* </Alert>
+*/
+const Alert = ({ variant = "neutral", title, children, dismissible = false, onDismiss, className, ...props }) => {
+	const [dismissed, setDismissed] = (0, react.useState)(false);
+	const shouldReduceMotion = (0, motion_react.useReducedMotion)();
+	if (dismissed) return null;
+	const Icon$2 = variantIcons[variant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: variant === "danger" || variant === "warning" ? "alert" : "status",
+		"data-slot": "alert",
+		"data-variant": variant,
+		className: require_toggle_row.cn(alertVariants({ variant }), className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "shrink-0 mt-0.5 opacity-80",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: Icon$2,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex-1 min-w-0",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "font-medium leading-snug mb-0.5 text-pretty",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "leading-relaxed text-pretty",
+					children
+				})]
+			}),
+			dismissible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.button, {
+				type: "button",
+				"aria-label": "Dismiss",
+				whileTap: shouldReduceMotion ? void 0 : { scale: .96 },
+				transition: spring$3,
+				onClick: () => {
+					setDismissed(true);
+					onDismiss?.();
+				},
+				className: "relative before:absolute before:-inset-[13px] before:content-[''] shrink-0 mt-0.5 rounded-sm p-0.5 opacity-60 hover:opacity-100 transition-[opacity] duration-150 ease-out motion-reduce:transition-none touch-manipulation cursor-pointer",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.Cancel01Icon,
+					size: 14
+				})
+			})
+		]
+	});
+};
 
 //#endregion
 //#region src/components/ui/badge/badge.tsx
-const badgeVariants = (0, class_variance_authority.cva)("inline-flex items-center justify-center rounded-[5px] border border-transparent px-1.5 py-0.5 text-xs font-medium tabular-nums w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 [&>svg]:[stroke-width:2.5] gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow,background-color] duration-150 overflow-hidden", {
-	defaultVariants: { variant: "default" },
+const badgeVariants = (0, class_variance_authority.cva)("inline-flex items-center justify-center rounded-[5px] border border-transparent px-1.5 py-0.5 text-xs font-medium tabular-nums w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 [&>svg]:[stroke-width:2.5] gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow,background-color] duration-150 motion-reduce:transition-none overflow-hidden", {
+	defaultVariants: { variant: "neutral" },
 	variants: { variant: {
 		brand: "bg-[var(--brand-light)] text-[var(--brand-accented)] dark:text-[oklch(0.650_0.085_256)] border-[var(--brand-default)]/20 dark:border-[oklch(0.450_0.070_256)]/30 [a&]:hover:bg-[var(--brand-light)]/80",
 		danger: "bg-[var(--danger-light)] text-[var(--text-danger)] border-[var(--border-danger)]/20 [a&]:hover:bg-[var(--danger-light)]/80",
@@ -448,11 +648,12 @@ const badgeVariants = (0, class_variance_authority.cva)("inline-flex items-cente
 		"dashed-brand": "border-dashed border-[var(--brand-default)] text-[var(--brand-accented)] bg-transparent",
 		default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
 		destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-		ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+		ghost: "hover:bg-accent hover:text-accent-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 		"gradient-brand": "bg-gradient-to-r from-[var(--brand-default)] to-[var(--process-default)] text-white border-transparent",
 		"gradient-premium": "bg-gradient-to-r from-amber-500 to-orange-400 text-white border-transparent",
 		inactive: "bg-[var(--inactive-light)] text-muted-foreground border-[var(--border-inactive)]/40 [a&]:hover:bg-[var(--inactive-light)]/80",
-		link: "text-primary underline-offset-4 [a&]:hover:underline",
+		link: "text-primary underline-offset-4 hover:underline [a&]:hover:underline",
+		neutral: "bg-secondary text-secondary-foreground border-border [a&]:hover:bg-secondary/90",
 		outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 		process: "bg-[var(--process-light)] text-[var(--text-process)] border-[var(--border-process)]/20 [a&]:hover:bg-[var(--process-light)]/80",
 		secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
@@ -460,7 +661,17 @@ const badgeVariants = (0, class_variance_authority.cva)("inline-flex items-cente
 		warning: "bg-[var(--warning-light)] text-[var(--text-warning)] border-[var(--border-warning)]/20 [a&]:hover:bg-[var(--warning-light)]/80"
 	} }
 });
-const Badge = ({ className, variant = "default", asChild = false, ...props }) => {
+/**
+* A small status/label badge.
+*
+* Semantic variants (preferred): `neutral` (grey — the default), `brand`, `success`,
+* `warning`, `danger`, `process`, `inactive`. Pick the variant by meaning.
+*
+* The shadcn-style variants (`default`, `secondary`, `outline`, `ghost`, `link`,
+* `destructive`, `dashed`, `dashed-brand`, `gradient-brand`, `gradient-premium`) are
+* kept as deprecated aliases for backwards compatibility — prefer the semantic ones.
+*/
+const Badge = ({ className, variant = "neutral", asChild = false, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "span", {
 		"data-slot": "badge",
 		"data-variant": variant,
@@ -470,35 +681,154 @@ const Badge = ({ className, variant = "default", asChild = false, ...props }) =>
 };
 
 //#endregion
-//#region src/components/ui/card/card.tsx
-const Card = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	"data-slot": "card",
-	className: require_toggle_row.cn("bg-card text-card-foreground flex flex-col rounded-[16px] border-0 shadow-[var(--shadow-card)] overflow-hidden has-data-[slot=card-footer]:bg-muted/50", className),
+//#region src/components/ui/breadcrumb/breadcrumb.tsx
+/**
+* Root nav wrapper for a breadcrumb trail.
+* Renders a semantic `<nav>` with `aria-label="breadcrumb"` so assistive
+* technologies identify it as the site breadcrumb landmark.
+*/
+const Breadcrumb = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+	"data-slot": "breadcrumb",
+	"aria-label": "breadcrumb",
+	className: require_toggle_row.cn("", className),
+	...props
+});
+/**
+* Ordered list that holds `BreadcrumbItem` children.
+* Flex-wraps so long trails reflow gracefully on narrow viewports.
+*/
+const BreadcrumbList = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+	"data-slot": "breadcrumb-list",
+	className: require_toggle_row.cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
+	...props
+});
+/**
+* A single step in the breadcrumb trail.
+* Renders as an `<li>` with inline-flex layout so icon separators stay
+* vertically centered next to link text.
+*/
+const BreadcrumbItem = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+	"data-slot": "breadcrumb-item",
+	className: require_toggle_row.cn("inline-flex items-center gap-1.5", className),
 	...props
 });
+/**
+* A navigable breadcrumb step.
+*
+* Supports `asChild` (Radix Slot) so consumers can swap in a router `<Link>`:
+* ```tsx
+* <BreadcrumbLink asChild>
+*   <Link href='/settings'>Settings</Link>
+* </BreadcrumbLink>
+* ```
+*
+* Inherits `text-muted-foreground` from `BreadcrumbList` and upgrades to
+* `text-foreground` on hover with an `ease-out` transition.
+*/
+const BreadcrumbLink = ({ asChild = false, className, children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? _radix_ui_react_slot.Slot : "a", {
+		"data-slot": "breadcrumb-link",
+		className: require_toggle_row.cn("transition-colors duration-150 ease-out hover:text-foreground motion-reduce:transition-none", className),
+		...props,
+		children
+	});
+};
+/**
+* The current page indicator — the last (non-navigable) step in the trail.
+*
+* Renders as a `<span>` with `aria-current="page"` so screen readers announce
+* it as the current location. Not styled as a link; uses `text-foreground` to
+* visually distinguish it from the ancestor links.
+*/
+const BreadcrumbPage = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	"data-slot": "breadcrumb-page",
+	"aria-current": "page",
+	className: require_toggle_row.cn("font-normal text-foreground", className),
+	...props,
+	children
+});
+/**
+* Visual divider between breadcrumb steps.
+*
+* Hidden from assistive technologies via `aria-hidden`.
+* Accepts custom `children` to replace the default chevron with any icon or character.
+*/
+const BreadcrumbSeparator = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+	"data-slot": "breadcrumb-separator",
+	"aria-hidden": "true",
+	className: require_toggle_row.cn("[&>svg]:size-3.5", className),
+	...props,
+	children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+		icon: _hugeicons_core_free_icons.ArrowRight01Icon,
+		size: 14,
+		className: "text-muted-foreground/60",
+		"aria-hidden": "true"
+	})
+});
+/**
+* Collapsed-steps indicator for long breadcrumb trails.
+*
+* Renders a `MoreHorizontal` icon with a screen-reader-only "More" label.
+* Hidden from the accessibility tree via `aria-hidden` — the surrounding
+* visible crumbs provide sufficient context.
+*/
+const BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+	"data-slot": "breadcrumb-ellipsis",
+	"aria-hidden": "true",
+	className: require_toggle_row.cn("flex size-6 items-center justify-center", className),
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+		icon: _hugeicons_core_free_icons.MoreHorizontalIcon,
+		size: 14,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "sr-only",
+		children: "More"
+	})]
+});
+
+//#endregion
+//#region src/components/ui/card/card.tsx
+const Card = ({ className, interactive = false, selected = false, tray = "none", children, ...props }) => {
+	const { edge, shellClassName, content } = renderTrayLayout({
+		children,
+		isFooter: (el) => el.type === CardFooter,
+		isHeader: (el) => el.type === CardHeader,
+		tray
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "card",
+		"data-selected": selected || void 0,
+		"data-tray": edge,
+		className: require_toggle_row.cn("text-card-foreground flex flex-col rounded-[16px] border-0 shadow-[var(--shadow-card)] overflow-hidden", shellClassName, interactive && "cursor-pointer transition-[box-shadow,transform] duration-150 ease-out motion-reduce:transition-none hover:shadow-[var(--shadow-elevated)] active:scale-[0.99]", selected && "shadow-[0_0_0_2px_var(--action),var(--shadow-card)]", className),
+		...props,
+		children: content
+	});
+};
 const CardHeader = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-slot": "card-header",
-	className: require_toggle_row.cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-5 py-4 border-b bg-card has-data-[slot=card-action]:grid-cols-[1fr_auto]", className),
+	className: require_toggle_row.cn("@container/card-header relative flex flex-col gap-0.5 px-4 py-3.5 bg-card border-b border-[var(--border-divider)]", className),
 	...props
 });
-const CardTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const CardTitle = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 	"data-slot": "card-title",
-	className: require_toggle_row.cn("text-sm leading-none font-semibold text-balance", className),
-	...props
+	className: require_toggle_row.cn("text-base leading-none font-semibold text-balance", className),
+	...props,
+	children
 });
-const CardDescription = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const CardDescription = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 	"data-slot": "card-description",
-	className: require_toggle_row.cn("text-muted-foreground text-[13px] text-pretty", className),
+	className: require_toggle_row.cn("text-muted-foreground text-sm text-pretty", className),
 	...props
 });
 const CardContent = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-slot": "card-content",
-	className: require_toggle_row.cn("px-5 py-3.5 bg-card", className),
+	className: require_toggle_row.cn("flex-1 px-4 py-3 bg-card", className),
 	...props
 });
 const CardFooter = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-slot": "card-footer",
-	className: require_toggle_row.cn("flex items-center px-5 py-4 bg-muted/50", className),
+	className: require_toggle_row.cn("mt-auto flex items-center justify-end gap-2 px-4 py-3.5 border-t border-[var(--border-divider)] bg-muted", className),
 	...props
 });
 
@@ -529,14 +859,14 @@ const CheckIcon = ({ size = 14, strokeWidth = 3, className, ...props }) => /* @_
 const Checkbox = ({ className, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_checkbox.Root, {
 		"data-slot": "checkbox",
-		className: require_toggle_row.cn("group peer dark:bg-input/30 data-[state=checked]:bg-[var(--action)] data-[state=checked]:text-white dark:data-[state=checked]:bg-[var(--action)] data-[state=indeterminate]:bg-[var(--action)] data-[state=indeterminate]:text-white relative size-4 shrink-0 touch-manipulation rounded-[4px] border-0 shadow-[0_0_0_1px_rgba(31,41,55,0.20),0_1px_2px_0_rgba(0,0,0,0.06),0_0_1px_0_rgba(0,0,0,0.02)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.15),0_1px_2px_0_rgba(0,0,0,0.20),0_0_1px_0_rgba(0,0,0,0.06)] data-[state=checked]:shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_rgba(255,255,255,0.15)_inset,0px_2px_3px_0px_rgba(31,41,55,0.30),0px_1px_1px_0px_rgba(0,0,0,0.28)] dark:data-[state=checked]:shadow-[0px_1px_1px_0px_rgba(255,255,255,0.10)_inset,0px_2px_3px_0px_rgba(0,0,0,0.50),0px_1px_1px_0px_rgba(0,0,0,0.30)] data-[state=indeterminate]:shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_rgba(255,255,255,0.15)_inset,0px_2px_3px_0px_rgba(31,41,55,0.30),0px_1px_1px_0px_rgba(0,0,0,0.28)] dark:data-[state=indeterminate]:shadow-[0px_1px_1px_0px_rgba(255,255,255,0.10)_inset,0px_2px_3px_0px_rgba(0,0,0,0.50),0px_1px_1px_0px_rgba(0,0,0,0.30)] transition-[color,box-shadow,background-color] duration-200 ease outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:shadow-[0_0_0_1px_var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer before:absolute before:-inset-[12px] before:content-['']", className),
+		className: require_toggle_row.cn("group peer dark:bg-input/30 data-[state=checked]:bg-[var(--action)] data-[state=checked]:text-white dark:data-[state=checked]:bg-[var(--action)] data-[state=indeterminate]:bg-[var(--action)] data-[state=indeterminate]:text-white relative size-4 shrink-0 touch-manipulation rounded-[4px] border-0 shadow-[var(--shadow-control)] dark:shadow-[var(--shadow-control)] hover:data-[state=unchecked]:shadow-[var(--shadow-control-hover)] dark:hover:data-[state=unchecked]:shadow-[var(--shadow-control-hover)] data-[state=checked]:shadow-[var(--shadow-control-checked)] dark:data-[state=checked]:shadow-[var(--shadow-control-checked)] data-[state=indeterminate]:shadow-[var(--shadow-control-checked)] dark:data-[state=indeterminate]:shadow-[var(--shadow-control-checked)] transition-[color,box-shadow,background-color] duration-200 ease-out motion-reduce:transition-none outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:shadow-[0_0_0_1px_var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer after:absolute after:-inset-[14px] after:content-['']", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_checkbox.Indicator, {
 			"data-slot": "checkbox-indicator",
 			className: "relative grid place-content-center text-current size-full",
 			forceMount: true,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				className: "size-3.5 absolute inset-0 m-auto transition-[opacity,transform,filter] duration-200 opacity-0 scale-[0.25] blur-[4px] group-data-[state=indeterminate]:opacity-100 group-data-[state=indeterminate]:scale-100 group-data-[state=indeterminate]:blur-none",
+				className: "size-3.5 absolute inset-0 m-auto transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none opacity-0 scale-[0.25] blur-[4px] group-data-[state=indeterminate]:opacity-100 group-data-[state=indeterminate]:scale-100 group-data-[state=indeterminate]:blur-none",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
@@ -548,7 +878,7 @@ const Checkbox = ({ className, ...props }) => {
 					strokeWidth: 3
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				className: "size-3.5 absolute inset-0 m-auto transition-[opacity,transform,filter] duration-200 opacity-0 scale-[0.25] blur-[4px] group-data-[state=checked]:opacity-100 group-data-[state=checked]:scale-100 group-data-[state=checked]:blur-none",
+				className: "size-3.5 absolute inset-0 m-auto transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none opacity-0 scale-[0.25] blur-[4px] group-data-[state=checked]:opacity-100 group-data-[state=checked]:scale-100 group-data-[state=checked]:blur-none",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				stroke: "currentColor",
@@ -577,8 +907,9 @@ const CollapsibleTrigger = ({ className, ...props }) => {
 		...props
 	});
 };
-const CollapsibleContent = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_collapsible.CollapsibleContent, {
+const CollapsibleContent = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_collapsible.CollapsibleContent, {
 	"data-slot": "collapsible-content",
+	className: require_toggle_row.cn("overflow-hidden", "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up", "motion-reduce:animate-none", className),
 	...props
 });
 
@@ -599,22 +930,31 @@ const DialogOverlay = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx
 	className: require_toggle_row.cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-[var(--overlay-md)] backdrop-blur-[2px] will-change-[opacity] duration-200 data-[state=open]:ease-out data-[state=closed]:ease-in motion-reduce:animate-none", className),
 	...props
 });
-const DialogContent = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, {
-	"data-slot": "dialog-portal",
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Content, {
-		"data-slot": "dialog-content",
-		className: require_toggle_row.cn("bg-card overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-[16px] border-0 shadow-none duration-200 data-[state=open]:ease-out data-[state=closed]:ease-in outline-none sm:max-w-md will-change-[opacity,transform] motion-reduce:animate-none", className),
-		...props,
-		children
-	})]
-});
+const DialogContent = ({ className, children, tray = "auto", ...props }) => {
+	const { edge, shellClassName, content } = renderTrayLayout({
+		children,
+		isFooter: (el) => el.type === DialogFooter,
+		isHeader: (el) => el.type === DialogHeader,
+		tray
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, {
+		"data-slot": "dialog-portal",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Content, {
+			"data-slot": "dialog-content",
+			"data-tray": edge,
+			className: require_toggle_row.cn("overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-[16px] border-0 shadow-[var(--shadow-elevated)] duration-200 data-[state=open]:ease-out data-[state=closed]:ease-in outline-none sm:max-w-md will-change-[opacity,transform] motion-reduce:animate-none", shellClassName, className),
+			...props,
+			children: content
+		})]
+	});
+};
 const DialogHeader = ({ className, showCloseButton = true, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	"data-slot": "dialog-header",
-	className: require_toggle_row.cn("relative flex flex-col gap-1.5 px-5 pt-4 pb-4 border-b bg-card sm:text-left", className),
+	className: require_toggle_row.cn("relative flex flex-col gap-0.5 px-4 py-4 border-b border-[var(--border-hairline)] bg-card sm:text-left", className),
 	...props,
 	children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Close, {
 		"data-slot": "dialog-close",
-		className: "absolute top-3 right-3 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,background-color] duration-150 ease hover:opacity-100 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus:outline-hidden cursor-pointer touch-manipulation before:absolute before:-inset-[6px] before:content-[\"\"]",
+		className: "absolute top-1/2 right-2.5 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,background-color] duration-150 ease-out motion-reduce:transition-none hover:opacity-100 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus:outline-hidden cursor-pointer touch-manipulation before:absolute before:-inset-[8px] before:content-[\"\"]",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
 			icon: _hugeicons_core_free_icons.Cancel01Icon,
 			size: 14
@@ -626,12 +966,12 @@ const DialogHeader = ({ className, showCloseButton = true, children, ...props })
 });
 const DialogBody = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	"data-slot": "dialog-body",
-	className: require_toggle_row.cn("px-5 py-5 bg-card", className),
+	className: require_toggle_row.cn("px-4 py-[18px] bg-card", className),
 	...props
 });
 const DialogFooter = ({ className, showCloseButton = false, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	"data-slot": "dialog-footer",
-	className: require_toggle_row.cn("grid grid-cols-2 gap-2 px-5 py-4 bg-muted", className),
+	className: require_toggle_row.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end px-3 py-3.5 border-t border-[var(--border-divider)] bg-muted", className),
 	...props,
 	children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Close, {
 		asChild: true,
@@ -643,7 +983,7 @@ const DialogFooter = ({ className, showCloseButton = false, children, ...props }
 });
 const DialogTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
 	"data-slot": "dialog-title",
-	className: require_toggle_row.cn("text-lg leading-none font-semibold text-balance", className),
+	className: require_toggle_row.cn("text-[17px] leading-none font-semibold text-balance", className),
 	...props
 });
 const DialogDescription = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
@@ -652,86 +992,6 @@ const DialogDescription = ({ className, ...props }) => /* @__PURE__ */ (0, react
 	...props
 });
 
-//#endregion
-//#region src/components/icons/animated-icon/animated-icon.tsx
-const AnimatedIcon = (0, react.forwardRef)(({ children, className, onMouseEnter, onMouseLeave, size = 28, ...props }, ref) => {
-	const controls = (0, motion_react.useAnimation)();
-	const isControlledRef = (0, react.useRef)(false);
-	(0, react.useImperativeHandle)(ref, () => {
-		isControlledRef.current = true;
-		return {
-			startAnimation: () => controls.start("animate"),
-			stopAnimation: () => controls.start("normal")
-		};
-	});
-	const handleMouseEnter = (0, react.useCallback)((e) => {
-		if (isControlledRef.current) onMouseEnter?.(e);
-		else controls.start("animate").catch(() => void 0);
-	}, [controls, onMouseEnter]);
-	const handleMouseLeave = (0, react.useCallback)((e) => {
-		if (isControlledRef.current) onMouseLeave?.(e);
-		else controls.start("normal").catch(() => void 0);
-	}, [controls, onMouseLeave]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"aria-hidden": "true",
-		className: require_toggle_row.cn("inline-flex items-center justify-center", className),
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		...props,
-		children: children(controls, size)
-	});
-});
-AnimatedIcon.displayName = "AnimatedIcon";
-
-//#endregion
-//#region src/components/icons/search/search.tsx
-const SearchIcon = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIcon, {
-	ref,
-	...props,
-	children: (controls, size) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.motion.svg, {
-		animate: controls,
-		fill: "none",
-		height: size,
-		stroke: "currentColor",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		strokeWidth: "2",
-		transition: {
-			bounce: .3,
-			duration: 1
-		},
-		variants: {
-			animate: {
-				x: [
-					0,
-					0,
-					-3,
-					0
-				],
-				y: [
-					0,
-					-4,
-					0,
-					0
-				]
-			},
-			normal: {
-				x: 0,
-				y: 0
-			}
-		},
-		viewBox: "0 0 24 24",
-		width: size,
-		xmlns: "http://www.w3.org/2000/svg",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: "11",
-			cy: "11",
-			r: "8"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" })]
-	})
-}));
-SearchIcon.displayName = "SearchIcon";
-
 //#endregion
 //#region src/components/ui/command/command.tsx
 const Command = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command, {
@@ -739,23 +999,27 @@ const Command = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runti
 	className: require_toggle_row.cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
 	...props
 });
-const CommandDialog = ({ title = "Command Palette", description = "Search for a command to run...", children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Dialog, {
+const CommandDialog = ({ title = "Command Palette", description = "Search for a command to run...", children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
 	...props,
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, {
-		className: "sr-only",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description })]
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContent, {
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, {
 		className: require_toggle_row.cn("overflow-hidden p-0", className),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, {
+			className: "sr-only",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Command, {
 			className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
 			children
-		})
-	})]
+		})]
+	})
 });
 const CommandInput = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	"data-slot": "command-input-wrapper",
 	className: "flex h-9 items-center gap-2 border-b px-3",
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Input, {
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+		icon: _hugeicons_core_free_icons.Search01Icon,
+		size: 16,
+		className: "shrink-0 text-muted-foreground/70"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Input, {
 		"data-slot": "command-input",
 		className: require_toggle_row.cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props
@@ -763,7 +1027,7 @@ const CommandInput = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_
 });
 const CommandList = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.List, {
 	"data-slot": "command-list",
-	className: require_toggle_row.cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+	className: require_toggle_row.cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto p-1", className),
 	...props
 });
 const CommandEmpty = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Empty, {
@@ -773,7 +1037,7 @@ const CommandEmpty = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx
 });
 const CommandGroup = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Group, {
 	"data-slot": "command-group",
-	className: require_toggle_row.cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
+	className: require_toggle_row.cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
 	...props
 });
 const CommandSeparator = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command.Separator, {
@@ -792,6 +1056,95 @@ const CommandShortcut = ({ className, ...props }) => /* @__PURE__ */ (0, react_j
 	...props
 });
 
+//#endregion
+//#region src/components/ui/popover/popover.tsx
+const Popover = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
+	"data-slot": "popover",
+	...props
+});
+const PopoverTrigger = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
+	"data-slot": "popover-trigger",
+	...props
+});
+const PopoverContent = ({ className, align = "center", sideOffset = 8, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
+		"data-slot": "popover-content",
+		align,
+		sideOffset,
+		className: require_toggle_row.cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border-0 p-4 shadow-[var(--shadow-elevated)] outline-hidden will-change-[opacity,transform] motion-reduce:animate-none", className),
+		...props
+	}) });
+};
+const PopoverAnchor = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Anchor, {
+	"data-slot": "popover-anchor",
+	...props
+});
+
+//#endregion
+//#region src/components/ui/combobox/combobox.tsx
+/**
+* Searchable single-select Combobox.
+*
+* Composes `Popover`, `Button`, and `Command` from the droplet design system.
+* The trigger is a full-width `outline` Button with a rotating chevron that
+* signals open/closed state. Selecting an item closes the popover, fires
+* `onValueChange`, and shows a check mark next to the active selection.
+*
+* @example
+* ```tsx
+* const [chain, setChain] = useState('');
+* <Combobox
+*   options={[{ value: 'eth', label: 'Ethereum' }, { value: 'sol', label: 'Solana' }]}
+*   value={chain}
+*   onValueChange={setChain}
+*   placeholder="Select a chain"
+* />
+* ```
+*/
+const Combobox = ({ options, value, onValueChange, placeholder = "Select…", searchPlaceholder = "Search…", emptyText = "No results.", className, disabled = false }) => {
+	const [open, setOpen] = (0, react.useState)(false);
+	const selectedLabel = options.find((opt) => opt.value === value)?.label;
+	const handleSelect = (selectedValue) => {
+		onValueChange(selectedValue);
+		setOpen(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				"data-slot": "combobox-trigger",
+				"aria-expanded": open,
+				"aria-haspopup": "listbox",
+				disabled,
+				className: require_toggle_row.cn("flex h-8 w-full touch-manipulation items-center justify-between gap-1.5 rounded-md border-0 bg-background px-3 text-[13px] whitespace-nowrap dark:bg-input/30", "shadow-[var(--shadow-input)] hover:shadow-[var(--shadow-input-hover)]", "transition-[color,box-shadow] duration-100 ease-out motion-reduce:transition-none", "outline-none focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_var(--ring-halo)]", "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", className),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: require_toggle_row.cn("truncate", !selectedLabel && "text-muted-foreground/60"),
+					children: selectedLabel ?? placeholder
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+					icon: _hugeicons_core_free_icons.ArrowDown01Icon,
+					size: 16,
+					className: require_toggle_row.cn("shrink-0 opacity-50 transition-transform duration-150 ease-out motion-reduce:transition-none", open && "rotate-180")
+				})]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContent, {
+			className: "w-[var(--radix-popover-trigger-width)] p-0",
+			align: "start",
+			sideOffset: 4,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Command, {
+				className: "rounded-[inherit]",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandList, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandEmpty, { children: emptyText }), options.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CommandItem, {
+					value: opt.value,
+					onSelect: handleSelect,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { className: require_toggle_row.cn("shrink-0", value === opt.value ? "opacity-100" : "opacity-0") }), opt.label]
+				}, opt.value))] })]
+			})
+		})]
+	});
+};
+
 //#endregion
 //#region src/components/ui/dropdown-menu/dropdown-menu.tsx
 const DropdownMenu = _radix_ui_react_dropdown_menu.Root;
@@ -801,7 +1154,7 @@ const DropdownMenuSub = _radix_ui_react_dropdown_menu.Sub;
 const DropdownMenuContent = (0, react.forwardRef)(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
 	ref,
 	sideOffset,
-	className: require_toggle_row.cn("z-50 min-w-32 overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	className: require_toggle_row.cn("z-50 min-w-32 overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-[var(--shadow-elevated)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none", className),
 	...props
 }) }));
 DropdownMenuContent.displayName = _radix_ui_react_dropdown_menu.Content.displayName;
@@ -818,7 +1171,7 @@ const DropdownMenuCheckboxItem = (0, react.forwardRef)(({ className, children, c
 	...props,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "absolute left-2 flex size-3.5 items-center justify-center",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: "size-4" }) })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CheckIcon, { className: "size-3.5" }) })
 	}), children]
 }));
 DropdownMenuCheckboxItem.displayName = _radix_ui_react_dropdown_menu.CheckboxItem.displayName;
@@ -835,6 +1188,7 @@ const DropdownMenuRadioItem = (0, react.forwardRef)(({ className, children, ...p
 DropdownMenuRadioItem.displayName = _radix_ui_react_dropdown_menu.RadioItem.displayName;
 const DropdownMenuLabel = (0, react.forwardRef)(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Label, {
 	ref,
+	"data-slot": "dropdown-menu-label",
 	className: require_toggle_row.cn("px-2 py-1.5 text-sm font-medium", inset && "pl-8", className),
 	...props
 }));
@@ -846,6 +1200,7 @@ const DropdownMenuSeparator = (0, react.forwardRef)(({ className, ...props }, re
 }));
 DropdownMenuSeparator.displayName = _radix_ui_react_dropdown_menu.Separator.displayName;
 const DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	"aria-hidden": "true",
 	className: require_toggle_row.cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
 	...props
 });
@@ -859,11 +1214,141 @@ const DropdownMenuSubTrigger = (0, react.forwardRef)(({ className, inset, childr
 DropdownMenuSubTrigger.displayName = _radix_ui_react_dropdown_menu.SubTrigger.displayName;
 const DropdownMenuSubContent = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.SubContent, {
 	ref,
-	className: require_toggle_row.cn("z-50 min-w-32 overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	className: require_toggle_row.cn("z-50 min-w-32 overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none", className),
 	...props
 }));
 DropdownMenuSubContent.displayName = _radix_ui_react_dropdown_menu.SubContent.displayName;
 
+//#endregion
+//#region src/components/ui/well/well.tsx
+const wellVariants = (0, class_variance_authority.cva)("rounded-xl", {
+	defaultVariants: {
+		gap: "sm",
+		spacing: "default",
+		variant: "inset"
+	},
+	variants: {
+		gap: {
+			default: "space-y-4",
+			lg: "space-y-5",
+			none: "",
+			sm: "space-y-3"
+		},
+		spacing: {
+			default: "p-4",
+			lg: "p-5",
+			none: "p-0",
+			sm: "p-3"
+		},
+		variant: {
+			default: "bg-muted/50",
+			inset: "bg-muted/50 border border-border",
+			outline: "border border-border"
+		}
+	}
+});
+const Well = ({ className, gap, spacing, variant, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	"data-slot": "well",
+	"data-spacing": spacing ?? "default",
+	className: require_toggle_row.cn(wellVariants({
+		gap,
+		spacing,
+		variant
+	}), className),
+	...props
+});
+const WellReveal = ({ children, className, open }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: "grid transition-[grid-template-rows] duration-[220ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+	style: { gridTemplateRows: open ? "1fr" : "0fr" },
+	"aria-hidden": !open,
+	inert: !open,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "overflow-hidden",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_toggle_row.cn("px-0.5 pb-0.5 [&>[data-slot=well]:not([data-spacing=none])]:p-[22px]", className),
+			children
+		})
+	})
+});
+
+//#endregion
+//#region src/components/ui/flush-card-stack/flush-card-stack.tsx
+const DETACH_GAP_PX = 12;
+/**
+* Declarative item marker for {@link FlushCardStack}. Renders nothing on its own;
+* the stack consumes its props.
+*/
+const FlushCardStackItem = (_props) => null;
+const isStackItem = (child) => (0, react.isValidElement)(child) && child.type === FlushCardStackItem;
+const hasReveal = (item) => Boolean(item.props.children);
+const detaches = (item) => hasReveal(item) && Boolean(item.props.open);
+/**
+* A vertical stack of settings cards that fuse into one block by default and
+* detach with a spring gap when an item's reveal is opened.
+*
+* Composed from {@link Card} + {@link WellReveal} (+ `motion`); it encapsulates
+* the `-mt-px` / `rounded-[16px]` / gap math so consumers pass only per-item
+* `open` + content:
+*
+* ```tsx
+* <FlushCardStack>
+*   <FlushCardStack.Item open={emailOn} header={<ToggleRow … />}>
+*     <Well gap='sm'>{/* checkbox rows *\/}</Well>
+*   </FlushCardStack.Item>
+*   <FlushCardStack.Item header={<ToggleRow … />} />
+* </FlushCardStack>
+* ```
+*
+* Rule: a seam (12px spring gap + facing edges rounding to `rounded-[16px]`)
+* opens between two cards when EITHER side is an open reveal item — so an open
+* middle item floats free on both sides, while an open first/last item produces a
+* single inner split. Items with no reveal, or closed reveals, always fuse.
+*/
+const FlushCardStack = ({ children, className }) => {
+	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
+	const items = react.Children.toArray(children).filter(isStackItem);
+	const lastIndex = items.length - 1;
+	const gapTransition = prefersReducedMotion ? { duration: 0 } : {
+		bounce: 0,
+		duration: .4,
+		type: "spring"
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "flush-card-stack",
+		className,
+		children: items.map((item, index) => {
+			const prev = items[index - 1];
+			const next = items[index + 1];
+			const isFirst = index === 0;
+			const isLast = index === lastIndex;
+			const splitAbove = !isFirst && (detaches(item) || detaches(prev));
+			const splitBelow = !isLast && (detaches(item) || detaches(next));
+			const roundTop = isFirst || splitAbove;
+			const roundBottom = isLast || splitBelow;
+			const gapPossible = !isLast && (hasReveal(item) || hasReveal(next));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
+				"data-detached": detaches(item) || void 0,
+				className: require_toggle_row.cn("gap-0 py-0 transition-[border-radius] duration-300", !roundTop && "rounded-t-none -mt-px", !roundBottom && "rounded-b-none", item.props.className),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "px-5 py-4",
+					children: item.props.header
+				}), hasReveal(item) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WellReveal, {
+					open: Boolean(item.props.open),
+					children: item.props.children
+				})]
+			}), gapPossible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.motion.div, {
+				"aria-hidden": true,
+				"data-slot": "flush-card-gap",
+				"data-open": splitBelow || void 0,
+				initial: false,
+				animate: { height: splitBelow ? DETACH_GAP_PX : 0 },
+				transition: gapTransition
+			})] }, item.key ?? index);
+		})
+	});
+};
+FlushCardStack.Item = FlushCardStackItem;
+
 //#endregion
 //#region src/components/icon-config/icon-config.tsx
 const IconConfigContext = (0, react.createContext)({
@@ -907,6 +1392,76 @@ const Icon = (props) => {
 	});
 };
 
+//#endregion
+//#region src/components/ui/field/field.tsx
+/**
+* A generic labeled form-field wrapper.
+*
+* Wires a `<Label>`, an arbitrary form control, an optional description, and
+* an error message together with the correct `id`/`htmlFor`/`aria-describedby`
+* associations so callers don't have to hand-assemble these.
+*
+* When there is exactly one child element, `Field` uses `cloneElement` to
+* inject:
+* - `id` — links the label's `htmlFor` to the control
+* - `aria-describedby` — references the description and/or error paragraph ids
+* - `aria-invalid` — `true` when `error` is present
+*
+* @example
+* ```tsx
+* <Field label="Email" description="We'll never share your email." required>
+*   <Input type="email" />
+* </Field>
+*
+* <Field label="Email" error="Enter a valid email address.">
+*   <Input type="email" />
+* </Field>
+* ```
+*/
+const Field = ({ label, description, error, required, htmlFor, children, className }) => {
+	const generatedId = (0, react.useId)();
+	const controlId = htmlFor ?? generatedId;
+	const descriptionId = `${controlId}-description`;
+	const errorId = `${controlId}-error`;
+	const describedByParts = [];
+	if (description) describedByParts.push(descriptionId);
+	if (error) describedByParts.push(errorId);
+	const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+	const childArray = react.Children.toArray(children);
+	const singleChild = childArray.length === 1 && (0, react.isValidElement)(childArray[0]) ? childArray[0] : null;
+	const enrichedChild = singleChild ? (0, react.cloneElement)(singleChild, {
+		"aria-describedby": singleChild.props["aria-describedby"] ?? ariaDescribedBy,
+		id: singleChild.props.id ?? controlId,
+		...error ? { "aria-invalid": true } : {}
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_toggle_row.cn("grid gap-1.5", className),
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_toggle_row.Label, {
+				htmlFor: controlId,
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: "ml-0.5 text-[var(--text-danger)]",
+					children: "*"
+				})]
+			}),
+			enrichedChild ?? children,
+			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				id: descriptionId,
+				className: "text-sm text-muted-foreground",
+				children: description
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				id: errorId,
+				role: "alert",
+				className: "text-sm text-[var(--text-danger)]",
+				children: error
+			})
+		]
+	});
+};
+Field.displayName = "Field";
+
 //#endregion
 //#region src/components/ui/kbd/kbd.tsx
 const Kbd = ({ className, ...props }) => {
@@ -917,30 +1472,6 @@ const Kbd = ({ className, ...props }) => {
 	});
 };
 
-//#endregion
-//#region src/components/ui/popover/popover.tsx
-const Popover = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
-	"data-slot": "popover",
-	...props
-});
-const PopoverTrigger = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
-	"data-slot": "popover-trigger",
-	...props
-});
-const PopoverContent = ({ className, align = "center", sideOffset = 4, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
-		"data-slot": "popover-content",
-		align,
-		sideOffset,
-		className: require_toggle_row.cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-98 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-xl border-0 p-4 shadow-[var(--shadow-elevated)] outline-hidden will-change-[opacity,transform] motion-reduce:animate-none", className),
-		...props
-	}) });
-};
-const PopoverAnchor = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Anchor, {
-	"data-slot": "popover-anchor",
-	...props
-});
-
 //#endregion
 //#region src/components/ui/progress/progress.tsx
 const progressVariants = (0, class_variance_authority.cva)("h-full w-full flex-1 transition-transform duration-500 ease-out motion-reduce:transition-none", {
@@ -954,44 +1485,257 @@ const progressVariants = (0, class_variance_authority.cva)("h-full w-full flex-1
 		warning: "bg-[var(--warning-default)]"
 	} }
 });
-const Progress = ({ className, indeterminate = false, value, variant, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-	"data-slot": "progress",
-	className: require_toggle_row.cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+const Progress = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, indeterminate = false, value, variant, ...props }) => {
+	const clamped = Math.min(100, Math.max(0, value ?? 0));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "progress",
+		className: require_toggle_row.cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("progress", {
+			"aria-label": ariaLabel ?? "Progress",
+			"aria-labelledby": ariaLabelledBy,
+			className: "sr-only",
+			max: 100,
+			value: indeterminate ? void 0 : clamped
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "progress-indicator",
+			className: require_toggle_row.cn(progressVariants({ variant }), indeterminate && "animate-progress-indeterminate motion-reduce:animate-none"),
+			style: indeterminate ? void 0 : { transform: `translateX(-${100 - clamped}%)` }
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/ui/radio-group/radio-group.tsx
+const RadioGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Root, {
+		"data-slot": "radio-group",
+		className: require_toggle_row.cn("grid gap-3", className),
+		...props
+	});
+};
+const RadioGroupItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Item, {
+		"data-slot": "radio-group-item",
+		className: require_toggle_row.cn("text-[var(--action)] dark:bg-input/30 relative aspect-square size-4 shrink-0 touch-manipulation rounded-full border border-[rgba(31,41,55,0.30)] dark:border-[rgba(255,255,255,0.20)] hover:data-[state=unchecked]:border-[rgba(31,41,55,0.45)] dark:hover:data-[state=unchecked]:border-[rgba(255,255,255,0.35)] data-[state=checked]:border-[var(--action)] shadow-[var(--shadow-radio)] dark:shadow-[var(--shadow-radio)] transition-[color,box-shadow,border-color] duration-100 ease-out motion-reduce:transition-none outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-[var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer after:absolute after:-inset-[14px] after:content-['']", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "group/indicator relative flex items-center justify-center",
+			forceMount: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "bg-[var(--action)] absolute top-1/2 left-1/2 size-2 rounded-full -translate-x-1/2 -translate-y-1/2 transition-[opacity,transform] duration-150 ease-out motion-reduce:transition-none group-data-[state=unchecked]/indicator:scale-0 group-data-[state=unchecked]/indicator:opacity-0" })
+		})
+	});
+};
+/**
+* Alias for `RadioGroupItem` for use in labeled-row patterns.
+*
+* A radio is inherently part of a group — it must always live inside a
+* `RadioGroup`. For a standalone on/off toggle, prefer `Checkbox` or `Switch`.
+* `Radio` is the labeled-usage alias that signals "I'm pairing this with a
+* `<Label>`" rather than constructing raw item markup.
+*/
+const Radio = RadioGroupItem;
+/**
+* A convenience labeled-radio row for use inside a `RadioGroup`.
+*
+* Renders a `RadioGroupItem` paired with an associated `<Label>` (and an
+* optional description line) so callers don't have to wire up `id`/`htmlFor`
+* by hand. The `id` is stable across renders via `React.useId` unless
+* overridden.
+*
+* @example
+* ```tsx
+* <RadioGroup value={val} onValueChange={setVal}>
+*   <RadioField value="a" label="Option A" description="First choice" />
+*   <RadioField value="b" label="Option B" />
+* </RadioGroup>
+* ```
+*/
+const RadioField = ({ value, label, description, disabled, id: idProp, className }) => {
+	const generatedId = (0, react.useId)();
+	const id = idProp ?? generatedId;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_toggle_row.cn("flex items-start gap-3", disabled && "opacity-50", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupItem, {
+			value,
+			id,
+			disabled,
+			className: "mt-0.5"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "grid gap-0.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toggle_row.Label, {
+				htmlFor: id,
+				className: require_toggle_row.cn("cursor-pointer transition-colors duration-100 ease-out motion-reduce:transition-none", disabled && "cursor-not-allowed"),
+				children: label
+			}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm text-muted-foreground",
+				children: description
+			})]
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/ui/pagination/pagination.tsx
+/**
+* Root nav wrapper for a pagination control set.
+* Renders a semantic `<nav>` with the ARIA `navigation` landmark.
+*/
+const Pagination = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+	"data-slot": "pagination",
+	role: "navigation",
+	"aria-label": "pagination",
+	className: require_toggle_row.cn("mx-auto flex w-full justify-center", className),
+	...props
+});
+/**
+* Flex row that holds `PaginationItem` children.
+* Renders as a `<ul>` for correct list semantics inside the nav landmark.
+*/
+const PaginationContent = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+	"data-slot": "pagination-content",
+	className: require_toggle_row.cn("flex flex-row items-center gap-1", className),
+	...props
+});
+/**
+* A single `<li>` slot inside `PaginationContent`.
+* Acts as a structural wrapper — pair with `PaginationLink`, `PaginationPrevious`, or `PaginationNext`.
+*/
+const PaginationItem = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+	"data-slot": "pagination-item",
+	className: require_toggle_row.cn("", className),
+	...props
+});
+/**
+* An individual page link.
+* Applies `buttonVariants` — `outline` when active, `ghost` when inactive — so focus rings,
+* `ease-out` transitions, and `motion-reduce` suppression are all inherited from Button's CVA base.
+*/
+const PaginationLink = ({ className, isActive = false, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+	"data-slot": "pagination-link",
+	"aria-current": isActive ? "page" : void 0,
+	className: require_toggle_row.cn(require_toggle_row.buttonVariants({
+		size: "icon-sm",
+		variant: isActive ? "outline" : "ghost"
+	}), className),
+	...props,
+	children
+});
+/**
+* Previous-page control.
+* Disabled when the consumer passes `aria-disabled="true"` or the native `disabled` attribute.
+* Touch target is expanded to 44 px via the pseudo-element already baked into `icon-sm`.
+*/
+const PaginationPrevious = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+	"data-slot": "pagination-previous",
+	"aria-label": "Go to previous page",
+	className: require_toggle_row.cn(require_toggle_row.buttonVariants({
+		size: "icon-sm",
+		variant: "ghost"
+	}), "gap-1 pl-2.5", className),
 	...props,
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("progress", {
-		"aria-label": "Progress",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+		icon: _hugeicons_core_free_icons.ArrowLeft01Icon,
+		size: 14,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "sr-only",
-		max: 100,
-		value: indeterminate ? void 0 : value ?? 0
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-slot": "progress-indicator",
-		className: require_toggle_row.cn(progressVariants({ variant }), indeterminate && "animate-progress-indeterminate motion-reduce:animate-none"),
-		style: indeterminate ? void 0 : { transform: `translateX(-${100 - (value ?? 0)}%)` }
+		children: children ?? "Previous"
 	})]
 });
-
-//#endregion
-//#region src/components/ui/radio-group/radio-group.tsx
-const RadioGroup = ({ className, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Root, {
-		"data-slot": "radio-group",
-		className: require_toggle_row.cn("grid gap-3", className),
-		...props
-	});
-};
-const RadioGroupItem = ({ className, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Item, {
-		"data-slot": "radio-group-item",
-		className: require_toggle_row.cn("text-[var(--action)] dark:bg-input/30 relative aspect-square size-4 shrink-0 touch-manipulation rounded-full border border-[rgba(31,41,55,0.30)] dark:border-[rgba(255,255,255,0.20)] data-[state=checked]:border-[var(--action)] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_0_1px_rgba(31,41,55,0.08)] dark:shadow-[0_1px_2px_rgba(0,0,0,0.20),0_0_1px_rgba(0,0,0,0.15)] transition-[color,box-shadow,border-color] duration-100 ease-out outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-[var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer before:absolute before:-inset-[12px] before:content-['']", className),
-		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_radio_group.Indicator, {
-			"data-slot": "radio-group-indicator",
-			className: "group/indicator relative flex items-center justify-center",
-			forceMount: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "bg-[var(--action)] absolute top-1/2 left-1/2 size-2 rounded-full -translate-x-1/2 -translate-y-1/2 transition-[opacity,transform] duration-150 ease-out group-data-[state=unchecked]/indicator:scale-0 group-data-[state=unchecked]/indicator:opacity-0" })
+/**
+* Next-page control.
+* Touch target is expanded to 44 px via the pseudo-element already baked into `icon-sm`.
+*/
+const PaginationNext = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+	"data-slot": "pagination-next",
+	"aria-label": "Go to next page",
+	className: require_toggle_row.cn(require_toggle_row.buttonVariants({
+		size: "icon-sm",
+		variant: "ghost"
+	}), "gap-1 pr-2.5", className),
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+		icon: _hugeicons_core_free_icons.ArrowRight01Icon,
+		size: 14,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "sr-only",
+		children: children ?? "Next"
+	})]
+});
+/**
+* Ellipsis placeholder shown between non-contiguous page ranges.
+* Hidden from assistive technologies via `aria-hidden` — screen readers hear the surrounding page
+* numbers and can infer that pages are omitted.
+*/
+const PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+	"data-slot": "pagination-ellipsis",
+	"aria-hidden": "true",
+	className: require_toggle_row.cn("flex size-7 items-center justify-center text-muted-foreground", className),
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+		icon: _hugeicons_core_free_icons.MoreHorizontalIcon,
+		size: 14
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "sr-only",
+		children: "More pages"
+	})]
+});
+/**
+* Pre-assembled cursor-based pagination bar.
+*
+* Renders a Previous button, an optional center label, and a Next button.
+* Each button is disabled automatically when there is no page in that direction.
+* Designed for dashboard tables and lists that use cursor/keyset pagination rather
+* than numbered pages — which is the dominant pattern in the Redcoast design system.
+*
+* @example
+* ```tsx
+* <CursorPagination
+*   hasPrevious={!!cursor.before}
+*   hasNext={!!cursor.after}
+*   onPrevious={loadPrevious}
+*   onNext={loadNext}
+*   label={`${startIndex}–${endIndex} of ${total}`}
+* />
+* ```
+*/
+const CursorPagination = ({ hasPrevious, hasNext, onPrevious, onNext, label, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	"data-slot": "cursor-pagination",
+	className: require_toggle_row.cn("flex items-center justify-between gap-2", className),
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_toggle_row.Button, {
+			variant: "ghost",
+			size: "sm",
+			disabled: !hasPrevious,
+			onClick: onPrevious,
+			"aria-label": "Go to previous page",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.ArrowLeft01Icon,
+				size: 14,
+				"aria-hidden": "true"
+			}), "Previous"]
+		}),
+		label !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-sm text-muted-foreground tabular-nums",
+			children: label
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_toggle_row.Button, {
+			variant: "ghost",
+			size: "sm",
+			disabled: !hasNext,
+			onClick: onNext,
+			"aria-label": "Go to next page",
+			children: ["Next", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
+				icon: _hugeicons_core_free_icons.ArrowRight01Icon,
+				size: 14,
+				"aria-hidden": "true"
+			})]
 		})
-	});
-};
+	]
+});
 
 //#endregion
 //#region src/components/ui/scroll-area/scroll-area.tsx
@@ -1003,7 +1747,7 @@ const ScrollArea = ({ className, children, ...props }) => {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_scroll_area.Viewport, {
 				"data-slot": "scroll-area-viewport",
-				className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+				className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] motion-reduce:transition-none outline-none focus-visible:ring-[3px]",
 				children
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollBar, {}),
@@ -1015,7 +1759,7 @@ const ScrollBar = ({ className, orientation = "vertical", ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_scroll_area.ScrollAreaScrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation,
-		className: require_toggle_row.cn("flex touch-none touch-manipulation p-px transition-[background-color] select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
+		className: require_toggle_row.cn("flex touch-none touch-manipulation p-px transition-[background-color] motion-reduce:transition-none select-none", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent", className),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_scroll_area.ScrollAreaThumb, {
 			"data-slot": "scroll-area-thumb",
@@ -1030,14 +1774,14 @@ const SearchInput = ({ className, placeholder = "Search...", shortcut = "⌘K",
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		"data-slot": "search-input",
-		className: require_toggle_row.cn("h-8 min-h-11 w-full touch-manipulation rounded-md border border-border bg-background dark:bg-input/30 md:min-h-0", "hover:border-foreground/20", "transition-[color,box-shadow,border-color] duration-100 ease-out", "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", "flex items-center gap-2 px-3", "text-sm text-muted-foreground/60 cursor-pointer", className),
+		className: require_toggle_row.cn("h-8 w-full touch-manipulation rounded-md border-0 bg-background dark:bg-input/30 shadow-[var(--shadow-input)]", "hover:shadow-[var(--shadow-input-hover)]", "transition-[color,box-shadow] duration-100 ease-out motion-reduce:transition-none", "outline-none focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_var(--ring-halo,#0072EF26)]", "flex items-center gap-2 px-2", "text-sm text-muted-foreground/60 cursor-pointer", className),
 		onClick,
 		...props,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
 				icon: _hugeicons_core_free_icons.Search01Icon,
-				size: 14,
-				className: "shrink-0 text-muted-foreground"
+				size: 16,
+				className: "shrink-0 text-muted-foreground/70"
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "flex-1 text-left",
@@ -1065,27 +1809,27 @@ const SelectValue = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)
 const SelectTrigger = ({ className, size = "default", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Trigger, {
 	"data-slot": "select-trigger",
 	"data-size": size,
-	className: require_toggle_row.cn("data-[placeholder]:text-muted-foreground/60 [&_svg:not([class*='text-'])]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 flex w-fit touch-manipulation items-center justify-between gap-1.5 rounded-md border-0 bg-transparent px-3 py-2 text-[13px] whitespace-nowrap shadow-[var(--shadow-input)] hover:shadow-[var(--shadow-input-hover)] transition-[color,box-shadow] duration-100 ease-out outline-none focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_rgba(0,114,239,0.15)] aria-invalid:shadow-[0_0_0_1px_var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:text-[13px] data-[size=sm]:px-2.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+	className: require_toggle_row.cn("data-[placeholder]:text-muted-foreground/60 [&_svg:not([class*='text-'])]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 flex w-fit touch-manipulation items-center justify-between gap-1.5 rounded-md border-0 bg-transparent px-3 py-2 text-[13px] whitespace-nowrap shadow-[var(--shadow-input)] hover:shadow-[var(--shadow-input-hover)] transition-[color,box-shadow] duration-100 ease-out outline-none focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_var(--ring-halo,#0072EF26)] aria-invalid:shadow-[0_0_0_1px_var(--destructive)] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:text-[13px] data-[size=sm]:px-2.5 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[state=open]:[&>svg:last-of-type]:rotate-180", className),
 	...props,
 	children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Icon, {
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
 			icon: _hugeicons_core_free_icons.ArrowDown01Icon,
 			size: 16,
-			className: "opacity-50"
+			className: "opacity-50 transition-transform duration-150 ease-out motion-reduce:transition-none"
 		})
 	})]
 });
 const SelectContent = ({ className, children, position = "popper", align = "start", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Content, {
 	"data-slot": "select-content",
-	className: require_toggle_row.cn("bg-popover text-popover-foreground will-change-[opacity,transform] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 shadow-[var(--shadow-elevated)]", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+	className: require_toggle_row.cn("bg-popover text-popover-foreground will-change-[opacity,transform] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 shadow-[var(--shadow-elevated)]", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
 	position,
 	align,
 	...props,
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollUpButton, {}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Viewport, {
-			className: require_toggle_row.cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
+			className: require_toggle_row.cn("p-1", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
 			children
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectScrollDownButton, {})
@@ -1098,14 +1842,14 @@ const SelectLabel = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_r
 });
 const SelectItem = ({ className, children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Item, {
 	"data-slot": "select-item",
-	className: require_toggle_row.cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+	className: require_toggle_row.cn("data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-medium [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 	...props,
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-slot": "select-item-indicator",
 		className: "absolute right-2 flex size-3.5 items-center justify-center",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
 			icon: _hugeicons_core_free_icons.Tick01Icon,
-			size: 16
+			size: 14
 		}) })
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemText, { children })]
 });
@@ -1120,7 +1864,8 @@ const SelectScrollUpButton = ({ className, ...props }) => /* @__PURE__ */ (0, re
 	...props,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
 		icon: _hugeicons_core_free_icons.ArrowUp01Icon,
-		size: 16
+		size: 16,
+		"aria-hidden": true
 	})
 });
 const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ScrollDownButton, {
@@ -1129,7 +1874,8 @@ const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ (0,
 	...props,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
 		icon: _hugeicons_core_free_icons.ArrowDown01Icon,
-		size: 16
+		size: 16,
+		"aria-hidden": true
 	})
 });
 
@@ -1138,7 +1884,7 @@ const SelectScrollDownButton = ({ className, ...props }) => /* @__PURE__ */ (0,
 const SelectableCard = ({ badge, className, description, icon, iconSize = 20, label, selected, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 	"data-slot": "selectable-card",
 	"data-selected": selected,
-	className: require_toggle_row.cn("group/card relative flex flex-col items-start gap-2.5 p-4 rounded-xl text-left transition-[box-shadow,background-color,scale] duration-150 touch-manipulation active:scale-[0.96] cursor-pointer w-full outline-none focus-visible:shadow-[0_0_0_1.5px_var(--action),0_0_0_4px_oklch(from_var(--action)_l_c_h_/_0.25)]", selected ? "bg-[var(--action)]/5 shadow-[0_0_0_1.5px_var(--action)]" : "shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.12)] hover:shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.20)]", className),
+	className: require_toggle_row.cn("group/card relative flex flex-col items-start gap-2.5 p-4 rounded-xl text-left transition-[box-shadow,background-color,scale] duration-150 motion-reduce:transition-none touch-manipulation active:scale-[0.96] cursor-pointer w-full outline-none focus-visible:shadow-[0_0_0_1.5px_var(--action),0_0_0_4px_oklch(from_var(--action)_l_c_h_/_0.25)]", selected ? "bg-[var(--action)]/5 shadow-[0_0_0_1.5px_var(--action)]" : "shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.12)] hover:shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.20)]", className),
 	...props,
 	children: [
 		icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
@@ -1165,10 +1911,10 @@ const SelectableCard = ({ badge, className, description, icon, iconSize = 20, la
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "absolute top-4 right-4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_toggle_row.cn("relative size-4 shrink-0 rounded-[4px] transition-[color,box-shadow,background-color] duration-200 ease", selected ? "bg-[var(--action)] text-white shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_oklch(1_0_0_/_0.07)_inset,0px_2px_3px_0px_oklch(0.278_0.03_256.85_/_0.20),0px_1px_1px_0px_oklch(0_0_0_/_0.24)]" : "shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.20),0_1px_2px_0_oklch(0_0_0_/_0.06),0_0_1px_0_oklch(0_0_0_/_0.02)] group-hover/card:shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.30),0_1px_2px_0_oklch(0_0_0_/_0.06),0_0_1px_0_oklch(0_0_0_/_0.02)]"),
+				className: require_toggle_row.cn("relative size-4 shrink-0 rounded-[4px] transition-[color,box-shadow,background-color] duration-200 ease-out motion-reduce:transition-none", selected ? "bg-[var(--action)] text-white shadow-[0_0_0_1px_var(--action),0px_1px_1px_0px_oklch(1_0_0_/_0.07)_inset,0px_2px_3px_0px_oklch(0.278_0.03_256.85_/_0.20),0px_1px_1px_0px_oklch(0_0_0_/_0.24)]" : "shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.20),0_1px_2px_0_oklch(0_0_0_/_0.06),0_0_1px_0_oklch(0_0_0_/_0.02)] group-hover/card:shadow-[0_0_0_1px_oklch(0.278_0.03_256.85_/_0.30),0_1px_2px_0_oklch(0_0_0_/_0.06),0_0_1px_0_oklch(0_0_0_/_0.02)]"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {
 					size: 14,
-					className: require_toggle_row.cn("absolute inset-0 m-auto text-current transition-[opacity,transform,filter] duration-200", selected ? "opacity-100 scale-100 blur-none" : "opacity-0 scale-[0.25] blur-[4px]")
+					className: require_toggle_row.cn("absolute inset-0 m-auto text-current transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none", selected ? "opacity-100 scale-100 blur-none" : "opacity-0 scale-[0.25] blur-[4px]")
 				})
 			})
 		})
@@ -1186,6 +1932,41 @@ const Separator = (0, react.forwardRef)(({ className, orientation = "horizontal"
 }));
 Separator.displayName = _radix_ui_react_separator.Root.displayName;
 
+//#endregion
+//#region src/components/ui/slider/slider.tsx
+/**
+* Controlled range slider built on a native `<input type="range">`.
+*
+* Zero-dependency — all styling is done with Tailwind arbitrary variants so
+* no Radix/Headless UI install is needed. The filled portion is rendered via an
+* inline CSS custom property so the gradient stays in sync with the value without
+* any JS animation loop.
+*/
+const Slider = ({ value, onValueChange, min = 0, max = 100, step = 1, disabled = false, className }) => {
+	const clamped = Math.min(max, Math.max(min, value));
+	const range = max - min;
+	const fillPercent = range === 0 ? 0 : (clamped - min) / range * 100;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "slider",
+		className: require_toggle_row.cn("relative flex w-full touch-manipulation items-center", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "range",
+			"data-slot": "slider-input",
+			min,
+			max,
+			step,
+			value: clamped,
+			disabled,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			"aria-valuenow": clamped,
+			onChange: (e) => onValueChange(Number(e.target.value)),
+			className: require_toggle_row.cn("w-full appearance-none bg-transparent outline-none", "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-1.5", "[&::-webkit-slider-runnable-track]:w-full", "[&::-webkit-slider-runnable-track]:rounded-full", "[&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_right,var(--action)_var(--slider-fill,0%),var(--bg-accented)_var(--slider-fill,0%))]", "[&::-webkit-slider-runnable-track]:transition-[background-size] [&::-webkit-slider-runnable-track]:duration-150 [&::-webkit-slider-runnable-track]:ease-out", "[&::-webkit-slider-runnable-track]:motion-reduce:transition-none", "[&::-webkit-slider-thumb]:appearance-none", "[&::-webkit-slider-thumb]:size-4", "[&::-webkit-slider-thumb]:rounded-full", "[&::-webkit-slider-thumb]:bg-background", "[&::-webkit-slider-thumb]:border", "[&::-webkit-slider-thumb]:border-[var(--action)]", "[&::-webkit-slider-thumb]:shadow-[var(--shadow-control-thumb)]", "[&::-webkit-slider-thumb]:-mt-[5px]", "[&::-webkit-slider-thumb]:transition-[box-shadow] [&::-webkit-slider-thumb]:duration-150 [&::-webkit-slider-thumb]:ease-out", "[&::-webkit-slider-thumb]:motion-reduce:transition-none", "focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_var(--ring-halo),var(--shadow-control-thumb)]", "[&::-moz-range-track]:h-1.5", "[&::-moz-range-track]:w-full", "[&::-moz-range-track]:rounded-full", "[&::-moz-range-track]:bg-[var(--bg-accented)]", "[&::-moz-range-progress]:h-1.5", "[&::-moz-range-progress]:rounded-full", "[&::-moz-range-progress]:bg-[var(--action)]", "[&::-moz-range-thumb]:size-4", "[&::-moz-range-thumb]:rounded-full", "[&::-moz-range-thumb]:border", "[&::-moz-range-thumb]:border-[var(--action)]", "[&::-moz-range-thumb]:bg-background", "[&::-moz-range-thumb]:shadow-[var(--shadow-control-thumb)]", "[&::-moz-range-thumb]:transition-[box-shadow] [&::-moz-range-thumb]:duration-150 [&::-moz-range-thumb]:ease-out", "[&::-moz-range-thumb]:motion-reduce:transition-none", "focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_var(--ring-halo),var(--shadow-control-thumb)]"),
+			style: { "--slider-fill": `${fillPercent}%` }
+		})
+	});
+};
+
 //#endregion
 //#region src/components/ui/sheet/sheet.tsx
 const Sheet = ({ ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Root, {
@@ -1217,7 +1998,7 @@ const SheetContent = ({ className, children, side = "right", showCloseButton = t
 		className: require_toggle_row.cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 border-0 shadow-[var(--shadow-elevated)] [animation-timing-function:cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:duration-150 data-[state=open]:duration-200 will-change-[opacity,transform] motion-reduce:animate-none", side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm rounded-l-xl rounded-r-md", side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm rounded-r-xl rounded-l-md", side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto rounded-b-md", side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto rounded-t-md", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Close, {
-			className: "absolute top-3 right-3 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,background-color] duration-150 ease hover:opacity-100 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus:outline-hidden disabled:pointer-events-none cursor-pointer touch-manipulation before:absolute before:-inset-[6px] before:content-['']",
+			className: "absolute top-3 right-3 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,background-color] duration-150 ease-out motion-reduce:transition-none hover:opacity-100 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50 focus:outline-hidden disabled:pointer-events-none cursor-pointer touch-manipulation before:absolute before:-inset-2 before:content-['']",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_hugeicons_react.HugeiconsIcon, {
 				icon: _hugeicons_core_free_icons.Cancel01Icon,
 				size: 14
@@ -1231,14 +2012,14 @@ const SheetContent = ({ className, children, side = "right", showCloseButton = t
 const SheetHeader = ({ className, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "sheet-header",
-		className: require_toggle_row.cn("flex flex-col gap-1.5 p-4", className),
+		className: require_toggle_row.cn("flex flex-col gap-0.5 px-4 py-3.5 border-b border-[var(--border-divider)]", className),
 		...props
 	});
 };
 const SheetFooter = ({ className, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "sheet-footer",
-		className: require_toggle_row.cn("mt-auto flex flex-col gap-2 p-4", className),
+		className: require_toggle_row.cn("mt-auto flex flex-col gap-2 px-4 py-3.5 border-t border-[var(--border-divider)] bg-muted", className),
 		...props
 	});
 };
@@ -1260,9 +2041,10 @@ const SheetDescription = ({ className, ...props }) => {
 //#endregion
 //#region src/components/ui/skeleton/skeleton.tsx
 const Skeleton = ({ className, ...props }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
+		"aria-label": "Loading",
 		"data-slot": "skeleton",
-		className: require_toggle_row.cn("bg-accent animate-shimmer motion-reduce:animate-none rounded-md bg-[length:200%_100%] bg-gradient-to-r from-accent via-accent/50 to-accent", className),
+		className: require_toggle_row.cn("block bg-accent animate-shimmer motion-reduce:animate-none rounded-md bg-[length:200%_100%] bg-gradient-to-r from-accent via-accent/50 to-accent dark:via-accent/70", className),
 		...props
 	});
 };
@@ -1320,27 +2102,64 @@ const Toaster = ({ ...props }) => {
 };
 
 //#endregion
-//#region src/components/ui/spinner/spinner.tsx
-const Spinner = ({ className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
-	"aria-label": "Loading",
-	className: "inline-flex",
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		className: require_toggle_row.cn("size-4 animate-spin motion-reduce:animate-none", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			className: "opacity-25",
-			cx: "12",
-			cy: "12",
-			r: "10",
-			stroke: "currentColor",
-			strokeWidth: "4"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			className: "opacity-75",
-			fill: "currentColor",
-			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-		})]
+//#region src/components/ui/stepper/stepper.tsx
+/**
+* Horizontal step indicator that renders an ordered sequence of steps with
+* connector lines between them.
+*
+* - **COMPLETED** (index < currentStep): filled action-coloured circle + white checkmark.
+* - **CURRENT** (index === currentStep): action-coloured border + step number; label is font-medium.
+* - **UPCOMING** (index > currentStep): muted border + step number.
+*
+* Connector lines between adjacent steps are action-coloured when the segment
+* is completed (both endpoints are ≤ currentStep) and divider-coloured otherwise.
+*
+* @example
+* <Stepper steps={[{ label: 'Account' }, { label: 'Details' }, { label: 'Review' }]} currentStep={1} />
+*/
+const Stepper = ({ steps, currentStep, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+	"aria-label": "Progress",
+	className: require_toggle_row.cn("flex w-full items-start", className),
+	...props,
+	children: steps.map((step, index) => {
+		const isCompleted = index < currentStep;
+		const isCurrent = index === currentStep;
+		const connectorCompleted = index > 0 && index <= currentStep;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+			className: require_toggle_row.cn("flex flex-1 items-start", index === steps.length - 1 && "flex-none"),
+			"aria-current": isCurrent ? "step" : void 0,
+			children: [
+				index > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"aria-hidden": "true",
+					className: require_toggle_row.cn("mt-3.5 h-px flex-1 transition-colors duration-300 ease-out motion-reduce:transition-none", connectorCompleted ? "bg-[var(--action)]" : "bg-[var(--border-divider)]")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"aria-hidden": "true",
+							className: require_toggle_row.cn("flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-[background-color,border-color,color] duration-300 ease-out motion-reduce:transition-none select-none", isCompleted && "bg-[var(--action)] text-white", isCurrent && "border-2 border-[var(--action)] text-[var(--action)]", !isCompleted && !isCurrent && "border border-[var(--border-default)] text-muted-foreground"),
+							children: isCompleted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {
+								size: 13,
+								strokeWidth: 3
+							}) : String(index + 1)
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: require_toggle_row.cn("max-w-[6rem] text-center text-xs leading-tight transition-colors duration-300 ease-out motion-reduce:transition-none", isCurrent ? "font-medium text-foreground" : "text-muted-foreground"),
+							children: step.label
+						}),
+						step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "max-w-[6rem] text-center text-[10px] leading-tight text-muted-foreground",
+							children: step.description
+						})
+					]
+				}),
+				index < steps.length - 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"aria-hidden": "true",
+					className: require_toggle_row.cn("mt-3.5 h-px flex-1 transition-colors duration-300 ease-out motion-reduce:transition-none", index + 1 <= currentStep ? "bg-[var(--action)]" : "bg-[var(--border-divider)]")
+				})
+			]
+		}, step.label);
 	})
 });
 
@@ -1360,7 +2179,7 @@ const Table = ({ className, ...props }) => {
 const TableHeader = ({ className, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
 		"data-slot": "table-header",
-		className: require_toggle_row.cn("[&_tr]:border-b [&_tr]:border-[var(--border-divider)] [&_tr]:hover:bg-transparent bg-[var(--bg-accented)]/50 sticky top-0 z-10", className),
+		className: require_toggle_row.cn("[&_tr]:border-b [&_tr]:border-[var(--border-divider)] [&_tr]:hover:bg-transparent bg-[var(--bg-accented)]/50 sticky top-0 z-20", className),
 		...props
 	});
 };
@@ -1385,10 +2204,11 @@ const TableRow = ({ className, ...props }) => {
 		...props
 	});
 };
-const TableHead = ({ className, ...props }) => {
+const TableHead = ({ className, scope, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 		"data-slot": "table-head",
-		className: require_toggle_row.cn("text-muted-foreground h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
+		scope: scope ?? "col",
+		className: require_toggle_row.cn("text-muted-foreground h-10 px-3 text-left align-middle text-xs font-medium whitespace-nowrap tabular-nums [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 };
@@ -1436,24 +2256,155 @@ const TabsList = ({ className, variant = "default", ...props }) => {
 const TabsTrigger = ({ className, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tabs.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: require_toggle_row.cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap touch-manipulation transition-[color,background-color,border-color,box-shadow,opacity] duration-150 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground", "after:bg-foreground after:absolute after:opacity-0 after:transition-[opacity] group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
+		className: require_toggle_row.cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap touch-manipulation transition-[color,background-color,border-color,box-shadow,opacity] duration-150 motion-reduce:transition-none group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground", "after:bg-foreground after:absolute after:opacity-0 after:transition-[opacity] after:motion-reduce:transition-none group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className),
 		...props
 	});
 };
 const TabsContent = ({ className, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tabs.Content, {
 		"data-slot": "tabs-content",
-		className: require_toggle_row.cn("flex-1 outline-none", className),
+		className: require_toggle_row.cn("flex-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:rounded-md", className),
 		...props
 	});
 };
 
+//#endregion
+//#region src/components/ui/toggle-group/toggle-group.tsx
+const ToggleGroupContext = (0, react.createContext)(null);
+const useToggleGroupContext = () => {
+	const ctx = (0, react.useContext)(ToggleGroupContext);
+	if (!ctx) throw new Error("ToggleGroupItem must be used inside a ToggleGroup");
+	return ctx;
+};
+/**
+* Segmented control container that manages single or multiple selection.
+* Renders a rounded pill-track styled with the muted background token.
+* Provides context and implements roving keyboard navigation across items.
+*
+* @example
+* // Single selection
+* <ToggleGroup type="single" value={view} onValueChange={setView}>
+*   <ToggleGroupItem value="day">Day</ToggleGroupItem>
+*   <ToggleGroupItem value="week">Week</ToggleGroupItem>
+* </ToggleGroup>
+*
+* @example
+* // Multiple selection
+* <ToggleGroup type="multiple" value={formats} onValueChange={setFormats}>
+*   <ToggleGroupItem value="bold">B</ToggleGroupItem>
+*   <ToggleGroupItem value="italic">I</ToggleGroupItem>
+* </ToggleGroup>
+*/
+const ToggleGroup = ({ type, value, onValueChange, disabled = false, className, children, ...props }) => {
+	const groupId = (0, react.useId)();
+	const containerRef = (0, react.useRef)(null);
+	const handleKeyDown = (0, react.useCallback)((e) => {
+		const container = containerRef.current;
+		if (!container) return;
+		const items = Array.from(container.querySelectorAll("button[data-slot=\"toggle-group-item\"]:not([disabled])"));
+		if (items.length === 0) return;
+		const focused = document.activeElement;
+		const idx = items.indexOf(focused);
+		let next;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault();
+			next = (idx + 1) % items.length;
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault();
+			next = (idx - 1 + items.length) % items.length;
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			next = 0;
+		} else if (e.key === "End") {
+			e.preventDefault();
+			next = items.length - 1;
+		} else return;
+		items[next]?.focus();
+	}, []);
+	const contextValue = (0, react.useMemo)(() => type === "single" ? {
+		disabled,
+		groupId,
+		onValueChange,
+		type: "single",
+		value
+	} : {
+		disabled,
+		groupId,
+		onValueChange,
+		type: "multiple",
+		value
+	}, [
+		disabled,
+		groupId,
+		onValueChange,
+		type,
+		value
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: containerRef,
+			"data-slot": "toggle-group",
+			role: type === "single" ? "radiogroup" : "toolbar",
+			onKeyDown: handleKeyDown,
+			className: require_toggle_row.cn("inline-flex items-center rounded-lg bg-muted p-[3px] gap-0.5", disabled && "opacity-50 pointer-events-none", className),
+			...props,
+			children
+		})
+	});
+};
+/**
+* An individual button within a ToggleGroup.
+* Reads context to determine selection state and fires the appropriate
+* onValueChange callback on click. Mirrors the elevated/pill styling of
+* the active tab trigger (bg-background + shadow) when selected.
+*/
+const ToggleGroupItem = ({ value, disabled, className, children, onClick, ...props }) => {
+	const ctx = useToggleGroupContext();
+	const isDisabled = disabled ?? ctx.disabled;
+	const isActive = ctx.type === "single" ? ctx.value === value : ctx.value.includes(value);
+	const handleClick = (e) => {
+		if (isDisabled) return;
+		if (ctx.type === "single") {
+			if (ctx.value !== value) ctx.onValueChange(value);
+		} else {
+			const next = ctx.value.includes(value) ? ctx.value.filter((v) => v !== value) : [...ctx.value, value];
+			ctx.onValueChange(next);
+		}
+		onClick?.(e);
+	};
+	const tabIndex = isActive ? 0 : -1;
+	const sharedButtonProps = {
+		className: require_toggle_row.cn("relative inline-flex h-8 flex-1 items-center justify-center gap-1.5", "rounded-md px-3 text-sm font-medium whitespace-nowrap", "cursor-pointer", "text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground", "transition-[color,background-color,box-shadow] duration-150 ease-out motion-reduce:transition-none", "data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm", "dark:data-[state=on]:bg-input/30 dark:data-[state=on]:text-foreground dark:data-[state=on]:border dark:data-[state=on]:border-input", "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		"data-slot": "toggle-group-item",
+		"data-state": isActive ? "on" : "off",
+		disabled: isDisabled,
+		onClick: handleClick,
+		tabIndex,
+		type: "button"
+	};
+	if (ctx.type === "single") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...sharedButtonProps,
+		role: "radio",
+		"aria-checked": isActive,
+		name: ctx.groupId,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...sharedButtonProps,
+		"aria-pressed": isActive,
+		...props,
+		children
+	});
+};
+
 //#endregion
 //#region src/components/ui/textarea/textarea.tsx
 const Textarea = ({ className, ...props }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
 		"data-slot": "textarea",
-		className: require_toggle_row.cn("placeholder:text-muted-foreground/60 dark:bg-input/30 flex field-sizing-content min-h-16 w-full touch-manipulation rounded-md border-0 bg-background px-3 py-2 text-base shadow-[var(--shadow-input)] transition-[color,box-shadow] duration-100 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "hover:shadow-[var(--shadow-input-hover)]", "focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_rgba(0,114,239,0.15)]", "aria-invalid:shadow-[0_0_0_1px_var(--destructive),0_0_1px_0_var(--destructive)]", className),
+		className: require_toggle_row.cn("placeholder:text-muted-foreground/60 dark:bg-input/30 flex field-sizing-content min-h-20 w-full touch-manipulation rounded-md border-0 bg-background px-3 py-2 text-base shadow-[var(--shadow-input)] transition-[color,box-shadow] duration-100 ease-out outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "hover:shadow-[var(--shadow-input-hover)]", "focus-visible:shadow-[0_0_0_1px_var(--ring),0_0_0_4px_var(--ring-halo,#0072EF26)]", "aria-invalid:shadow-[0_0_0_1px_var(--destructive),0_0_1px_0_var(--destructive)]", className),
 		...props
 	});
 };
@@ -1463,65 +2414,14 @@ const Textarea = ({ className, ...props }) => {
 const TooltipProvider = _radix_ui_react_tooltip.Provider;
 const Tooltip = _radix_ui_react_tooltip.Root;
 const TooltipTrigger = _radix_ui_react_tooltip.Trigger;
-const TooltipContent = (0, react.forwardRef)(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Content, {
+const TooltipContent = (0, react.forwardRef)(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Content, {
 	ref,
 	sideOffset,
-	className: require_toggle_row.cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	className: require_toggle_row.cn("z-50 max-w-xs overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground animate-in fade-in-0 zoom-in-95 duration-150 ease-out data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-100 data-[state=closed]:ease-in data-[side=bottom]:slide-in-from-top-2 data-[side=bottom]:origin-top data-[side=left]:slide-in-from-right-2 data-[side=left]:origin-right data-[side=right]:slide-in-from-left-2 data-[side=right]:origin-left data-[side=top]:slide-in-from-bottom-2 data-[side=top]:origin-bottom motion-reduce:animate-none", className),
 	...props
 }) }));
 TooltipContent.displayName = _radix_ui_react_tooltip.Content.displayName;
 
-//#endregion
-//#region src/components/ui/well/well.tsx
-const wellVariants = (0, class_variance_authority.cva)("rounded-2xl", {
-	defaultVariants: {
-		gap: "sm",
-		spacing: "default",
-		variant: "inset"
-	},
-	variants: {
-		gap: {
-			default: "space-y-4",
-			lg: "space-y-5",
-			none: "",
-			sm: "space-y-3"
-		},
-		spacing: {
-			default: "p-4",
-			lg: "p-5",
-			none: "p-0",
-			sm: "p-3"
-		},
-		variant: {
-			default: "bg-muted/50",
-			inset: "bg-muted/50 border border-border",
-			outline: "border border-border"
-		}
-	}
-});
-const Well = ({ className, gap, spacing, variant, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	"data-slot": "well",
-	"data-spacing": spacing ?? "default",
-	className: require_toggle_row.cn(wellVariants({
-		gap,
-		spacing,
-		variant
-	}), className),
-	...props
-});
-const WellReveal = ({ children, className, open }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-	className: "grid transition-[grid-template-rows] duration-[220ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
-	style: { gridTemplateRows: open ? "1fr" : "0fr" },
-	"aria-hidden": !open,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "overflow-hidden",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: require_toggle_row.cn("px-0.5 pb-0.5 [&>[data-slot=well]:not([data-spacing=none])]:p-[22px]", className),
-			children
-		})
-	})
-});
-
 //#endregion
 //#region src/components/asset-icon/asset-icon.tsx
 const aliases = {
@@ -2381,6 +3281,37 @@ const ToggleCard = ({ accordionKey, title, description, inputProps, allowExpand
 	});
 };
 
+//#endregion
+//#region src/components/icons/animated-icon/animated-icon.tsx
+const AnimatedIcon = (0, react.forwardRef)(({ children, className, onMouseEnter, onMouseLeave, size = 28, ...props }, ref) => {
+	const controls = (0, motion_react.useAnimation)();
+	const isControlledRef = (0, react.useRef)(false);
+	(0, react.useImperativeHandle)(ref, () => {
+		isControlledRef.current = true;
+		return {
+			startAnimation: () => controls.start("animate"),
+			stopAnimation: () => controls.start("normal")
+		};
+	});
+	const handleMouseEnter = (0, react.useCallback)((e) => {
+		if (isControlledRef.current) onMouseEnter?.(e);
+		else controls.start("animate").catch(() => void 0);
+	}, [controls, onMouseEnter]);
+	const handleMouseLeave = (0, react.useCallback)((e) => {
+		if (isControlledRef.current) onMouseLeave?.(e);
+		else controls.start("normal").catch(() => void 0);
+	}, [controls, onMouseLeave]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": "true",
+		className: require_toggle_row.cn("inline-flex items-center justify-center", className),
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		...props,
+		children: children(controls, size)
+	});
+});
+AnimatedIcon.displayName = "AnimatedIcon";
+
 //#endregion
 //#region src/components/icons/arrow-up-right/arrow-up-right.tsx
 const ArrowUpRightIcon = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIcon, {
@@ -3660,6 +4591,55 @@ const RefreshCWIcon = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 }));
 RefreshCWIcon.displayName = "RefreshCWIcon";
 
+//#endregion
+//#region src/components/icons/search/search.tsx
+const SearchIcon = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIcon, {
+	ref,
+	...props,
+	children: (controls, size) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.motion.svg, {
+		animate: controls,
+		fill: "none",
+		height: size,
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		transition: {
+			bounce: .3,
+			duration: 1
+		},
+		variants: {
+			animate: {
+				x: [
+					0,
+					0,
+					-3,
+					0
+				],
+				y: [
+					0,
+					-4,
+					0,
+					0
+				]
+			},
+			normal: {
+				x: 0,
+				y: 0
+			}
+		},
+		viewBox: "0 0 24 24",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "11",
+			cy: "11",
+			r: "8"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" })]
+	})
+}));
+SearchIcon.displayName = "SearchIcon";
+
 //#endregion
 //#region src/components/icons/settings/settings.tsx
 const SettingsIcon = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIcon, {
@@ -3892,6 +4872,7 @@ exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
 exports.AccordionTrigger = AccordionTrigger;
+exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
 exports.AlertDialogAction = AlertDialogAction;
 exports.AlertDialogCancel = AlertDialogCancel;
@@ -3908,9 +4889,19 @@ exports.ArrowUpRightIcon = ArrowUpRightIcon;
 exports.AskAIAction = AskAIAction;
 exports.AssetIcon = AssetIcon;
 exports.Avatar = Avatar;
+exports.AvatarBadge = AvatarBadge;
 exports.AvatarFallback = AvatarFallback;
+exports.AvatarGroup = AvatarGroup;
+exports.AvatarGroupCount = AvatarGroupCount;
 exports.AvatarImage = AvatarImage;
 exports.Badge = Badge;
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.BreadcrumbLink = BreadcrumbLink;
+exports.BreadcrumbList = BreadcrumbList;
+exports.BreadcrumbPage = BreadcrumbPage;
+exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.Button = require_toggle_row.Button;
 exports.Card = Card;
 exports.CardContent = CardContent;
@@ -3928,6 +4919,7 @@ exports.CodeBlock = CodeBlock;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent;
 exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.Combobox = Combobox;
 exports.Command = Command;
 exports.CommandDialog = CommandDialog;
 exports.CommandEmpty = CommandEmpty;
@@ -3941,6 +4933,7 @@ exports.CopyButton = CopyButton;
 exports.CopyCheckIcon = CopyCheckIcon;
 exports.CopyIcon = CopyIcon;
 exports.CursorLogo = CursorLogo;
+exports.CursorPagination = CursorPagination;
 exports.DangerZone = DangerZone;
 exports.Dialog = Dialog;
 exports.DialogBody = DialogBody;
@@ -3971,7 +4964,9 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
+exports.Field = Field;
 exports.FingerprintIcon = FingerprintIcon;
+exports.FlushCardStack = FlushCardStack;
 exports.HomeIcon = HomeIcon;
 exports.Icon = Icon;
 exports.IconConfigProvider = IconConfigProvider;
@@ -3986,6 +4981,13 @@ exports.MetricCard = MetricCard;
 exports.MoonIcon = MoonIcon;
 exports.OpenAILogo = OpenAILogo;
 exports.PageSkeleton = PageSkeleton;
+exports.Pagination = Pagination;
+exports.PaginationContent = PaginationContent;
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.PaginationItem = PaginationItem;
+exports.PaginationLink = PaginationLink;
+exports.PaginationNext = PaginationNext;
+exports.PaginationPrevious = PaginationPrevious;
 exports.PanelLeftCloseIcon = PanelLeftCloseIcon;
 exports.PanelLeftOpenIcon = PanelLeftOpenIcon;
 exports.PlusIcon = PlusIcon;
@@ -3995,6 +4997,8 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.ProductPageLayout = ProductPageLayout;
 exports.Progress = Progress;
+exports.Radio = Radio;
+exports.RadioField = RadioField;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RefreshCWIcon = RefreshCWIcon;
@@ -4026,9 +5030,11 @@ exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
 exports.ShieldCheckIcon = ShieldCheckIcon;
 exports.Skeleton = Skeleton;
-exports.Spinner = Spinner;
+exports.Slider = Slider;
+exports.Spinner = require_toggle_row.Spinner;
 exports.StatCardSkeleton = StatCardSkeleton;
 exports.StatusBadge = StatusBadge;
+exports.Stepper = Stepper;
 exports.SunIcon = SunIcon;
 exports.Switch = require_toggle_row.Switch;
 exports.Table = Table;
@@ -4048,6 +5054,8 @@ exports.TerminalIcon = TerminalIcon;
 exports.Textarea = Textarea;
 exports.Toaster = Toaster;
 exports.ToggleCard = ToggleCard;
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
 exports.ToggleRow = require_toggle_row.ToggleRow;
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
@@ -4064,6 +5072,12 @@ exports.__toESM = __toESM;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = require_toggle_row.buttonVariants;
 exports.cn = require_toggle_row.cn;
+Object.defineProperty(exports, 'toast', {
+  enumerable: true,
+  get: function () {
+    return sonner.toast;
+  }
+});
 exports.useIconConfig = useIconConfig;
 exports.useUnsavedChanges = useUnsavedChanges;
 exports.wellVariants = wellVariants;