@classytic/fluid 0.2.4 → 0.3.2

package/dist/client/core.mjs

@@ -0,0 +1,2779 @@
+"use client";
+
+import { t as cn } from "../utils-DQ5SCVoW.mjs";
+import { t as useMediaQuery } from "../use-media-query-BnVNIKT4.mjs";
+import { n as CustomPagination, r as PaginationInfo, t as ApiPagination } from "../api-pagination-DBTE0yk4.mjs";
+import { i as ClientSubmitButton, n as FormSheet, r as SheetWrapper, t as ConfirmSheet } from "../sheet-wrapper-CWNCvYMD.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import * as React$1 from "react";
+import { Children, Fragment as Fragment$1, createElement, isValidElement, memo, useEffect, useMemo, useRef, useState } from "react";
+import { AlertCircle, AlertTriangle, ArrowLeft, ArrowRight, Check, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronUp, ChevronUpIcon, Circle, Copy, Info, Loader2, MinusIcon, MoreHorizontal, RefreshCw, X } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { cva } from "class-variance-authority";
+import { Item, ItemContent, ItemDescription } from "@/components/ui/item";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Image from "next/image";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+//#region src/components/accordion-wrapper.tsx
+/**
+* AccordionSection - Single collapsible section with smooth animation
+*
+* @example
+* ```tsx
+* <AccordionSection title="Settings" icon={<Settings className="h-4 w-4" />}>
+*   <div>Content here</div>
+* </AccordionSection>
+* ```
+*/
+const AccordionSection = memo(function AccordionSection({ title, icon, children, defaultOpen = false, className, badge }) {
+	return /* @__PURE__ */ jsx(Accordion, {
+		defaultValue: defaultOpen ? ["section"] : [],
+		className,
+		children: /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "section",
+			className: "border-0",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-3 hover:no-underline",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						icon && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: icon
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: title
+						}),
+						badge
+					]
+				})
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "pt-2",
+				children
+			}) })]
+		})
+	});
+});
+/**
+* FaqAccordion - FAQ-style accordion where only one item can be open by default
+*
+* @example
+* ```tsx
+* <FaqAccordion
+*   items={[
+*     { id: "1", question: "What is this?", answer: "A FAQ accordion" },
+*     { id: "2", question: "How does it work?", answer: "Click to expand" },
+*   ]}
+* />
+* ```
+*/
+const FaqAccordion = memo(function FaqAccordion({ items, defaultOpen, className, multiple = false }) {
+	return /* @__PURE__ */ jsx(Accordion, {
+		defaultValue: defaultOpen ? [defaultOpen] : [],
+		multiple,
+		className: cn("w-full", className),
+		children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
+			value: item.id,
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "text-left",
+				children: item.question
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: item.answer })]
+		}, item.id))
+	});
+});
+
+//#endregion
+//#region src/components/card-wrapper.tsx
+const CARD_VARIANTS = {
+	default: "",
+	outline: "border-2",
+	ghost: "border-0 shadow-none bg-transparent",
+	elevated: "shadow-lg border-0",
+	primary: "border-primary/20 bg-primary/5",
+	secondary: "border-secondary/20 bg-secondary/5",
+	destructive: "border-destructive/20 bg-destructive/5",
+	success: "border-green-500/20 bg-green-500/5",
+	warning: "border-yellow-500/20 bg-yellow-500/5"
+};
+const CARD_SIZES = {
+	sm: "p-3",
+	default: "p-6",
+	lg: "p-8",
+	xl: "p-10"
+};
+const CARD_CONTENT_SIZES = {
+	sm: "pt-3",
+	default: "pt-6",
+	lg: "pt-8",
+	xl: "pt-10"
+};
+function CardWrapper({ title, description, children, footer, className, headerClassName, contentClassName, footerClassName, variant = "default", size = "default", hideHeader = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn(CARD_VARIANTS[variant], className),
+		...props,
+		children: [
+			!hideHeader && (title || description) && /* @__PURE__ */ jsxs(CardHeader, {
+				className: cn(CARD_SIZES[size], "pb-4", headerClassName),
+				children: [title && /* @__PURE__ */ jsx(CardTitle, {
+					className: "text-lg font-semibold",
+					children: title
+				}), description && /* @__PURE__ */ jsx(CardDescription, { children: description })]
+			}),
+			/* @__PURE__ */ jsx(CardContent, {
+				className: cn(hideHeader ? CARD_SIZES[size] : CARD_CONTENT_SIZES[size], contentClassName),
+				children
+			}),
+			footer && /* @__PURE__ */ jsx(CardFooter, {
+				className: cn(CARD_SIZES[size], "pt-4 border-t", footerClassName),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full",
+					children: footer
+				})
+			})
+		]
+	});
+}
+const DATA_CARD_COLS = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-2 md:grid-cols-3",
+	4: "grid-cols-2 md:grid-cols-4"
+};
+function DataCard({ title, data, cols = 3, className, ...props }) {
+	return /* @__PURE__ */ jsx(CardWrapper, {
+		title,
+		className: cn("space-y-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-4", DATA_CARD_COLS[cols]),
+			children: data.map((item, index) => /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: item.label
+				}), /* @__PURE__ */ jsx("p", {
+					className: cn("text-lg font-semibold", item.color),
+					children: item.value
+				})]
+			}, index))
+		})
+	});
+}
+function LoadingCard({ title, description, className, ...props }) {
+	return /* @__PURE__ */ jsx(CardWrapper, {
+		title,
+		description,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center py-8",
+			children: [/* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }), /* @__PURE__ */ jsx("span", {
+				className: "ml-2",
+				children: "Loading..."
+			})]
+		})
+	});
+}
+const STATS_CARD_VARIANTS = {
+	default: "",
+	success: "bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-900",
+	warning: "bg-yellow-50 border-yellow-200 dark:bg-yellow-950/30 dark:border-yellow-900",
+	danger: "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900",
+	info: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900"
+};
+const STATS_ICON_VARIANTS = {
+	default: "text-muted-foreground",
+	success: "text-green-600 dark:text-green-400",
+	warning: "text-yellow-600 dark:text-yellow-400",
+	danger: "text-red-600 dark:text-red-400",
+	info: "text-blue-600 dark:text-blue-400"
+};
+const STATS_ICON_WRAPPER_VARIANTS = {
+	default: "bg-muted border border-border",
+	success: "bg-green-100/50 dark:bg-green-900/30",
+	warning: "bg-yellow-100/50 dark:bg-yellow-900/30",
+	danger: "bg-red-100/50 dark:bg-red-900/30",
+	info: "bg-blue-100/50 dark:bg-blue-900/30"
+};
+function StatsCard({ title, value, description, icon, trend, className, statsVariant = "default", iconClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(CardWrapper, {
+		className: cn("relative overflow-hidden", STATS_CARD_VARIANTS[statsVariant], className),
+		size: "sm",
+		hideHeader: true,
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium text-muted-foreground",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-2xl font-bold",
+						children: value
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: description
+					})
+				]
+			}), icon && /* @__PURE__ */ jsx("div", {
+				className: cn("p-2 rounded-md", STATS_ICON_WRAPPER_VARIANTS[statsVariant], STATS_ICON_VARIANTS[statsVariant], iconClassName),
+				children: icon
+			})]
+		}), trend && /* @__PURE__ */ jsx("div", {
+			className: cn("absolute top-2 right-2 text-xs px-2 py-1 rounded-full", trend.type === "up" && "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300", trend.type === "down" && "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300", trend.type === "neutral" && "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"),
+			children: trend.value
+		})]
+	});
+}
+function DraggableCard({ title, subtitle, badges, actions, details, dragHandleProps, className, isDragging, isHidden, children, ...props }) {
+	return /* @__PURE__ */ jsx(CardWrapper, {
+		hideHeader: true,
+		className: cn("transition-all", isDragging && "shadow-lg rotate-2", isHidden && "opacity-50", className),
+		contentClassName: "!pt-4",
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [
+				dragHandleProps && /* @__PURE__ */ jsx("div", {
+					...dragHandleProps,
+					className: "mt-1 cursor-grab hover:text-foreground",
+					children: dragHandleProps.icon || /* @__PURE__ */ jsxs("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "16",
+						height: "16",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						className: "text-muted-foreground",
+						children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: "9",
+								cy: "12",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "9",
+								cy: "5",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "9",
+								cy: "19",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "15",
+								cy: "12",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "15",
+								cy: "5",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "15",
+								cy: "19",
+								r: "1"
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0 space-y-3",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [title && /* @__PURE__ */ jsx("h4", {
+								className: "font-medium",
+								children: title
+							}), badges && /* @__PURE__ */ jsx("div", {
+								className: "flex flex-wrap gap-1",
+								children: badges
+							})]
+						}),
+						subtitle && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground break-words",
+							children: subtitle
+						}),
+						details,
+						children
+					]
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2 flex-shrink-0",
+					children: actions
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/collapsible-wrapper.tsx
+function CollapsibleWrapper({ children, trigger, defaultOpen = false, open, onOpenChange, triggerAsChild = false, triggerVariant = "outline", triggerSize = "sm", triggerClassName, contentClassName, className, showChevron = true, chevronPosition = "right", disabled = false, ...props }) {
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const isOpen = open !== void 0 ? open : internalOpen;
+	const handleOpenChange = onOpenChange || setInternalOpen;
+	const chevronElement = showChevron && /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center", chevronPosition === "left" && "order-first mr-2", chevronPosition === "right" && "ml-2"),
+		children: isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+	});
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		disabled,
+		className: cn("w-full", className),
+		...props,
+		children: [triggerAsChild && isValidElement(trigger) ? /* @__PURE__ */ jsx(CollapsibleTrigger, { render: trigger }) : /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: triggerVariant,
+				size: triggerSize,
+				disabled,
+				className: cn("justify-between", triggerClassName)
+			}),
+			children: [trigger, chevronElement]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: cn("mt-2", contentClassName),
+			children
+		})]
+	});
+}
+function CollapsibleCard({ title, children, defaultOpen = false, className, headerClassName, contentClassName, ...props }) {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		className: cn("border rounded-lg overflow-hidden", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("flex items-center justify-between w-full px-4 py-3 cursor-pointer transition-colors hover:bg-secondary/5 bg-transparent border-0 text-left", headerClassName)
+			}),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: title
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200", isOpen && "rotate-180") })]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+			className: cn("px-4 py-3 border-t", contentClassName),
+			children
+		}) })]
+	});
+}
+function CollapsibleSection({ label, children, defaultOpen = false, className, labelClassName, contentClassName, ...props }) {
+	return /* @__PURE__ */ jsx(CollapsibleWrapper, {
+		trigger: label,
+		defaultOpen,
+		triggerVariant: "ghost",
+		triggerSize: "sm",
+		triggerClassName: cn("h-8 px-2 font-medium justify-between", labelClassName),
+		contentClassName: cn("pl-4 mt-1", contentClassName),
+		className: cn("space-y-1", className),
+		...props,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/confirm-dialog.tsx
+function ConfirmDialog({ open, onOpenChange, trigger, title = "Are you sure?", description = "This action cannot be undone.", confirmText = "Confirm", cancelText = "Cancel", variant = "destructive", isLoading = false, onConfirm, onCancel, icon, children, className, headerClassName, descriptionClassName, footerClassName, showCancel = true, ...props }) {
+	const handleConfirm = () => {
+		if (onConfirm) onConfirm();
+	};
+	const handleCancel = () => {
+		if (onCancel) onCancel();
+		else onOpenChange(false);
+	};
+	const triggerChildren = (trigger?.props)?.children;
+	const triggerElement = trigger ? React$1.cloneElement(trigger, { children: void 0 }) : null;
+	return /* @__PURE__ */ jsxs(AlertDialog, {
+		open,
+		onOpenChange,
+		...props,
+		children: [triggerElement && /* @__PURE__ */ jsx(AlertDialogTrigger, {
+			render: triggerElement,
+			children: triggerChildren
+		}), /* @__PURE__ */ jsxs(AlertDialogContent, {
+			className: cn("max-w-md", className),
+			children: [
+				/* @__PURE__ */ jsxs(AlertDialogHeader, {
+					className: cn(headerClassName),
+					children: [/* @__PURE__ */ jsxs(AlertDialogTitle, {
+						className: "flex items-center gap-2",
+						children: [icon || variant === "destructive" && /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-destructive" }), title]
+					}), description && /* @__PURE__ */ jsx(AlertDialogDescription, {
+						className: cn(descriptionClassName),
+						children: description
+					})]
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: "py-4",
+					children
+				}),
+				/* @__PURE__ */ jsxs(AlertDialogFooter, {
+					className: cn(footerClassName),
+					children: [showCancel && /* @__PURE__ */ jsx(AlertDialogCancel, {
+						onClick: handleCancel,
+						disabled: isLoading,
+						children: cancelText
+					}), onConfirm && /* @__PURE__ */ jsx(AlertDialogAction, {
+						onClick: handleConfirm,
+						disabled: isLoading,
+						variant,
+						children: isLoading ? /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Loading..."]
+						}) : confirmText
+					})]
+				})
+			]
+		})]
+	});
+}
+function DeleteConfirmDialog({ open, onOpenChange, onConfirm, isLoading = false, itemName = "item", itemDetails, ...props }) {
+	return /* @__PURE__ */ jsx(ConfirmDialog, {
+		open,
+		onOpenChange,
+		title: "Delete Item",
+		description: `Are you sure you want to delete this ${itemName}? This action cannot be undone.`,
+		confirmText: "Yes, Delete",
+		cancelText: "No",
+		variant: "destructive",
+		isLoading,
+		onConfirm,
+		...props,
+		children: itemDetails && /* @__PURE__ */ jsx("div", {
+			className: "bg-muted/50 p-3 rounded-md",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-sm space-y-1",
+				children: itemDetails
+			})
+		})
+	});
+}
+/**
+* InfoAlert - Information/warning alert with only confirm button (no cancel)
+*
+* @example
+* ```tsx
+* <InfoAlert
+*   open={open}
+*   onOpenChange={setOpen}
+*   title="Session expired"
+*   description="Please log in again"
+*   confirmText="OK"
+*   onConfirm={() => setOpen(false)}
+* />
+* ```
+*/
+function InfoAlert({ title, description, confirmText = "OK", onConfirm, onOpenChange, ...props }) {
+	return /* @__PURE__ */ jsx(ConfirmDialog, {
+		title,
+		description,
+		confirmText,
+		variant: "default",
+		showCancel: false,
+		onConfirm: onConfirm || (() => onOpenChange(false)),
+		onOpenChange,
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/copy-button.tsx
+async function copyToClipboard(text, options) {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+function CopyButton({ value, className, size = "sm", variant = "ghost", showToast = true, toastMessage = "Copied to clipboard", errorMessage = "Failed to copy to clipboard", timeout = 2e3, children, ...props }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = async () => {
+		if (!value) return;
+		if (await copyToClipboard(value, {
+			showToast,
+			successMessage: toastMessage,
+			errorMessage
+		})) {
+			setCopied(true);
+			setTimeout(() => setCopied(false), timeout);
+		}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		size,
+		className: cn("h-6 w-6 p-0", className),
+		onClick: handleCopy,
+		disabled: !value,
+		...props,
+		children: children || (copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }))
+	});
+}
+function CopyText({ value, displayValue, className, textClassName, buttonClassName, maxLength = 30, showButton = true, ...buttonProps }) {
+	const truncatedValue = displayValue || (value && value.length > maxLength ? `${value.substring(0, maxLength)}...` : value || "N/A");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("font-medium", textClassName),
+			title: value || "N/A",
+			children: truncatedValue
+		}), showButton && value && /* @__PURE__ */ jsx(CopyButton, {
+			value,
+			className: buttonClassName,
+			...buttonProps
+		})]
+	});
+}
+function CopyCodeBlock({ value, className, language, showLineNumbers = false, ...buttonProps }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative group", className),
+		children: [/* @__PURE__ */ jsx("pre", {
+			className: "bg-muted p-4 rounded-md overflow-x-auto text-sm",
+			children: /* @__PURE__ */ jsx("code", {
+				className: language ? `language-${language}` : "",
+				children: value
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
+			children: /* @__PURE__ */ jsx(CopyButton, {
+				value,
+				variant: "secondary",
+				size: "sm",
+				...buttonProps
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/dialog-wrapper.tsx
+const SIZE_VARIANTS = {
+	sm: "sm:max-w-sm",
+	default: "sm:max-w-md",
+	lg: "sm:max-w-lg md:max-w-2xl",
+	xl: "sm:max-w-2xl md:max-w-4xl",
+	"2xl": "sm:max-w-4xl md:max-w-6xl",
+	full: "max-w-[95vw] h-[95vh]"
+};
+function DialogWrapper({ open, onOpenChange, title, description, children, footer, trigger, size = "default", className, headerClassName, contentClassName, footerClassName, hideHeader = false, hideTitle = false, hideDescription = false, hideCloseButton = false, ...props }) {
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onOpenChange,
+		...props,
+		children: [trigger && /* @__PURE__ */ jsx(DialogTrigger, { render: trigger }), /* @__PURE__ */ jsxs(DialogContent, {
+			showCloseButton: !hideCloseButton,
+			className: cn("max-w-none", SIZE_VARIANTS[size], contentClassName, className),
+			children: [
+				!hideHeader && /* @__PURE__ */ jsxs(DialogHeader, {
+					className: cn("space-y-2", headerClassName),
+					children: [hideTitle ? /* @__PURE__ */ jsx(DialogTitle, {
+						className: "sr-only",
+						children: title || "Dialog"
+					}) : /* @__PURE__ */ jsx(DialogTitle, { children: title || "Dialog" }), description && (hideDescription ? /* @__PURE__ */ jsx(DialogDescription, {
+						className: "sr-only",
+						children: description
+					}) : /* @__PURE__ */ jsx(DialogDescription, { children: description }))]
+				}),
+				children,
+				footer && /* @__PURE__ */ jsx(DialogFooter, {
+					className: cn("gap-2", footerClassName),
+					children: footer
+				})
+			]
+		})]
+	});
+}
+function FormDialog({ open, onOpenChange, title, description, children, onSubmit, onCancel, submitText = "Save", cancelText = "Cancel", isLoading = false, submitDisabled = false, ...props }) {
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		onSubmit?.(e);
+	};
+	return /* @__PURE__ */ jsx(DialogWrapper, {
+		open,
+		onOpenChange,
+		title,
+		description,
+		...props,
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: handleSubmit,
+			children: [children, /* @__PURE__ */ jsxs(DialogFooter, {
+				className: "gap-2 mt-4",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: onCancel || (() => onOpenChange(false)),
+					disabled: isLoading,
+					children: cancelText
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					disabled: isLoading || submitDisabled,
+					children: isLoading ? "Loading..." : submitText
+				})]
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/dropdown-wrapper.tsx
+function DropdownWrapper({ trigger, children, align = "end", side = "bottom", sideOffset = 4, className, contentClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align,
+			side,
+			sideOffset,
+			className: cn("min-w-[160px]", contentClassName),
+			children
+		})]
+	});
+}
+function ActionDropdown({ items = [], triggerIcon: TriggerIcon = MoreHorizontal, triggerVariant = "ghost", triggerSize = "sm", triggerClassName, triggerLabel, showOnHover = false, align = "end", contentClassName, onOpenChange, stopPropagation = true, ...props }) {
+	const handleTriggerClick = (e) => {
+		if (stopPropagation) e.stopPropagation();
+	};
+	const trigger = /* @__PURE__ */ jsxs(Button, {
+		variant: triggerVariant,
+		size: triggerSize,
+		onClick: handleTriggerClick,
+		className: cn(showOnHover && "opacity-0 group-hover:opacity-100 transition-opacity", triggerClassName),
+		children: [
+			/* @__PURE__ */ jsx(TriggerIcon, { className: "h-4 w-4" }),
+			triggerLabel && /* @__PURE__ */ jsx("span", {
+				className: "ml-2",
+				children: triggerLabel
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Open menu"
+			})
+		]
+	});
+	const handleItemClick = (item) => (e) => {
+		if (stopPropagation) e.stopPropagation();
+		item.onClick?.(e);
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		onOpenChange,
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align,
+			className: cn("min-w-[180px]", contentClassName),
+			children: items.map((item, index) => {
+				if (item.hidden) return null;
+				if (item.type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, item.key || `separator-${index}`);
+				if (item.type === "label") return /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
+					className: item.className,
+					children: item.label
+				}) }, item.key || `label-${index}`);
+				if (item.type === "group") return /* @__PURE__ */ jsx(DropdownMenuGroup, { children: item.items?.map((groupItem, groupIndex) => {
+					if (groupItem.hidden) return null;
+					const GroupItemIcon = groupItem.icon;
+					const groupItemLabel = typeof groupItem.label === "function" ? groupItem.label() : groupItem.label;
+					return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: handleItemClick(groupItem),
+						disabled: groupItem.disabled,
+						className: cn(groupItem.variant === "destructive" && "text-destructive focus:text-destructive", groupItem.className),
+						children: [
+							GroupItemIcon && /* @__PURE__ */ jsx(GroupItemIcon, { className: "h-4 w-4" }),
+							/* @__PURE__ */ jsx("span", { children: groupItemLabel }),
+							groupItem.shortcut && /* @__PURE__ */ jsx("span", {
+								className: "ml-auto text-xs tracking-widest text-muted-foreground",
+								children: groupItem.shortcut
+							})
+						]
+					}, groupItem.key || `group-item-${groupIndex}`);
+				}) }, item.key || `group-${index}`);
+				const ItemIcon = item.icon;
+				const displayLabel = typeof item.label === "function" ? item.label() : item.label;
+				return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: handleItemClick(item),
+					disabled: item.disabled,
+					className: cn(item.variant === "destructive" && "text-destructive focus:text-destructive", item.className),
+					children: [
+						ItemIcon && /* @__PURE__ */ jsx(ItemIcon, { className: "h-4 w-4" }),
+						/* @__PURE__ */ jsx("span", { children: displayLabel }),
+						item.shortcut && /* @__PURE__ */ jsx("span", {
+							className: "ml-auto text-xs tracking-widest text-muted-foreground",
+							children: item.shortcut
+						})
+					]
+				}, item.key || `item-${index}`);
+			})
+		})]
+	});
+}
+function SelectDropdown({ value, onValueChange, placeholder = "Select option...", options = [], triggerClassName, contentClassName, disabled = false, ...props }) {
+	const selectedOption = options.find((option) => option.value === value);
+	const trigger = /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		disabled,
+		className: cn("w-full justify-between", !selectedOption && "text-muted-foreground", triggerClassName),
+		children: [selectedOption ? selectedOption.label : placeholder, /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			className: cn("w-full min-w-(--anchor-width)", contentClassName),
+			children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: () => onValueChange?.(option.value),
+				className: cn("cursor-pointer", value === option.value && "bg-accent"),
+				children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
+			}, option.value))
+		})]
+	});
+}
+function CheckboxDropdown({ values = [], onValuesChange, placeholder = "Select options...", options = [], triggerClassName, contentClassName, disabled = false, showSelectedCount = true, ...props }) {
+	const selectedOptions = options.filter((option) => values.includes(option.value));
+	const displayText = selectedOptions.length > 0 ? showSelectedCount ? `${selectedOptions.length} selected` : selectedOptions.map((opt) => opt.label).join(", ") : placeholder;
+	const trigger = /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		disabled,
+		className: cn("w-full justify-between", selectedOptions.length === 0 && "text-muted-foreground", triggerClassName),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: displayText
+		}), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+	});
+	const handleCheckedChange = (optionValue, checked) => {
+		if (checked) onValuesChange?.([...values, optionValue]);
+		else onValuesChange?.(values.filter((value) => value !== optionValue));
+	};
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			className: cn("w-full min-w-(--anchor-width)", contentClassName),
+			children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+				checked: values.includes(option.value),
+				onCheckedChange: (checked) => handleCheckedChange(option.value, checked),
+				children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
+			}, option.value))
+		})]
+	});
+}
+function RadioDropdown({ value, onValueChange, placeholder = "Select option...", options = [], triggerClassName, contentClassName, disabled = false, ...props }) {
+	const selectedOption = options.find((option) => option.value === value);
+	const trigger = /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		disabled,
+		className: cn("w-full justify-between", !selectedOption && "text-muted-foreground", triggerClassName),
+		children: [selectedOption ? selectedOption.label : placeholder, /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			className: cn("w-full min-w-(--anchor-width)", contentClassName),
+			children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+				value,
+				onValueChange,
+				children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+					value: option.value,
+					children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
+				}, option.value))
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/error-state.tsx
+/**
+* ErrorState Component
+*
+* Reusable error display component with retry functionality
+* Used for consistent error handling across pages
+*/
+function ErrorState({ title = "Error", error, onRetry, variant = "destructive", className, icon }) {
+	const errorMessage = typeof error === "string" ? error : error?.message || "Something went wrong. Please try again.";
+	return /* @__PURE__ */ jsxs(Alert, {
+		variant,
+		className: cn(className),
+		children: [
+			icon || /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+			/* @__PURE__ */ jsx(AlertTitle, { children: title }),
+			/* @__PURE__ */ jsxs(AlertDescription, {
+				className: "mt-2 flex flex-col gap-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm",
+					children: errorMessage
+				}), onRetry && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Button, {
+					onClick: onRetry,
+					variant: "outline",
+					size: "sm",
+					className: "gap-2",
+					children: [/* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }), "Try Again"]
+				}) })]
+			})
+		]
+	});
+}
+/**
+* Inline ErrorState variant - more compact for table cells
+*/
+function ErrorStateInline({ error, onRetry, className, icon }) {
+	const errorMessage = typeof error === "string" ? error : error?.message || "Error loading data";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2 text-sm text-destructive", className),
+		children: [
+			icon || /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+			/* @__PURE__ */ jsx("span", { children: errorMessage }),
+			onRetry && /* @__PURE__ */ jsxs(Button, {
+				onClick: onRetry,
+				variant: "ghost",
+				size: "sm",
+				className: "h-6 px-2 gap-1",
+				children: [/* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }), "Retry"]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/info-row.tsx
+function InfoRow({ label, value, copyable = false, icon: Icon }) {
+	if (!value && value !== 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col sm:flex-row sm:justify-between sm:items-center py-3 gap-2 group hover:bg-muted rounded-md px-3 -mx-3 transition-colors",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 min-w-0",
+			children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-muted-foreground truncate",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sm:text-right min-w-0 flex-shrink-0",
+			children: copyable ? /* @__PURE__ */ jsx(CopyText, {
+				value: String(value),
+				textClassName: "text-foreground font-semibold",
+				maxLength: 40,
+				className: "justify-start sm:justify-end"
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "font-semibold text-foreground block truncate max-w-full sm:max-w-[250px]",
+				title: value?.toString() || "N/A",
+				children: value?.toString() || "N/A"
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/item-helpers.tsx
+/**
+* Item Component Helpers
+*/
+const iconItemMediaVariants = cva("rounded-xl flex items-center justify-center shrink-0", {
+	variants: {
+		iconBg: {
+			primary: "bg-primary/10 text-primary",
+			gold: "bg-primary/20 text-primary",
+			muted: "bg-muted text-foreground",
+			gradient: "bg-gradient-to-br from-primary/20 to-primary/10 text-primary",
+			none: "bg-transparent"
+		},
+		iconSize: {
+			sm: "size-8",
+			md: "size-10 md:size-12",
+			lg: "size-12 md:size-14",
+			xl: "size-16 md:size-20"
+		}
+	},
+	defaultVariants: {
+		iconBg: "primary",
+		iconSize: "md"
+	}
+});
+const IconItemMedia = React$1.memo(function IconItemMedia({ icon, iconBg = "primary", iconSize = "md", className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-media",
+		role: "presentation",
+		className: cn(iconItemMediaVariants({
+			iconBg,
+			iconSize
+		}), className),
+		...props,
+		children: children || icon
+	});
+});
+IconItemMedia.displayName = "IconItemMedia";
+const FeatureItem = React$1.memo(function FeatureItem({ icon, iconBg = "primary", iconSize = "md", title, description, variant = "outline", size = "default", layout = "vertical", titleAs = "h3", className, titleClassName, descriptionClassName, iconClassName, children, ...props }) {
+	const hasGradientBorder = variant === "gradient-light" || variant === "gradient";
+	const TitleComponent = titleAs;
+	if (hasGradientBorder) return /* @__PURE__ */ jsx("div", {
+		className: cn(variant === "gradient-light" ? "gradient-border-light" : "gradient-border", "rounded-2xl hover:gradient-border-hover transition-all duration-300", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("gradient-border-inner rounded-2xl p-6 flex", layout === "vertical" ? "flex-col items-start gap-4" : "flex-row items-center gap-4"),
+			children: [icon && /* @__PURE__ */ jsx(IconItemMedia, {
+				icon,
+				iconBg,
+				iconSize,
+				className: cn(layout === "vertical" ? "" : "shrink-0", iconClassName)
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2 flex-1",
+				children: [
+					title && /* @__PURE__ */ jsx(TitleComponent, {
+						className: cn("text-base md:text-lg font-semibold text-foreground leading-tight", titleClassName),
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: cn("text-sm text-muted-foreground leading-relaxed", descriptionClassName),
+						children: description
+					}),
+					children
+				]
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Item, {
+		variant,
+		size,
+		className: cn(layout === "vertical" && "flex-col items-start", className),
+		...props,
+		children: [icon && /* @__PURE__ */ jsx(IconItemMedia, {
+			icon,
+			iconBg,
+			iconSize,
+			className: iconClassName
+		}), /* @__PURE__ */ jsxs(ItemContent, { children: [
+			title && /* @__PURE__ */ jsx(TitleComponent, {
+				"data-slot": "item-title",
+				className: cn("text-base md:text-lg font-semibold text-foreground leading-tight mb-2", titleClassName),
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx(ItemDescription, {
+				className: cn("text-sm text-muted-foreground leading-relaxed", descriptionClassName),
+				children: description
+			}),
+			children
+		] })]
+	});
+});
+FeatureItem.displayName = "FeatureItem";
+function FeatureList({ items = [], columns = 3, variant = "outline", iconBg = "primary", iconSize = "md", layout = "vertical", className, itemClassName, ...props }) {
+	const gridCols = {
+		2: "md:grid-cols-2",
+		3: "md:grid-cols-2 lg:grid-cols-3",
+		4: "md:grid-cols-2 lg:grid-cols-4"
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "list",
+		className: cn("grid gap-6", gridCols[columns] || gridCols[3], className),
+		...props,
+		children: items.map((item, index) => /* @__PURE__ */ jsx(FeatureItem, {
+			icon: item.icon,
+			iconBg: item.iconBg || iconBg,
+			iconSize: item.iconSize || iconSize,
+			title: item.title,
+			description: item.description,
+			variant,
+			layout,
+			className: itemClassName
+		}, item.id || item.title || index))
+	});
+}
+FeatureList.displayName = "FeatureList";
+
+//#endregion
+//#region src/components/phone-input.tsx
+const DEFAULT_COUNTRIES = [
+	{
+		code: "GB",
+		name: "United Kingdom",
+		dialCode: "+44",
+		flag: "🇬🇧"
+	},
+	{
+		code: "US",
+		name: "United States",
+		dialCode: "+1",
+		flag: "🇺🇸"
+	},
+	{
+		code: "IE",
+		name: "Ireland",
+		dialCode: "+353",
+		flag: "🇮🇪"
+	},
+	{
+		code: "FR",
+		name: "France",
+		dialCode: "+33",
+		flag: "🇫🇷"
+	},
+	{
+		code: "DE",
+		name: "Germany",
+		dialCode: "+49",
+		flag: "🇩🇪"
+	},
+	{
+		code: "IT",
+		name: "Italy",
+		dialCode: "+39",
+		flag: "🇮🇹"
+	},
+	{
+		code: "ES",
+		name: "Spain",
+		dialCode: "+34",
+		flag: "🇪🇸"
+	},
+	{
+		code: "NL",
+		name: "Netherlands",
+		dialCode: "+31",
+		flag: "🇳🇱"
+	},
+	{
+		code: "BE",
+		name: "Belgium",
+		dialCode: "+32",
+		flag: "🇧🇪"
+	},
+	{
+		code: "PT",
+		name: "Portugal",
+		dialCode: "+351",
+		flag: "🇵🇹"
+	},
+	{
+		code: "CH",
+		name: "Switzerland",
+		dialCode: "+41",
+		flag: "🇨🇭"
+	},
+	{
+		code: "AT",
+		name: "Austria",
+		dialCode: "+43",
+		flag: "🇦🇹"
+	},
+	{
+		code: "SE",
+		name: "Sweden",
+		dialCode: "+46",
+		flag: "🇸🇪"
+	},
+	{
+		code: "NO",
+		name: "Norway",
+		dialCode: "+47",
+		flag: "🇳🇴"
+	},
+	{
+		code: "DK",
+		name: "Denmark",
+		dialCode: "+45",
+		flag: "🇩🇰"
+	},
+	{
+		code: "PL",
+		name: "Poland",
+		dialCode: "+48",
+		flag: "🇵🇱"
+	},
+	{
+		code: "GR",
+		name: "Greece",
+		dialCode: "+30",
+		flag: "🇬🇷"
+	},
+	{
+		code: "CZ",
+		name: "Czech Republic",
+		dialCode: "+420",
+		flag: "🇨🇿"
+	},
+	{
+		code: "RO",
+		name: "Romania",
+		dialCode: "+40",
+		flag: "🇷🇴"
+	},
+	{
+		code: "HU",
+		name: "Hungary",
+		dialCode: "+36",
+		flag: "🇭🇺"
+	},
+	{
+		code: "AU",
+		name: "Australia",
+		dialCode: "+61",
+		flag: "🇦🇺"
+	},
+	{
+		code: "NZ",
+		name: "New Zealand",
+		dialCode: "+64",
+		flag: "🇳🇿"
+	},
+	{
+		code: "CA",
+		name: "Canada",
+		dialCode: "+1",
+		flag: "🇨🇦"
+	},
+	{
+		code: "IN",
+		name: "India",
+		dialCode: "+91",
+		flag: "🇮🇳"
+	},
+	{
+		code: "PK",
+		name: "Pakistan",
+		dialCode: "+92",
+		flag: "🇵🇰"
+	},
+	{
+		code: "BD",
+		name: "Bangladesh",
+		dialCode: "+880",
+		flag: "🇧🇩"
+	},
+	{
+		code: "AE",
+		name: "UAE",
+		dialCode: "+971",
+		flag: "🇦🇪"
+	},
+	{
+		code: "SA",
+		name: "Saudi Arabia",
+		dialCode: "+966",
+		flag: "🇸🇦"
+	},
+	{
+		code: "QA",
+		name: "Qatar",
+		dialCode: "+974",
+		flag: "🇶🇦"
+	},
+	{
+		code: "KW",
+		name: "Kuwait",
+		dialCode: "+965",
+		flag: "🇰🇼"
+	},
+	{
+		code: "SG",
+		name: "Singapore",
+		dialCode: "+65",
+		flag: "🇸🇬"
+	},
+	{
+		code: "MY",
+		name: "Malaysia",
+		dialCode: "+60",
+		flag: "🇲🇾"
+	},
+	{
+		code: "JP",
+		name: "Japan",
+		dialCode: "+81",
+		flag: "🇯🇵"
+	},
+	{
+		code: "KR",
+		name: "South Korea",
+		dialCode: "+82",
+		flag: "🇰🇷"
+	},
+	{
+		code: "CN",
+		name: "China",
+		dialCode: "+86",
+		flag: "🇨🇳"
+	},
+	{
+		code: "HK",
+		name: "Hong Kong",
+		dialCode: "+852",
+		flag: "🇭🇰"
+	},
+	{
+		code: "TW",
+		name: "Taiwan",
+		dialCode: "+886",
+		flag: "🇹🇼"
+	},
+	{
+		code: "TH",
+		name: "Thailand",
+		dialCode: "+66",
+		flag: "🇹🇭"
+	},
+	{
+		code: "PH",
+		name: "Philippines",
+		dialCode: "+63",
+		flag: "🇵🇭"
+	},
+	{
+		code: "VN",
+		name: "Vietnam",
+		dialCode: "+84",
+		flag: "🇻🇳"
+	},
+	{
+		code: "ID",
+		name: "Indonesia",
+		dialCode: "+62",
+		flag: "🇮🇩"
+	},
+	{
+		code: "ZA",
+		name: "South Africa",
+		dialCode: "+27",
+		flag: "🇿🇦"
+	},
+	{
+		code: "NG",
+		name: "Nigeria",
+		dialCode: "+234",
+		flag: "🇳🇬"
+	},
+	{
+		code: "EG",
+		name: "Egypt",
+		dialCode: "+20",
+		flag: "🇪🇬"
+	},
+	{
+		code: "BR",
+		name: "Brazil",
+		dialCode: "+55",
+		flag: "🇧🇷"
+	},
+	{
+		code: "MX",
+		name: "Mexico",
+		dialCode: "+52",
+		flag: "🇲🇽"
+	},
+	{
+		code: "AR",
+		name: "Argentina",
+		dialCode: "+54",
+		flag: "🇦🇷"
+	},
+	{
+		code: "TR",
+		name: "Turkey",
+		dialCode: "+90",
+		flag: "🇹🇷"
+	},
+	{
+		code: "RU",
+		name: "Russia",
+		dialCode: "+7",
+		flag: "🇷🇺"
+	},
+	{
+		code: "IL",
+		name: "Israel",
+		dialCode: "+972",
+		flag: "🇮🇱"
+	}
+];
+function PhoneInput({ className, onChange, value, defaultCountry = "GB", countries = DEFAULT_COUNTRIES, disabled, placeholder = "Phone number", ref, ...props }) {
+	const [isOpen, setIsOpen] = React$1.useState(false);
+	const [searchValue, setSearchValue] = React$1.useState("");
+	const getCountryByCode = React$1.useCallback((code) => countries.find((c) => c.code === code), [countries]);
+	const parseValue = React$1.useCallback((val) => {
+		const valString = val ? String(val) : "";
+		if (!valString) return {
+			country: getCountryByCode(defaultCountry) || countries[0],
+			number: ""
+		};
+		const cleanVal = valString.replace(/\s/g, "");
+		for (const country of countries) if (cleanVal.startsWith(country.dialCode)) return {
+			country,
+			number: cleanVal.slice(country.dialCode.length)
+		};
+		return {
+			country: getCountryByCode(defaultCountry) || countries[0],
+			number: cleanVal.replace(/^\+/, "")
+		};
+	}, [
+		defaultCountry,
+		countries,
+		getCountryByCode
+	]);
+	const { country, number } = parseValue(value);
+	const [selectedCountry, setSelectedCountry] = React$1.useState(country);
+	React$1.useEffect(() => {
+		setSelectedCountry(parseValue(value).country);
+	}, [value, parseValue]);
+	const handleCountryChange = (newCountry) => {
+		setSelectedCountry(newCountry);
+		setIsOpen(false);
+		if (number) onChange?.(newCountry.dialCode + number);
+	};
+	const handleNumberChange = (e) => {
+		const newNumber = e.target.value.replace(/[^\d]/g, "");
+		if (newNumber) onChange?.(selectedCountry.dialCode + newNumber);
+		else onChange?.("");
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className,
+		children: [/* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-start",
+			className: "p-0 overflow-hidden",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open: isOpen,
+				modal: true,
+				onOpenChange: (open) => {
+					setIsOpen(open);
+					if (open) setSearchValue("");
+				},
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "ghost",
+					className: "gap-1.5 rounded-none border-r px-3 focus:z-10 min-w-[90px] h-full",
+					disabled,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-base leading-none",
+							children: selectedCountry.flag
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: selectedCountry.dialCode
+						}),
+						/* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-50" })
+					]
+				}) }), /* @__PURE__ */ jsx(PopoverContent, {
+					className: "w-[280px] p-0",
+					align: "start",
+					children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, {
+						value: searchValue,
+						onValueChange: setSearchValue,
+						placeholder: "Search country..."
+					}), /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(ScrollArea, {
+						className: "h-64",
+						children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No country found." }), /* @__PURE__ */ jsx(CommandGroup, { children: countries.filter((c) => c.name.toLowerCase().includes(searchValue.toLowerCase()) || c.dialCode.includes(searchValue) || c.code.toLowerCase().includes(searchValue.toLowerCase())).map((c) => /* @__PURE__ */ jsxs(CommandItem, {
+							className: "gap-2 cursor-pointer",
+							onSelect: () => handleCountryChange(c),
+							value: `${c.name} ${c.code} ${c.dialCode}`,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-base",
+									children: c.flag
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "flex-1 text-sm",
+									children: c.name
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-sm text-muted-foreground",
+									children: c.dialCode
+								})
+							]
+						}, c.code)) })]
+					}) })] })
+				})]
+			})
+		}), /* @__PURE__ */ jsx(InputGroupInput, {
+			ref,
+			type: "tel",
+			inputMode: "numeric",
+			className: "rounded-s-none",
+			placeholder,
+			value: number,
+			onChange: handleNumberChange,
+			disabled,
+			...props
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/pill.tsx
+function Pill({ variant = "secondary", themed = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		className: cn("gap-2 rounded-full px-3 py-1.5 font-normal", className),
+		variant,
+		...props
+	});
+}
+function PillAvatar({ fallback, className, src, alt, ...props }) {
+	return /* @__PURE__ */ jsxs(Avatar, {
+		className: cn("-ml-1 h-4 w-4", className),
+		children: [/* @__PURE__ */ jsx(AvatarImage, {
+			src,
+			alt,
+			...props
+		}), /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })]
+	});
+}
+function PillButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn("-my-2 -mr-2 size-6 rounded-full p-0.5 hover:bg-foreground/5", className),
+		size: "icon",
+		variant: "ghost",
+		...props
+	});
+}
+function PillStatus({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2 border-r pr-2 font-medium", className),
+		...props,
+		children
+	});
+}
+function PillIndicator({ variant = "success", pulse = false }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative flex size-2",
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cn("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", variant === "success" && "bg-emerald-400", variant === "error" && "bg-rose-400", variant === "warning" && "bg-amber-400", variant === "info" && "bg-sky-400") }), /* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-2 rounded-full", variant === "success" && "bg-emerald-500", variant === "error" && "bg-rose-500", variant === "warning" && "bg-amber-500", variant === "info" && "bg-sky-500") })]
+	});
+}
+function PillDelta({ className, delta }) {
+	if (!delta) return /* @__PURE__ */ jsx(MinusIcon, { className: cn("size-3 text-muted-foreground", className) });
+	if (delta > 0) return /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("size-3 text-emerald-500", className) });
+	return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-3 text-rose-500", className) });
+}
+function PillIcon({ icon: Icon, className, ...props }) {
+	return /* @__PURE__ */ jsx(Icon, {
+		className: cn("size-3 text-muted-foreground", className),
+		size: 12,
+		...props
+	});
+}
+function PillAvatarGroup({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("-space-x-1 flex items-center", "[&>*:not(:first-of-type)]:mask-[radix-gradient(circle_9px_at_-4px_50%,transparent_99%,white_100%)]", className),
+		...props,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/tabs-wrapper.tsx
+const LIST_BASE_CLASS = "flex flex-wrap items-center justify-start gap-1 h-auto rounded-md p-1 shadow-sm transition-colors";
+const LIST_VARIANTS = {
+	default: "border border-border/50 bg-muted/60 backdrop-blur-sm",
+	primary: "border border-primary/30 bg-primary/10",
+	secondary: "border border-secondary/40 bg-secondary/10",
+	outline: "border border-border bg-background",
+	ghost: "border border-transparent bg-transparent shadow-none",
+	underline: "w-full mb-4 rounded-none border-b border-border/60 bg-transparent p-0 shadow-none gap-6"
+};
+const TRIGGER_VARIANTS = {
+	default: "text-muted-foreground hover:bg-muted/40 hover:text-foreground data-active:bg-background data-active:text-foreground data-active:shadow-sm",
+	primary: "text-primary hover:bg-primary/10 hover:text-primary data-active:bg-primary data-active:text-primary-foreground",
+	secondary: "text-secondary-foreground hover:bg-secondary/10 hover:text-secondary-foreground data-active:bg-secondary data-active:text-secondary-foreground",
+	outline: "text-foreground hover:bg-accent/40 hover:text-accent-foreground data-active:bg-accent data-active:text-accent-foreground",
+	ghost: "text-muted-foreground hover:bg-muted/30 hover:text-foreground data-active:bg-muted data-active:text-foreground",
+	underline: "text-muted-foreground rounded-none px-0 py-2 hover:bg-transparent hover:text-primary border-b-2 border-transparent data-active:border-primary data-active:text-primary data-active:shadow-none"
+};
+const TabsWrapper = memo(function TabsWrapper({ defaultValue, value, onValueChange, children, className, listClassName, variant = "default", orientation = "horizontal", layout = "default", ...props }) {
+	const isFlexLayout = useMemo(() => layout === "flex" || layout === "sidebar", [layout]);
+	const computedClasses = useMemo(() => ({
+		root: cn("w-full", isFlexLayout && "flex-1 flex flex-col", className),
+		list: cn(LIST_BASE_CLASS, isFlexLayout ? "w-full" : "w-fit", !isFlexLayout && variant !== "underline" && "mb-6", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, listClassName)
+	}), [
+		isFlexLayout,
+		className,
+		variant,
+		listClassName
+	]);
+	const triggers = [];
+	const panels = [];
+	Children.forEach(children, (child) => {
+		if (isValidElement(child) && child.type === TabContent) panels.push(child);
+		else triggers.push(child);
+	});
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue,
+		value,
+		onValueChange,
+		orientation,
+		className: computedClasses.root,
+		...props,
+		children: [/* @__PURE__ */ jsx(TabsList, {
+			className: computedClasses.list,
+			children: triggers
+		}), panels]
+	});
+});
+const TabTrigger = memo(function TabTrigger({ value, children, className, variant = "default", icon, hideTextOnMobile = false, disabled = false, ...props }) {
+	return /* @__PURE__ */ jsxs(TabsTrigger, {
+		value,
+		disabled,
+		className: useMemo(() => cn("flex items-center gap-2 transition-colors duration-200", TRIGGER_VARIANTS[variant] ?? TRIGGER_VARIANTS.default, className), [variant, className]),
+		...props,
+		children: [icon, hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:inline",
+			children
+		}) : children]
+	});
+});
+const TabContent = memo(function TabContent({ value, children, className, withScrollArea = false, scrollAreaClassName, padding = true, keepMounted = false, ...props }) {
+	const contentClassName = useMemo(() => cn("space-y-4", padding && !withScrollArea && "mt-6", withScrollArea && "mt-0 h-full", className), [
+		padding,
+		withScrollArea,
+		className
+	]);
+	const scrollAreaPaddingClassName = useMemo(() => cn(padding && "px-6 py-4"), [padding]);
+	return /* @__PURE__ */ jsx(TabsContent, {
+		value,
+		keepMounted,
+		className: contentClassName,
+		...props,
+		children: withScrollArea ? /* @__PURE__ */ jsx(ScrollArea, {
+			className: cn("h-full", scrollAreaClassName),
+			children: /* @__PURE__ */ jsx("div", {
+				className: scrollAreaPaddingClassName,
+				children
+			})
+		}) : children
+	});
+});
+const DynamicTabs = memo(function DynamicTabs({ tabs = [], defaultValue, value, onValueChange, variant = "default", layout = "default", className, listClassName, listWrapperClassName, contentClassName, scrollable = false, ...props }) {
+	const isFlexLayout = useMemo(() => layout === "flex" || layout === "sidebar", [layout]);
+	const useSheetDefaults = isFlexLayout && scrollable;
+	const computedClasses = useMemo(() => ({
+		root: cn("w-full", isFlexLayout && "flex-1 flex flex-col min-h-0", className),
+		listWrapper: cn("w-full", useSheetDefaults ? "px-0" : "px-6", listWrapperClassName),
+		flexList: cn("flex flex-wrap items-center justify-center gap-1 h-auto", variant === "underline" ? "rounded-none border-b border-border/60 bg-transparent p-0 shadow-none gap-6" : "rounded-md p-1 shadow-sm backdrop-blur-sm", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, useSheetDefaults && "mb-4 gap-0.5", listClassName),
+		standardList: cn(LIST_BASE_CLASS, variant !== "underline" && "w-fit mb-6", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, listClassName),
+		contentWrapper: cn(isFlexLayout && "flex-1 min-h-0 overflow-hidden"),
+		flexContent: cn("mt-0 h-full", useSheetDefaults && "px-1", contentClassName),
+		standardContent: cn(isFlexLayout ? "h-full" : "space-y-4 mt-6", contentClassName)
+	}), [
+		isFlexLayout,
+		useSheetDefaults,
+		className,
+		listWrapperClassName,
+		listClassName,
+		variant,
+		contentClassName
+	]);
+	return /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue,
+		value,
+		onValueChange,
+		className: computedClasses.root,
+		...props,
+		children: [isFlexLayout ? /* @__PURE__ */ jsx("div", {
+			className: computedClasses.listWrapper,
+			children: /* @__PURE__ */ jsx(TabsList, {
+				className: computedClasses.flexList,
+				children: tabs.map((tab) => /* @__PURE__ */ jsxs(TabTrigger, {
+					value: tab.value,
+					variant,
+					disabled: tab.disabled,
+					className: "justify-center px-3 py-2 text-xs sm:text-sm shrink-0",
+					children: [tab.icon, tab.hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
+						className: "hidden sm:inline",
+						children: tab.label
+					}) : tab.label]
+				}, tab.value))
+			})
+		}) : /* @__PURE__ */ jsx(TabsList, {
+			className: computedClasses.standardList,
+			children: tabs.map((tab) => /* @__PURE__ */ jsxs(TabTrigger, {
+				value: tab.value,
+				variant,
+				disabled: tab.disabled,
+				className: "whitespace-nowrap",
+				children: [tab.icon, tab.hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
+					className: "hidden sm:inline text-sm",
+					children: tab.label
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "text-sm",
+					children: tab.label
+				})]
+			}, tab.value))
+		}), /* @__PURE__ */ jsx("div", {
+			className: computedClasses.contentWrapper,
+			children: isFlexLayout && scrollable ? /* @__PURE__ */ jsx(ScrollArea, {
+				className: "h-full w-full",
+				children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+					value: tab.value,
+					className: computedClasses.flexContent,
+					children: tab.content
+				}, tab.value))
+			}) : tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+				value: tab.value,
+				className: computedClasses.standardContent,
+				children: tab.content
+			}, tab.value))
+		})]
+	});
+});
+
+//#endregion
+//#region src/components/responsive-split-layout.tsx
+function ResponsiveSplitLayout({ leftPanel, rightPanel, className, leftPanelClassName, rightPanelClassName, variant = "default", desktopVariant, mobileVariant, defaultLayout = [50, 50], minSizes = [20, 20], rightPanelWidth = 400, persistLayoutKey, mobileBreakpoint = "md", forceMobile = false, forceDesktop = false }) {
+	const [mobileView, setMobileView] = useState("left");
+	const isMobileMedia = useMediaQuery(`(max-width: ${{
+		sm: 640,
+		md: 768,
+		lg: 1024,
+		xl: 1280
+	}[mobileBreakpoint] - 1}px)`, false);
+	const isMobile = forceDesktop ? false : forceMobile ? true : isMobileMedia;
+	const effectiveMobileVariant = mobileVariant ?? variant;
+	const effectiveDesktopVariant = desktopVariant ?? variant;
+	if (isMobile && effectiveMobileVariant === "tabs") {
+		const tabs = [{
+			value: "left",
+			label: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [leftPanel.icon, leftPanel.title || "Left"]
+			}),
+			content: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full overflow-y-auto", leftPanelClassName),
+				children: leftPanel.content
+			})
+		}, {
+			value: "right",
+			label: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					rightPanel.icon,
+					rightPanel.title || "Right",
+					rightPanel.badge && /* @__PURE__ */ jsx("span", {
+						className: "ml-1 bg-primary text-primary-foreground text-xs rounded-full h-5 w-5 flex items-center justify-center",
+						children: rightPanel.badge
+					})
+				]
+			}),
+			content: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full overflow-y-auto", rightPanelClassName),
+				children: rightPanel.content
+			})
+		}];
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("h-full flex flex-col", className),
+			children: /* @__PURE__ */ jsx(DynamicTabs, {
+				tabs,
+				defaultValue: "left",
+				value: mobileView,
+				onValueChange: (val) => setMobileView(val),
+				variant: "default",
+				layout: "flex",
+				className: "h-full",
+				listWrapperClassName: "px-4 py-2 flex-shrink-0",
+				contentClassName: "mt-0 flex-1 min-h-0"
+			})
+		});
+	}
+	if (isMobile) {
+		const showLeft = mobileView === "left";
+		const showRight = mobileView === "right";
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col h-full", className),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 overflow-hidden",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn("h-full", !showLeft && "hidden", leftPanelClassName),
+					children: leftPanel.content
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("h-full", !showRight && "hidden", rightPanelClassName),
+					children: rightPanel.content
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "border-t p-4 bg-background",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between max-w-md mx-auto",
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: mobileView === "left" ? "default" : "outline",
+						onClick: () => setMobileView("left"),
+						className: "flex-1 mr-2",
+						children: [
+							mobileView === "right" && /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }),
+							leftPanel.icon,
+							/* @__PURE__ */ jsx("span", {
+								className: "ml-2",
+								children: leftPanel.title || "Left"
+							})
+						]
+					}), /* @__PURE__ */ jsxs(Button, {
+						variant: mobileView === "right" ? "default" : "outline",
+						onClick: () => setMobileView("right"),
+						className: "flex-1 ml-2 relative",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: rightPanel.title || "Right"
+							}),
+							rightPanel.icon,
+							mobileView === "left" && /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 ml-2" }),
+							rightPanel.badge && /* @__PURE__ */ jsx("span", {
+								className: "absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs rounded-full h-6 w-6 flex items-center justify-center",
+								children: rightPanel.badge
+							})
+						]
+					})]
+				})
+			})]
+		});
+	}
+	if (effectiveDesktopVariant === "fixed") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("flex-1 overflow-auto border-r", leftPanelClassName),
+			children: leftPanel.content
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("overflow-auto", rightPanelClassName),
+			style: {
+				width: rightPanelWidth,
+				minWidth: rightPanelWidth,
+				flexShrink: 0
+			},
+			children: rightPanel.content
+		})]
+	});
+	return /* @__PURE__ */ jsxs(ResizablePanelGroup, {
+		direction: "horizontal",
+		className: cn("h-full", className),
+		autoSaveId: persistLayoutKey,
+		children: [
+			/* @__PURE__ */ jsx(ResizablePanel, {
+				defaultSize: defaultLayout[0],
+				minSize: minSizes[0],
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("h-full overflow-auto", leftPanelClassName),
+					children: leftPanel.content
+				})
+			}),
+			/* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+			/* @__PURE__ */ jsx(ResizablePanel, {
+				defaultSize: defaultLayout[1],
+				minSize: minSizes[1],
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("h-full overflow-auto", rightPanelClassName),
+					children: rightPanel.content
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/status-banner.tsx
+const VARIANT_MAP = {
+	info: {
+		icon: Info,
+		bg: "bg-blue-50 dark:bg-blue-950/30",
+		border: "border-blue-200 dark:border-blue-800",
+		text: "text-blue-800 dark:text-blue-200",
+		iconColor: "text-blue-500 dark:text-blue-400"
+	},
+	warning: {
+		icon: AlertTriangle,
+		bg: "bg-amber-50 dark:bg-amber-950/30",
+		border: "border-amber-200 dark:border-amber-800",
+		text: "text-amber-800 dark:text-amber-200",
+		iconColor: "text-amber-500 dark:text-amber-400"
+	},
+	success: {
+		icon: CheckCircle2,
+		bg: "bg-emerald-50 dark:bg-emerald-950/30",
+		border: "border-emerald-200 dark:border-emerald-800",
+		text: "text-emerald-800 dark:text-emerald-200",
+		iconColor: "text-emerald-500 dark:text-emerald-400"
+	},
+	error: {
+		icon: AlertCircle,
+		bg: "bg-red-50 dark:bg-red-950/30",
+		border: "border-red-200 dark:border-red-800",
+		text: "text-red-800 dark:text-red-200",
+		iconColor: "text-red-500 dark:text-red-400"
+	}
+};
+/**
+* StatusBanner — A persistent info/warning/success/error banner.
+*
+* @example
+* ```tsx
+* <StatusBanner variant="warning" dismissible>
+*   Your trial expires in 3 days. <a href="/pricing">Upgrade now</a>
+* </StatusBanner>
+*
+* <StatusBanner variant="success" action={<Button size="sm">View</Button>}>
+*   Your project was deployed successfully.
+* </StatusBanner>
+* ```
+*/
+function StatusBanner({ variant = "info", children, icon: CustomIcon, dismissible = false, onDismiss, action, className }) {
+	const [dismissed, setDismissed] = React$1.useState(false);
+	if (dismissed) return null;
+	const config = VARIANT_MAP[variant];
+	const Icon = CustomIcon || config.icon;
+	const handleDismiss = () => {
+		setDismissed(true);
+		onDismiss?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: cn("flex items-center gap-3 rounded-lg border px-4 py-3", config.bg, config.border, config.text, className),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				className: cn("h-4 w-4 shrink-0", config.iconColor),
+				strokeWidth: 2
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 min-w-0 text-sm",
+				children
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: action
+			}),
+			dismissible && /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "icon",
+				className: cn("h-6 w-6 shrink-0 hover:bg-transparent opacity-60 hover:opacity-100", config.text),
+				onClick: handleDismiss,
+				children: [/* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Dismiss"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/stepper.tsx
+function normalizeStep(step) {
+	return typeof step === "string" ? { label: step } : step;
+}
+const StepCircle = React$1.memo(function StepCircle({ index, isCompleted, isActive, icon, variant }) {
+	const size = variant === "compact" ? "h-7 w-7" : "h-8 w-8";
+	const iconSize = variant === "compact" ? "h-3.5 w-3.5" : "h-4 w-4";
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("relative flex items-center justify-center rounded-full text-xs font-semibold shrink-0 transition-all duration-200", size, isCompleted ? "bg-primary text-primary-foreground" : isActive ? "bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background" : "border-2 border-muted-foreground/25 bg-background text-muted-foreground"),
+		children: isCompleted ? /* @__PURE__ */ jsx(Check, {
+			className: iconSize,
+			strokeWidth: 3
+		}) : icon || index + 1
+	});
+});
+const StepConnector = React$1.memo(function StepConnector({ isCompleted, isVertical }) {
+	if (isVertical) return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center w-8 py-1",
+		children: /* @__PURE__ */ jsx("div", { className: cn("w-px h-6 transition-colors duration-200", isCompleted ? "bg-primary" : "bg-border") })
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 flex items-center min-w-4 mt-4",
+		children: /* @__PURE__ */ jsx("div", { className: cn("h-px w-full transition-colors duration-200", isCompleted ? "bg-primary" : "bg-border") })
+	});
+});
+function HorizontalStepper({ steps, currentStep, variant, onStepClick }) {
+	const activeRef = React$1.useRef(null);
+	const navRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (activeRef.current && navRef.current) activeRef.current.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest",
+			inline: "center"
+		});
+	}, [currentStep]);
+	return /* @__PURE__ */ jsx("nav", {
+		ref: navRef,
+		"aria-label": "Progress",
+		role: "list",
+		className: "flex items-start w-full overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pb-1",
+		children: steps.map((step, index) => {
+			const isCompleted = index < currentStep;
+			const isActive = index === currentStep;
+			const isClickable = isCompleted && !!onStepClick;
+			const isLast = index === steps.length - 1;
+			return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				ref: isActive ? activeRef : void 0,
+				role: "listitem",
+				"aria-current": isActive ? "step" : void 0,
+				className: cn("flex flex-col items-center text-center shrink-0"),
+				style: { minWidth: variant === "compact" ? 48 : 64 },
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					disabled: !isClickable,
+					onClick: () => isClickable && onStepClick(index),
+					className: cn("flex flex-col items-center gap-1.5 group", isClickable ? "cursor-pointer" : "cursor-default"),
+					children: [/* @__PURE__ */ jsx(StepCircle, {
+						index,
+						isCompleted,
+						isActive,
+						icon: step.icon,
+						variant
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "max-w-[5.5rem] sm:max-w-[7rem]",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: cn("text-xs font-medium leading-tight truncate", isActive || isCompleted ? "text-foreground" : "text-muted-foreground"),
+								children: step.label
+							}),
+							step.optional && /* @__PURE__ */ jsx("span", {
+								className: "text-[10px] text-muted-foreground font-normal",
+								children: "optional"
+							}),
+							step.description && variant !== "compact" && /* @__PURE__ */ jsx("p", {
+								className: "text-[10px] text-muted-foreground mt-0.5 leading-tight truncate hidden sm:block",
+								children: step.description
+							})
+						]
+					})]
+				})
+			}), !isLast && /* @__PURE__ */ jsx(StepConnector, {
+				isCompleted,
+				isVertical: false
+			})] }, step.label);
+		})
+	});
+}
+function VerticalStepper({ steps, currentStep, variant, onStepClick }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Progress",
+		role: "list",
+		className: "flex flex-col",
+		children: steps.map((step, index) => {
+			const isCompleted = index < currentStep;
+			const isActive = index === currentStep;
+			const isClickable = isCompleted && !!onStepClick;
+			const isLast = index === steps.length - 1;
+			return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				role: "listitem",
+				"aria-current": isActive ? "step" : void 0,
+				className: "flex items-start gap-3",
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					disabled: !isClickable,
+					onClick: () => isClickable && onStepClick(index),
+					className: cn("flex items-center gap-3", isClickable ? "cursor-pointer" : "cursor-default"),
+					children: [/* @__PURE__ */ jsx(StepCircle, {
+						index,
+						isCompleted,
+						isActive,
+						icon: step.icon,
+						variant
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "text-left",
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: cn("text-sm font-medium leading-tight", isActive || isCompleted ? "text-foreground" : "text-muted-foreground"),
+							children: [step.label, step.optional && /* @__PURE__ */ jsx("span", {
+								className: "ml-1 text-xs text-muted-foreground font-normal",
+								children: "(optional)"
+							})]
+						}), step.description && variant !== "compact" && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground mt-0.5",
+							children: step.description
+						})]
+					})]
+				})
+			}), !isLast && /* @__PURE__ */ jsx(StepConnector, {
+				isCompleted,
+				isVertical: true
+			})] }, step.label);
+		})
+	});
+}
+/**
+* Stepper — Multi-step progress indicator
+*
+* Features:
+* - Horizontal layout: circles in a row with labels below, proper connectors
+* - Vertical layout: circles on the left with labels to the right
+* - Compact variant for tight spaces
+* - Handles many steps gracefully without scrollbars
+* - Clickable completed steps for navigation
+* - Accessible: role="list", aria-current="step"
+*
+* @example Basic
+* ```tsx
+* const [step, setStep] = useState(0);
+*
+* <Stepper steps={["Details", "Config", "Review"]} currentStep={step}>
+*   <StepContent step={0} currentStep={step}>
+*     <DetailsForm onNext={() => setStep(1)} />
+*   </StepContent>
+* </Stepper>
+* ```
+*
+* @example With step objects
+* ```tsx
+* <Stepper
+*   steps={[
+*     { label: "Account", description: "Set up your account" },
+*     { label: "Profile", description: "Add your details", optional: true },
+*     { label: "Complete", description: "Review and submit" },
+*   ]}
+*   currentStep={1}
+*   onStepClick={(i) => setStep(i)}
+* />
+* ```
+*/
+function Stepper({ steps, currentStep, variant = "default", orientation = "horizontal", className, onStepClick, children, ...props }) {
+	const normalizedSteps = steps.map(normalizeStep);
+	const isVertical = orientation === "vertical";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full", className),
+		...props,
+		children: [isVertical ? /* @__PURE__ */ jsx(VerticalStepper, {
+			steps: normalizedSteps,
+			currentStep,
+			variant,
+			onStepClick
+		}) : /* @__PURE__ */ jsx(HorizontalStepper, {
+			steps: normalizedSteps,
+			currentStep,
+			variant,
+			onStepClick
+		}), children && /* @__PURE__ */ jsx("div", {
+			className: cn("mt-6", isVertical && "ml-11"),
+			children
+		})]
+	});
+}
+/**
+* StepContent — Renders content for a specific step.
+* Only visible when `step === currentStep`.
+*
+* @example
+* ```tsx
+* <StepContent step={0} currentStep={current}>
+*   <MyForm />
+* </StepContent>
+* ```
+*/
+function StepContent({ step, currentStep, children, className, keepMounted = false }) {
+	const isActive = step === currentStep;
+	if (!isActive && !keepMounted) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		hidden: !isActive,
+		role: "tabpanel",
+		"aria-label": `Step ${step + 1}`,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/table-wrapper.tsx
+function TableWrapper({ title, description, icon, children, columns, data, renderRow, emptyState, className, tableClassName, maxHeight = "500px", ...props }) {
+	const hasData = data && data.length > 0;
+	const defaultEmptyState = emptyState || {
+		icon,
+		title: "No data available",
+		description: "There are no items to display"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-4", className),
+		...props,
+		children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [title && /* @__PURE__ */ jsx("h3", {
+				className: "text-lg font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: description
+			})]
+		}), !hasData ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center h-48 text-muted-foreground border rounded-lg",
+			children: [
+				defaultEmptyState.icon && /* @__PURE__ */ jsx("div", {
+					className: "h-12 w-12 mb-4 opacity-50",
+					children: defaultEmptyState.icon
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-lg",
+					children: defaultEmptyState.title
+				}),
+				defaultEmptyState.description && /* @__PURE__ */ jsx("p", {
+					className: "text-sm",
+					children: defaultEmptyState.description
+				})
+			]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cn("relative overflow-auto border rounded-lg", maxHeight && `max-h-[${maxHeight}]`),
+			children: /* @__PURE__ */ jsxs(Table, {
+				className: tableClassName,
+				children: [columns && /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column, index) => /* @__PURE__ */ jsx(TableHead, {
+					className: cn(column.className),
+					children: column.header
+				}, `table-column-head-${column.key ?? column.header ?? index}`)) }) }), /* @__PURE__ */ jsx(TableBody, { children: data?.map((item, index) => renderRow ? renderRow(item, index) : /* @__PURE__ */ jsx(TableRow, { children }, `table-row-${index}`)) })]
+			})
+		})]
+	});
+}
+function SimpleTable({ title, data, columns, emptyState, className, ...props }) {
+	const renderRow = (item, index) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((column, colIndex) => /* @__PURE__ */ jsx(TableCell, {
+		className: column.cellClassName,
+		children: column.render ? column.render(item, index) : item[column.key]
+	}, `simple-table-cell-${column.key ?? column.header ?? colIndex}`)) }, `simple-table-row-${index}`);
+	return /* @__PURE__ */ jsx(TableWrapper, {
+		title,
+		data,
+		columns,
+		renderRow,
+		emptyState,
+		className,
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/thumbnail.tsx
+const aspectRatios = {
+	square: "aspect-square",
+	video: "aspect-video",
+	portrait: "aspect-[3/4]"
+};
+const sizes = {
+	small: "w-16 h-16",
+	medium: "w-32 h-32",
+	large: "w-48 h-48",
+	full: "w-full h-full"
+};
+function Thumbnail({ src, alt, aspect = "square", size = "medium", className, fallback = "/placeholder.svg", onClick }) {
+	const sizeClass = className?.includes("w-") ? "" : sizes[size];
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative rounded-md overflow-hidden", aspectRatios[aspect], sizeClass, onClick && "cursor-pointer", className),
+		onClick,
+		children: /* @__PURE__ */ jsx(Image, {
+			src: src || fallback,
+			alt: alt || "Thumbnail",
+			fill: true,
+			className: "object-cover",
+			sizes: getSizes(size)
+		})
+	});
+}
+const getSizes = (size) => {
+	switch (size) {
+		case "small": return "64px";
+		case "medium": return "128px";
+		case "large": return "192px";
+		case "full": return "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw";
+		default: return "128px";
+	}
+};
+
+//#endregion
+//#region src/components/tooltip-wrapper.tsx
+function TooltipWrapper({ children, content, side = "top", align = "center", delay = 700, sideOffset = 4, className, contentClassName, disabled = false, ...props }) {
+	if (disabled || !content) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		delay,
+		...props,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			className,
+			render: children
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side,
+			align,
+			sideOffset,
+			className: cn(contentClassName),
+			children: content
+		})]
+	});
+}
+function ButtonTooltip({ children, tooltip, variant = "outline", size = "icon", className, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		content: tooltip,
+		...props,
+		children
+	});
+}
+function IconTooltip({ icon, tooltip, className, iconClassName, size = 16, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		content: tooltip,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("cursor-pointer", iconClassName),
+			children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", {
+				style: { fontSize: size },
+				children: icon
+			}) : icon
+		})
+	});
+}
+function InfoTooltip({ tooltip, className, size = 16, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		content: tooltip,
+		className: cn("inline-flex items-center", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rounded-full bg-muted text-muted-foreground hover:bg-muted/80 transition-colors cursor-help inline-flex items-center justify-center",
+			style: {
+				width: size,
+				height: size,
+				fontSize: size * .6
+			},
+			children: "?"
+		})
+	});
+}
+function ActionTooltip({ children, tooltip, action, variant = "ghost", size = "sm", className, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		content: tooltip,
+		...props,
+		children: /* @__PURE__ */ jsx("button", {
+			onClick: action,
+			className: cn("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:opacity-50 disabled:pointer-events-none", variant === "ghost" && "hover:bg-accent hover:text-accent-foreground", variant === "outline" && "border border-input hover:bg-accent hover:text-accent-foreground", size === "sm" && "h-8 px-2", size === "icon" && "h-8 w-8", className),
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/components/timeline.tsx
+const STATUS_CONFIG = {
+	default: {
+		dotClass: "bg-muted-foreground/20 text-muted-foreground",
+		lineClass: "bg-border",
+		defaultIcon: Circle
+	},
+	success: {
+		dotClass: "bg-green-500/20 text-green-600 dark:text-green-400",
+		lineClass: "bg-green-500/30",
+		defaultIcon: Check
+	},
+	error: {
+		dotClass: "bg-red-500/20 text-red-600 dark:text-red-400",
+		lineClass: "bg-red-500/30",
+		defaultIcon: X
+	},
+	warning: {
+		dotClass: "bg-yellow-500/20 text-yellow-600 dark:text-yellow-400",
+		lineClass: "bg-yellow-500/30",
+		defaultIcon: AlertTriangle
+	},
+	pending: {
+		dotClass: "bg-muted text-muted-foreground animate-pulse",
+		lineClass: "bg-border border-dashed",
+		defaultIcon: Circle
+	},
+	active: {
+		dotClass: "bg-primary/20 text-primary ring-2 ring-primary/30",
+		lineClass: "bg-primary/30",
+		defaultIcon: Circle
+	}
+};
+const SIZE_CONFIG = {
+	sm: {
+		dot: "h-6 w-6",
+		icon: "h-3 w-3",
+		gap: "gap-3",
+		text: "text-xs"
+	},
+	default: {
+		dot: "h-8 w-8",
+		icon: "h-4 w-4",
+		gap: "gap-4",
+		text: "text-sm"
+	},
+	lg: {
+		dot: "h-10 w-10",
+		icon: "h-5 w-5",
+		gap: "gap-5",
+		text: "text-base"
+	}
+};
+function Timeline({ items, orientation = "vertical", size = "default", showConnectors = true, reverse = false, className }) {
+	const sizeConfig = SIZE_CONFIG[size];
+	const orderedItems = reverse ? [...items].reverse() : items;
+	if (orientation === "horizontal") return /* @__PURE__ */ jsx("div", {
+		className: cn("flex overflow-x-auto", sizeConfig.gap, className),
+		children: orderedItems.map((item, index) => /* @__PURE__ */ jsx(HorizontalTimelineItem, {
+			item,
+			isLast: index === orderedItems.length - 1,
+			showConnector: showConnectors,
+			size
+		}, index))
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative", className),
+		children: orderedItems.map((item, index) => /* @__PURE__ */ jsx(VerticalTimelineItem, {
+			item,
+			isLast: index === orderedItems.length - 1,
+			showConnector: showConnectors,
+			size
+		}, index))
+	});
+}
+function VerticalTimelineItem({ item, isLast, showConnector, size }) {
+	const config = STATUS_CONFIG[item.status || "default"];
+	const sizeConfig = SIZE_CONFIG[size];
+	const renderIcon = () => {
+		if (React$1.isValidElement(item.icon)) return item.icon;
+		return /* @__PURE__ */ jsx(item.icon || config.defaultIcon, { className: sizeConfig.icon });
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex", sizeConfig.gap, "pb-6 last:pb-0"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center shrink-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("flex items-center justify-center rounded-full shrink-0", sizeConfig.dot, config.dotClass),
+				children: renderIcon()
+			}), showConnector && !isLast && /* @__PURE__ */ jsx("div", { className: cn("w-0.5 flex-1 mt-2", config.lineClass) })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1 pt-0.5 pb-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between gap-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: cn("font-medium leading-tight", sizeConfig.text),
+							children: item.title
+						}), item.label && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground mt-0.5",
+							children: item.label
+						})]
+					}), item.timestamp && /* @__PURE__ */ jsx("time", {
+						className: "text-xs text-muted-foreground whitespace-nowrap shrink-0",
+						children: item.timestamp
+					})]
+				}),
+				item.description && /* @__PURE__ */ jsx("div", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: item.description
+				}),
+				item.content && /* @__PURE__ */ jsx("div", {
+					className: "mt-2",
+					children: item.content
+				})
+			]
+		})]
+	});
+}
+function HorizontalTimelineItem({ item, isLast, showConnector, size }) {
+	const config = STATUS_CONFIG[item.status || "default"];
+	const sizeConfig = SIZE_CONFIG[size];
+	const renderIcon = () => {
+		if (React$1.isValidElement(item.icon)) return item.icon;
+		return /* @__PURE__ */ jsx(item.icon || config.defaultIcon, { className: sizeConfig.icon });
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center min-w-[120px]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center w-full",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: cn("h-0.5 flex-1", showConnector ? config.lineClass : "bg-transparent") }),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex items-center justify-center rounded-full shrink-0 mx-1", sizeConfig.dot, config.dotClass),
+					children: renderIcon()
+				}),
+				/* @__PURE__ */ jsx("div", { className: cn("h-0.5 flex-1", showConnector && !isLast ? config.lineClass : "bg-transparent") })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "text-center mt-2 px-2",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: cn("font-medium leading-tight", sizeConfig.text),
+					children: item.title
+				}),
+				item.timestamp && /* @__PURE__ */ jsx("time", {
+					className: "text-xs text-muted-foreground",
+					children: item.timestamp
+				}),
+				item.description && /* @__PURE__ */ jsx("div", {
+					className: "text-xs text-muted-foreground mt-1",
+					children: item.description
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/detail-view.tsx
+const COLUMN_CLASSES = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+};
+const SIZE_LABEL = {
+	sm: "text-xs",
+	default: "text-sm",
+	lg: "text-sm"
+};
+const SIZE_VALUE = {
+	sm: "text-sm",
+	default: "text-sm",
+	lg: "text-base"
+};
+function DetailView({ items, columns = 1, layout = "stacked", size = "default", dividers = false, striped = false, bordered = false, title, description, className, children }) {
+	const visibleItems = items?.filter((item) => !item.hidden) || [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(bordered && "border rounded-lg overflow-hidden", className),
+		children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-1", bordered ? "px-4 py-3 border-b bg-muted/30" : "mb-4"),
+			children: [title && /* @__PURE__ */ jsx("h3", {
+				className: "text-base font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: description
+			})]
+		}), children ? /* @__PURE__ */ jsx("div", {
+			className: cn("grid", COLUMN_CLASSES[columns], bordered && "p-4"),
+			children
+		}) : layout === "horizontal" ? /* @__PURE__ */ jsx(HorizontalLayout, {
+			items: visibleItems,
+			size,
+			dividers,
+			striped,
+			bordered
+		}) : layout === "inline" ? /* @__PURE__ */ jsx(InlineLayout, {
+			items: visibleItems,
+			columns,
+			size,
+			bordered
+		}) : /* @__PURE__ */ jsx(StackedLayout, {
+			items: visibleItems,
+			columns,
+			size,
+			dividers,
+			bordered
+		})]
+	});
+}
+function StackedLayout({ items, columns, size, dividers, bordered }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4", COLUMN_CLASSES[columns], bordered && "p-4"),
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-1", item.fullWidth && columns > 1 && "col-span-full", dividers && index > 0 && "pt-4 border-t"),
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: cn("text-muted-foreground font-medium", SIZE_LABEL[size]),
+				children: item.label
+			}), /* @__PURE__ */ jsx("dd", {
+				className: cn("text-foreground", SIZE_VALUE[size], item.className),
+				children: item.render ? item.render() : item.value ?? /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground/50",
+					children: "-"
+				})
+			})]
+		}, index))
+	});
+}
+function HorizontalLayout({ items, size, dividers, striped, bordered }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn(bordered && "divide-y"),
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-start gap-4 py-3", bordered && "px-4", striped && index % 2 === 0 && "bg-muted/30", dividers && !bordered && index > 0 && "border-t"),
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: cn("text-muted-foreground font-medium w-1/3 shrink-0", SIZE_LABEL[size]),
+				children: item.label
+			}), /* @__PURE__ */ jsx("dd", {
+				className: cn("text-foreground flex-1 min-w-0", SIZE_VALUE[size], item.className),
+				children: item.render ? item.render() : item.value ?? /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground/50",
+					children: "-"
+				})
+			})]
+		}, index))
+	});
+}
+function InlineLayout({ items, columns, size, bordered }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-x-6 gap-y-2", COLUMN_CLASSES[columns], bordered && "p-4"),
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center justify-between gap-2 py-1", item.fullWidth && columns > 1 && "col-span-full"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("text-muted-foreground", SIZE_LABEL[size]),
+				children: item.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("text-foreground font-medium text-right", SIZE_VALUE[size], item.className),
+				children: item.render ? item.render() : item.value ?? "-"
+			})]
+		}, index))
+	});
+}
+function DetailItem({ label, children, value, className, labelClassName, layout = "stacked" }) {
+	const content = children ?? value ?? /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground/50",
+		children: "-"
+	});
+	if (layout === "horizontal") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start gap-4 py-3", className),
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: cn("text-sm text-muted-foreground font-medium w-1/3 shrink-0", labelClassName),
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "text-sm text-foreground flex-1 min-w-0",
+			children: content
+		})]
+	});
+	if (layout === "inline") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-between gap-2 py-1", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("text-sm text-muted-foreground", labelClassName),
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-foreground font-medium text-right",
+			children: content
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-1", className),
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: cn("text-sm text-muted-foreground font-medium", labelClassName),
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "text-sm text-foreground",
+			children: content
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/animated-wrapper.tsx
+/** Tailwind utility class for each animation — presence in dist ensures @keyframes emission via @source */
+const ANIMATION_CLASSES = {
+	fadeIn: "animate-fade-in",
+	fadeInUp: "animate-fade-in-up",
+	scaleIn: "animate-scale-in",
+	slideInLeft: "animate-slide-in-left",
+	slideInRight: "animate-slide-in-right",
+	slideInUp: "animate-slide-in-up",
+	slideInDown: "animate-slide-in-down"
+};
+const SLIDE_MAP = {
+	left: "slideInLeft",
+	right: "slideInRight",
+	up: "slideInUp",
+	down: "slideInDown"
+};
+/**
+* useInView — observe when an element enters the viewport.
+*
+* @example
+* ```tsx
+* const ref = useRef<HTMLDivElement>(null);
+* const isInView = useInView(ref, { once: true, margin: "-100px" });
+* return <div ref={ref}>{isInView ? "Visible!" : "Hidden"}</div>;
+* ```
+*/
+function useInView(ref, options = {}) {
+	const { margin = "0px", once = true, enabled = true } = options;
+	const [inView, setInView] = useState(false);
+	useEffect(() => {
+		if (!enabled) return;
+		const el = ref.current;
+		if (!el) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (entry.isIntersecting) {
+				setInView(true);
+				if (once) observer.unobserve(el);
+			} else if (!once) setInView(false);
+		}, { rootMargin: margin });
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [
+		enabled,
+		margin,
+		once
+	]);
+	return inView;
+}
+function useAnimationState(opts) {
+	const ref = useRef(null);
+	const shouldAnimate = !opts.disabled;
+	const isInView = useInView(ref, {
+		margin: opts.inViewMargin,
+		once: opts.once,
+		enabled: !!opts.inView && shouldAnimate
+	});
+	return {
+		ref,
+		shouldAnimate,
+		active: shouldAnimate && (!opts.inView || isInView)
+	};
+}
+/** Per-instance timing overrides — only emitted when different from theme defaults */
+function animTimingStyle(delay, duration) {
+	if (delay === 0 && duration === 600) return void 0;
+	return {
+		...duration !== 600 ? { animationDuration: `${duration}ms` } : {},
+		...delay > 0 ? { animationDelay: `${delay}ms` } : {}
+	};
+}
+function AnimateBase({ animation, children, delay = 0, duration = 600, inView = false, inViewMargin, once = true, disabled = false, className, as = "div" }) {
+	const { ref, shouldAnimate, active } = useAnimationState({
+		inView,
+		inViewMargin,
+		once,
+		disabled
+	});
+	return createElement(as, {
+		ref,
+		"data-fluid-animate": shouldAnimate ? "" : void 0,
+		className: cn(shouldAnimate && "opacity-0", active && ANIMATION_CLASSES[animation], className),
+		style: active ? animTimingStyle(delay, duration) : void 0
+	}, children);
+}
+/** Fade in with opacity transition */
+function FadeIn(props) {
+	return /* @__PURE__ */ jsx(AnimateBase, {
+		animation: "fadeIn",
+		...props
+	});
+}
+/** Fade in with upward motion */
+function FadeInUp(props) {
+	return /* @__PURE__ */ jsx(AnimateBase, {
+		animation: "fadeInUp",
+		...props
+	});
+}
+/** Scale up into view */
+function ScaleIn(props) {
+	return /* @__PURE__ */ jsx(AnimateBase, {
+		animation: "scaleIn",
+		...props
+	});
+}
+/** Slide in from a specified direction */
+function SlideIn({ direction = "left", ...props }) {
+	return /* @__PURE__ */ jsx(AnimateBase, {
+		animation: SLIDE_MAP[direction],
+		...props
+	});
+}
+function StaggerChildren({ children, animation = "fadeInUp", staggerDelay = 100, initialDelay = 0, duration = 600, inView = false, inViewMargin, once = true, disabled = false, className, childClassName, as = "div" }) {
+	const { ref, shouldAnimate, active } = useAnimationState({
+		inView,
+		inViewMargin,
+		once,
+		disabled
+	});
+	const items = Children.toArray(children);
+	return createElement(as, {
+		ref,
+		className
+	}, items.map((child, i) => /* @__PURE__ */ jsx("div", {
+		"data-fluid-animate": shouldAnimate ? "" : void 0,
+		className: cn(shouldAnimate && "opacity-0", active && ANIMATION_CLASSES[animation], childClassName),
+		style: active ? animTimingStyle(initialDelay + i * staggerDelay, duration) : void 0,
+		children: child
+	}, i)));
+}
+function AnimatedText({ text, as = "div", animation = "fadeInUp", splitBy = "word", staggerDelay = 80, delay = 0, duration = 600, inView = false, inViewMargin, once = true, disabled = false, className, segmentClassName }) {
+	const { ref, shouldAnimate, active } = useAnimationState({
+		inView,
+		inViewMargin,
+		once,
+		disabled
+	});
+	const segments = splitBy === "word" ? text.split(" ") : text.split("");
+	let animIndex = 0;
+	return createElement(as, {
+		ref,
+		className
+	}, segments.map((segment, i) => {
+		if (splitBy === "character" && segment === " ") return /* @__PURE__ */ jsx(Fragment$1, { children: "\xA0" }, i);
+		const idx = animIndex++;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [splitBy === "word" && i > 0 && " ", /* @__PURE__ */ jsx("span", {
+			"data-fluid-animate": shouldAnimate ? "" : void 0,
+			className: cn("inline-block", shouldAnimate && "opacity-0", active && ANIMATION_CLASSES[animation], segmentClassName),
+			style: active ? animTimingStyle(delay + idx * staggerDelay, duration) : void 0,
+			children: segment
+		})] }, i);
+	}));
+}
+function easeOutCubic(t) {
+	return 1 - Math.pow(1 - t, 3);
+}
+function AnimatedCounter({ from = 0, to, duration = 2e3, delay = 0, locale, prefix, suffix, decimals = 0, formatter, inView = false, inViewMargin, once = true, disabled = false, className, as = "span" }) {
+	const ref = useRef(null);
+	const isInView = useInView(ref, {
+		margin: inViewMargin,
+		once,
+		enabled: inView && !disabled
+	});
+	const active = !disabled && (!inView || isInView);
+	const [count, setCount] = useState(from);
+	const hasStarted = useRef(false);
+	useEffect(() => {
+		if (disabled) {
+			setCount(to);
+			return;
+		}
+		if (!active || hasStarted.current) return;
+		hasStarted.current = true;
+		if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			setCount(to);
+			return;
+		}
+		const timeout = setTimeout(() => {
+			const start = performance.now();
+			const step = (now) => {
+				const elapsed = now - start;
+				const progress = Math.min(elapsed / duration, 1);
+				const eased = easeOutCubic(progress);
+				const current = from + (to - from) * eased;
+				setCount(decimals > 0 ? Number(current.toFixed(decimals)) : Math.round(current));
+				if (progress < 1) requestAnimationFrame(step);
+			};
+			requestAnimationFrame(step);
+		}, delay);
+		return () => clearTimeout(timeout);
+	}, [
+		active,
+		disabled,
+		from,
+		to,
+		duration,
+		delay,
+		decimals
+	]);
+	const formatValue = (v) => {
+		if (formatter) return formatter(v);
+		if (locale) return v.toLocaleString(locale, {
+			minimumFractionDigits: decimals,
+			maximumFractionDigits: decimals
+		});
+		if (decimals > 0) return v.toFixed(decimals);
+		return String(v);
+	};
+	return createElement(as, {
+		ref,
+		className
+	}, /* @__PURE__ */ jsxs(Fragment, { children: [
+		prefix,
+		formatValue(count),
+		suffix
+	] }));
+}
+
+//#endregion
+export { AccordionSection, ActionDropdown, ActionTooltip, AnimatedCounter, AnimatedText, ApiPagination, ButtonTooltip, CardWrapper, CheckboxDropdown, ClientSubmitButton, CollapsibleCard, CollapsibleSection, CollapsibleWrapper, ConfirmDialog, ConfirmSheet, CopyButton, CopyCodeBlock, CopyText, CustomPagination, DEFAULT_COUNTRIES, DataCard, DeleteConfirmDialog, DetailItem, DetailView, DialogWrapper, DraggableCard, DropdownWrapper, DynamicTabs, ErrorState, ErrorStateInline, FadeIn, FadeInUp, FaqAccordion, FeatureItem, FeatureList, FormDialog, FormSheet, IconItemMedia, IconTooltip, InfoAlert, InfoRow, InfoTooltip, LoadingCard, PaginationInfo, PhoneInput, Pill, PillAvatar, PillAvatarGroup, PillButton, PillDelta, PillIcon, PillIndicator, PillStatus, RadioDropdown, ResponsiveSplitLayout, ScaleIn, SelectDropdown, SheetWrapper, SimpleTable, SlideIn, StaggerChildren, StatsCard, StatusBanner, StepContent, Stepper, TabContent, TabTrigger, TableWrapper, TabsWrapper, Thumbnail, Timeline, TooltipWrapper, useInView };