gladvn 0.2.14

package/dist/index.js

@@ -0,0 +1,4740 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import * as React from "react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { AlertCircleIcon, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUp, ChevronUpIcon, CircleCheckIcon, CircleIcon, InfoIcon, Loader2Icon, MoreHorizontalIcon, OctagonXIcon, SearchIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+import { Button as Button$1 } from "@base-ui/react/button";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { Select as Select$1 } from "@base-ui/react/select";
+import useEmblaCarousel from "embla-carousel-react";
+import * as RechartsPrimitive from "recharts";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+import { Combobox as Combobox$1 } from "@base-ui/react";
+import { Command as Command$1 } from "cmdk";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
+import { Drawer as Drawer$1 } from "vaul";
+import { Menu } from "@base-ui/react/menu";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+import { PreviewCard } from "@base-ui/react/preview-card";
+import { Input as Input$1 } from "@base-ui/react/input";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+import { Toaster as Toaster$1 } from "sonner";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/hooks/use-mobile.ts
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState(void 0);
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+}
+//#endregion
+//#region src/components/micro/accordion.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (20 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var Accordion = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion$1.Root, {
+	ref,
+	"data-slot": "accordion",
+	className: cn("flex flex-col", className),
+	...props
+}));
+Accordion.displayName = "Accordion";
+var AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion$1.Item, {
+	ref,
+	"data-slot": "accordion-item",
+	className: cn("not-last:border-b not-last:border-border", className),
+	...props
+}));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Accordion$1.Header, {
+	className: cn("flex", className),
+	children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+		ref,
+		"data-slot": "accordion-trigger",
+		className: "group/accordion-trigger relative flex flex-1 items-start justify-between gap-4 rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
+			"data-slot": "accordion-trigger-icon",
+			className: "size-4 text-muted-foreground pointer-events-none shrink-0 transition-[rotate] duration-200 group-data-panel-open/accordion-trigger:rotate-180"
+		})]
+	})
+}));
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
+	ref,
+	"data-slot": "accordion-content",
+	className: "overflow-hidden text-sm h-(--accordion-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0",
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("pb-4 pt-0", className),
+		children
+	})
+}));
+AccordionContent.displayName = "AccordionContent";
+//#endregion
+//#region src/components/micro/alert.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var alertVariants = cva("group/alert relative rounded-lg border border-border text-left bg-card text-card-foreground", { variants: {
+	color: {
+		info: "border-info/15 bg-info/5 text-info",
+		destructive: "border-destructive/15 bg-destructive/5 text-destructive",
+		success: "border-success/15 bg-success/5 text-success",
+		warning: "border-warning/15 bg-warning/5 text-warning"
+	},
+	size: {
+		sm: "px-2 py-1.5 text-xs gap-x-1.5",
+		md: "px-2.5 py-2 text-sm gap-x-2",
+		lg: "px-3 py-2.5 text-base gap-x-2.5"
+	}
+} });
+var Alert = React.forwardRef(function Alert({ className, color = "info", size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "alert",
+		"data-size": size,
+		"data-color": color,
+		role: "alert",
+		className: cn(alertVariants({
+			color,
+			size
+		}), className),
+		...props
+	});
+});
+Alert.displayName = "Alert";
+var AlertTitle = React.forwardRef(function AlertTitle({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "alert-title",
+		className: cn("font-medium", className),
+		...props
+	});
+});
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React.forwardRef(function AlertDescription({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "alert-description",
+		className: cn("text-balance text-muted-foreground md:text-pretty leading-relaxed", "group-data-[color=info]/alert:text-info/90", "group-data-[color=destructive]/alert:text-destructive/90", "group-data-[color=success]/alert:text-success/90", "group-data-[color=warning]/alert:text-warning/90", className),
+		...props
+	});
+});
+AlertDescription.displayName = "AlertDescription";
+var AlertAction = React.forwardRef(function AlertAction({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "alert-action",
+		className: cn(className),
+		...props
+	});
+});
+AlertAction.displayName = "AlertAction";
+var AlertIcon = React.forwardRef(function AlertIcon({ className, render, ...props }, ref) {
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps({
+			ref,
+			className: cn("text-current", "size-4 group-data-[size=sm]/alert:size-3.5 group-data-[size=lg]/alert:size-5", className),
+			"data-slot": "alert-icon"
+		}, props)
+	});
+});
+AlertIcon.displayName = "AlertIcon";
+//#endregion
+//#region src/components/micro/button.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (20 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* variant = visual style (HOW it looks)
+*   solid   → filled background (opaque)
+*   outline → border only, transparent bg
+*   ghost   → no border, transparent bg
+*   soft    → low-opacity tinted background
+*   link    → looks like a hyperlink
+*
+* color = semantic color token (WHAT it means)
+*   primary     → primary action
+*   secondary   → alternative / neutral
+*   destructive → danger / delete
+*   warning     → caution
+*   success     → confirm / done
+*   info        → information
+*   tertiary    → extra / beta
+*/
+var buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-border text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 focus-visible:ring-offset-1 focus-visible:ring-offset-background active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50 data-[icon=true]:aspect-square data-[icon=true]:px-0", {
+	variants: {
+		variant: {
+			solid: "border-transparent",
+			outline: "bg-transparent",
+			ghost: "border-transparent bg-transparent",
+			soft: "border-transparent",
+			link: "border-transparent bg-transparent underline-offset-4 hover:underline"
+		},
+		color: {
+			primary: "",
+			secondary: "",
+			destructive: "",
+			warning: "",
+			success: "",
+			info: "",
+			tertiary: "",
+			muted: "",
+			accent: ""
+		},
+		size: {
+			sm: "h-7 gap-1 px-3 text-xs",
+			md: "h-8 gap-1.5 px-3.5",
+			lg: "h-9 gap-2 px-4"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "solid",
+			color: "primary",
+			className: "bg-primary     text-primary-foreground     hover:bg-primary/85"
+		},
+		{
+			variant: "solid",
+			color: "secondary",
+			className: "bg-secondary   text-secondary-foreground   hover:bg-secondary/85"
+		},
+		{
+			variant: "solid",
+			color: "destructive",
+			className: "bg-destructive text-destructive-foreground hover:bg-destructive/85"
+		},
+		{
+			variant: "solid",
+			color: "warning",
+			className: "bg-warning     text-warning-foreground     hover:bg-warning/85"
+		},
+		{
+			variant: "solid",
+			color: "success",
+			className: "bg-success     text-success-foreground     hover:bg-success/85"
+		},
+		{
+			variant: "solid",
+			color: "info",
+			className: "bg-info        text-info-foreground        hover:bg-info/85"
+		},
+		{
+			variant: "solid",
+			color: "tertiary",
+			className: "bg-tertiary    text-tertiary-foreground    hover:bg-tertiary/85"
+		},
+		{
+			variant: "solid",
+			color: "muted",
+			className: "bg-muted       text-muted-foreground       hover:bg-muted/85"
+		},
+		{
+			variant: "solid",
+			color: "accent",
+			className: "bg-accent      text-accent-foreground      hover:bg-accent/85"
+		},
+		{
+			variant: "outline",
+			color: "primary",
+			className: "border-primary     text-primary     hover:bg-primary/10"
+		},
+		{
+			variant: "outline",
+			color: "secondary",
+			className: "border-secondary text-secondary hover:bg-secondary/10"
+		},
+		{
+			variant: "outline",
+			color: "destructive",
+			className: "border-destructive text-destructive hover:bg-destructive/10"
+		},
+		{
+			variant: "outline",
+			color: "warning",
+			className: "border-warning     text-warning     hover:bg-warning/10"
+		},
+		{
+			variant: "outline",
+			color: "success",
+			className: "border-success     text-success     hover:bg-success/10"
+		},
+		{
+			variant: "outline",
+			color: "info",
+			className: "border-info        text-info        hover:bg-info/10"
+		},
+		{
+			variant: "outline",
+			color: "tertiary",
+			className: "border-tertiary    text-tertiary    hover:bg-tertiary/10"
+		},
+		{
+			variant: "outline",
+			color: "muted",
+			className: "border-muted       text-muted-foreground hover:bg-muted/10"
+		},
+		{
+			variant: "outline",
+			color: "accent",
+			className: "border-accent      text-accent-foreground hover:bg-accent/10"
+		},
+		{
+			variant: "soft",
+			color: "primary",
+			className: "bg-primary/15     text-primary     hover:bg-primary/25"
+		},
+		{
+			variant: "soft",
+			color: "secondary",
+			className: "bg-secondary/15 text-secondary hover:bg-secondary/25"
+		},
+		{
+			variant: "soft",
+			color: "destructive",
+			className: "bg-destructive/15 text-destructive hover:bg-destructive/25"
+		},
+		{
+			variant: "soft",
+			color: "warning",
+			className: "bg-warning/15     text-warning     hover:bg-warning/25"
+		},
+		{
+			variant: "soft",
+			color: "success",
+			className: "bg-success/15     text-success     hover:bg-success/25"
+		},
+		{
+			variant: "soft",
+			color: "info",
+			className: "bg-info/15        text-info        hover:bg-info/25"
+		},
+		{
+			variant: "soft",
+			color: "tertiary",
+			className: "bg-tertiary/15    text-tertiary    hover:bg-tertiary/25"
+		},
+		{
+			variant: "soft",
+			color: "muted",
+			className: "bg-muted/50       text-muted-foreground hover:bg-muted/80"
+		},
+		{
+			variant: "soft",
+			color: "accent",
+			className: "bg-accent/50      text-accent-foreground hover:bg-accent/80"
+		},
+		{
+			variant: "ghost",
+			color: "primary",
+			className: "text-primary     hover:bg-primary/10"
+		},
+		{
+			variant: "ghost",
+			color: "secondary",
+			className: "text-secondary hover:bg-secondary/10"
+		},
+		{
+			variant: "ghost",
+			color: "destructive",
+			className: "text-destructive hover:bg-destructive/10"
+		},
+		{
+			variant: "ghost",
+			color: "warning",
+			className: "text-warning     hover:bg-warning/10"
+		},
+		{
+			variant: "ghost",
+			color: "success",
+			className: "text-success     hover:bg-success/10"
+		},
+		{
+			variant: "ghost",
+			color: "info",
+			className: "text-info        hover:bg-info/10"
+		},
+		{
+			variant: "ghost",
+			color: "tertiary",
+			className: "text-tertiary    hover:bg-tertiary/10"
+		},
+		{
+			variant: "ghost",
+			color: "muted",
+			className: "text-muted-foreground hover:bg-muted/10"
+		},
+		{
+			variant: "ghost",
+			color: "accent",
+			className: "text-accent-foreground hover:bg-accent/10"
+		},
+		{
+			variant: "link",
+			color: "primary",
+			className: "text-primary"
+		},
+		{
+			variant: "link",
+			color: "secondary",
+			className: "text-secondary"
+		},
+		{
+			variant: "link",
+			color: "destructive",
+			className: "text-destructive"
+		},
+		{
+			variant: "link",
+			color: "warning",
+			className: "text-warning"
+		},
+		{
+			variant: "link",
+			color: "success",
+			className: "text-success"
+		},
+		{
+			variant: "link",
+			color: "info",
+			className: "text-info"
+		},
+		{
+			variant: "link",
+			color: "tertiary",
+			className: "text-tertiary"
+		},
+		{
+			variant: "link",
+			color: "muted",
+			className: "text-muted-foreground"
+		},
+		{
+			variant: "link",
+			color: "accent",
+			className: "text-accent-foreground"
+		},
+		{
+			color: "primary",
+			className: "focus-visible:ring-primary/50"
+		},
+		{
+			color: "secondary",
+			className: "focus-visible:ring-secondary/50"
+		},
+		{
+			color: "destructive",
+			className: "focus-visible:ring-destructive/50"
+		},
+		{
+			color: "warning",
+			className: "focus-visible:ring-warning/50"
+		},
+		{
+			color: "success",
+			className: "focus-visible:ring-success/50"
+		},
+		{
+			color: "info",
+			className: "focus-visible:ring-info/50"
+		},
+		{
+			color: "tertiary",
+			className: "focus-visible:ring-tertiary/50"
+		},
+		{
+			color: "muted",
+			className: "focus-visible:ring-muted/50"
+		},
+		{
+			color: "accent",
+			className: "focus-visible:ring-accent/50"
+		}
+	]
+});
+var Button = React.forwardRef(({ className, variant = "solid", color = "primary", size = "md", iconOnly, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Button$1, {
+		ref,
+		"data-slot": "button",
+		"data-color": color,
+		"data-variant": variant,
+		...iconOnly && { "data-icon": "true" },
+		className: cn(buttonVariants({
+			variant,
+			color,
+			size,
+			className
+		})),
+		...props,
+		children
+	});
+});
+Button.displayName = "Button";
+var ButtonIcon = React.forwardRef(function ButtonIcon({ className, render, ...props }, ref) {
+	return useRender({
+		render,
+		defaultTagName: "span",
+		props: mergeProps({
+			ref,
+			className: cn("inline-flex items-center justify-center shrink-0 transition-transform", "size-4 group-data-[size=sm]/button:size-3.5 group-data-[size=lg]/button:size-5", "[&>svg]:size-full [&>svg]:pointer-events-none", className),
+			"data-slot": "button-icon"
+		}, props)
+	});
+});
+ButtonIcon.displayName = "ButtonIcon";
+//#endregion
+//#region src/components/micro/alert-dialog.tsx
+/**
+* @description A modal dialog that interrupts the user with important content and expects a response.
+* @requires AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter
+* @example
+* <AlertDialog>
+*   <AlertDialogTrigger>Open</AlertDialogTrigger>
+*   <AlertDialogContent>
+*     <AlertDialogHeader><AlertDialogTitle>Are you sure?</AlertDialogTitle></AlertDialogHeader>
+*     <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>Continue</AlertDialogAction></AlertDialogFooter>
+*   </AlertDialogContent>
+* </AlertDialog>
+*/
+function AlertDialog({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+}
+function AlertDialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogClose({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		"data-slot": "alert-dialog-close",
+		...props
+	});
+}
+var AlertDialogPortal = AlertDialog$1.Portal;
+function AlertDialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+		...props
+	});
+}
+function AlertDialogContent({ className, size = "md", ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none", "data-[size=sm]:max-w-xs", "data-[size=md]:max-w-xs data-[size=md]:sm:max-w-sm", "data-[size=lg]:max-w-sm data-[size=lg]:sm:max-w-md", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		...props
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-t-border bg-muted/50 p-4 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function AlertDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-media",
+		className: cn("inline-flex size-10 items-center justify-center [&>svg:not([class*='size-'])]:size-6", "group-data-[size=lg]/alert-dialog-content:size-12", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("font-heading text-base font-medium", "group-data-[size=lg]/alert-dialog-content:text-lg", className),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_p]:leading-relaxed", "group-data-[size=lg]/alert-dialog-content:text-base", className),
+		...props
+	});
+}
+function AlertDialogAction({ className, variant, color, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		"data-slot": "alert-dialog-action",
+		className: cn(className),
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			color,
+			size
+		}),
+		...props
+	});
+}
+function AlertDialogCancel({ className, variant = "outline", color, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		"data-slot": "alert-dialog-cancel",
+		className: cn(className),
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			color,
+			size
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/aspect-ratio.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Displays content within a desired ratio.
+* @example
+* <AspectRatio ratio={16 / 9}>
+*   <img src="..." alt="..." />
+* </AspectRatio>
+*/
+var AspectRatio = React.forwardRef(({ ratio, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "aspect-ratio",
+		style: { "--ratio": ratio },
+		className: cn("relative aspect-(--ratio)", className),
+		...props
+	});
+});
+AspectRatio.displayName = "AspectRatio";
+//#endregion
+//#region src/components/micro/avatar.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (20 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description An image element with a fallback for representing the user.
+* @requires AvatarImage, AvatarFallback
+* @example
+* <Avatar>
+*   <AvatarImage src="https://github.com/shadcn.png" />
+*   <AvatarFallback>CN</AvatarFallback>
+* </Avatar>
+*/
+var Avatar = React.forwardRef(({ className, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		ref,
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", "group-data-[slot=avatar-group]/avatar-group:ring-2 group-data-[slot=avatar-group]/avatar-group:ring-background", className),
+		...props
+	});
+});
+Avatar.displayName = "Avatar";
+var AvatarImage = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		ref,
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+});
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		ref,
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base", className),
+		...props
+	});
+});
+AvatarFallback.displayName = "AvatarFallback";
+var AvatarBadge = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "avatar-badge",
+		className: cn("rounded-full bg-primary ring-2 ring-background", "group-data-[size=sm]/avatar:size-2", "group-data-[size=md]/avatar:size-2.5", "group-data-[size=lg]/avatar:size-3", className),
+		...props
+	});
+});
+AvatarBadge.displayName = "AvatarBadge";
+var AvatarGroup = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "avatar-group",
+		className: cn("group/avatar-group flex -space-x-2", className),
+		...props
+	});
+});
+AvatarGroup.displayName = "AvatarGroup";
+var AvatarGroupCount = React.forwardRef(({ className, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "avatar-group-count",
+		"data-size": size,
+		className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background data-[size=lg]:size-10 data-[size=sm]:size-6", className),
+		...props
+	});
+});
+AvatarGroupCount.displayName = "AvatarGroupCount";
+//#endregion
+//#region src/components/micro/badge.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (20 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var badgeVariants = cva("group/badge inline-flex h-6 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background", {
+	variants: {
+		variant: {
+			solid: "border-transparent",
+			outline: "bg-transparent",
+			soft: "border-transparent"
+		},
+		color: {
+			primary: "",
+			secondary: "",
+			destructive: "",
+			warning: "",
+			success: "",
+			info: "",
+			tertiary: "",
+			muted: "",
+			accent: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "solid",
+			color: "primary",
+			className: "bg-primary text-primary-foreground"
+		},
+		{
+			variant: "solid",
+			color: "secondary",
+			className: "bg-secondary text-secondary-foreground"
+		},
+		{
+			variant: "solid",
+			color: "destructive",
+			className: "bg-destructive text-destructive-foreground"
+		},
+		{
+			variant: "solid",
+			color: "warning",
+			className: "bg-warning text-warning-foreground"
+		},
+		{
+			variant: "solid",
+			color: "success",
+			className: "bg-success text-success-foreground"
+		},
+		{
+			variant: "solid",
+			color: "info",
+			className: "bg-info text-info-foreground"
+		},
+		{
+			variant: "solid",
+			color: "tertiary",
+			className: "bg-tertiary text-tertiary-foreground"
+		},
+		{
+			variant: "solid",
+			color: "muted",
+			className: "bg-muted text-muted-foreground"
+		},
+		{
+			variant: "solid",
+			color: "accent",
+			className: "bg-accent text-accent-foreground"
+		},
+		{
+			variant: "outline",
+			color: "primary",
+			className: "border-primary text-primary"
+		},
+		{
+			variant: "outline",
+			color: "secondary",
+			className: "border-secondary text-secondary"
+		},
+		{
+			variant: "outline",
+			color: "destructive",
+			className: "border-destructive text-destructive"
+		},
+		{
+			variant: "outline",
+			color: "warning",
+			className: "border-warning text-warning"
+		},
+		{
+			variant: "outline",
+			color: "success",
+			className: "border-success text-success"
+		},
+		{
+			variant: "outline",
+			color: "info",
+			className: "border-info text-info"
+		},
+		{
+			variant: "outline",
+			color: "tertiary",
+			className: "border-tertiary text-tertiary"
+		},
+		{
+			variant: "outline",
+			color: "muted",
+			className: "border-muted text-muted-foreground"
+		},
+		{
+			variant: "outline",
+			color: "accent",
+			className: "border-accent text-accent-foreground"
+		},
+		{
+			variant: "soft",
+			color: "primary",
+			className: "bg-primary/15 text-primary"
+		},
+		{
+			variant: "soft",
+			color: "secondary",
+			className: "bg-secondary/15 text-secondary"
+		},
+		{
+			variant: "soft",
+			color: "destructive",
+			className: "bg-destructive/15 text-destructive"
+		},
+		{
+			variant: "soft",
+			color: "warning",
+			className: "bg-warning/15 text-warning"
+		},
+		{
+			variant: "soft",
+			color: "success",
+			className: "bg-success/15 text-success"
+		},
+		{
+			variant: "soft",
+			color: "info",
+			className: "bg-info/15 text-info"
+		},
+		{
+			variant: "soft",
+			color: "tertiary",
+			className: "bg-tertiary/15 text-tertiary"
+		},
+		{
+			variant: "soft",
+			color: "muted",
+			className: "bg-muted/50 text-muted-foreground"
+		},
+		{
+			variant: "soft",
+			color: "accent",
+			className: "bg-accent/50 text-accent-foreground"
+		}
+	]
+});
+var Badge = React.forwardRef(({ className, variant = "solid", color = "primary", render, ...props }, ref) => {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({
+			ref,
+			className: cn(badgeVariants({
+				variant,
+				color
+			}), className)
+		}, props),
+		render,
+		state: {
+			slot: "badge",
+			variant,
+			color
+		}
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+//#region src/components/micro/breadcrumb.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Displays the path to the current resource using a hierarchy of links.
+* @requires BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage
+* @example
+* <Breadcrumb>
+*   <BreadcrumbList>
+*     <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem><BreadcrumbPage>Current</BreadcrumbPage></BreadcrumbItem>
+*   </BreadcrumbList>
+* </Breadcrumb>
+*/
+var Breadcrumb = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		className: cn(className),
+		...props
+	});
+});
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		"data-slot": "breadcrumb-list",
+		className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className),
+		...props
+	});
+});
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React.forwardRef(({ className, render, ...props }, ref) => {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({
+			ref,
+			className: cn("transition-colors hover:text-foreground", className)
+		}, props),
+		render,
+		state: { slot: "breadcrumb-link" }
+	});
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: cn("font-normal text-foreground", className),
+		...props
+	});
+});
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = React.forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5" })
+	});
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("flex size-5 items-center justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+//#endregion
+//#region src/components/micro/select.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var Select = Select$1.Root;
+var SelectGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.Group, {
+	ref,
+	"data-slot": "select-group",
+	className: cn("scroll-my-1", className),
+	...props
+}));
+SelectGroup.displayName = "SelectGroup";
+var SelectValue = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.Value, {
+	ref,
+	"data-slot": "select-value",
+	className: cn("flex flex-1 text-left", className),
+	...props
+}));
+SelectValue.displayName = "SelectValue";
+var SelectPortal = Select$1.Portal;
+var selectTriggerVariants = cva("inline-flex items-center justify-between rounded-lg border border-input bg-transparent text-foreground text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 data-placeholder:text-muted-foreground [&_[data-slot=select-value]]:line-clamp-1 [&_[data-slot=select-value]]:flex [&_[data-slot=select-value]]:items-center [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50", { variants: { size: {
+	sm: "h-7 gap-1 px-2 py-0.5 text-xs [&_[data-slot=select-value]]:gap-1",
+	md: "h-8 gap-1.5 px-2.5 py-1 text-sm [&_[data-slot=select-value]]:gap-1.5",
+	lg: "h-9 gap-2 px-3 py-1.5 [&_[data-slot=select-value]]:gap-2"
+} } });
+var SelectTrigger = React.forwardRef(({ className, size = "md", children, ...props }, ref) => /* @__PURE__ */ jsxs(Select$1.Trigger, {
+	ref,
+	"data-slot": "select-trigger",
+	className: cn(selectTriggerVariants({
+		size,
+		className
+	})),
+	...props,
+	children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
+}));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React.forwardRef(({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.Positioner, {
+	side,
+	sideOffset,
+	align,
+	alignOffset,
+	alignItemWithTrigger,
+	className: "isolate z-50",
+	children: /* @__PURE__ */ jsxs(Select$1.Popup, {
+		ref,
+		"data-slot": "select-content",
+		"data-align-trigger": alignItemWithTrigger,
+		className: cn("relative isolate z-50 max-h-(--available-height) w-[calc(var(--anchor-width)+8px)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", alignItemWithTrigger ? "origin-(--transform-origin) data-[align-trigger=true]:animate-none" : "", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+			/* @__PURE__ */ jsx(Select$1.List, { children }),
+			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+		]
+	})
+}));
+SelectContent.displayName = "SelectContent";
+var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+	ref,
+	"data-slot": "select-label",
+	className: cn("px-1.5 py-1 text-xs text-muted-foreground", className),
+	...props
+}));
+SelectLabel.displayName = "SelectLabel";
+var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Select$1.Item, {
+	ref,
+	"data-slot": "select-item",
+	className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4 [&>[data-slot=select-item-indicator]]:flex [&>[data-slot=select-item-indicator]]:items-center [&>[data-slot=select-item-indicator]]:gap-2", className),
+	...props,
+	children: [/* @__PURE__ */ jsx(Select$1.ItemText, {
+		className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+		children
+	}), /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
+		render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+		children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+	})]
+}));
+SelectItem.displayName = "SelectItem";
+var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.Separator, {
+	ref,
+	"data-slot": "select-separator",
+	className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+	...props
+}));
+SelectSeparator.displayName = "SelectSeparator";
+var SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
+	ref,
+	"data-slot": "select-scroll-up-button",
+	className: cn("top-0 z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+}));
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+var SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
+	ref,
+	"data-slot": "select-scroll-down-button",
+	className: cn("bottom-0 z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+}));
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+//#endregion
+//#region src/components/micro/calendar.tsx
+/**
+* ✅ AUDITED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+function getDropdownLabel(options, value, locale) {
+	const valueStr = Array.isArray(value) ? value[0] : value?.toString();
+	const selected = options?.find((o) => o.value.toString() === valueStr);
+	if (!selected) return "";
+	if (options?.length === 12 && selected.value !== void 0) return new Date(2e3, Number(selected.value), 1).toLocaleString(locale?.code ?? "en-US", { month: "short" });
+	return selected.label;
+}
+var calendarVariants = cva("group/calendar bg-background p-2 in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", { variants: { size: {
+	sm: "calendar-sm",
+	md: "calendar-md",
+	lg: "calendar-lg"
+} } });
+/**
+* @description A date field component that allows users to enter and edit date.
+* @example
+* <Calendar mode="single" selected={date} onSelect={setDate} />
+*/
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, size = "md", ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: cn(calendarVariants({ size }), className),
+		captionLayout,
+		locale,
+		formatters: {
+			formatMonthDropdown: (month) => month.toLocaleString(locale?.code ?? "en-US", { month: "long" }),
+			...formatters
+		},
+		classNames: {
+			root: cn("w-fit", defaultClassNames.root),
+			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+			nav: cn("absolute inset-x-0 top-0 flex items-center justify-between pointer-events-none", "h-8 group-[.calendar-sm]/calendar:h-7 group-[.calendar-lg]/calendar:h-9", defaultClassNames.nav),
+			button_previous: cn(buttonVariants({
+				variant: buttonVariant,
+				color: "secondary",
+				size
+			}), "p-0 aspect-square select-none pointer-events-auto aria-disabled:opacity-50", defaultClassNames.button_previous),
+			button_next: cn(buttonVariants({
+				variant: buttonVariant,
+				color: "secondary",
+				size
+			}), "p-0 aspect-square select-none pointer-events-auto aria-disabled:opacity-50", defaultClassNames.button_next),
+			month_caption: cn("flex w-full items-center justify-center", "h-8 px-8 group-[.calendar-sm]/calendar:h-7 group-[.calendar-sm]/calendar:px-7 group-[.calendar-lg]/calendar:h-9 group-[.calendar-lg]/calendar:px-9", defaultClassNames.month_caption),
+			dropdowns: cn("flex h-7 group-[.calendar-sm]/calendar:h-6 group-[.calendar-lg]/calendar:h-8 items-center justify-center gap-0", defaultClassNames.dropdowns),
+			dropdown_root: cn("relative flex items-center justify-center", defaultClassNames.dropdown_root),
+			dropdown: cn(defaultClassNames.dropdown),
+			caption_label: cn("px-2 font-bold select-none", {
+				"text-sm group-[.calendar-sm]/calendar:text-xs group-[.calendar-lg]/calendar:text-base": captionLayout === "label",
+				"flex items-center gap-1 rounded-md text-sm group-[.calendar-sm]/calendar:text-xs group-[.calendar-lg]/calendar:text-base [&>svg]:size-3.5 [&>svg]:text-muted-foreground": captionLayout !== "label"
+			}, defaultClassNames.caption_label),
+			month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+			weekdays: cn("flex gap-1", defaultClassNames.weekdays),
+			weekday: cn("flex-1 rounded-md text-xs font-medium text-muted-foreground select-none group-[.calendar-sm]/calendar:text-[10px] group-[.calendar-lg]/calendar:text-sm", defaultClassNames.weekday),
+			week: cn("mt-2 flex w-full gap-1", defaultClassNames.week),
+			week_number_header: cn("w-7 group-[.calendar-sm]/calendar:w-6 group-[.calendar-lg]/calendar:w-8 select-none", defaultClassNames.week_number_header),
+			week_number: cn("text-xs text-muted-foreground select-none group-[.calendar-sm]/calendar:text-[10px] group-[.calendar-lg]/calendar:text-sm", defaultClassNames.week_number),
+			day: cn("group/day relative aspect-square h-full w-full rounded-md p-0 text-center select-none", defaultClassNames.day),
+			day_button: cn(defaultClassNames.day_button),
+			range_start: cn("relative isolate z-0 rounded-md bg-muted", defaultClassNames.range_start),
+			range_middle: cn("rounded-md bg-muted", defaultClassNames.range_middle),
+			range_end: cn("relative isolate z-0 rounded-md bg-muted", defaultClassNames.range_end),
+			today: cn("rounded-md bg-muted text-foreground", defaultClassNames.today),
+			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+			hidden: cn("invisible", defaultClassNames.hidden),
+			...classNames
+		},
+		components: {
+			Root: ({ className, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Dropdown: ({ value, onChange, options, disabled, "aria-label": ariaLabel, name }) => {
+				return /* @__PURE__ */ jsxs(Select, {
+					value: value?.toString(),
+					disabled,
+					onValueChange: (newVal) => {
+						onChange?.({ target: {
+							value: newVal,
+							name
+						} });
+					},
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						size,
+						"aria-label": ariaLabel,
+						className: "w-fit min-w-0 px-1 border-none bg-transparent font-medium shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 [&_[data-slot=select-value]]:w-auto",
+						children: /* @__PURE__ */ jsx("span", {
+							"data-slot": "select-value",
+							className: "flex flex-1 text-left",
+							children: getDropdownLabel(options, value, locale)
+						})
+					}), /* @__PURE__ */ jsx(SelectContent, { children: options?.map((option) => {
+						const isMonth = options?.length === 12;
+						let shortLabel = option.label;
+						if (isMonth && option.value !== void 0) shortLabel = new Date(2e3, Number(option.value), 1).toLocaleString(locale?.code ?? "en-US", { month: "short" });
+						return /* @__PURE__ */ jsx(SelectItem, {
+							value: option.value.toString(),
+							disabled: option.disabled,
+							children: shortLabel
+						}, option.value);
+					}) })]
+				});
+			},
+			Chevron: ({ className, orientation, ...props }) => {
+				const sizeClasses = "size-4 group-[.calendar-sm]/calendar:size-3.5 group-[.calendar-lg]/calendar:size-5";
+				if (orientation === "left") return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+					className: cn("size-5 group-[.calendar-sm]/calendar:size-4 group-[.calendar-lg]/calendar:size-6 rtl:rotate-180", className),
+					strokeWidth: 3,
+					...props
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+					className: cn("size-5 group-[.calendar-sm]/calendar:size-4 group-[.calendar-lg]/calendar:size-6 rtl:rotate-180", className),
+					strokeWidth: 3,
+					...props
+				});
+				return /* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: cn(sizeClasses, className),
+					strokeWidth: 2.5,
+					...props
+				});
+			},
+			DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
+				locale,
+				...props
+			}),
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-7 group-[.calendar-sm]/calendar:size-6 group-[.calendar-lg]/calendar:size-8 items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+	getDefaultClassNames();
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"data-slot": "calendar-day-button",
+		"data-day": day.date.toLocaleDateString(locale?.code),
+		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+		"data-range-start": modifiers.range_start,
+		"data-range-end": modifiers.range_end,
+		"data-range-middle": modifiers.range_middle,
+		className: cn("relative isolate z-10 flex aspect-square size-7 flex-col items-center justify-center gap-1 rounded-md font-normal leading-none transition-colors outline-none select-none", "group-[.calendar-sm]/calendar:size-6 group-[.calendar-lg]/calendar:size-8", "text-sm group-[.calendar-sm]/calendar:text-xs", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background", "active:translate-y-px", "disabled:pointer-events-none disabled:opacity-50", "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-ring/50", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-primary/90", "data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground", "data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground", "data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground", "dark:hover:text-foreground", className),
+		...props
+	});
+}
+Calendar.displayName = "Calendar";
+CalendarDayButton.displayName = "CalendarDayButton";
+//#endregion
+//#region src/components/micro/card.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Displays a card with header, content, and footer.
+* @requires CardHeader, CardTitle, CardDescription, CardContent, CardFooter
+* @example
+* <Card>
+*   <CardHeader><CardTitle>Title</CardTitle></CardHeader>
+*   <CardContent>Content here</CardContent>
+* </Card>
+*/
+var Card = React.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "card",
+	"data-size": size,
+	className: cn("group/card flex flex-col overflow-hidden rounded-xl bg-card text-sm text-card-foreground ring-1 ring-foreground/10", "p-6 gap-5 data-[size=sm]:p-4 data-[size=sm]:gap-4 data-[size=lg]:p-8 data-[size=lg]:gap-6", className),
+	...props
+}));
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "card-header",
+	className: cn("flex flex-col gap-1.5", className),
+	...props
+}));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "card-title",
+	className: cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm group-data-[size=lg]/card:text-lg", className),
+	...props
+}));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "card-description",
+	className: cn("text-sm text-muted-foreground group-data-[size=sm]/card:text-xs group-data-[size=lg]/card:text-base", className),
+	...props
+}));
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "card-content",
+	className,
+	...props
+}));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "card-footer",
+	className: cn("flex items-center", className),
+	...props
+}));
+CardFooter.displayName = "CardFooter";
+//#endregion
+//#region src/components/micro/carousel.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var CarouselContext = React.createContext(null);
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+var Carousel = React.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	const onSelect = React.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = React.useCallback((event) => {
+		if (orientation === "horizontal") switch (event.key) {
+			case "ArrowLeft":
+				event.preventDefault();
+				scrollPrev();
+				break;
+			case "ArrowRight":
+				event.preventDefault();
+				scrollNext();
+				break;
+		}
+		else switch (event.key) {
+			case "ArrowUp":
+				event.preventDefault();
+				scrollPrev();
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				scrollNext();
+				break;
+		}
+	}, [
+		scrollPrev,
+		scrollNext,
+		orientation
+	]);
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api?.off("reInit", onSelect);
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			opts,
+			orientation,
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			onKeyDownCapture: handleKeyDown,
+			className: cn("group/carousel relative", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			"data-slot": "carousel",
+			"data-orientation": orientation,
+			...props,
+			children
+		})
+	});
+});
+Carousel.displayName = "Carousel";
+var CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+	const { carouselRef } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: React.useCallback((node) => {
+			carouselRef(node);
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		}, [carouselRef, ref]),
+		className: "overflow-hidden",
+		"data-slot": "carousel-content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex group-data-[orientation=vertical]/carousel:flex-col", className),
+			...props
+		})
+	});
+});
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "group",
+		"aria-roledescription": "slide",
+		"data-slot": "carousel-item",
+		className: cn("min-w-0 shrink-0 grow-0 basis-full", className),
+		...props
+	});
+});
+CarouselItem.displayName = "CarouselItem";
+var carouselButtonClasses = "inline-flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-background touch-manipulation transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+var CarouselPrevious = React.forwardRef(({ className, ...props }, ref) => {
+	const { scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		"data-slot": "carousel-previous",
+		className: cn(carouselButtonClasses, className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous slide"
+		})]
+	});
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = React.forwardRef(({ className, ...props }, ref) => {
+	const { scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		"data-slot": "carousel-next",
+		className: cn(carouselButtonClasses, className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Next slide"
+		})]
+	});
+});
+CarouselNext.displayName = "CarouselNext";
+var CarouselDots = React.forwardRef(({ className, ...props }, ref) => {
+	const { api } = useCarousel();
+	const [selectedIndex, setSelectedIndex] = React.useState(0);
+	const [scrollSnaps, setScrollSnaps] = React.useState([]);
+	const onInit = React.useCallback((api) => {
+		if (!api) return;
+		setScrollSnaps(api.scrollSnapList());
+	}, []);
+	const onSelect = React.useCallback((api) => {
+		if (!api) return;
+		setSelectedIndex(api.selectedScrollSnap());
+	}, []);
+	React.useEffect(() => {
+		if (!api) return;
+		onInit(api);
+		onSelect(api);
+		api.on("reInit", onInit);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api.off("reInit", onInit);
+			api.off("reInit", onSelect);
+			api.off("select", onSelect);
+		};
+	}, [
+		api,
+		onInit,
+		onSelect
+	]);
+	if (scrollSnaps.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "carousel-dots",
+		className: cn("flex items-center justify-center gap-2", className),
+		...props,
+		children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-slot": "carousel-dot",
+			"data-active": index === selectedIndex ? "" : void 0,
+			"aria-label": `Go to slide ${index + 1}`,
+			"aria-current": index === selectedIndex ? "true" : "false",
+			className: cn("size-2 rounded-full transition-all duration-300", "bg-primary/20 hover:bg-primary/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background", "data-active:w-6 data-active:bg-primary"),
+			onClick: () => api?.scrollTo(index)
+		}, index))
+	});
+});
+CarouselDots.displayName = "CarouselDots";
+//#endregion
+//#region src/components/micro/chart.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var THEMES = {
+	light: "",
+	dark: ".dark"
+};
+var INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+var ChartContext = React.createContext(null);
+function useChart() {
+	const context = React.useContext(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+}
+/**
+* @description Recharts wrapper for theming and tooltips.
+* @requires ChartTooltip, ChartTooltipContent
+*/
+var ChartContainer = React.forwardRef(function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }, ref) {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ jsx(ChartContext.Provider, {
+		value: { config },
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-slot": "chart",
+			"data-chart": chartId,
+			className: cn("group/chart flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(ChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+				initialDimension,
+				children
+			})]
+		})
+	});
+});
+ChartContainer.displayName = "ChartContainer";
+var ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] ?? itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart();
+	const tooltipLabel = React.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+		const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+				const itemConfig = getPayloadConfigFromPayload(config, item, key);
+				const indicatorColor = color ?? item.payload?.fill ?? item.color;
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-1 justify-between leading-none", {
+							"items-end": nestLabel,
+							"items-center": !nestLabel
+						}),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null && /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-medium text-foreground tabular-nums",
+							children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)
+						})]
+					})] })
+				}, index);
+			})
+		})]
+	});
+}
+var ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center gap-4", {
+			"pb-3": verticalAlign === "top",
+			"pt-3": verticalAlign !== "top"
+		}, className),
+		children: payload.filter((item) => item.type !== "none").map((item, index) => {
+			const key = `${nameKey ?? item.dataKey ?? "value"}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("div", {
+					className: "h-2 w-2 shrink-0 rounded-[2px]",
+					style: { backgroundColor: item.color }
+				}), itemConfig?.label]
+			}, index);
+		})
+	});
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+//#endregion
+//#region src/components/micro/checkbox.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (20 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var checkboxVariants = cva("group/checkbox peer relative flex shrink-0 items-center justify-center rounded-sm border border-input after:absolute after:content-[''] transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive aria-invalid:data-checked:text-destructive-foreground dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", { variants: { size: {
+	sm: "size-3.5 after:-inset-x-2.5 after:-inset-y-2.5",
+	md: "size-4 after:-inset-x-3 after:-inset-y-2",
+	lg: "size-5 after:-inset-x-4 after:-inset-y-3"
+} } });
+/**
+* @description A control that allows the user to toggle between checked and not checked.
+* @example
+* <Checkbox id="terms" />
+* <label htmlFor="terms">Accept terms</label>
+*/
+var Checkbox = React.forwardRef(function Checkbox({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		ref,
+		"data-slot": "checkbox",
+		"data-size": size,
+		className: cn(checkboxVariants({ size }), className),
+		...props
+	});
+});
+Checkbox.displayName = "Checkbox";
+var CheckboxIndicator = React.forwardRef(function CheckboxIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
+		ref,
+		"data-slot": "checkbox-indicator",
+		className: cn("grid place-content-center text-current transition-none [&>svg]:size-3.5 group-data-[size=sm]/checkbox:[&>svg]:size-3 group-data-[size=lg]/checkbox:[&>svg]:size-4", className),
+		...props
+	});
+});
+CheckboxIndicator.displayName = "CheckboxIndicator";
+//#endregion
+//#region src/components/micro/collapsible.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description An interactive component which expands/collapses a panel.
+* @requires CollapsibleTrigger, CollapsibleContent
+* @example
+* <Collapsible>
+*   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+*   <CollapsibleContent>Content</CollapsibleContent>
+* </Collapsible>
+*/
+var Collapsible = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Collapsible$1.Root, {
+	ref,
+	"data-slot": "collapsible",
+	className,
+	...props
+}));
+Collapsible.displayName = "Collapsible";
+var CollapsibleTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+	ref,
+	"data-slot": "collapsible-trigger",
+	className,
+	...props
+}));
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+var CollapsibleContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Collapsible$1.Panel, {
+	ref,
+	"data-slot": "collapsible-content",
+	className: cn("flex flex-col justify-end overflow-hidden h-(--collapsible-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0 [&[hidden]:not([hidden='until-found'])]:hidden", className),
+	...props
+}));
+CollapsibleContent.displayName = "CollapsibleContent";
+//#endregion
+//#region src/components/micro/input-group.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Self-contained: no imports from @/components/micro/*
+* - InputGroupButton, InputGroupInput, InputGroupTextarea render native HTML
+* - Size is always inherited from InputGroup wrapper via CSS group modifiers
+* - InputGroupButton placed directly in InputGroup (not inside InputGroupAddon)
+*/
+var inputGroupVariants = cva([
+	"group/input-group relative flex min-w-0 items-center overflow-hidden rounded-lg border border-input transition-colors outline-none",
+	"has-disabled:bg-input/50 has-disabled:opacity-50 has-disabled:cursor-not-allowed dark:has-disabled:bg-input/80",
+	"has-[[data-slot=input-group-control]:focus-visible]:border-ring",
+	"has-[[data-slot=input-group-control]:focus-visible]:ring-3",
+	"has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+	"has-[[data-slot=input-group-control]:focus-visible]:ring-offset-1",
+	"has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background",
+	"has-[[data-slot][aria-invalid=true]]:border-destructive",
+	"has-[[data-slot][aria-invalid=true]:focus-visible]:ring-3",
+	"has-[[data-slot][aria-invalid=true]:focus-visible]:ring-destructive/50",
+	"has-[[data-slot][aria-invalid=true]:focus-visible]:border-destructive",
+	"dark:bg-input/30"
+], { variants: { size: {
+	sm: "min-h-7 text-xs",
+	md: "min-h-8 text-sm",
+	lg: "min-h-9 text-sm"
+} } });
+var InputGroup = React.forwardRef(function InputGroup({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "input-group",
+		"data-size": size,
+		role: "group",
+		className: cn(inputGroupVariants({ size }), className),
+		...props
+	});
+});
+InputGroup.displayName = "InputGroup";
+var inputGroupAddonVariants = cva([
+	"flex h-auto cursor-text items-center justify-center gap-2 font-medium text-muted-foreground select-none",
+	"group-has-[[data-slot][aria-invalid=true]]/input-group:text-destructive",
+	"group-data-[size=sm]/input-group:py-0.5",
+	"group-data-[size=md]/input-group:py-1.5",
+	"group-data-[size=lg]/input-group:py-1.5",
+	"[&>svg:not([class*='size-'])]:size-4",
+	"group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5"
+], { variants: { align: {
+	start: "order-first pl-2 pr-1",
+	end: "order-last pl-1 pr-2"
+} } });
+var InputGroupAddon = React.forwardRef(function InputGroupAddon({ className, align = "start", ...props }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input, textarea")?.focus();
+		},
+		...props
+	});
+});
+InputGroupAddon.displayName = "InputGroupAddon";
+var InputGroupText = React.forwardRef(function InputGroupText({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cn("flex items-center gap-2 text-muted-foreground", "[&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-4", "group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5", className),
+		...props
+	});
+});
+InputGroupText.displayName = "InputGroupText";
+var inputGroupButtonVariants = cva([
+	"inline-flex shrink-0 self-stretch cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors duration-150 select-none",
+	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+	"disabled:pointer-events-none disabled:opacity-50",
+	"[&:not(:first-child)]:border-l [&:not(:last-child)]:border-r border-border",
+	"[&>svg:not([class*='size-'])]:size-4",
+	"group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5"
+], { variants: {
+	variant: {
+		ghost: "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground",
+		solid: "bg-primary text-primary-foreground hover:bg-primary/90",
+		soft: "bg-muted text-foreground hover:bg-muted/80",
+		outline: "border border-input bg-transparent text-foreground hover:bg-muted/50"
+	},
+	icon: {
+		true: [
+			"group-data-[size=sm]/input-group:w-7",
+			"group-data-[size=md]/input-group:w-8",
+			"group-data-[size=lg]/input-group:w-9"
+		],
+		false: [
+			"group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:text-xs",
+			"group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:text-sm",
+			"group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:text-sm"
+		]
+	}
+} });
+var InputGroupButton = React.forwardRef(function InputGroupButton({ className, type = "button", variant = "ghost", icon = false, ...props }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type,
+		"data-slot": "input-group-button",
+		className: cn(inputGroupButtonVariants({
+			variant,
+			icon
+		}), className),
+		...props
+	});
+});
+InputGroupButton.displayName = "InputGroupButton";
+var InputGroupInput = React.forwardRef(function InputGroupInput({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		"data-slot": "input-group-control",
+		className: cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed", "group-data-[size=sm]/input-group:h-7 group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:py-0.5 group-data-[size=sm]/input-group:text-xs", "group-data-[size=md]/input-group:h-8 group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:py-1 group-data-[size=md]/input-group:text-sm", "group-data-[size=lg]/input-group:h-9 group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:py-1.5 group-data-[size=lg]/input-group:text-sm", className),
+		...props
+	});
+});
+InputGroupInput.displayName = "InputGroupInput";
+var InputGroupTextarea = React.forwardRef(function InputGroupTextarea({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("textarea", {
+		ref,
+		"data-slot": "input-group-control",
+		className: cn("min-w-0 flex-1 resize-none bg-transparent py-2 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed", "group-data-[size=sm]/input-group:px-2 group-data-[size=sm]/input-group:text-xs", "group-data-[size=md]/input-group:px-2.5 group-data-[size=md]/input-group:text-sm", "group-data-[size=lg]/input-group:px-3 group-data-[size=lg]/input-group:text-sm", className),
+		...props
+	});
+});
+InputGroupTextarea.displayName = "InputGroupTextarea";
+//#endregion
+//#region src/components/micro/combobox.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (20 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*
+* 🚨 CRITICAL RULE FOR AI:
+* When using <Combobox>, YOU MUST pass the `items` prop (an array of data).
+* Headless UI libraries rely on this prop to build a stable internal item registry.
+* If omitted, the library is forced to scan the DOM on every render to discover items,
+* which causes full list re-renders, layout recalculations, and severe "content jumping" bugs.
+* DO NOT rely purely on static children mapping for Base UI collection components.
+*/
+var ComboboxContext = React.createContext({
+	anchor: null,
+	setAnchor: () => {}
+});
+function Combobox(props) {
+	const [anchor, setAnchor] = React.useState(null);
+	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
+		value: {
+			anchor,
+			setAnchor
+		},
+		children: /* @__PURE__ */ jsx(Combobox$1.Root, { ...props })
+	});
+}
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
+		"data-slot": "combobox-trigger",
+		className: cn("[&>svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })]
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		"data-slot": "combobox-clear",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			icon: true
+		}),
+		className: cn(className),
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+	});
+}
+function ComboboxInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		"data-slot": "combobox-input",
+		className: cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className),
+		...props
+	});
+}
+var ComboboxContent = React.forwardRef(({ className, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, anchor, ...props }, ref) => {
+	const { anchor: contextAnchor } = React.useContext(ComboboxContext);
+	return /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		anchor: anchor || contextAnchor,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+			ref,
+			"data-slot": "combobox-content",
+			"data-chips": !!anchor,
+			className: cn("group/combobox-content relative max-h-(--available-height) min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 p-1 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 [&_[data-slot=input-group]]:mb-1 [&_[data-slot=input-group]]:w-full [&_[data-slot=input-group]]:border-input/30 [&_[data-slot=input-group]]:bg-input/30 [&_[data-slot=input-group]]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	});
+});
+ComboboxContent.displayName = "ComboboxContent";
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		"data-slot": "combobox-list",
+		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)-(--spacing(9))),calc(var(--available-height)-(--spacing(9))))] scroll-py-1 overflow-y-auto overscroll-contain data-empty:hidden", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		"data-slot": "combobox-item",
+		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:[&>svg]:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		"data-slot": "combobox-group",
+		className: cn(className),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("hidden justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("my-1 h-px bg-border", className),
+		...props
+	});
+}
+var ComboboxPortal = Combobox$1.Portal;
+var comboboxChipsVariants = cva("group/combobox-chips flex flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:focus-within:ring-3 has-aria-invalid:focus-within:ring-destructive/20 has-[[data-slot=combobox-chip]]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:focus-within:ring-destructive/40 has-disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:pointer-events-none", { variants: { size: {
+	sm: "chips-sm min-h-7 px-2 py-0.5 text-xs",
+	md: "chips-md min-h-8 px-2.5 py-1 text-sm",
+	lg: "chips-lg min-h-9 px-3 py-1.5 text-sm"
+} } });
+function ComboboxChips({ className, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
+		"data-slot": "combobox-chips",
+		className: cn(comboboxChipsVariants({ size }), className),
+		...props
+	});
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn("flex w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", "h-5 text-xs", "group-[.chips-sm]/combobox-chips:h-4 group-[.chips-sm]/combobox-chips:text-[10px]", "group-[.chips-lg]/combobox-chips:h-6 group-[.chips-lg]/combobox-chips:text-sm", className),
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+			className: "-ml-1 flex size-4 items-center justify-center rounded-sm opacity-50 transition-opacity outline-none hover:opacity-100 hover:bg-foreground/10 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+			"data-slot": "combobox-chip-remove",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none size-3" })
+		})]
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		"data-slot": "combobox-chip-input",
+		className: cn("min-w-16 flex-1 outline-none bg-transparent disabled:opacity-100 disabled:cursor-not-allowed disabled:pointer-events-none", "h-5", "group-[.chips-sm]/combobox-chips:h-4", "group-[.chips-lg]/combobox-chips:h-6", className),
+		...props
+	});
+}
+function useComboboxContext() {
+	const context = React.useContext(ComboboxContext);
+	if (!context) throw new Error("useComboboxContext must be used within a Combobox");
+	return context;
+}
+var ComboboxAnchor = React.forwardRef(({ className, ...props }, ref) => {
+	const { setAnchor } = useComboboxContext();
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			setAnchor(node);
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		"data-slot": "combobox-anchor",
+		className,
+		...props
+	});
+});
+ComboboxAnchor.displayName = "ComboboxAnchor";
+//#endregion
+//#region src/components/micro/command.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var CommandContext = React.createContext({ size: "md" });
+var Command = React.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(CommandContext.Provider, {
+	value: { size },
+	children: /* @__PURE__ */ jsx(Command$1, {
+		ref,
+		"data-slot": "command",
+		className: cn("flex size-full flex-col overflow-hidden rounded-xl bg-popover text-popover-foreground", className),
+		...props
+	})
+}));
+Command.displayName = "Command";
+var commandInputVariants = cva("w-full outline-hidden disabled:cursor-not-allowed disabled:opacity-50", {
+	variants: { size: {
+		sm: "text-sm",
+		md: "text-sm",
+		lg: "text-base"
+	} },
+	defaultVariants: { size: "md" }
+});
+var CommandInput = React.forwardRef(({ className, ...props }, ref) => {
+	const { size } = React.useContext(CommandContext);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "command-input-wrapper",
+		className: cn("pb-0", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3"),
+		children: /* @__PURE__ */ jsxs(InputGroup, {
+			className: cn("rounded-lg border-input/30 bg-input/30 shadow-none", size === "sm" && "h-8", size === "md" && "h-10", size === "lg" && "h-11"),
+			children: [/* @__PURE__ */ jsx(Command$1.Input, {
+				ref,
+				"data-slot": "command-input",
+				className: cn(commandInputVariants({ size }), className),
+				...props
+			}), /* @__PURE__ */ jsx(InputGroupAddon, {
+				className: cn("shrink-0", size === "lg" ? "pl-3" : "pl-2"),
+				children: /* @__PURE__ */ jsx(SearchIcon, { className: cn("opacity-50", size === "lg" ? "size-5" : "size-4") })
+			})]
+		})
+	});
+});
+CommandInput.displayName = "CommandInput";
+var CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
+	ref,
+	"data-slot": "command-list",
+	className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className),
+	...props
+}));
+CommandList.displayName = "CommandList";
+var CommandEmpty = React.forwardRef(({ className, ...props }, ref) => {
+	const { size } = React.useContext(CommandContext);
+	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		ref,
+		"data-slot": "command-empty",
+		className: cn("text-center", size === "sm" && "py-4 text-xs", size === "md" && "py-6 text-sm", size === "lg" && "py-8 text-base", className),
+		...props
+	});
+});
+CommandEmpty.displayName = "CommandEmpty";
+var commandGroupVariants = cva("overflow-hidden text-foreground **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground **:[[cmdk-group-items]]:flex **:[[cmdk-group-items]]:flex-col", {
+	variants: { size: {
+		sm: "p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-items]]:gap-0.5",
+		md: "p-2 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-items]]:gap-1",
+		lg: "p-3 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-items]]:gap-1"
+	} },
+	defaultVariants: { size: "md" }
+});
+var CommandGroup = React.forwardRef(({ className, ...props }, ref) => {
+	const { size } = React.useContext(CommandContext);
+	return /* @__PURE__ */ jsx(Command$1.Group, {
+		ref,
+		"data-slot": "command-group",
+		className: cn(commandGroupVariants({ size }), className),
+		...props
+	});
+});
+CommandGroup.displayName = "CommandGroup";
+var CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
+	ref,
+	"data-slot": "command-separator",
+	className: cn("-mx-1 h-px bg-border", className),
+	...props
+}));
+CommandSeparator.displayName = "CommandSeparator";
+var commandItemVariants = cva("group/command-item relative flex cursor-default items-center outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:bg-accent hover:text-accent-foreground data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground *:pointer-events-none *:shrink-0 hover:*:text-accent-foreground data-[selected=true]:*:text-accent-foreground aria-selected:*:text-accent-foreground", {
+	variants: { size: {
+		sm: "gap-2 rounded-sm px-2 py-1 text-xs **:[svg:not([class*='size-'])]:size-3.5",
+		md: "gap-2 rounded-sm px-2 py-1.5 text-sm **:[svg:not([class*='size-'])]:size-4",
+		lg: "gap-3 rounded-md px-3 py-2.5 text-base **:[svg:not([class*='size-'])]:size-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+var CommandItem = React.forwardRef(({ className, children, ...props }, ref) => {
+	const { size } = React.useContext(CommandContext);
+	return /* @__PURE__ */ jsx(Command$1.Item, {
+		ref,
+		"data-slot": "command-item",
+		className: cn(commandItemVariants({ size }), className),
+		...props,
+		children
+	});
+});
+CommandItem.displayName = "CommandItem";
+var CommandShortcut = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	"data-slot": "command-shortcut",
+	className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className),
+	...props
+}));
+CommandShortcut.displayName = "CommandShortcut";
+//#endregion
+//#region src/components/micro/context-menu.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Displays a menu to the user — triggered by a right-click.
+* @requires ContextMenuTrigger, ContextMenuContent, ContextMenuItem
+* @example
+* <ContextMenu>
+*   <ContextMenuTrigger>Right click here</ContextMenuTrigger>
+*   <ContextMenuContent>
+*     <ContextMenuItem>Profile</ContextMenuItem>
+*   </ContextMenuContent>
+* </ContextMenu>
+*/
+function ContextMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Root, {
+		"data-slot": "context-menu",
+		...props
+	});
+}
+ContextMenu.displayName = "ContextMenu";
+var ContextMenuPortal = ContextMenu$1.Portal;
+ContextMenuPortal.displayName = "ContextMenuPortal";
+var ContextMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenu$1.Trigger, {
+	ref,
+	"data-slot": "context-menu-trigger",
+	className: cn("select-none", className),
+	...props
+}));
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
+			"data-slot": "context-menu-content",
+			className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+ContextMenuContent.displayName = "ContextMenuContent";
+function ContextMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.Group, {
+		"data-slot": "context-menu-group",
+		...props
+	});
+}
+ContextMenuGroup.displayName = "ContextMenuGroup";
+var ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
+	ref,
+	"data-slot": "context-menu-label",
+	"data-inset": inset,
+	className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
+	...props
+}));
+ContextMenuLabel.displayName = "ContextMenuLabel";
+var ContextMenuItem = React.forwardRef(({ className, inset, variant, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenu$1.Item, {
+	ref,
+	"data-slot": "context-menu-item",
+	"data-inset": inset,
+	"data-variant": variant,
+	className: cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4 focus:*:text-accent-foreground data-[variant=destructive]:*:text-destructive", className),
+	...props
+}));
+ContextMenuItem.displayName = "ContextMenuItem";
+function ContextMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.SubmenuRoot, {
+		"data-slot": "context-menu-sub",
+		...props
+	});
+}
+ContextMenuSub.displayName = "ContextMenuSub";
+var ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
+	ref,
+	"data-slot": "context-menu-sub-trigger",
+	"data-inset": inset,
+	className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground", className),
+	...props,
+	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4 shrink-0" })]
+}));
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+function ContextMenuSubContent({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenuContent, {
+		"data-slot": "context-menu-sub-content",
+		className: "shadow-lg",
+		side: "right",
+		...props
+	});
+}
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+var ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, inset, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
+	ref,
+	"data-slot": "context-menu-checkbox-item",
+	"data-inset": inset,
+	className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50", className),
+	checked,
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "pointer-events-none absolute right-2",
+		children: /* @__PURE__ */ jsx(ContextMenu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+	}), children]
+}));
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+function ContextMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(ContextMenu$1.RadioGroup, {
+		"data-slot": "context-menu-radio-group",
+		...props
+	});
+}
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup";
+var ContextMenuRadioItem = React.forwardRef(({ className, children, inset, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
+	ref,
+	"data-slot": "context-menu-radio-item",
+	"data-inset": inset,
+	className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "pointer-events-none absolute right-2",
+		children: /* @__PURE__ */ jsx(ContextMenu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
+	}), children]
+}));
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+var ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
+	ref,
+	"data-slot": "context-menu-separator",
+	className: cn("-mx-1 my-1 h-px bg-border", className),
+	...props
+}));
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+var ContextMenuShortcut = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	"data-slot": "context-menu-shortcut",
+	className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className),
+	...props
+}));
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+//#endregion
+//#region src/components/micro/dialog.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+function Dialog({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+var DialogTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+	ref,
+	"data-slot": "dialog-trigger",
+	...props
+}));
+DialogTrigger.displayName = "DialogTrigger";
+var DialogPortal = Dialog$1.Portal;
+var DialogClose = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Close, {
+	ref,
+	"data-slot": "dialog-close",
+	...props
+}));
+DialogClose.displayName = "DialogClose";
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+	ref,
+	"data-slot": "dialog-overlay",
+	className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+	...props
+}));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+	ref,
+	"data-slot": "dialog-content",
+	className: cn("group/dialog-content fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] overflow-y-auto", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+	...props,
+	children
+})] }));
+DialogContent.displayName = "DialogContent";
+var DialogHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "dialog-header",
+	className: cn("flex flex-col gap-2", className),
+	...props
+}));
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "dialog-footer",
+	className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+	...props,
+	children
+}));
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Title, {
+	ref,
+	"data-slot": "dialog-title",
+	className: cn("font-heading text-base leading-none font-medium", className),
+	...props
+}));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Description, {
+	ref,
+	"data-slot": "dialog-description",
+	className: cn("text-sm text-muted-foreground", className),
+	...props
+}));
+DialogDescription.displayName = "DialogDescription";
+//#endregion
+//#region src/components/micro/direction.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+//#endregion
+//#region src/components/micro/drawer.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+function Drawer({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Root, {
+		"data-slot": "drawer",
+		...props
+	});
+}
+Drawer.displayName = "Drawer";
+var DrawerTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Trigger, {
+	ref,
+	"data-slot": "drawer-trigger",
+	...props
+}));
+DrawerTrigger.displayName = "DrawerTrigger";
+var DrawerPortal = Drawer$1.Portal;
+var DrawerClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Close, {
+	ref,
+	"data-slot": "drawer-close",
+	...props
+}));
+DrawerClose.displayName = "DrawerClose";
+var DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
+	ref,
+	"data-slot": "drawer-overlay",
+	className: cn("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+	...props
+}));
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, {
+	"data-slot": "drawer-portal",
+	children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
+		ref,
+		"data-slot": "drawer-content",
+		className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
+	})]
+}));
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "drawer-header",
+	className: cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left", className),
+	...props
+}));
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "drawer-footer",
+	className: cn("mt-auto flex flex-col gap-2 p-4", className),
+	...props
+}));
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
+	ref,
+	"data-slot": "drawer-title",
+	className: cn("font-heading text-base font-medium text-foreground", className),
+	...props
+}));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
+	ref,
+	"data-slot": "drawer-description",
+	className: cn("text-sm text-muted-foreground", className),
+	...props
+}));
+DrawerDescription.displayName = "DrawerDescription";
+//#endregion
+//#region src/components/micro/dropdown-menu.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuPortal = Menu.Portal;
+DropdownMenuPortal.displayName = "DropdownMenuPortal";
+var DropdownMenuTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(Menu.Trigger, {
+	ref,
+	"data-slot": "dropdown-menu-trigger",
+	...props
+}));
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var DropdownMenuContent = React.forwardRef(({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			ref,
+			"data-slot": "dropdown-menu-content",
+			className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuGroup = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(Menu.Group, {
+	ref,
+	"data-slot": "dropdown-menu-group",
+	...props
+}));
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+var DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(Menu.GroupLabel, {
+	ref,
+	"data-slot": "dropdown-menu-label",
+	"data-inset": inset,
+	className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
+	...props
+}));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var DropdownMenuItem = React.forwardRef(({ className, inset, variant, ...props }, ref) => /* @__PURE__ */ jsx(Menu.Item, {
+	ref,
+	"data-slot": "dropdown-menu-item",
+	"data-inset": inset,
+	"data-variant": variant,
+	className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:*:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:text-destructive", className),
+	...props
+}));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+DropdownMenuSub.displayName = "DropdownMenuSub";
+var DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+	ref,
+	"data-slot": "dropdown-menu-sub-trigger",
+	"data-inset": inset,
+	className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:*:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4", className),
+	...props,
+	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+}));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+var DropdownMenuSubContent = React.forwardRef(({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuContent, {
+	ref,
+	"data-slot": "dropdown-menu-sub-content",
+	className: cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+	align,
+	alignOffset,
+	side,
+	sideOffset,
+	...props
+}));
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+var DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, inset, ...props }, ref) => /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+	ref,
+	"data-slot": "dropdown-menu-checkbox-item",
+	"data-inset": inset,
+	className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:*:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4", className),
+	checked,
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "pointer-events-none absolute right-2 flex items-center justify-center",
+		"data-slot": "dropdown-menu-checkbox-item-indicator",
+		children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+	}), children]
+}));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+var DropdownMenuRadioGroup = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(Menu.RadioGroup, {
+	ref,
+	"data-slot": "dropdown-menu-radio-group",
+	...props
+}));
+DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
+var DropdownMenuRadioItem = React.forwardRef(({ className, children, inset, ...props }, ref) => /* @__PURE__ */ jsxs(Menu.RadioItem, {
+	ref,
+	"data-slot": "dropdown-menu-radio-item",
+	"data-inset": inset,
+	className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:*:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 *:pointer-events-none *:shrink-0 **:[svg:not([class*='size-'])]:size-4", className),
+	...props,
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "pointer-events-none absolute right-2 flex items-center justify-center",
+		"data-slot": "dropdown-menu-radio-item-indicator",
+		children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) })
+	}), children]
+}));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Menu.Separator, {
+	ref,
+	"data-slot": "dropdown-menu-separator",
+	className: cn("-mx-1 my-1 h-px bg-border", className),
+	...props
+}));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuShortcut = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	"data-slot": "dropdown-menu-shortcut",
+	className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
+	...props
+}));
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+//#endregion
+//#region src/components/micro/empty.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description A placeholder state component for empty data.
+* @requires EmptyHeader, EmptyTitle, EmptyDescription, EmptyMedia, EmptyContent, EmptyAction
+* @example
+* <Empty>
+*   <EmptyHeader>
+*     <EmptyTitle>No data</EmptyTitle>
+*   </EmptyHeader>
+* </Empty>
+*/
+var Empty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "empty",
+	className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className),
+	...props
+}));
+Empty.displayName = "Empty";
+var EmptyHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "empty-header",
+	className: cn("flex max-w-sm flex-col items-center gap-2", className),
+	...props
+}));
+EmptyHeader.displayName = "EmptyHeader";
+var emptyMediaVariants = cva("flex shrink-0 items-center justify-center *:pointer-events-none *:shrink-0", { variants: { variant: { icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground **:[svg:not([class*='size-'])]:size-4" } } });
+var EmptyMedia = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "empty-icon",
+	"data-variant": variant,
+	className: cn(emptyMediaVariants({
+		variant,
+		className
+	})),
+	...props
+}));
+EmptyMedia.displayName = "EmptyMedia";
+var EmptyTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", {
+	ref,
+	"data-slot": "empty-title",
+	className: cn("font-heading text-sm font-medium tracking-tight", className),
+	...props
+}));
+EmptyTitle.displayName = "EmptyTitle";
+var EmptyDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", {
+	ref,
+	"data-slot": "empty-description",
+	className: cn("text-sm/relaxed text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:text-primary", className),
+	...props
+}));
+EmptyDescription.displayName = "EmptyDescription";
+var EmptyContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "empty-content",
+	className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className),
+	...props
+}));
+EmptyContent.displayName = "EmptyContent";
+var EmptyAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "empty-action",
+	className: cn("flex flex-col items-center gap-2", className),
+	...props
+}));
+EmptyAction.displayName = "EmptyAction";
+//#endregion
+//#region src/components/micro/label.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var labelVariants = cva("flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[invalid=true]:text-destructive", { variants: { size: {
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-sm"
+} } });
+/**
+* @description Renders an accessible label associated with controls.
+* @example
+* <Label htmlFor="email">Email</Label>
+*/
+var Label = React.forwardRef(({ className, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ jsx("label", {
+		ref,
+		"data-slot": "label",
+		className: cn(labelVariants({
+			size,
+			className
+		})),
+		...props
+	});
+});
+Label.displayName = "Label";
+//#endregion
+//#region src/components/micro/separator.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Visually or semantically separates content.
+* @example
+* <Separator orientation="vertical" />
+*/
+function Separator({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(Separator$1, {
+		"data-slot": "separator",
+		orientation,
+		className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className),
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/field.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var FieldSet = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("fieldset", {
+		ref,
+		"data-slot": "field-set",
+		className: cn("flex flex-col gap-4", className),
+		...props
+	});
+});
+FieldSet.displayName = "FieldSet";
+var FieldLegend = React.forwardRef(({ className, variant = "legend", ...props }, ref) => {
+	return /* @__PURE__ */ jsx("legend", {
+		ref,
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className),
+		...props
+	});
+});
+FieldLegend.displayName = "FieldLegend";
+var FieldGroup = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "field-group",
+		className: cn("group/field-group flex flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
+		...props
+	});
+});
+FieldGroup.displayName = "FieldGroup";
+var fieldVariants = cva("group/field flex min-w-fit", {
+	variants: {
+		orientation: {
+			vertical: "flex-col [&>.sr-only]:w-auto",
+			horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto",
+			responsive: "flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>[data-slot=field-label]]:flex-auto [&>.sr-only]:w-auto"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "vertical",
+			size: "sm",
+			className: "gap-0.5"
+		},
+		{
+			orientation: "vertical",
+			size: "md",
+			className: "gap-0.5"
+		},
+		{
+			orientation: "vertical",
+			size: "lg",
+			className: "gap-0.5"
+		},
+		{
+			orientation: "horizontal",
+			size: "sm",
+			className: "gap-1"
+		},
+		{
+			orientation: "horizontal",
+			size: "md",
+			className: "gap-1.5"
+		},
+		{
+			orientation: "horizontal",
+			size: "lg",
+			className: "gap-2"
+		},
+		{
+			orientation: "responsive",
+			size: "sm",
+			className: "gap-0.5 @md/field-group:gap-1"
+		},
+		{
+			orientation: "responsive",
+			size: "md",
+			className: "gap-0.5 @md/field-group:gap-1.5"
+		},
+		{
+			orientation: "responsive",
+			size: "lg",
+			className: "gap-0.5 @md/field-group:gap-2"
+		}
+	]
+});
+var Field = React.forwardRef(({ className, orientation = "vertical", size = "md", error, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		"data-size": size,
+		"data-invalid": !!error,
+		className: cn(fieldVariants({
+			orientation,
+			size
+		}), className),
+		...props
+	});
+});
+Field.displayName = "Field";
+var FieldContent = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className),
+		...props
+	});
+});
+FieldContent.displayName = "FieldContent";
+var FieldLabel = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Label, {
+		ref,
+		"data-slot": "field-label",
+		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "text-sm group-data-[size=sm]/field:text-xs", className),
+		...props
+	});
+});
+FieldLabel.displayName = "FieldLabel";
+var FieldTitle = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "field-title",
+		className: cn("flex w-fit items-center gap-2 font-medium group-data-[disabled=true]/field:opacity-50", "text-sm group-data-[size=sm]/field:text-xs", className),
+		...props
+	});
+});
+FieldTitle.displayName = "FieldTitle";
+var FieldDescription = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		"data-slot": "field-description",
+		className: cn("text-left leading-normal font-normal text-muted-foreground group-data-[orientation=horizontal]/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", "text-sm group-data-[size=sm]/field:text-xs", className),
+		...props
+	});
+});
+FieldDescription.displayName = "FieldDescription";
+var FieldSeparator = React.forwardRef(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "field-separator",
+		"data-content": !!children,
+		className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			"data-slot": "field-separator-content",
+			children
+		})]
+	});
+});
+FieldSeparator.displayName = "FieldSeparator";
+var FieldError = React.forwardRef(({ className, children, errors, ...props }, ref) => {
+	const content = React.useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-sm font-medium text-destructive flex items-start gap-1.5 animate-in fade-in-0 slide-in-from-top-1", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4 shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("div", {
+			className: "flex-1",
+			children: content
+		})]
+	});
+});
+FieldError.displayName = "FieldError";
+//#endregion
+//#region src/components/micro/hover-card.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description For sighted users to preview content available behind a link.
+* @requires HoverCardTrigger, HoverCardContent
+* @example
+* <HoverCard>
+*   <HoverCardTrigger>Hover me</HoverCardTrigger>
+*   <HoverCardContent>Details</HoverCardContent>
+* </HoverCard>
+*/
+function HoverCard({ ...props }) {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+var HoverCardTrigger = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+	ref,
+	"data-slot": "hover-card-trigger",
+	...props
+}));
+HoverCardTrigger.displayName = "HoverCardTrigger";
+var HoverCardPortal = PreviewCard.Portal;
+var HoverCardContent = React.forwardRef(({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate",
+		children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+			ref,
+			"data-slot": "hover-card-content",
+			className: cn("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100", "data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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", "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none motion-reduce:transition-none", className),
+			...props
+		})
+	});
+});
+HoverCardContent.displayName = "HoverCardContent";
+//#endregion
+//#region src/components/micro/input.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (20 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var inputVariants = cva("min-w-0 rounded-lg border border-input bg-transparent text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50", { variants: { size: {
+	sm: "h-7 px-2 py-0.5 text-xs",
+	md: "h-8 px-2.5 py-1 text-sm",
+	lg: "h-9 px-3 py-1.5 text-sm"
+} } });
+/**
+* @description Displays a form input field or a component that looks like an input field.
+* @example
+* <Input type="email" placeholder="Email" />
+*/
+var Input = React.forwardRef(function Input({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Input$1, {
+		ref,
+		"data-slot": "input",
+		className: cn(inputVariants({
+			size,
+			className
+		})),
+		...props
+	});
+});
+Input.displayName = "Input";
+//#endregion
+//#region src/components/micro/input-otp.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (20 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var inputOTPVariants = cva("cn-input-otp group/otp inline-flex items-center has-disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:pointer-events-none", { variants: { size: {
+	sm: "min-h-7 text-xs",
+	md: "min-h-8 text-sm",
+	lg: "min-h-9 text-sm"
+} } });
+var InputOTP = React.forwardRef(({ className, containerClassName, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp",
+		"data-size": size,
+		className: cn(inputOTPVariants({ size })),
+		children: /* @__PURE__ */ jsx(OTPInput, {
+			...ref ? { ref } : {},
+			containerClassName: cn("flex items-center", containerClassName),
+			spellCheck: false,
+			className: cn("disabled:cursor-not-allowed disabled:opacity-100", className),
+			...props
+		})
+	});
+});
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "input-otp-group",
+		className: cn("flex items-center gap-2", className),
+		...props
+	});
+});
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+	const { char, hasFakeCaret, isActive } = React.useContext(OTPInputContext)?.slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "input-otp-slot",
+		"data-active": isActive ? "" : void 0,
+		className: cn("relative flex size-8 group-data-[size=sm]/otp:size-7 group-data-[size=lg]/otp:size-9 items-center justify-center border border-input rounded-lg bg-transparent transition-colors outline-none", "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50", "data-active:z-10 data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:ring-offset-1 data-active:ring-offset-background", "data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-3 data-active:aria-invalid:ring-destructive/50", "dark:bg-input/30 dark:data-active:aria-invalid:ring-destructive/50", className),
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" })
+		})]
+	});
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "input-otp-separator",
+		className: cn("flex items-center text-muted-foreground [&>svg:not([class*='size-'])]:size-4 group-data-[size=sm]/otp:[&>svg:not([class*='size-'])]:size-3.5", className),
+		role: "separator",
+		...props,
+		children
+	});
+});
+InputOTPSeparator.displayName = "InputOTPSeparator";
+//#endregion
+//#region src/components/micro/item.tsx
+/**
+* @description Base flex container for listing items consistently.
+*/
+function ItemGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "list",
+		"data-slot": "item-group",
+		className: cn("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", className),
+		...props
+	});
+}
+function ItemSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "item-separator",
+		orientation: "horizontal",
+		className: cn("my-2", className),
+		...props
+	});
+}
+var itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background [&_a]:transition-colors [&_a]:hover:bg-muted border-transparent", { variants: {
+	variant: {
+		outline: "border-border",
+		muted: "border-transparent bg-muted/50"
+	},
+	size: {
+		sm: "gap-1 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+		md: "gap-1.5 px-3 py-2.5",
+		lg: "gap-2 px-3.5 py-2.5"
+	}
+} });
+function Item({ className, variant, size = "md", render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(itemVariants({
+			variant,
+			size,
+			className
+		})) }, props),
+		render,
+		state: {
+			slot: "item",
+			variant,
+			size
+		}
+	});
+}
+var itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&>svg]:pointer-events-none bg-transparent", { variants: { variant: {
+	icon: "[&_svg:not([class*='size-'])]:size-4",
+	image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&>img]:size-full [&>img]:object-cover"
+} } });
+function ItemMedia({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-media",
+		"data-variant": variant,
+		className: cn(itemMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function ItemContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-content",
+		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
+		...props
+	});
+}
+function ItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-title",
+		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
+		...props
+	});
+}
+function ItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "item-description",
+		className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+function ItemActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-actions",
+		className: cn("flex items-center gap-2", className),
+		...props
+	});
+}
+function ItemHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-header",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+}
+function ItemFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-footer",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/kbd.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Displays a keyboard shortcut.
+* @example
+* <Kbd>⌘K</Kbd>
+*/
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&>svg:not([class*='size-'])]:size-3", className),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/menubar.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description A visually persistent menu common in desktop applications.
+* @requires MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem
+* @example
+* <Menubar>
+*   <MenubarMenu>
+*     <MenubarTrigger>File</MenubarTrigger>
+*     <MenubarContent><MenubarItem>New</MenubarItem></MenubarContent>
+*   </MenubarMenu>
+* </Menubar>
+*/
+function Menubar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1, {
+		"data-slot": "menubar",
+		className: cn("flex h-8 items-center gap-0.5 rounded-lg border border-border p-[3px]", className),
+		...props
+	});
+}
+function MenubarMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+}
+function MenubarGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuGroup, {
+		"data-slot": "menubar-group",
+		...props
+	});
+}
+function MenubarPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuPortal, {
+		"data-slot": "menubar-portal",
+		...props
+	});
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		"data-slot": "menubar-trigger",
+		className: cn("flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className),
+		...props
+	});
+}
+function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "menubar-content",
+		align,
+		alignOffset,
+		sideOffset,
+		className: cn("min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className),
+		...props
+	});
+}
+function MenubarItem({ className, inset, variant, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuItem, {
+		"data-slot": "menubar-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:[&>svg]:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&>svg:not([class*='size-'])]:size-4 data-[variant=destructive]:[&>svg]:text-destructive", className),
+		...props
+	});
+}
+function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "menubar-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:[&>svg]:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:pointer-events-none [&>svg]:shrink-0", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) })
+		}), children]
+	});
+}
+function MenubarRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+		"data-slot": "menubar-radio-group",
+		...props
+	});
+}
+function MenubarRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "menubar-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:[&>svg]:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) })
+		}), children]
+	});
+}
+function MenubarLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuLabel, {
+		"data-slot": "menubar-label",
+		"data-inset": inset,
+		className: cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className),
+		...props
+	});
+}
+function MenubarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuSeparator, {
+		"data-slot": "menubar-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+}
+function MenubarShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuShortcut, {
+		"data-slot": "menubar-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className),
+		...props
+	});
+}
+function MenubarSub({ ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuSub, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+}
+function MenubarSubTrigger({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuSubTrigger, {
+		"data-slot": "menubar-sub-trigger",
+		"data-inset": inset,
+		className: cn("gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function MenubarSubContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+		"data-slot": "menubar-sub-content",
+		className: cn("min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/navigation-menu.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description A collection of links for navigating websites.
+* @requires NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent
+*/
+var NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Root, {
+		ref,
+		"data-slot": "navigation-menu",
+		className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
+		...props,
+		children
+	});
+});
+NavigationMenu.displayName = "NavigationMenu";
+var NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.List, {
+		ref,
+		"data-slot": "navigation-menu-list",
+		className: cn("group flex flex-1 list-none items-center justify-center gap-0", className),
+		...props
+	});
+});
+NavigationMenuList.displayName = "NavigationMenuList";
+var NavigationMenuItem = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		ref,
+		"data-slot": "navigation-menu-item",
+		className: cn("relative", className),
+		...props
+	});
+});
+NavigationMenuItem.displayName = "NavigationMenuItem";
+function navigationMenuTriggerStyle(className) {
+	return cn("group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted", className);
+}
+var NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(NavigationMenu$1.Trigger, {
+		ref,
+		"data-slot": "navigation-menu-trigger",
+		className: cn(navigationMenuTriggerStyle("group"), className),
+		...props,
+		children: [
+			children,
+			" ",
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180",
+				"aria-hidden": "true"
+			})
+		]
+	});
+});
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+var NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		ref,
+		"data-slot": "navigation-menu-content",
+		className: cn("data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95", className),
+		...props
+	});
+});
+NavigationMenuContent.displayName = "NavigationMenuContent";
+var NavigationMenuPositioner = React.forwardRef(({ className, side = "bottom", sideOffset = 8, align = "start", alignOffset = 0, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
+		ref,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		className: cn("isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0", className),
+		...props,
+		children: /* @__PURE__ */ jsx(NavigationMenu$1.Popup, {
+			className: "data-ending-style:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0",
+			children: /* @__PURE__ */ jsx(NavigationMenuViewport, {})
+		})
+	});
+});
+NavigationMenuPositioner.displayName = "NavigationMenuPositioner";
+var NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
+	ref,
+	className: cn("relative size-full overflow-hidden", className),
+	...props
+}));
+NavigationMenuViewport.displayName = "NavigationMenuViewport";
+var NavigationMenuLink = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		ref,
+		"data-slot": "navigation-menu-link",
+		className: cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background in-data-[slot=navigation-menu-content]:rounded-md in-data-[slot=navigation-menu-content]:focus:ring-0 in-data-[slot=navigation-menu-content]:focus:outline-none data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&>svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+});
+NavigationMenuLink.displayName = "NavigationMenuLink";
+var NavigationMenuPortal = NavigationMenu$1.Portal;
+//#endregion
+//#region src/components/micro/pagination.tsx
+var ellipsisSizeMap = {
+	sm: {
+		container: "size-7",
+		icon: "[&>svg:not([class*='size-'])]:size-3"
+	},
+	md: {
+		container: "size-9",
+		icon: "[&>svg:not([class*='size-'])]:size-4"
+	},
+	lg: {
+		container: "size-11",
+		icon: "[&>svg:not([class*='size-'])]:size-5"
+	}
+};
+/**
+* @description Pagination with page navigation, next and previous links.
+* @requires PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious
+*/
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		role: "navigation",
+		"aria-label": "pagination",
+		"data-slot": "pagination",
+		className: cn("group/pagination mx-auto flex w-full justify-center", className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: cn("flex items-center gap-0.5", className),
+		...props
+	});
+}
+function PaginationItem({ ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+function PaginationLink({ className, isActive, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant: isActive ? "outline" : "ghost",
+		size,
+		className,
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("a", {
+			"aria-current": isActive ? "page" : void 0,
+			"data-slot": "pagination-link",
+			"data-active": isActive ? "" : void 0,
+			...props
+		})
+	});
+}
+function PaginationPrevious({ className, text = "Previous", size = "md", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		size,
+		className: cn("pl-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {
+			"aria-hidden": "true",
+			"data-icon": "inline-start"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		})]
+	});
+}
+function PaginationNext({ className, text = "Next", size = "md", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		size,
+		className: cn("pr-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		}), /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"aria-hidden": "true",
+			"data-icon": "inline-end"
+		})]
+	});
+}
+function PaginationEllipsis({ className, size = "md", ...props }) {
+	const { container, icon } = ellipsisSizeMap[size];
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "pagination-ellipsis",
+		className: cn("flex items-center justify-center", container, icon, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
+//#endregion
+//#region src/components/micro/popover.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+* - No Hardcoded Dimensions
+*/
+function Popover(props) {
+	return /* @__PURE__ */ jsx(Popover$1.Root, { ...props });
+}
+var PopoverTrigger = React.forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		ref,
+		"data-slot": "popover-trigger",
+		...props
+	});
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverPortal = Popover$1.Portal;
+var PopoverContent = React.forwardRef(({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+			ref,
+			"data-slot": "popover-content",
+			className: cn("flex origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	});
+});
+PopoverContent.displayName = "PopoverContent";
+var PopoverHeader = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-0.5 text-sm", className),
+		...props
+	});
+});
+PopoverHeader.displayName = "PopoverHeader";
+var PopoverTitle = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Popover$1.Title, {
+		ref,
+		"data-slot": "popover-title",
+		className: cn("font-medium", className),
+		...props
+	});
+});
+PopoverTitle.displayName = "PopoverTitle";
+var PopoverDescription = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Popover$1.Description, {
+		ref,
+		"data-slot": "popover-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+});
+PopoverDescription.displayName = "PopoverDescription";
+//#endregion
+//#region src/components/micro/progress.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var ProgressContext = React.createContext({
+	size: "md",
+	color: "primary"
+});
+/**
+* @description Displays an indicator showing the completion progress of a task.
+* @example
+* <Progress value={33} />
+*/
+function Progress({ className, children, size = "md", color = "primary", ...props }) {
+	return /* @__PURE__ */ jsx(ProgressContext.Provider, {
+		value: {
+			size,
+			color
+		},
+		children: /* @__PURE__ */ jsx(Progress$1.Root, {
+			"data-slot": "progress",
+			className: cn("flex flex-wrap gap-x-3 gap-y-1.5", className),
+			...props,
+			children
+		})
+	});
+}
+function ProgressTrack({ className, ...props }) {
+	const { size } = React.useContext(ProgressContext);
+	return /* @__PURE__ */ jsx(Progress$1.Track, {
+		className: cn("relative flex w-full items-center overflow-x-hidden rounded-full bg-muted", size ? {
+			sm: "h-1",
+			md: "h-1.5",
+			lg: "h-2"
+		}[size] : "", className),
+		"data-slot": "progress-track",
+		...props
+	});
+}
+function ProgressIndicator({ className, ...props }) {
+	const { color } = React.useContext(ProgressContext);
+	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
+		"data-slot": "progress-indicator",
+		className: cn("h-full transition-all", {
+			primary: "bg-primary",
+			secondary: "bg-secondary",
+			destructive: "bg-destructive",
+			success: "bg-success",
+			warning: "bg-warning",
+			info: "bg-info",
+			tertiary: "bg-tertiary",
+			muted: "bg-muted",
+			accent: "bg-accent"
+		}[color], className),
+		...props
+	});
+}
+function ProgressLabel({ className, ...props }) {
+	const { size } = React.useContext(ProgressContext);
+	return /* @__PURE__ */ jsx(Progress$1.Label, {
+		className: cn({
+			sm: "text-xs",
+			md: "text-sm",
+			lg: "text-base"
+		}[size], "font-medium", className),
+		"data-slot": "progress-label",
+		...props
+	});
+}
+function ProgressValue({ className, ...props }) {
+	const { size } = React.useContext(ProgressContext);
+	return /* @__PURE__ */ jsx(Progress$1.Value, {
+		className: cn("ml-auto text-muted-foreground tabular-nums", {
+			sm: "text-xs",
+			md: "text-sm",
+			lg: "text-base"
+		}[size], className),
+		"data-slot": "progress-value",
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/radio-group.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var RadioGroup = React.forwardRef(function RadioGroup({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		ref,
+		"data-slot": "radio-group",
+		className: cn("grid gap-2", className),
+		...props
+	});
+});
+RadioGroup.displayName = "RadioGroup";
+var radioGroupItemVariants = cva("group/radio peer relative flex aspect-square shrink-0 rounded-full border border-input after:absolute after:content-[''] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", { variants: { size: {
+	sm: "size-3.5 after:-inset-x-2.5 after:-inset-y-2.5",
+	md: "size-4 after:-inset-x-3 after:-inset-y-2",
+	lg: "size-5 after:-inset-x-4 after:-inset-y-3"
+} } });
+var RadioGroupItem = React.forwardRef(function RadioGroupItem({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		ref,
+		"data-slot": "radio-group-item",
+		"data-size": size,
+		className: cn(radioGroupItemVariants({
+			size,
+			className
+		})),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "flex items-center justify-center size-4 group-data-[size=sm]/radio:size-3.5 group-data-[size=lg]/radio:size-5",
+			children: /* @__PURE__ */ jsx("span", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground size-2 group-data-[size=sm]/radio:size-1.5 group-data-[size=lg]/radio:size-2.5" })
+		})
+	});
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+//#endregion
+//#region src/components/micro/resizable.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Accessible resizable panel groups and layouts.
+* @requires ResizablePanel, ResizableHandle
+*/
+function ResizablePanelGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Group, {
+		"data-slot": "resizable-panel-group",
+		className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className),
+		...props
+	});
+}
+function ResizablePanel({ ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Panel, {
+		"data-slot": "resizable-panel",
+		...props
+	});
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+	return /* @__PURE__ */ jsx(ResizablePrimitive.Separator, {
+		"data-slot": "resizable-handle",
+		className: cn("relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]_[data-slot=resizable-handle-bar]]:rotate-90", className),
+		...props,
+		children: withHandle && /* @__PURE__ */ jsx("div", {
+			"data-slot": "resizable-handle-bar",
+			className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border"
+		})
+	});
+}
+//#endregion
+//#region src/components/micro/scroll-area.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Augments native scroll functionality for custom, cross-browser styling.
+* @example
+* <ScrollArea className="h-[200px] w-[350px]">
+*   Jokester began sneaking into the castle in the middle of the night.
+* </ScrollArea>
+*/
+function ScrollArea({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
+		"data-slot": "scroll-area",
+		className: cn("relative", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+				children
+			}),
+			/* @__PURE__ */ jsx(ScrollBar, {}),
+			/* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		"data-orientation": orientation,
+		orientation,
+		className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-border data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-border data-vertical:border-l-transparent", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "relative flex-1 rounded-full bg-border"
+		})
+	});
+}
+//#endregion
+//#region src/components/micro/sheet.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+function Sheet({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		"data-slot": "sheet",
+		...props
+	});
+}
+function SheetTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+function SheetClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+var SheetPortal = Dialog$1.Portal;
+function SheetOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		"data-slot": "sheet-overlay",
+		className: cn("fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none", className),
+		...props
+	});
+}
+function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+		"data-slot": "sheet-content",
+		"data-side": side,
+		className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm motion-reduce:transition-none", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog$1.Close, {
+			"data-slot": "sheet-close",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: "absolute top-4 right-4",
+				size: "sm"
+			}),
+			children: [/* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+}
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cn("flex flex-col gap-0.5 p-4", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: cn("mt-auto flex flex-col gap-2 p-4", className),
+		...props
+	});
+}
+function SheetTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "sheet-title",
+		className: cn("font-heading text-base font-medium text-foreground", className),
+		...props
+	});
+}
+function SheetDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "sheet-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/sidebar.tsx
+var Sidebar = React.forwardRef(({ className, defaultState = "expanded", expandedWidth = 256, collapsedWidth = 72, ...props }, ref) => {
+	const handleTransitionStart = (e) => {
+		if (e.propertyName === "width") e.currentTarget.style.willChange = "width";
+	};
+	const handleTransitionEnd = (e) => {
+		if (e.propertyName === "width") e.currentTarget.style.willChange = "auto";
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "navigation",
+		"aria-expanded": defaultState === "expanded",
+		style: {
+			"--sb-expanded": `${expandedWidth}px`,
+			"--sb-collapsed": `${collapsedWidth}px`
+		},
+		className: cn("group shrink-0 h-full overflow-hidden border-r border-r-border bg-sidebar text-sidebar-foreground", "transition-[width,border-width] duration-[400ms]", "data-[state=expanded]:w-[var(--sb-expanded)]", "data-[state=collapsed]:w-[var(--sb-collapsed)]", collapsedWidth === 0 && "data-[state=collapsed]:border-r-0", className),
+		"data-state": defaultState,
+		onTransitionStart: handleTransitionStart,
+		onTransitionEnd: handleTransitionEnd,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex h-full flex-col p-2",
+			style: { width: `${expandedWidth}px` },
+			...props
+		})
+	});
+});
+Sidebar.displayName = "Sidebar";
+var SidebarLogo = React.forwardRef(({ className, icon, text, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex h-12 items-center overflow-hidden text-sidebar-foreground", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center justify-center",
+			style: { width: "calc(var(--sb-collapsed) - 16px)" },
+			children: icon
+		}), /* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap font-semibold transition-opacity group-data-[state=collapsed]:opacity-0 group-data-[state=collapsed]:duration-[80ms] group-data-[state=expanded]:duration-[200ms] group-data-[state=expanded]:delay-[300ms]",
+			children: text
+		})]
+	});
+});
+SidebarLogo.displayName = "SidebarLogo";
+var SidebarLabel = React.forwardRef(({ className, icon, text, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex h-10 items-center overflow-hidden text-sm text-sidebar-foreground", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground cursor-pointer rounded-md", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0 items-center justify-center [&>svg]:size-4",
+			style: { width: "calc(var(--sb-collapsed) - 16px)" },
+			children: icon
+		}), /* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap transition-opacity group-data-[state=collapsed]:opacity-0 group-data-[state=collapsed]:duration-[80ms] group-data-[state=expanded]:duration-[200ms] group-data-[state=expanded]:delay-[300ms]",
+			children: text
+		})]
+	});
+});
+SidebarLabel.displayName = "SidebarLabel";
+var SidebarMenuItemList = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex flex-col gap-1", className),
+		...props
+	});
+});
+SidebarMenuItemList.displayName = "SidebarMenuItemList";
+var SidebarMenuItem = React.forwardRef(({ className, text, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex h-8 items-center pr-4 text-sm text-sidebar-foreground/70", "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground cursor-pointer rounded-md", className),
+		style: { paddingLeft: "calc(var(--sb-collapsed) - 16px)" },
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap transition-opacity group-data-[state=collapsed]:opacity-0 group-data-[state=collapsed]:duration-[80ms] group-data-[state=expanded]:duration-[200ms] group-data-[state=expanded]:delay-[300ms]",
+			children: text
+		})
+	});
+});
+SidebarMenuItem.displayName = "SidebarMenuItem";
+function useSidebarToggle(initialState = "expanded", onStateChange) {
+	const sidebarRef = React.useRef(null);
+	const onStateChangeRef = React.useRef(onStateChange);
+	React.useEffect(() => {
+		onStateChangeRef.current = onStateChange;
+	}, [onStateChange]);
+	const setSidebarState = React.useCallback((state) => {
+		if (sidebarRef.current) {
+			sidebarRef.current.setAttribute("data-state", state);
+			sidebarRef.current.setAttribute("aria-expanded", String(state === "expanded"));
+			onStateChangeRef.current?.(state);
+		}
+	}, []);
+	return {
+		sidebarRef,
+		toggleSidebar: React.useCallback(() => {
+			if (sidebarRef.current) {
+				const current = sidebarRef.current.getAttribute("data-state");
+				setSidebarState(current === "expanded" ? "collapsed" : "expanded");
+			}
+		}, [setSidebarState]),
+		setSidebarState,
+		defaultState: initialState
+	};
+}
+//#endregion
+//#region src/components/micro/skeleton.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description Use to show a placeholder while content is loading.
+* @example
+* <Skeleton className="w-[100px] h-[20px] rounded-full" />
+*/
+var Skeleton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	"data-slot": "skeleton",
+	className: cn("animate-pulse rounded-lg bg-muted", className),
+	...props
+}));
+Skeleton.displayName = "Skeleton";
+//#endregion
+//#region src/components/micro/slider.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var sliderVariants = cva("peer group/slider data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full");
+var trackVariants = cva("relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", { variants: { size: {
+	sm: "data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1",
+	md: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
+	lg: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2"
+} } });
+var thumbVariants = cva("relative block shrink-0 rounded-full border border-ring bg-background ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 focus-visible:ring-3 focus-visible:ring-offset-1 focus-visible:ring-offset-background has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-offset-1 has-[:focus-visible]:ring-offset-background focus-visible:outline-none has-[:focus-visible]:outline-none disabled:pointer-events-none group-aria-invalid/slider:border-destructive group-aria-invalid/slider:focus-visible:border-destructive group-aria-invalid/slider:has-[:focus-visible]:border-destructive group-aria-invalid/slider:focus-visible:ring-destructive/50 group-aria-invalid/slider:has-[:focus-visible]:ring-destructive/50 dark:group-aria-invalid/slider:focus-visible:ring-destructive/50 dark:group-aria-invalid/slider:has-[:focus-visible]:ring-destructive/50", { variants: { size: {
+	sm: "size-3",
+	md: "size-4",
+	lg: "size-5"
+} } });
+var SliderContext = React.createContext({ size: "md" });
+var Slider = React.forwardRef(function Slider({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(SliderContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(Slider$1.Root, {
+			ref,
+			className: cn(sliderVariants({ className })),
+			"data-slot": "slider",
+			thumbAlignment: "edge",
+			...props
+		})
+	});
+});
+Slider.displayName = "Slider";
+var SliderControl = React.forwardRef(function SliderControl({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider$1.Control, {
+		ref,
+		"data-slot": "slider-control",
+		className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-disabled:cursor-not-allowed data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+		...props
+	});
+});
+SliderControl.displayName = "SliderControl";
+var SliderTrack = React.forwardRef(function SliderTrack({ className, ...props }, ref) {
+	const { size } = React.useContext(SliderContext);
+	return /* @__PURE__ */ jsx(Slider$1.Track, {
+		ref,
+		"data-slot": "slider-track",
+		className: cn(trackVariants({ size }), className),
+		...props
+	});
+});
+SliderTrack.displayName = "SliderTrack";
+var SliderIndicator = React.forwardRef(function SliderIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Slider$1.Indicator, {
+		ref,
+		"data-slot": "slider-indicator",
+		className: cn("group-aria-invalid/slider:bg-destructive bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full", className),
+		...props
+	});
+});
+SliderIndicator.displayName = "SliderIndicator";
+var SliderThumb = React.forwardRef(function SliderThumb({ className, ...props }, ref) {
+	const { size } = React.useContext(SliderContext);
+	return /* @__PURE__ */ jsx(Slider$1.Thumb, {
+		ref,
+		"data-slot": "slider-thumb",
+		className: cn(thumbVariants({ size }), className),
+		...props
+	});
+});
+SliderThumb.displayName = "SliderThumb";
+//#endregion
+//#region src/components/micro/spinner.tsx
+var spinnerVariants = cva("animate-spin motion-reduce:animate-none", { variants: { size: {
+	sm: "size-3.5",
+	md: "size-4",
+	lg: "size-5"
+} } });
+/**
+* @description A loading indicator component.
+* @example
+* <Spinner size="md" />
+*/
+function Spinner({ className, size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": "Loading",
+		className: spinnerVariants({
+			size,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/theme-provider.tsx
+/**
+* ThemeProvider — Micro primitive.
+*
+* Supports both **uncontrolled** and **controlled** modes:
+*
+* - **Uncontrolled**: pass `defaultMode` (optional). Internal state manages
+*   the current mode. Children call `setMode()` via `useTheme()`.
+* - **Controlled**: pass `mode` + `onModeChange`. The caller owns the state;
+*   `setMode()` inside the context delegates to `onModeChange`.
+*
+* Does NOT read localStorage, system preference, or sync to <html>.
+* All of that belongs to Macro layer (e.g. a ThemeManager preset).
+*/
+var ThemeContext = React.createContext(void 0);
+/**
+* Read and control the nearest ThemeProvider.
+* Returns `undefined` when no provider is found in the tree.
+*
+* @example
+* ```tsx
+* const theme = useTheme();
+* theme?.setMode("dark");
+* console.log(theme?.mode); // "light" | "dark"
+* ```
+*/
+function useTheme() {
+	return React.useContext(ThemeContext);
+}
+/**
+* ThemeProvider — wraps children in a `display: contents` div with the
+* `.dark` or `.light` class applied, enabling CSS variable cascade without
+* affecting layout.
+*
+* @example Uncontrolled
+* ```tsx
+* <ThemeProvider defaultMode="dark">
+*   <App />
+* </ThemeProvider>
+* ```
+*
+* @example Controlled
+* ```tsx
+* const [mode, setMode] = useState<ThemeMode>("light");
+*
+* <ThemeProvider mode={mode} onModeChange={setMode}>
+*   <App />
+* </ThemeProvider>
+* ```
+*/
+function ThemeProvider({ children, defaultMode, mode: controlledMode, onModeChange }) {
+	const isControlled = controlledMode !== void 0;
+	const [internalMode, setInternalMode] = React.useState(defaultMode ?? "light");
+	const mode = isControlled ? controlledMode : internalMode;
+	const setMode = React.useCallback((next) => {
+		if (isControlled) onModeChange(next);
+		else setInternalMode(next);
+	}, [isControlled, onModeChange]);
+	const value = React.useMemo(() => ({
+		mode,
+		setMode
+	}), [mode, setMode]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			className: mode,
+			style: { display: "contents" },
+			children
+		})
+	});
+}
+ThemeProvider.displayName = "ThemeProvider";
+/**
+* ThemeWrapper — re-applies the current theme class inside a Portal.
+* Used internally by Dialog, Tooltip, Popover, etc. to tunnel the theme
+* across the Portal boundary.
+*
+* Falls back gracefully (renders children as-is) when no ThemeProvider
+* is found in the tree.
+*/
+function ThemeWrapper({ children }) {
+	const theme = useTheme();
+	if (!theme) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx("div", {
+		className: theme.mode,
+		style: { display: "contents" },
+		children
+	});
+}
+ThemeWrapper.displayName = "ThemeWrapper";
+//#endregion
+//#region src/components/micro/sonner.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+function Toaster({ ...props }) {
+	const theme = useTheme()?.mode;
+	return /* @__PURE__ */ jsx(Toaster$1, {
+		theme,
+		className: "toaster group",
+		icons: {
+			success: /* @__PURE__ */ jsx(CircleCheckIcon, {
+				"aria-hidden": "true",
+				className: "size-4"
+			}),
+			info: /* @__PURE__ */ jsx(InfoIcon, {
+				"aria-hidden": "true",
+				className: "size-4"
+			}),
+			warning: /* @__PURE__ */ jsx(TriangleAlertIcon, {
+				"aria-hidden": "true",
+				className: "size-4"
+			}),
+			error: /* @__PURE__ */ jsx(OctagonXIcon, {
+				"aria-hidden": "true",
+				className: "size-4"
+			}),
+			loading: /* @__PURE__ */ jsx(Spinner, { size: "md" })
+		},
+		richColors: true,
+		style: {
+			"--normal-bg": "var(--popover)",
+			"--normal-text": "var(--popover-foreground)",
+			"--normal-border": "var(--border)",
+			"--border-radius": "var(--radius)",
+			"--success-bg": "color-mix(in srgb, var(--success) 10%, var(--popover))",
+			"--success-text": "var(--success)",
+			"--success-border": "color-mix(in srgb, var(--success) 20%, var(--popover))",
+			"--error-bg": "color-mix(in srgb, var(--destructive) 10%, var(--popover))",
+			"--error-text": "var(--destructive)",
+			"--error-border": "color-mix(in srgb, var(--destructive) 20%, var(--popover))",
+			"--warning-bg": "color-mix(in srgb, var(--warning) 10%, var(--popover))",
+			"--warning-text": "var(--warning)",
+			"--warning-border": "color-mix(in srgb, var(--warning) 20%, var(--popover))",
+			"--info-bg": "color-mix(in srgb, var(--info) 10%, var(--popover))",
+			"--info-text": "var(--info)",
+			"--info-border": "color-mix(in srgb, var(--info) 20%, var(--popover))"
+		},
+		toastOptions: { classNames: {
+			toast: "group toast",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"
+		} },
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/switch.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var switchVariants = cva("group/switch peer relative inline-flex shrink-0 items-center rounded-full border border-transparent p-px after:absolute after:content-[''] transition-all outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:focus-visible:ring-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-secondary data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", { variants: { size: {
+	sm: "switch-sm h-4 w-7 after:-inset-x-2.5 after:-inset-y-2.5",
+	md: "switch-md h-5 w-9 after:-inset-x-3 after:-inset-y-2",
+	lg: "switch-lg h-6 w-11 after:-inset-x-4 after:-inset-y-3"
+} } });
+/**
+* @description A control that allows the user to toggle between checked and not checked.
+* @example
+* <Switch id="airplane-mode" />
+*/
+var Switch = React.forwardRef(function Switch({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		ref,
+		"data-slot": "switch",
+		className: cn(switchVariants({
+			size,
+			className
+		})),
+		...props
+	});
+});
+Switch.displayName = "Switch";
+var SwitchThumb = React.forwardRef(function SwitchThumb({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Switch$1.Thumb, {
+		ref,
+		"data-slot": "switch-thumb",
+		className: cn("pointer-events-none block rounded-full bg-background shadow-sm shadow-black/10 ring-0 transition-transform data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground size-4 data-checked:translate-x-4 group-[.switch-sm]/switch:size-3 group-[.switch-sm]/switch:data-checked:translate-x-3 group-[.switch-lg]/switch:size-5 group-[.switch-lg]/switch:data-checked:translate-x-5", className),
+		...props
+	});
+});
+SwitchThumb.displayName = "SwitchThumb";
+//#endregion
+//#region src/components/micro/table.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var Table = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "table-container",
+		className: cn("group/table relative w-full overflow-auto", className),
+		...props,
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: "w-full caption-bottom text-sm",
+			children
+		})
+	});
+});
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("thead", {
+		ref,
+		"data-slot": "table-header",
+		className: cn("[&>tr]:border-b", className),
+		...props
+	});
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("tbody", {
+		ref,
+		"data-slot": "table-body",
+		className: cn("[&>tr:last-child]:border-0", className),
+		...props
+	});
+});
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("tfoot", {
+		ref,
+		"data-slot": "table-footer",
+		className: cn("border-t border-t-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
+});
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		"data-slot": "table-row",
+		className: cn("border-b border-b-border transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
+		...props
+	});
+});
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(({ className, sortDirection, sortOptions = [
+	"asc",
+	"desc",
+	"none"
+], onSort, children, ...props }, ref) => {
+	const handleSortClick = () => {
+		if (!onSort || !sortDirection || sortOptions.length === 0) return;
+		const currentIndex = sortOptions.indexOf(sortDirection);
+		onSort(sortOptions[currentIndex === -1 ? 0 : (currentIndex + 1) % sortOptions.length]);
+	};
+	return /* @__PURE__ */ jsx("th", {
+		ref,
+		"data-slot": "table-head",
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground has-[[role=checkbox]]:pr-0", className),
+		...props,
+		children: onSort && sortDirection ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleSortClick,
+			className: "-ml-1 flex items-center gap-1.5 rounded-sm px-1 py-0.5 text-inherit hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+			children: [children, /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx(ChevronUp, { className: cn("size-[14px] -mb-1.5 opacity-30", { "opacity-100": sortDirection === "asc" }) }), /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-[14px] opacity-30", { "opacity-100": sortDirection === "desc" }) })]
+			})]
+		}) : children
+	});
+});
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("td", {
+		ref,
+		"data-slot": "table-cell",
+		className: cn("p-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0", className),
+		...props
+	});
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("caption", {
+		ref,
+		"data-slot": "table-caption",
+		className: cn("mt-4 text-sm text-muted-foreground", className),
+		...props
+	});
+});
+TableCaption.displayName = "TableCaption";
+//#endregion
+//#region src/components/micro/tabs.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var Tabs = React.forwardRef(({ className, orientation = "horizontal", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		ref,
+		"data-slot": "tabs",
+		"data-orientation": orientation,
+		"data-horizontal": orientation === "horizontal" ? "" : void 0,
+		"data-vertical": orientation === "vertical" ? "" : void 0,
+		className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
+		...props
+	});
+});
+Tabs.displayName = "Tabs";
+var tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none bg-muted", { variants: { variant: { line: "gap-1 bg-transparent" } } });
+var TabsList = React.forwardRef(({ className, variant, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Tabs$1.List, {
+		ref,
+		"data-slot": "tabs-list",
+		"data-variant": variant,
+		className: cn(tabsListVariants({ variant }), className),
+		...props
+	});
+});
+TabsList.displayName = "TabsList";
+var TabsTrigger = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		ref,
+		"data-slot": "tabs-trigger",
+		className: cn("relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 py-1.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 has-[[data-icon=inline-end]]:pr-1 has-[[data-icon=inline-start]]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground data-active:shadow-sm group-data-[variant=line]/tabs-list:data-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-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className),
+		...props
+	});
+});
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		ref,
+		"data-slot": "tabs-content",
+		className: cn("flex-1 text-sm outline-none", className),
+		...props
+	});
+});
+TabsContent.displayName = "TabsContent";
+//#endregion
+//#region src/components/micro/textarea.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var textareaVariants = cva("flex field-sizing-content min-h-16 min-w-0 rounded-lg border border-input bg-transparent text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50", { variants: { size: {
+	sm: "px-2 py-1.5 text-xs",
+	md: "px-2.5 py-2",
+	lg: "px-3 py-2.5"
+} } });
+/**
+* @description Displays a form textarea.
+* @example
+* <Textarea placeholder="Type your message here." />
+*/
+var Textarea = React.forwardRef(function Textarea({ className, size = "md", ...props }, ref) {
+	return /* @__PURE__ */ jsx("textarea", {
+		ref,
+		"data-slot": "textarea",
+		className: cn(textareaVariants({
+			size,
+			className
+		})),
+		...props
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+//#region src/components/micro/toggle.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var toggleVariants = cva("group/toggle inline-flex items-center justify-center rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 dark:aria-invalid:focus-visible:ring-destructive/50 aria-pressed:bg-muted aria-pressed:text-foreground data-[state=on]:bg-muted data-[state=on]:text-foreground [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4 bg-transparent", { variants: {
+	variant: {
+		default: "",
+		outline: "border border-input bg-transparent hover:bg-muted hover:text-foreground"
+	},
+	size: {
+		sm: "h-7 min-w-7 gap-1 px-2.5 text-xs [&>svg:not([class*='size-'])]:size-3.5",
+		md: "h-8 min-w-8 gap-1.5 px-3 text-sm",
+		lg: "h-9 min-w-9 gap-2 px-3.5 text-sm"
+	}
+} });
+/**
+* @description A two-state button that can be either on or off.
+* @example
+* <Toggle aria-label="Toggle italic">
+*   <ItalicIcon />
+* </Toggle>
+*/
+function Toggle({ className, variant = "default", size = "md", ...props }) {
+	return /* @__PURE__ */ jsx(Toggle$1, {
+		"data-slot": "toggle",
+		className: toggleVariants({
+			variant,
+			size,
+			className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/micro/toggle-group.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+var ToggleGroupContext = React.createContext({
+	variant: "default",
+	size: "md",
+	spacing: 2,
+	orientation: "horizontal"
+});
+/**
+* @description A set of two-state buttons that can be toggled on or off.
+* @requires ToggleGroupItem
+* @example
+* <ToggleGroup>
+*   <ToggleGroupItem value="a">A</ToggleGroupItem>
+* </ToggleGroup>
+*/
+function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup$1, {
+		"data-slot": "toggle-group",
+		"data-variant": variant,
+		"data-size": size,
+		"data-spacing": spacing,
+		"data-orientation": orientation,
+		style: { "--gap": spacing },
+		className: cn("group/toggle-group flex w-fit items-center rounded-lg data-[size=sm]:rounded-md data-vertical:flex-col data-vertical:items-stretch", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+			value: {
+				variant,
+				size,
+				spacing,
+				orientation
+			},
+			children
+		})
+	});
+}
+function ToggleGroupItem({ className, children, variant, size = "md", ...props }) {
+	const context = React.useContext(ToggleGroupContext);
+	return /* @__PURE__ */ jsx(Toggle$1, {
+		"data-slot": "toggle-group-item",
+		"data-variant": context.variant ?? variant,
+		"data-size": context.size ?? size,
+		"data-spacing": context.spacing,
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+			variant: context.variant ?? variant,
+			size: context.size ?? size
+		}), className),
+		...props,
+		children
+	});
+}
+//#endregion
+//#region src/components/micro/tooltip.tsx
+/**
+* ✅ AUDITED & REFACTORED
+* - Design System Compliant (22 Commandments)
+* - WCAG AAA/AA
+* - Form Control Parity
+* - CSS Delegated Logic
+*/
+/**
+* @description A popup that displays information related to an element.
+* @requires TooltipTrigger, TooltipContent, TooltipProvider
+* @example
+* <TooltipProvider>
+*   <Tooltip>
+*     <TooltipTrigger>Hover</TooltipTrigger>
+*     <TooltipContent>Add to library</TooltipContent>
+*   </Tooltip>
+* </TooltipProvider>
+*/
+function TooltipProvider({ delay = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+}
+function Tooltip({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip$1.Root, {
+		"data-slot": "tooltip",
+		...props
+	});
+}
+var TooltipTrigger = React.forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		ref,
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+var TooltipPortal = Tooltip$1.Portal;
+var TooltipContent = React.forwardRef(({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
+			ref,
+			"data-slot": "tooltip-content",
+			className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props,
+			children
+		})
+	});
+});
+TooltipContent.displayName = "TooltipContent";
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertIcon, AlertTitle, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonIcon, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxIndicator, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxAnchor, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPortal, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyAction, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverPortal, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectPortal, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarLabel, SidebarLogo, SidebarMenuItem, SidebarMenuItemList, Skeleton, Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack, Spinner, Switch, SwitchThumb, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeWrapper, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, labelVariants, navigationMenuTriggerStyle, selectTriggerVariants, tabsListVariants, toggleVariants, useCarousel, useComboboxContext, useDirection, useIsMobile, useSidebarToggle, useTheme };
+
+//# sourceMappingURL=index.js.map