@classytic/fluid 0.4.1 → 0.5.0

package/dist/client/core.mjs

@@ -1,403 +1,317 @@
 "use client";
 
 import { t as cn } from "../utils-DQ5SCVoW.mjs";
-import { t as useMediaQuery } from "../use-media-query-BnVNIKT4.mjs";
-import { a as SelectDropdown, c as PaginationInfo, i as RadioDropdown, n as CheckboxDropdown, o as ApiPagination, r as DropdownWrapper, s as CustomPagination, t as ActionDropdown } from "../dropdown-wrapper-B86u9Fri.mjs";
-import { i as ClientSubmitButton, n as FormSheet, r as SheetWrapper, t as ConfirmSheet } from "../sheet-wrapper-C13Y-Q6w.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { S as FaqAccordion, _ as DataCard, a as PillButton, b as StatsCard, c as PillIndicator, d as CopyButton, f as CopyCodeBlock, g as CardWrapper, h as DetailView, i as PillAvatarGroup, l as PillStatus, m as DetailItem, n as Pill, o as PillDelta, p as CopyText, r as PillAvatar, s as PillIcon, t as Timeline, u as InfoRow, v as DraggableCard, x as AccordionSection, y as LoadingCard } from "../timeline-HJtWf4Op.mjs";
+import { t as useMediaQuery } from "../use-media-query-ChLfFChU.mjs";
+import { a as SelectDropdown, c as PaginationInfo, i as RadioDropdown, n as CheckboxDropdown, o as ApiPagination, r as DropdownWrapper, s as CustomPagination, t as ActionDropdown } from "../dropdown-wrapper-B9nRDUlz.mjs";
+import { i as ClientSubmitButton, n as FormSheet, r as SheetWrapper, t as ConfirmSheet } from "../sheet-wrapper-B2uxookb.mjs";
+import { n as PhoneInput, t as DEFAULT_COUNTRIES } from "../phone-input-B9_XPNvv.mjs";
 import * as React$1 from "react";
-import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, memo, use, useEffect, useMemo, useRef, useState } from "react";
-import { AlertCircle, AlertTriangle, ArrowLeft, ArrowRight, Check, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronUp, ChevronUpIcon, Circle, Copy, Info, Loader2, MinusIcon, 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 { Children, Fragment, createContext, createElement, isValidElement, memo, use, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, ArrowLeft, ArrowRight, Check, CheckCircle2, ChevronDown, ChevronUp, Info, Loader2, RefreshCw, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 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 { 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
-			}) })]
-		})
-	});
-});
+//#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"
+};
 /**
-* FaqAccordion - FAQ-style accordion where only one item can be open by default
+* useInView — observe when an element enters the viewport.
 *
 * @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 ref = useRef<HTMLDivElement>(null);
+* const isInView = useInView(ref, { once: true, margin: "-100px" });
+* return <div ref={ref}>{isInView ? "Visible!" : "Hidden"}</div>;
 * ```
 */
-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
-				})
-			})
-		]
-	});
+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;
 }
-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 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)
+	};
 }
-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..."
-			})]
-		})
-	});
+/** 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` } : {}
+	};
 }
-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 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);
 }
-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
-				})
-			]
-		})
+/** Fade in with opacity transition */
+function FadeIn(props) {
+	return /* @__PURE__ */ jsx(AnimateBase, {
+		animation: "fadeIn",
+		...props
 	});
 }
-
-//#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" })
+/** Fade in with upward motion */
+function FadeInUp(props) {
+	return /* @__PURE__ */ jsx(AnimateBase, {
+		animation: "fadeInUp",
+		...props
 	});
-	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
-		})]
+}
+/** Scale up into view */
+function ScaleIn(props) {
+	return /* @__PURE__ */ jsx(AnimateBase, {
+		animation: "scaleIn",
+		...props
 	});
 }
-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
-		}) })]
+/** Slide in from a specified direction */
+function SlideIn({ direction = "left", ...props }) {
+	return /* @__PURE__ */ jsx(AnimateBase, {
+		animation: SLIDE_MAP[direction],
+		...props
 	});
 }
-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
+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, { children: "\xA0" }, i);
+		const idx = animIndex++;
+		return /* @__PURE__ */ jsxs(Fragment, { 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 - (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,
+		"aria-live": "polite",
+		"aria-atomic": "true"
+	}, /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		prefix,
+		formatValue(count),
+		suffix
+	] }));
+}
+
+//#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",
+				"aria-expanded": isOpen,
+				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 }) {
@@ -408,16 +322,11 @@ function ConfirmDialog({ open, onOpenChange, trigger, title = "Are you sure?", d
 		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, {
+		children: [trigger && /* @__PURE__ */ jsx(AlertDialogTrigger, { render: trigger }), /* @__PURE__ */ jsxs(AlertDialogContent, {
 			className: cn("max-w-md", className),
 			children: [
 				/* @__PURE__ */ jsxs(AlertDialogHeader, {
@@ -503,75 +412,6 @@ function InfoAlert({ title, description, confirmText = "OK", onConfirm, onOpenCh
 	});
 }
 
-//#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 = {
@@ -680,6 +520,7 @@ 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),
+		role: "alert",
 		children: [
 			icon || /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
 			/* @__PURE__ */ jsx("span", { children: errorMessage }),
@@ -694,34 +535,6 @@ function ErrorStateInline({ error, onRetry, className, icon }) {
 	});
 }
 
-//#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
 /**
@@ -839,479 +652,40 @@ function FeatureList({ items = [], columns = 3, variant = "outline", iconBg = "p
 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: "🇮🇱"
+//#region src/components/printable-view.tsx
+function PrintableView({ children, id, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: cn("hidden print:block", className),
+		children
+	});
+}
+function printDocument(elementId, options = {}) {
+	const { title = "Print", styles = "", copyStyles = true } = options;
+	const element = document.getElementById(elementId);
+	if (!element) {
+		console.warn(`printDocument: element with id "${elementId}" not found`);
+		return;
 	}
-];
-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?.("");
+	const printWindow = window.open("", "_blank", "width=800,height=600");
+	if (!printWindow) {
+		window.print();
+		return;
+	}
+	printWindow.document.write(`<!DOCTYPE html><html><head><title>${title}</title>`);
+	if (copyStyles) document.querySelectorAll("link[rel=\"stylesheet\"], style").forEach((node) => {
+		printWindow.document.write(node.outerHTML);
+	});
+	if (styles) printWindow.document.write(`<style>${styles}</style>`);
+	printWindow.document.write("</head><body>");
+	printWindow.document.write(element.innerHTML);
+	printWindow.document.write("</body></html>");
+	printWindow.document.close();
+	printWindow.onload = () => {
+		printWindow.focus();
+		printWindow.print();
+		printWindow.close();
 	};
-	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
@@ -1909,6 +1283,30 @@ function StepContent({ step, currentStep, children, className, keepMounted = fal
 	});
 }
 
+//#endregion
+//#region src/components/submit-footer.tsx
+function SubmitFooter({ onCancel, onSubmit, isLoading = false, submitLabel = "Save", cancelLabel = "Cancel", submitVariant = "default", formSubmit = false, disabled = false, leftContent, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2 pt-4", className),
+		children: [leftContent && /* @__PURE__ */ jsxs(Fragment$1, { children: [leftContent, /* @__PURE__ */ jsx("div", { className: "flex-1" })] }), /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-2", !leftContent && "ml-auto"),
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: onCancel,
+				disabled: isLoading,
+				children: cancelLabel
+			}), /* @__PURE__ */ jsxs(Button, {
+				type: formSubmit ? "submit" : "button",
+				variant: submitVariant,
+				onClick: formSubmit ? void 0 : onSubmit,
+				disabled: disabled || isLoading,
+				children: [isLoading && /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), submitLabel]
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region src/components/table-wrapper.tsx
 function TableWrapper({ title, description, icon, children, columns, data, renderRow, emptyState, className, tableClassName, maxHeight = "500px", ...props }) {
@@ -1992,6 +1390,16 @@ function Thumbnail({ src, alt, aspect = "square", size = "medium", className, fa
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("relative rounded-md overflow-hidden", aspectRatios[aspect], sizeClass, onClick && "cursor-pointer", className),
 		onClick,
+		...onClick ? {
+			role: "button",
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					onClick();
+				}
+			}
+		} : {},
 		children: /* @__PURE__ */ jsx(Image, {
 			src: src || fallback,
 			alt: alt || "Thumbnail",
@@ -2014,7 +1422,7 @@ const getSizes = (size) => {
 //#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 });
+	if (disabled || !content) return /* @__PURE__ */ jsx(Fragment$1, { children });
 	return /* @__PURE__ */ jsxs(Tooltip, {
 		delay,
 		...props,
@@ -2056,13 +1464,15 @@ function InfoTooltip({ tooltip, className, size = 16, ...props }) {
 		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",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "rounded-full bg-muted text-muted-foreground hover:bg-muted/80 transition-colors cursor-help inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 			style: {
 				width: size,
 				height: size,
 				fontSize: size * .6
 			},
+			"aria-label": "More information",
 			children: "?"
 		})
 	});
@@ -2072,6 +1482,7 @@ function ActionTooltip({ children, tooltip, action, variant = "ghost", size = "s
 		content: tooltip,
 		...props,
 		children: /* @__PURE__ */ jsx("button", {
+			type: "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
@@ -2080,526 +1491,4 @@ function ActionTooltip({ children, tooltip, action, variant = "ghost", size = "s
 }
 
 //#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 };
+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, PrintableView, RadioDropdown, ResponsiveSplitLayout, ScaleIn, SelectDropdown, SheetWrapper, SimpleTable, SlideIn, StaggerChildren, StatsCard, StatusBanner, StepContent, Stepper, SubmitFooter, TabContent, TabTrigger, TableWrapper, TabsWrapper, Thumbnail, Timeline, TooltipWrapper, printDocument, useInView };