npm - @tree-ia/design-system - Versions diffs - 2.2.1 → 2.3.1 - Mend

@tree-ia/design-system 2.2.1 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
-import React, { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { AlertCircle, AlertOctagon, AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, Building2, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Copy, File, GripVertical, Image, Inbox, Info, Lightbulb, LogOut, Menu, Monitor, Moon, Search, ShieldAlert, Sun, Text, Upload, User, X, XCircle } from "lucide-react";
+import { AlertCircle, AlertOctagon, AlertTriangle, ArrowDown, ArrowLeft, ArrowUp, ArrowUpDown, Bot, Building2, Camera, Check, CheckCheck, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Copy, File, FileText, GripVertical, Image, Inbox, Info, Lightbulb, Loader2, LogOut, Menu, MessageCircle, Mic, Monitor, Moon, MoreVertical, Paperclip, Phone, Play, PlaySquare, Search, Send, Settings, ShieldAlert, Smile, Sun, Text, Upload, User, Video, Wifi, X, XCircle } from "lucide-react";
 import { Bar, Doughnut, Line } from "react-chartjs-2";
 import { ArcElement, BarElement, CategoryScale, Chart, Filler, Legend, LineElement, LinearScale, PointElement, Title as Title$1, Tooltip as Tooltip$1 } from "chart.js";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
@@ -35,7 +35,7 @@ function Loading({ size = "md", className = "", text, textColor, color, variant
 //#endregion
 //#region src/components/Button/index.tsx
-const cn$35 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$37 = (...classes) => classes.filter(Boolean).join(" ");
 function Button({ children, variant = "primary", size = "md", isLoading = false, icon, iconPosition = "left", className, disabled, ...props }) {
 	const baseStyles = "font-medium rounded-lg transition-all duration-200 ease-out cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--dashboard-primary,#2563EB)] active:scale-[0.97]";
 	const variantStyles = {
@@ -56,7 +56,7 @@ function Button({ children, variant = "primary", size = "md", isLoading = false,
 	};
 	const isIconOnly = !!icon && (children === void 0 || children === null || typeof children === "string" && children.trim() === "");
 	return /* @__PURE__ */ jsx("button", {
-		className: cn$35(baseStyles, variantStyles[variant], isIconOnly ? iconOnlySizeStyles[size] : sizeStyles[size], className),
+		className: cn$37(baseStyles, variantStyles[variant], isIconOnly ? iconOnlySizeStyles[size] : sizeStyles[size], className),
 		disabled: disabled || isLoading,
 		...props,
 		children: isLoading ? /* @__PURE__ */ jsxs("span", {
@@ -81,7 +81,7 @@ function Button({ children, variant = "primary", size = "md", isLoading = false,
 //#endregion
 //#region src/components/Input/index.tsx
-const cn$34 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$36 = (...classes) => classes.filter(Boolean).join(" ");
 const sizeStyles = {
 	sm: "h-8 px-2.5 text-xs",
 	md: "h-9 px-3 text-sm",
@@ -102,7 +102,7 @@ const Input = React.forwardRef(({ className, type = "text", label, error, childr
 				children: [/* @__PURE__ */ jsx("input", {
 					type,
 					id: inputId,
-					className: cn$34("flex w-full rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm transition-colors duration-200 focus:border-[var(--dashboard-primary,#37a501)] placeholder:text-[var(--dashboard-text-secondary,#6b7280)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", sizeStyles[size], error ? "border-[var(--dashboard-status-danger,#EF4444)] focus:border-[var(--dashboard-status-danger,#EF4444)]" : void 0, children ? "pr-10" : void 0, className),
+					className: cn$36("flex w-full rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm transition-colors duration-200 focus:border-[var(--dashboard-primary,#37a501)] placeholder:text-[var(--dashboard-text-secondary,#6b7280)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", sizeStyles[size], error ? "border-[var(--dashboard-status-danger,#EF4444)] focus:border-[var(--dashboard-status-danger,#EF4444)]" : void 0, children ? "pr-10" : void 0, className),
 					ref,
 					...props
 				}), children && /* @__PURE__ */ jsx("div", {
@@ -757,16 +757,16 @@ function FormField({ label, name, type = "text", value, onChange, error, require
 //#endregion
 //#region src/components/Tabs/index.tsx
-const cn$33 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$35 = (...classes) => classes.filter(Boolean).join(" ");
 function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 	if (variant === "pill") return /* @__PURE__ */ jsx("div", {
-		className: cn$33("flex flex-wrap gap-2", className),
+		className: cn$35("flex flex-wrap gap-2", className),
 		role: "tablist",
 		children: tabs.map((tab) => {
 			const isActive = activeTab === tab.id;
 			return /* @__PURE__ */ jsxs("button", {
 				onClick: () => onChange(tab.id),
-				className: cn$33("flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-colors cursor-pointer", isActive ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
+				className: cn$35("flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-colors cursor-pointer", isActive ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
 				role: "tab",
 				"aria-selected": isActive,
 				children: [
@@ -776,7 +776,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 					}),
 					tab.label,
 					tab.count !== void 0 && /* @__PURE__ */ jsx("span", {
-						className: cn$33("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-white/20 text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
+						className: cn$35("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-white/20 text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
 						children: tab.count
 					})
 				]
@@ -784,7 +784,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$33("border-b border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$35("border-b border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
 		children: /* @__PURE__ */ jsx("nav", {
 			className: "flex gap-6",
 			"aria-label": "Tabs",
@@ -792,7 +792,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 				const isActive = activeTab === tab.id;
 				return /* @__PURE__ */ jsxs("button", {
 					onClick: () => onChange(tab.id),
-					className: cn$33("relative pb-3 px-1 text-sm font-medium transition-colors border-b-2 flex items-center gap-2 cursor-pointer", isActive ? "text-[var(--dashboard-primary,#37a501)] border-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:text-[var(--dashboard-text-primary,#2d2d2d)] border-transparent"),
+					className: cn$35("relative pb-3 px-1 text-sm font-medium transition-colors border-b-2 flex items-center gap-2 cursor-pointer", isActive ? "text-[var(--dashboard-primary,#37a501)] border-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:text-[var(--dashboard-text-primary,#2d2d2d)] border-transparent"),
 					role: "tab",
 					"aria-selected": isActive,
 					children: [
@@ -802,7 +802,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 						}),
 						tab.label,
 						tab.count !== void 0 && /* @__PURE__ */ jsx("span", {
-							className: cn$33("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
+							className: cn$35("ml-1 text-xs rounded-full px-1.5 py-0.5", isActive ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)]"),
 							children: tab.count
 						})
 					]
@@ -814,7 +814,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 //#endregion
 //#region src/components/DateRangePicker/index.tsx
-const cn$32 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$34 = (...classes) => classes.filter(Boolean).join(" ");
 const locales$1 = {
 	pt: {
 		months: [
@@ -921,7 +921,7 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
 	};
 	const days = getDaysInMonth(currentMonth);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$32("w-64 bg-[var(--dashboard-surface,#ffffff)] rounded-lg p-4 shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$34("w-64 bg-[var(--dashboard-surface,#ffffff)] rounded-lg p-4 shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between mb-4",
 			children: [
@@ -959,9 +959,9 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
 				const isSelected = isStart || isEnd;
 				return /* @__PURE__ */ jsxs("div", {
 					className: "relative h-8 w-8",
-					children: [value.start && value.end && (inRange || isStart || isEnd) && /* @__PURE__ */ jsx("div", { className: cn$32("absolute inset-0 bg-[var(--dashboard-text-secondary,#6b7280)]/10", isStart && "rounded-l-full", isEnd && "rounded-r-full") }), /* @__PURE__ */ jsx("button", {
+					children: [value.start && value.end && (inRange || isStart || isEnd) && /* @__PURE__ */ jsx("div", { className: cn$34("absolute inset-0 bg-[var(--dashboard-text-secondary,#6b7280)]/10", isStart && "rounded-l-full", isEnd && "rounded-r-full") }), /* @__PURE__ */ jsx("button", {
 						onClick: () => handleDayClick(day),
-						className: cn$32("relative h-8 w-8 flex items-center justify-center text-xs font-medium transition-colors z-10 rounded-full cursor-pointer", isSelected ? "bg-[var(--dashboard-primary,#37a501)] text-white hover:opacity-90" : "text-[var(--dashboard-text-primary,#2d2d2d)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
+						className: cn$34("relative h-8 w-8 flex items-center justify-center text-xs font-medium transition-colors z-10 rounded-full cursor-pointer", isSelected ? "bg-[var(--dashboard-primary,#37a501)] text-white hover:opacity-90" : "text-[var(--dashboard-text-primary,#2d2d2d)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
 						children: day
 					})]
 				}, day);
@@ -972,7 +972,7 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
 //#endregion
 //#region src/components/DatePicker/index.tsx
-const cn$31 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$33 = (...classes) => classes.filter(Boolean).join(" ");
 const locales = {
 	pt: {
 		months: [
@@ -1067,7 +1067,7 @@ function DatePicker({ value, onChange, locale = "pt", minDate, maxDate, classNam
 	};
 	const days = getDaysInMonth(currentMonth);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$31("w-64 bg-[var(--dashboard-surface,#ffffff)] rounded-lg p-4 shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$33("w-64 bg-[var(--dashboard-surface,#ffffff)] rounded-lg p-4 shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between mb-4",
 			children: [
@@ -1109,7 +1109,7 @@ function DatePicker({ value, onChange, locale = "pt", minDate, maxDate, classNam
 						type: "button",
 						onClick: () => handleDayClick(day),
 						disabled,
-						className: cn$31("relative h-8 w-8 flex items-center justify-center text-xs font-medium transition-colors z-10 rounded-full", disabled ? "text-[var(--dashboard-text-secondary,#6b7280)]/40 cursor-not-allowed" : "cursor-pointer", !disabled && selected ? "bg-[var(--dashboard-primary,#37a501)] text-white hover:opacity-90" : !disabled && "text-[var(--dashboard-text-primary,#2d2d2d)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
+						className: cn$33("relative h-8 w-8 flex items-center justify-center text-xs font-medium transition-colors z-10 rounded-full", disabled ? "text-[var(--dashboard-text-secondary,#6b7280)]/40 cursor-not-allowed" : "cursor-pointer", !disabled && selected ? "bg-[var(--dashboard-primary,#37a501)] text-white hover:opacity-90" : !disabled && "text-[var(--dashboard-text-primary,#2d2d2d)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
 						children: day
 					})
 				}, day);
@@ -1120,7 +1120,7 @@ function DatePicker({ value, onChange, locale = "pt", minDate, maxDate, classNam
 //#endregion
 //#region src/components/Title/index.tsx
-const cn$30 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$32 = (...classes) => classes.filter(Boolean).join(" ");
 const defaultSizeByLevel = {
 	1: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl",
 	2: "text-xl sm:text-2xl md:text-3xl lg:text-4xl",
@@ -1155,7 +1155,7 @@ function Title({ children, level = 1, size, weight = "bold", align = "left", col
 	const sizeClass = size ? customSizes[size] : defaultSizeByLevel[level];
 	const colorClass = color || "text-[var(--dashboard-text-primary,#2d2d2d)]";
 	return /* @__PURE__ */ jsx(Tag, {
-		className: cn$30(sizeClass, weightStyles[weight], alignStyles[align], colorClass, className),
+		className: cn$32(sizeClass, weightStyles[weight], alignStyles[align], colorClass, className),
 		...props,
 		children
 	});
@@ -1163,7 +1163,7 @@ function Title({ children, level = 1, size, weight = "bold", align = "left", col
 //#endregion
 //#region src/components/ToggleSwitch/index.tsx
-const cn$29 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$31 = (...classes) => classes.filter(Boolean).join(" ");
 const sizeConfig$1 = {
 	sm: {
 		track: "h-5 w-9",
@@ -1187,7 +1187,7 @@ const sizeConfig$1 = {
 function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label, className }) {
 	const config = sizeConfig$1[size];
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$29("inline-flex items-center gap-2", className),
+		className: cn$31("inline-flex items-center gap-2", className),
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
 			role: "switch",
@@ -1195,10 +1195,10 @@ function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label,
 			"aria-label": label,
 			disabled,
 			onClick: () => onChange(!enabled),
-			className: cn$29("relative inline-flex items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--dashboard-primary,#37a501)]", config.track, enabled ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/30", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
-			children: /* @__PURE__ */ jsx("span", { className: cn$29("inline-block transform rounded-full bg-white shadow-sm transition-transform", config.thumb, enabled ? config.translateOn : config.translateOff) })
+			className: cn$31("relative inline-flex items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--dashboard-primary,#37a501)]", config.track, enabled ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/30", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+			children: /* @__PURE__ */ jsx("span", { className: cn$31("inline-block transform rounded-full bg-white shadow-sm transition-transform", config.thumb, enabled ? config.translateOn : config.translateOff) })
 		}), label && /* @__PURE__ */ jsx("span", {
-			className: cn$29("text-sm text-[var(--dashboard-text-primary,#2d2d2d)]", disabled && "opacity-50"),
+			className: cn$31("text-sm text-[var(--dashboard-text-primary,#2d2d2d)]", disabled && "opacity-50"),
 			children: label
 		})]
 	});
@@ -1206,7 +1206,7 @@ function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label,
 //#endregion
 //#region src/components/BadgeStatus/index.tsx
-const cn$28 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$30 = (...classes) => classes.filter(Boolean).join(" ");
 const variantStyles = {
 	success: {
 		color: "text-[var(--dashboard-status-success,#10B981)]",
@@ -1237,7 +1237,7 @@ function BadgeStatus({ label, variant = "neutral", color, bgColor, size = "md",
 	const styles = variantStyles[variant];
 	const useCustomColors = color || bgColor;
 	return /* @__PURE__ */ jsx("span", {
-		className: cn$28("inline-flex w-fit items-center justify-center rounded-full font-medium whitespace-nowrap", sizeClasses$1[size], !useCustomColors && styles.color, !useCustomColors && styles.bgColor, className),
+		className: cn$30("inline-flex w-fit items-center justify-center rounded-full font-medium whitespace-nowrap", sizeClasses$1[size], !useCustomColors && styles.color, !useCustomColors && styles.bgColor, className),
 		style: useCustomColors ? {
 			color: color || void 0,
 			backgroundColor: bgColor || void 0
@@ -1248,7 +1248,7 @@ function BadgeStatus({ label, variant = "neutral", color, bgColor, size = "md",
 //#endregion
 //#region src/components/Sidebar/index.tsx
-const cn$27 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$29 = (...classes) => classes.filter(Boolean).join(" ");
 function DefaultLink$1({ href, className, children }) {
 	return /* @__PURE__ */ jsx("a", {
 		href,
@@ -1324,7 +1324,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 		const isChildActive = item.children?.some((c) => currentPath === c.href);
 		if (hasChildren) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
 			onClick: () => toggleExpand(item.id),
-			className: cn$27("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isChildActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10"),
+			className: cn$29("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isChildActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10"),
 			style: { transition: "background-color 200ms, color 200ms" },
 			title: collapsed && !mobile ? item.label : void 0,
 			children: [/* @__PURE__ */ jsx(Icon, {
@@ -1339,7 +1339,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				children: item.label
 			}), /* @__PURE__ */ jsx(ChevronRight, {
 				size: 14,
-				className: cn$27("ml-auto flex-shrink-0 transition-transform duration-200", isExpanded ? "rotate-90" : "")
+				className: cn$29("ml-auto flex-shrink-0 transition-transform duration-200", isExpanded ? "rotate-90" : "")
 			})] })]
 		}), (!collapsed || mobile) && /* @__PURE__ */ jsx("div", {
 			className: "overflow-hidden transition-all duration-200 ml-7 border-l-2 border-[var(--dashboard-sidebar-border,#e0dfe3)]",
@@ -1351,7 +1351,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 					href: child.href,
 					className: "block",
 					children: /* @__PURE__ */ jsxs("div", {
-						className: cn$27("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)] font-semibold border-l-2 border-[var(--dashboard-primary,#ff521d)] -ml-[2px]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:text-[var(--dashboard-sidebar-active-text,#ff521d)]"),
+						className: cn$29("w-full flex items-center pl-4 pr-4 py-2 rounded-r-lg text-[13px] cursor-pointer", childActive ? "text-[var(--dashboard-sidebar-active-text,#ff521d)] font-semibold border-l-2 border-[var(--dashboard-primary,#ff521d)] -ml-[2px]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:text-[var(--dashboard-sidebar-active-text,#ff521d)]"),
 						style: { transition: "background-color 200ms, color 200ms" },
 						children: [/* @__PURE__ */ jsx(ChildIcon, {
 							size: 15,
@@ -1368,7 +1368,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			href: item.href,
 			className: "block",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cn$27("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isActive ? "bg-[var(--dashboard-primary,#ff521d)]/25 text-[var(--dashboard-sidebar-active-text,#ff521d)]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10"),
+				className: cn$29("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer", collapsed && !mobile ? "justify-center" : "justify-start", isActive ? "bg-[var(--dashboard-primary,#ff521d)]/25 text-[var(--dashboard-sidebar-active-text,#ff521d)]" : "text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10"),
 				style: { transition: "background-color 200ms, color 200ms" },
 				title: collapsed && !mobile ? item.label : void 0,
 				children: [/* @__PURE__ */ jsx(Icon, {
@@ -1463,7 +1463,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 		})]
 	});
 	const desktopSidebar = /* @__PURE__ */ jsxs("aside", {
-		className: cn$27("hidden xl:flex xl:flex-col xl:fixed xl:left-0 xl:top-0 xl:h-screen bg-[var(--dashboard-sidebar-bg,#f0f0f0)] border-r border-[var(--dashboard-sidebar-border,#e0dfe3)] overflow-visible", isCollapsed ? "xl:w-[109px]" : "xl:w-[280px]", className),
+		className: cn$29("hidden xl:flex xl:flex-col xl:fixed xl:left-0 xl:top-0 xl:h-screen bg-[var(--dashboard-sidebar-bg,#f0f0f0)] border-r border-[var(--dashboard-sidebar-border,#e0dfe3)] overflow-visible", isCollapsed ? "xl:w-[109px]" : "xl:w-[280px]", className),
 		style: { transition: `width 400ms ${cubicBezier}` },
 		children: [onToggleCollapse && /* @__PURE__ */ jsxs("button", {
 			onClick: onToggleCollapse,
@@ -1537,7 +1537,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 					children: [
 						user && /* @__PURE__ */ jsxs("button", {
 							onClick: onUserClick,
-							className: cn$27("w-full flex items-center px-4 py-3 rounded-lg bg-[var(--dashboard-primary,#ff521d)]/5 hover:bg-[var(--dashboard-primary,#ff521d)]/10 transition-colors cursor-pointer", isCollapsed ? "justify-center" : "justify-start"),
+							className: cn$29("w-full flex items-center px-4 py-3 rounded-lg bg-[var(--dashboard-primary,#ff521d)]/5 hover:bg-[var(--dashboard-primary,#ff521d)]/10 transition-colors cursor-pointer", isCollapsed ? "justify-center" : "justify-start"),
 							title: isCollapsed ? `${user.subtitle ? user.subtitle + " - " : ""}${user.name}` : void 0,
 							children: [/* @__PURE__ */ jsx("div", {
 								className: "flex items-center justify-center w-8 h-8 rounded-full bg-[var(--dashboard-primary,#ff521d)]/30 text-[var(--dashboard-sidebar-text,#403f52)] flex-shrink-0",
@@ -1570,7 +1570,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 						footerItems?.map((item) => renderMenuItem(item, isCollapsed, false)),
 						onLogout && /* @__PURE__ */ jsxs("button", {
 							onClick: onLogout,
-							className: cn$27("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10", isCollapsed ? "justify-center" : "justify-start"),
+							className: cn$29("w-full flex items-center px-4 py-3 rounded-lg text-sm font-medium cursor-pointer text-[var(--dashboard-sidebar-text,#403f52)] hover:bg-[var(--dashboard-primary,#ff521d)]/10", isCollapsed ? "justify-center" : "justify-start"),
 							style: { transition: "background-color 200ms" },
 							title: isCollapsed ? logoutLabel : void 0,
 							children: [/* @__PURE__ */ jsx(LogOut, {
@@ -1599,7 +1599,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 //#endregion
 //#region src/components/Header/index.tsx
-const cn$26 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$28 = (...classes) => classes.filter(Boolean).join(" ");
 function isGroup(item) {
 	return "children" in item && Array.isArray(item.children);
 }
@@ -1625,15 +1625,27 @@ function useOnClickOutside(ref, handler) {
 		};
 	}, [ref, handler]);
 }
-function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = DefaultLink, user, establishments = [], establishmentsLabel = "Estabelecimento", onEstablishmentChange, actions, onUserClick, onLogout, logoutLabel = "Sair", menuLabel = "Menu", desktopOffsetLeft = 0, className }) {
+function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = DefaultLink, user, establishments = [], establishmentsLabel = "Estabelecimento", onEstablishmentChange, actions, onUserClick, onLogout, logoutLabel = "Sair", menuLabel = "Menu", openDropdownOnHover = true, desktopOffsetLeft = 0, className }) {
 	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 	const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
 	const [openDropdownId, setOpenDropdownId] = useState(null);
 	const dropdownRef = useRef(null);
 	const userMenuRef = useRef(null);
+	const hoverCloseTimeoutRef = useRef(null);
 	useOnClickOutside(dropdownRef, () => setOpenDropdownId(null));
 	useOnClickOutside(userMenuRef, () => setIsUserMenuOpen(false));
+	useEffect(() => {
+		return () => {
+			if (hoverCloseTimeoutRef.current) clearTimeout(hoverCloseTimeoutRef.current);
+		};
+	}, []);
+	const clearHoverCloseTimeout = () => {
+		if (!hoverCloseTimeoutRef.current) return;
+		clearTimeout(hoverCloseTimeoutRef.current);
+		hoverCloseTimeoutRef.current = null;
+	};
 	const closeMenus = () => {
+		clearHoverCloseTimeout();
 		setIsMobileMenuOpen(false);
 		setIsUserMenuOpen(false);
 		setOpenDropdownId(null);
@@ -1646,7 +1658,7 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 		const Icon = item.icon;
 		const active = currentPath === item.href;
 		if (item.disabled) return /* @__PURE__ */ jsxs("span", {
-			className: cn$26("flex items-center gap-2 rounded-lg text-sm font-medium cursor-not-allowed", options.mobile ? "px-4 py-3" : "h-10 px-3", "text-[var(--dashboard-text-secondary,#6b7280)]/40"),
+			className: cn$28("flex items-center gap-2 rounded-lg text-sm font-medium cursor-not-allowed", options.mobile ? "px-4 py-3" : "h-10 px-3", "text-[var(--dashboard-text-secondary,#6b7280)]/40"),
 			title: "Em breve",
 			children: [/* @__PURE__ */ jsx(Icon, {
 				size: 18,
@@ -1661,7 +1673,7 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 			className: "block",
 			onClick: closeMenus,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cn$26("flex items-center gap-2 rounded-lg text-sm font-medium transition-colors", options.mobile ? "px-4 py-3" : "h-10 px-3", active ? "bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-primary,#37a501)]/8 hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
+				className: cn$28("flex items-center gap-2 rounded-lg text-sm font-medium transition-colors", options.mobile ? "px-4 py-3" : "h-10 px-3", active ? "bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-primary,#37a501)]/8 hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
 				"aria-current": active ? "page" : void 0,
 				children: [/* @__PURE__ */ jsx(Icon, {
 					size: 18,
@@ -1698,7 +1710,7 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 						className: "block",
 						onClick: closeMenus,
 						children: /* @__PURE__ */ jsxs("div", {
-							className: cn$26("flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors", active ? "bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-primary,#37a501)]/8 hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
+							className: cn$28("flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors", active ? "bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-primary,#37a501)]/8 hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
 							children: [/* @__PURE__ */ jsx(child.icon, {
 								size: 16,
 								className: "flex-shrink-0"
@@ -1711,10 +1723,25 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 		return /* @__PURE__ */ jsxs("div", {
 			className: "relative",
 			ref: isOpen ? dropdownRef : void 0,
+			onMouseEnter: () => {
+				if (!openDropdownOnHover) return;
+				clearHoverCloseTimeout();
+				setOpenDropdownId(group.id);
+			},
+			onMouseLeave: () => {
+				if (!openDropdownOnHover) return;
+				hoverCloseTimeoutRef.current = setTimeout(() => {
+					setOpenDropdownId((current) => current === group.id ? null : current);
+					hoverCloseTimeoutRef.current = null;
+				}, 120);
+			},
 			children: [/* @__PURE__ */ jsxs("button", {
 				type: "button",
-				onClick: () => setOpenDropdownId((prev) => prev === group.id ? null : group.id),
-				className: cn$26("flex items-center gap-1.5 rounded-lg h-10 px-3 text-sm font-medium transition-colors", groupActive ? "bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-primary,#37a501)]/8 hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
+				onClick: () => {
+					clearHoverCloseTimeout();
+					setOpenDropdownId((prev) => prev === group.id ? null : group.id);
+				},
+				className: cn$28("flex h-10 items-center gap-1.5 rounded-lg px-3 text-sm font-medium transition-colors", groupActive ? "bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-primary,#37a501)]/8 hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
 				"aria-expanded": isOpen,
 				children: [
 					/* @__PURE__ */ jsx(Icon, {
@@ -1724,7 +1751,7 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 					/* @__PURE__ */ jsx("span", { children: group.label }),
 					/* @__PURE__ */ jsx(ChevronDown, {
 						size: 14,
-						className: cn$26("flex-shrink-0 transition-transform", isOpen && "rotate-180")
+						className: cn$28("flex-shrink-0 transition-transform", isOpen && "rotate-180")
 					})
 				]
 			}), isOpen && /* @__PURE__ */ jsx("div", {
@@ -1746,7 +1773,7 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 						className: "block",
 						onClick: () => setOpenDropdownId(null),
 						children: /* @__PURE__ */ jsxs("div", {
-							className: cn$26("flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors", active ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)] font-semibold" : "text-[var(--dashboard-text-primary,#2d2d2d)]/80 hover:bg-[var(--dashboard-primary,#37a501)]/8 hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
+							className: cn$28("flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors", active ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)] font-semibold" : "text-[var(--dashboard-text-primary,#2d2d2d)]/80 hover:bg-[var(--dashboard-primary,#37a501)]/8 hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
 							children: [
 								/* @__PURE__ */ jsx(child.icon, {
 									size: 16,
@@ -1781,12 +1808,12 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 		}),
 		/* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
-			className: "pointer-events-none fixed left-[var(--dashboard-page-gutter,0px)] right-[var(--dashboard-page-gutter,0px)] top-2 z-30 h-5 bg-[var(--dashboard-background,#f2f2f2)] transition-[left,right] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] xl:left-[calc(var(--dashboard-header-offset-left,0px)+var(--dashboard-page-gutter,0px))]",
+			className: "pointer-events-none fixed left-[var(--dashboard-page-gutter,0px)] right-[var(--dashboard-page-gutter,0px)] top-2 z-30 h-5 bg-[var(--dashboard-background,#f2f2f2)] transition-[left,right] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] min-[800px]:left-[calc(var(--dashboard-header-offset-left,0px)+var(--dashboard-page-gutter,0px))]",
 			style: { "--dashboard-header-offset-left": desktopOffset }
 		}),
 		/* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
-			className: "pointer-events-none fixed left-[var(--dashboard-page-gutter,0px)] top-2 z-30 h-14 w-5 bg-[var(--dashboard-background,#f2f2f2)] transition-[left] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] xl:left-[calc(var(--dashboard-header-offset-left,0px)+var(--dashboard-page-gutter,0px))]",
+			className: "pointer-events-none fixed left-[var(--dashboard-page-gutter,0px)] top-2 z-30 h-14 w-5 bg-[var(--dashboard-background,#f2f2f2)] transition-[left] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] min-[800px]:left-[calc(var(--dashboard-header-offset-left,0px)+var(--dashboard-page-gutter,0px))]",
 			style: { "--dashboard-header-offset-left": desktopOffset }
 		}),
 		/* @__PURE__ */ jsx("div", {
@@ -1795,44 +1822,45 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 		}),
 		/* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
-			className: "pointer-events-none fixed left-[var(--dashboard-page-gutter,0px)] right-[var(--dashboard-page-gutter,0px)] top-2 z-30 h-20 rounded-2xl bg-[var(--dashboard-background,#f2f2f2)] transition-[left,right] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] xl:left-[calc(var(--dashboard-header-offset-left,0px)+var(--dashboard-page-gutter,0px))]",
+			className: "pointer-events-none fixed left-[var(--dashboard-page-gutter,0px)] right-[var(--dashboard-page-gutter,0px)] top-2 z-30 h-20 rounded-2xl bg-[var(--dashboard-background,#f2f2f2)] transition-[left,right] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] min-[800px]:left-[calc(var(--dashboard-header-offset-left,0px)+var(--dashboard-page-gutter,0px))]",
 			style: { "--dashboard-header-offset-left": desktopOffset }
 		}),
 		/* @__PURE__ */ jsxs("header", {
-			className: cn$26("fixed left-[var(--dashboard-page-gutter,0px)] right-[var(--dashboard-page-gutter,0px)] top-2 z-40 rounded-2xl border border-[var(--dashboard-text-secondary,#6b7280)]/15 bg-[var(--dashboard-surface,#ffffff)] text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm transition-[left,right] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] xl:left-[calc(var(--dashboard-header-offset-left,0px)+var(--dashboard-page-gutter,0px))]", className),
+			className: cn$28("fixed left-[var(--dashboard-page-gutter,0px)] right-[var(--dashboard-page-gutter,0px)] top-2 z-40 rounded-2xl border border-[var(--dashboard-text-secondary,#6b7280)]/15 bg-[var(--dashboard-surface,#ffffff)] text-[var(--dashboard-text-primary,#2d2d2d)] dashboard-header-shadow transition-[left,right] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] min-[800px]:left-[calc(var(--dashboard-header-offset-left,0px)+var(--dashboard-page-gutter,0px))]", className),
 			style: { "--dashboard-header-offset-left": desktopOffset },
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex h-20 items-center gap-4 px-4 sm:px-5 xl:grid xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]",
+				className: "flex h-20 items-center gap-4 px-4 sm:px-5 min-[800px]:grid min-[800px]:grid-cols-[minmax(7rem,1fr)_auto_minmax(3rem,1fr)] min-[800px]:gap-3 min-[1000px]:grid-cols-[minmax(8rem,1fr)_auto_minmax(10rem,1fr)] min-[1120px]:gap-4",
 				children: [
 					/* @__PURE__ */ jsx("div", {
-						className: "flex min-w-0 flex-1 items-center gap-4 lg:flex-none xl:col-start-1 xl:justify-self-start",
+						className: "flex min-w-0 flex-1 items-center gap-4 lg:flex-none min-[800px]:col-start-1 min-[800px]:justify-self-start",
 						children: /* @__PURE__ */ jsx("div", {
 							className: "flex min-w-0 items-center",
 							children: logo
 						})
 					}),
 					/* @__PURE__ */ jsx("nav", {
-						className: "hidden min-w-0 items-center justify-center gap-1 xl:col-start-2 xl:flex",
+						className: "hidden min-w-0 items-center justify-center gap-1 min-[800px]:col-start-2 min-[800px]:flex",
 						"aria-label": "Navegacao principal",
 						children: menuItems.map((item) => renderNavItem(item))
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "hidden items-center gap-3 xl:col-start-3 xl:flex xl:justify-self-end",
+						className: "hidden items-center gap-3 min-[800px]:col-start-3 min-[800px]:flex min-[800px]:justify-self-end",
 						children: [actions, user && /* @__PURE__ */ jsxs("div", {
-							className: "relative w-[260px]",
+							className: "relative w-11 min-[1000px]:w-[220px] min-[1120px]:w-[260px]",
 							ref: userMenuRef,
 							children: [/* @__PURE__ */ jsxs("button", {
 								type: "button",
 								onClick: () => setIsUserMenuOpen((open) => !open),
-								className: "flex h-11 w-full items-center gap-3 rounded-lg bg-[var(--dashboard-background,#f2f2f2)] px-3 text-left transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/8",
+								className: "flex h-11 w-full items-center justify-center gap-3 rounded-lg bg-[var(--dashboard-background,#f2f2f2)] px-0 text-left transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/8 min-[1000px]:justify-start min-[1000px]:px-3",
 								"aria-expanded": isUserMenuOpen,
+								"aria-label": user.name,
 								children: [
 									/* @__PURE__ */ jsx("div", {
 										className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]",
 										children: /* @__PURE__ */ jsx(User, { size: 16 })
 									}),
 									/* @__PURE__ */ jsxs("div", {
-										className: "min-w-0 flex-1",
+										className: "hidden min-w-0 flex-1 min-[1000px]:block",
 										children: [user.subtitle && /* @__PURE__ */ jsx("p", {
 											className: "truncate text-[11px] leading-4 text-[var(--dashboard-text-secondary,#6b7280)]",
 											children: user.subtitle
@@ -1843,11 +1871,11 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 									}),
 									/* @__PURE__ */ jsx(ChevronDown, {
 										size: 16,
-										className: cn$26("ml-auto flex-shrink-0 transition-transform", isUserMenuOpen && "rotate-180")
+										className: cn$28("ml-auto hidden flex-shrink-0 transition-transform min-[1000px]:block", isUserMenuOpen && "rotate-180")
 									})
 								]
 							}), isUserMenuOpen && /* @__PURE__ */ jsxs("div", {
-								className: "absolute right-0 top-[calc(100%+0.5rem)] w-full rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] p-2 text-[var(--dashboard-text-primary,#2d2d2d)] shadow-xl",
+								className: "absolute right-0 top-[calc(100%+0.5rem)] w-[260px] rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] p-2 text-[var(--dashboard-text-primary,#2d2d2d)] shadow-xl min-[1000px]:w-full",
 								children: [
 									/* @__PURE__ */ jsxs("button", {
 										type: "button",
@@ -1887,7 +1915,7 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 														onEstablishmentChange?.(establishment.id);
 													},
 													disabled: isDisabled,
-													className: cn$26("flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors", establishment.active ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "hover:bg-[var(--dashboard-primary,#37a501)]/8", isDisabled ? establishment.active ? "cursor-default" : "cursor-not-allowed opacity-60" : "cursor-pointer"),
+													className: cn$28("flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors", establishment.active ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "hover:bg-[var(--dashboard-primary,#37a501)]/8", isDisabled ? establishment.active ? "cursor-default" : "cursor-not-allowed opacity-60" : "cursor-pointer"),
 													children: [
 														/* @__PURE__ */ jsx("div", {
 															className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]",
@@ -1928,14 +1956,14 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => setIsMobileMenuOpen((open) => !open),
-						className: "inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)] transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/15 xl:hidden",
+						className: "inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)] transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/15 min-[800px]:hidden",
 						"aria-label": menuLabel,
 						"aria-expanded": isMobileMenuOpen,
 						children: isMobileMenuOpen ? /* @__PURE__ */ jsx(X, { size: 22 }) : /* @__PURE__ */ jsx(Menu, { size: 22 })
 					})
 				]
 			}), /* @__PURE__ */ jsx("div", {
-				className: cn$26("xl:hidden overflow-hidden border-t border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] shadow-lg transition-[max-height] duration-200", isMobileMenuOpen ? "max-h-[calc(100vh-4rem)]" : "max-h-0"),
+				className: cn$28("overflow-hidden border-t border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] shadow-lg transition-[max-height] duration-200 min-[800px]:hidden", isMobileMenuOpen ? "max-h-[calc(100vh-4rem)]" : "max-h-0"),
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "max-h-[calc(100vh-4rem)] overflow-y-auto px-4 py-3",
 					children: [/* @__PURE__ */ jsx("nav", {
@@ -1988,7 +2016,7 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 											onEstablishmentChange?.(establishment.id);
 										},
 										disabled: isDisabled,
-										className: cn$26("flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left transition-colors", establishment.active ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "hover:bg-[var(--dashboard-primary,#37a501)]/8", isDisabled ? establishment.active ? "cursor-default" : "cursor-not-allowed opacity-60" : "cursor-pointer"),
+										className: cn$28("flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left transition-colors", establishment.active ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "hover:bg-[var(--dashboard-primary,#37a501)]/8", isDisabled ? establishment.active ? "cursor-default" : "cursor-not-allowed opacity-60" : "cursor-pointer"),
 										children: [
 											/* @__PURE__ */ jsx("div", {
 												className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-[var(--dashboard-primary,#37a501)]/12 text-[var(--dashboard-primary,#37a501)]",
@@ -2031,7 +2059,7 @@ function Header({ menuItems, logo, currentPath, linkComponent: LinkComponent = D
 //#endregion
 //#region src/components/ThemeSwitcher/index.tsx
-const cn$25 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$27 = (...classes) => classes.filter(Boolean).join(" ");
 const modes = [
 	{
 		value: "light",
@@ -2051,11 +2079,11 @@ const modes = [
 ];
 function ThemeSwitcher({ mode, onModeChange, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$25("inline-flex items-center gap-1 rounded-lg bg-[var(--dashboard-background,#f2f2f2)] p-1", className),
+		className: cn$27("inline-flex items-center gap-1 rounded-lg bg-[var(--dashboard-background,#f2f2f2)] p-1", className),
 		children: modes.map(({ value, icon: Icon, label }) => /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => onModeChange(value),
-			className: cn$25("flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", mode === value ? "bg-[var(--dashboard-surface,#ffffff)] text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
+			className: cn$27("flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors", mode === value ? "bg-[var(--dashboard-surface,#ffffff)] text-[var(--dashboard-text-primary,#2d2d2d)] shadow-sm" : "text-[var(--dashboard-text-secondary,#6b7280)] hover:text-[var(--dashboard-text-primary,#2d2d2d)]"),
 			title: label,
 			children: [/* @__PURE__ */ jsx(Icon, { size: 14 }), /* @__PURE__ */ jsx("span", { children: label })]
 		}, value))
@@ -2064,7 +2092,7 @@ function ThemeSwitcher({ mode, onModeChange, className }) {
 //#endregion
 //#region src/components/KPICard/index.tsx
-const cn$24 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$26 = (...classes) => classes.filter(Boolean).join(" ");
 function formatValue(value, format) {
 	switch (format) {
 		case "currency": return new Intl.NumberFormat("pt-BR", {
@@ -2094,45 +2122,112 @@ function KPICard({ title, value, variation, trend, format = "number", benchmark,
 	if (isLoading) return /* @__PURE__ */ jsx(KPICardSkeleton, { className });
 	const trendConfig = trendConfigs[trend];
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$24("h-full w-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-6 border border-[var(--dashboard-text-secondary,#64748B)]/12 transition-all duration-200 ease-out dashboard-shadow-sm hover:dashboard-shadow-md flex flex-col", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex justify-between items-start mb-4 gap-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 min-w-0",
-				children: [icon && /* @__PURE__ */ jsx("span", {
-					className: "shrink-0 text-[var(--dashboard-text-secondary,#64748B)]",
-					"aria-hidden": "true",
-					children: icon
-				}), /* @__PURE__ */ jsx("h3", {
-					className: "text-xs font-semibold uppercase tracking-wider text-[var(--dashboard-text-secondary,#64748B)] whitespace-nowrap truncate",
-					children: title
+		className: cn$26("dashboard-kpi-card h-full w-full min-w-0 bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-4 md:p-5 border border-[var(--dashboard-text-secondary,#64748B)]/12 transition-all duration-200 ease-out dashboard-shadow-sm hover:dashboard-shadow-md flex flex-col", className),
+		children: [
+			/* @__PURE__ */ jsx("style", { children: `
+        .dashboard-kpi-card {
+          container-type: inline-size;
+        }
+        @container (max-width: 13.5rem) {
+          .dashboard-kpi-card__content {
+            gap: 0.45rem;
+          }
+          .dashboard-kpi-card__value {
+            font-size: 1.55rem;
+            line-height: 1;
+          }
+          .dashboard-kpi-card__trend {
+            padding-inline: 0.5rem;
+            gap: 0.2rem;
+          }
+          .dashboard-kpi-card__trend-value {
+            font-size: 0.75rem;
+            line-height: 1rem;
+          }
+        }
+        @container (max-width: 11.5rem) {
+          .dashboard-kpi-card__value {
+            font-size: 1.4rem;
+          }
+          .dashboard-kpi-card__trend {
+            padding-inline: 0.4rem;
+            padding-block: 0.2rem;
+          }
+          .dashboard-kpi-card__trend-value {
+            font-size: 0.7rem;
+          }
+        }
+        @container (max-width: 9.75rem) {
+          .dashboard-kpi-card__content {
+            gap: 0.35rem;
+          }
+          .dashboard-kpi-card__value {
+            font-size: 1.25rem;
+          }
+          .dashboard-kpi-card__trend {
+            padding-inline: 0.32rem;
+          }
+          .dashboard-kpi-card__trend-icon {
+            font-size: 0.9rem;
+          }
+          .dashboard-kpi-card__trend-value {
+            font-size: 0.625rem;
+            line-height: 0.875rem;
+          }
+        }
+      ` }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between items-start mb-4 gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 min-w-0",
+					children: [icon && /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-[var(--dashboard-text-secondary,#64748B)]",
+						"aria-hidden": "true",
+						children: icon
+					}), /* @__PURE__ */ jsx("h3", {
+						className: "min-w-0 truncate text-xs font-semibold uppercase tracking-wider text-[var(--dashboard-text-secondary,#64748B)]",
+						children: title
+					})]
+				}), benchmark && /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-[var(--dashboard-text-secondary,#64748B)]/50 ml-2 whitespace-nowrap flex-shrink-0",
+					title: "Benchmark de referência",
+					children: benchmark
 				})]
-			}), benchmark && /* @__PURE__ */ jsx("span", {
-				className: "text-xs text-[var(--dashboard-text-secondary,#64748B)]/50 ml-2 whitespace-nowrap flex-shrink-0",
-				title: "Benchmark de referência",
-				children: benchmark
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-end gap-3 flex-1",
-			children: [/* @__PURE__ */ jsx("p", {
-				className: "text-3xl font-bold text-[var(--dashboard-text-primary,#0F172A)] whitespace-nowrap tracking-tight",
-				children: formatValue(value, format)
-			}), /* @__PURE__ */ jsxs("div", {
-				className: cn$24("inline-flex items-center gap-1 px-2 py-1 rounded-full flex-shrink-0 mb-1", trendConfig.color),
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-sm",
-					children: trendConfig.icon
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "text-xs font-semibold whitespace-nowrap",
-					children: [Math.abs(variation).toFixed(1), "%"]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "dashboard-kpi-card__content flex min-w-0 items-end gap-3 flex-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "dashboard-kpi-card__value min-w-0 text-3xl font-bold text-[var(--dashboard-text-primary,#0F172A)] whitespace-nowrap tracking-tight",
+					children: formatValue(value, format)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn$26("dashboard-kpi-card__trend inline-flex items-center gap-1 px-2 py-1 rounded-full flex-shrink-0 mb-1", trendConfig.color),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "dashboard-kpi-card__trend-icon text-sm leading-none",
+						children: trendConfig.icon
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "dashboard-kpi-card__trend-value text-xs font-semibold whitespace-nowrap",
+						children: [Math.abs(variation).toFixed(1), "%"]
+					})]
 				})]
-			})]
-		})]
+			})
+		]
 	});
 }
 function KPICardSkeleton({ className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$24("h-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-6 border border-[var(--dashboard-text-secondary,#64748B)]/12 dashboard-shadow-sm animate-pulse flex flex-col", className),
+		className: cn$26("h-full bg-[var(--dashboard-surface,#ffffff)] rounded-xl p-4 md:p-5 border border-[var(--dashboard-text-secondary,#64748B)]/12 dashboard-shadow-sm animate-pulse flex flex-col", className),
 		children: [/* @__PURE__ */ jsx("div", { className: "h-3 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded w-2/3 mb-4" }), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-end gap-3 flex-1",
 			children: [/* @__PURE__ */ jsx("div", { className: "h-8 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded w-1/2" }), /* @__PURE__ */ jsx("div", { className: "h-5 bg-[var(--dashboard-text-secondary,#64748B)]/10 rounded-full w-1/4" })]
@@ -2142,18 +2237,18 @@ function KPICardSkeleton({ className }) {
 //#endregion
 //#region src/components/PageLayout/index.tsx
-const cn$23 = (...classes) => classes.filter(Boolean).join(" ");
-function PageLayout({ title, description, headerActions, appHeader, children, contentPadding = true, sidebar, sidebarCollapsed = false, sidebarWidth = 280, sidebarCollapsedWidth = 109, className }) {
+const cn$25 = (...classes) => classes.filter(Boolean).join(" ");
+function PageLayout({ eyebrow, title, description, headerActions, appHeader, children, contentPadding = true, contentClassName, contentFillViewport = false, sidebar, sidebarCollapsed = false, sidebarWidth = 280, sidebarCollapsedWidth = 109, className }) {
 	const marginLeft = sidebar ? sidebarCollapsed ? `max(0px, ${sidebarCollapsedWidth}px)` : `max(0px, ${sidebarWidth}px)` : "0px";
 	const mainTopPadding = appHeader ? "pt-24" : sidebar ? "pt-16 xl:pt-0" : "pt-0";
 	const layoutContainer = "mx-[var(--dashboard-page-gutter)]";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$23("min-h-screen bg-[var(--dashboard-background,#f2f2f2)] [--dashboard-page-gutter:1.5rem] sm:[--dashboard-page-gutter:2rem] lg:[--dashboard-page-gutter:2.5rem] xl:[--dashboard-page-gutter:3rem]", className),
+		className: cn$25("min-h-screen bg-[var(--dashboard-background,#f2f2f2)] [--dashboard-page-gutter:1.5rem] sm:[--dashboard-page-gutter:2rem] lg:[--dashboard-page-gutter:2.5rem] xl:[--dashboard-page-gutter:3rem]", className),
 		children: [
 			appHeader,
 			sidebar,
 			/* @__PURE__ */ jsxs("main", {
-				className: mainTopPadding,
+				className: cn$25(mainTopPadding, "box-border flex flex-col", contentFillViewport ? "h-dvh overflow-hidden" : "min-h-dvh"),
 				style: {
 					marginLeft,
 					transition: "margin-left 400ms cubic-bezier(0.4, 0, 0.2, 1)"
@@ -2167,18 +2262,25 @@ function PageLayout({ title, description, headerActions, appHeader, children, co
           }
         ` }),
 					/* @__PURE__ */ jsx("div", {
-						className: cn$23(layoutContainer, "-mt-10 rounded-b-2xl border-b border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] px-7 pb-7 pt-16 sm:px-10 lg:px-12"),
+						className: cn$25(layoutContainer, "mt-4 box-border px-6 py-5 sm:px-8 lg:px-10"),
 						children: /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between",
+							className: "flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between",
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "min-w-0",
-								children: [/* @__PURE__ */ jsx("h1", {
-									className: "text-2xl font-bold text-[var(--dashboard-text-primary,#2d2d2d)] sm:text-3xl",
-									children: title
-								}), description && /* @__PURE__ */ jsx("p", {
-									className: "mt-2 text-sm font-medium text-[var(--dashboard-text-secondary,#6b7280)] sm:text-base",
-									children: description
-								})]
+								children: [
+									eyebrow && /* @__PURE__ */ jsx("p", {
+										className: "mb-1 text-xs font-semibold uppercase tracking-[0.16em] text-[var(--dashboard-text-secondary,#6b7280)]",
+										children: eyebrow
+									}),
+									/* @__PURE__ */ jsx("h1", {
+										className: "text-2xl font-semibold leading-tight tracking-tight text-[var(--dashboard-text-primary,#2d2d2d)] sm:text-3xl",
+										children: title
+									}),
+									description && /* @__PURE__ */ jsx("p", {
+										className: "mt-2 text-sm font-medium text-[var(--dashboard-text-secondary,#6b7280)]",
+										children: description
+									})
+								]
 							}), headerActions && /* @__PURE__ */ jsx("div", {
 								className: "flex max-w-full justify-start lg:justify-end",
 								children: headerActions
@@ -2186,7 +2288,7 @@ function PageLayout({ title, description, headerActions, appHeader, children, co
 						})
 					}),
 					/* @__PURE__ */ jsx("div", {
-						className: contentPadding ? cn$23(layoutContainer, "py-6") : "",
+						className: contentPadding ? cn$25(layoutContainer, "min-h-0 flex-1 pb-6 pt-5", contentClassName) : cn$25("min-h-0 flex-1", contentClassName),
 						children
 					})
 				]
@@ -2198,7 +2300,7 @@ function PageLayout({ title, description, headerActions, appHeader, children, co
 //#endregion
 //#region src/components/ComparisonLineChart/index.tsx
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title$1, Tooltip$1, Legend, Filler);
-const cn$22 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$24 = (...classes) => classes.filter(Boolean).join(" ");
 function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, currentPeriodLabel = "Período atual", previousPeriodLabel = "Período anterior", title, color, height = 300, className }) {
 	const primaryColor = color || (typeof document !== "undefined" ? getComputedStyle(document.documentElement).getPropertyValue("--dashboard-primary").trim() : "") || "#37a501";
 	const data = {
@@ -2292,7 +2394,7 @@ function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, cu
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$22("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6", className),
+		className: cn$24("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6", className),
 		children: [title && /* @__PURE__ */ jsx("h3", {
 			className: "text-base font-semibold mb-4 text-[var(--dashboard-text-primary,#2d2d2d)]",
 			children: title
@@ -2309,7 +2411,7 @@ function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, cu
 //#endregion
 //#region src/components/HorizontalBarChart/index.tsx
 Chart.register(CategoryScale, LinearScale, BarElement, Title$1, Tooltip$1, Legend);
-const cn$21 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$23 = (...classes) => classes.filter(Boolean).join(" ");
 function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, valueLabel = "itens", valueLabelSingular, bestItemLabel = "Melhor item", className }) {
 	const [activeTab, setActiveTab] = useState((tabs ? tabs.map((t) => t.id) : Object.keys(datasets))[0]);
 	const [isMobile, setIsMobile] = useState(false);
@@ -2384,7 +2486,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$21("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-5 sm:p-6 min-h-[850px] sm:h-full flex flex-col", className),
+		className: cn$23("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-5 sm:p-6 min-h-[850px] sm:h-full flex flex-col", className),
 		children: [
 			title && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 mb-4",
@@ -2397,7 +2499,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
 				className: "flex gap-2 mb-4 flex-wrap",
 				children: tabs.map((tab) => /* @__PURE__ */ jsx("button", {
 					onClick: () => setActiveTab(tab.id),
-					className: cn$21("px-3.5 py-2 sm:px-4 sm:py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap cursor-pointer", activeTab === tab.id ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
+					className: cn$23("px-3.5 py-2 sm:px-4 sm:py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap cursor-pointer", activeTab === tab.id ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-secondary,#6b7280)] hover:bg-[var(--dashboard-text-secondary,#6b7280)]/20"),
 					children: tab.label
 				}, tab.id))
 			}),
@@ -2436,7 +2538,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
 //#endregion
 //#region src/components/VerticalBarChart/index.tsx
 Chart.register(CategoryScale, LinearScale, BarElement, Title$1, Tooltip$1, Legend);
-const cn$20 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$22 = (...classes) => classes.filter(Boolean).join(" ");
 function VerticalBarChart({ labels, data: values, title, titleIcon, color, valueLabel = "itens", valueLabelSingular, bestItemLabel = "Melhor item", labelMaxChars = 3, className }) {
 	const maxValue = Math.max(...values);
 	const bestLabel = labels[values.indexOf(maxValue)];
@@ -2499,7 +2601,7 @@ function VerticalBarChart({ labels, data: values, title, titleIcon, color, value
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$20("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6 flex-1 flex flex-col", className),
+		className: cn$22("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6 flex-1 flex flex-col", className),
 		children: [
 			title && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 mb-4",
@@ -2555,7 +2657,7 @@ const DEFAULT_COLORS = [
 	"#EA580C",
 	"#4F46E5"
 ];
-const cn$19 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$21 = (...classes) => classes.filter(Boolean).join(" ");
 function DoughnutChart({ items, title, titleIcon, centerLabel, centerValue, showLegend = true, formatValue, cutout = 65, height = 240, className }) {
 	const total = items.reduce((sum, item) => sum + item.value, 0);
 	const format = formatValue || ((v) => String(v));
@@ -2595,7 +2697,7 @@ function DoughnutChart({ items, title, titleIcon, centerLabel, centerValue, show
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$19("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6", className),
+		className: cn$21("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6", className),
 		children: [title && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2 mb-4",
 			children: [titleIcon, /* @__PURE__ */ jsx("h3", {
@@ -2603,7 +2705,7 @@ function DoughnutChart({ items, title, titleIcon, centerLabel, centerValue, show
 				children: title
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: cn$19("flex items-center", showLegend ? "gap-6" : "justify-center"),
+			className: cn$21("flex items-center", showLegend ? "gap-6" : "justify-center"),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "relative flex-shrink-0",
 				style: {
@@ -2656,7 +2758,7 @@ function DoughnutChart({ items, title, titleIcon, centerLabel, centerValue, show
 //#endregion
 //#region src/components/ProgressBarList/index.tsx
-const cn$18 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$20 = (...classes) => classes.filter(Boolean).join(" ");
 function ProgressBarList({ items, title, titleIcon, color, valueLabel = "itens", valueLabelSingular, sortByValue = true, formatValue, className }) {
 	const sortedItems = sortByValue ? [...items].sort((a, b) => b.value - a.value) : items;
 	const maxValue = Math.max(...items.map((i) => i.value));
@@ -2665,7 +2767,7 @@ function ProgressBarList({ items, title, titleIcon, color, valueLabel = "itens",
 	const defaultFormat = (v) => `${v} ${v === 1 ? singular : valueLabel}`;
 	const fmt = formatValue || defaultFormat;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$18("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6 flex-1 flex flex-col", className),
+		className: cn$20("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20 p-6 flex-1 flex flex-col", className),
 		children: [title && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2 mb-4",
 			children: [titleIcon, /* @__PURE__ */ jsx("h3", {
@@ -2714,7 +2816,7 @@ function ProgressBarList({ items, title, titleIcon, color, valueLabel = "itens",
 //#endregion
 //#region src/components/MetricPanel/index.tsx
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title$1, Tooltip$1, Legend, Filler);
-const cn$17 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$19 = (...classes) => classes.filter(Boolean).join(" ");
 function formatMetricValue(value, format) {
 	switch (format) {
 		case "currency": return new Intl.NumberFormat("pt-BR", {
@@ -3034,14 +3136,14 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$17("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$19("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
 		style: { overflow: "visible" },
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between p-4 md:p-6 pb-3 md:pb-4 border-b border-[var(--dashboard-text-secondary,#6b7280)]/10",
 				children: [/* @__PURE__ */ jsxs("h2", {
-					className: "flex items-center gap-2 text-lg md:text-xl font-bold text-[var(--dashboard-text-primary,#2d2d2d)]",
-					children: [/* @__PURE__ */ jsx(TitleIcon, { className: "w-5 h-5 md:w-6 md:h-6" }), title]
+					className: "flex items-center gap-2 text-base md:text-lg font-bold text-[var(--dashboard-text-primary,#2d2d2d)]",
+					children: [/* @__PURE__ */ jsx(TitleIcon, { className: "w-5 h-5" }), title]
 				}), onActionClick && actionLabel && /* @__PURE__ */ jsx("button", {
 					onClick: onActionClick,
 					className: "px-3 md:px-4 py-1.5 md:py-2 text-xs md:text-sm font-medium border rounded-lg transition-colors cursor-pointer",
@@ -3075,7 +3177,7 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
 						const Icon = metric.icon;
 						return /* @__PURE__ */ jsxs("button", {
 							onClick: () => setSelectedMetricKey(metric.key),
-							className: cn$17("flex items-center gap-2 px-4 md:px-6 py-2 rounded-full text-sm font-medium transition-colors cursor-pointer", selectedMetricKey === metric.key ? "bg-[var(--dashboard-surface,#ffffff)] border-2 text-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-surface,#ffffff)] border border-[var(--dashboard-text-secondary,#6b7280)]/30 text-[var(--dashboard-text-secondary,#6b7280)] hover:border-[var(--dashboard-text-secondary,#6b7280)]/50"),
+							className: cn$19("flex items-center gap-2 px-4 md:px-6 py-2 rounded-full text-sm font-medium transition-colors cursor-pointer", selectedMetricKey === metric.key ? "bg-[var(--dashboard-surface,#ffffff)] border-2 text-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-surface,#ffffff)] border border-[var(--dashboard-text-secondary,#6b7280)]/30 text-[var(--dashboard-text-secondary,#6b7280)] hover:border-[var(--dashboard-text-secondary,#6b7280)]/50"),
 							style: selectedMetricKey === metric.key ? {
 								borderColor: primaryColor,
 								color: primaryColor
@@ -3123,10 +3225,10 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
 //#endregion
 //#region src/components/FilterBar/index.tsx
-const cn$16 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$18 = (...classes) => classes.filter(Boolean).join(" ");
 function FilterBar({ searchValue, onSearchChange, searchPlaceholder = "Buscar...", children, actions, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$16("flex flex-col gap-3 sm:flex-row sm:items-center sm:flex-wrap", className),
+		className: cn$18("flex flex-col gap-3 sm:flex-row sm:items-center sm:flex-wrap", className),
 		children: [
 			onSearchChange !== void 0 && /* @__PURE__ */ jsx("div", {
 				className: "flex-1 min-w-[200px]",
@@ -3166,7 +3268,7 @@ function FilterBar({ searchValue, onSearchChange, searchPlaceholder = "Buscar...
 //#endregion
 //#region src/components/Checkbox/index.tsx
-const cn$15 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$17 = (...classes) => classes.filter(Boolean).join(" ");
 const sizeConfig = {
 	sm: {
 		box: 16,
@@ -3214,7 +3316,7 @@ function Checkbox({ name, id, label, checked = false, onChange, disabled = false
 	const resolvedColor = primaryColor || "var(--dashboard-primary, #37A501)";
 	return /* @__PURE__ */ jsxs("label", {
 		htmlFor: inputId,
-		className: cn$15("inline-flex items-center cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", className),
+		className: cn$17("inline-flex items-center cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", className),
 		style: { gap: cfg.gap },
 		children: [
 			/* @__PURE__ */ jsx("input", {
@@ -3265,7 +3367,7 @@ function Checkbox({ name, id, label, checked = false, onChange, disabled = false
 //#endregion
 //#region src/components/AuthLayout/index.tsx
-const cn$14 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$16 = (...classes) => classes.filter(Boolean).join(" ");
 /** Resolves a CSS color value (including var() references) to a computed hex/rgb string */
 function useResolvedColor(cssValue) {
 	const [resolved, setResolved] = useState(cssValue);
@@ -3432,7 +3534,7 @@ function AuthLayout({ logo, title, subtitle, error, success, fields, values, onF
 		if (link.onClick) return /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: link.onClick,
-			className: cn$14("bg-transparent border-none cursor-pointer hover:opacity-80 text-sm font-semibold p-0 transition-colors", extraClass),
+			className: cn$16("bg-transparent border-none cursor-pointer hover:opacity-80 text-sm font-semibold p-0 transition-colors", extraClass),
 			style,
 			children: link.label
 		});
@@ -3440,13 +3542,13 @@ function AuthLayout({ logo, title, subtitle, error, success, fields, values, onF
 			href: link.href,
 			target: link.target,
 			rel: link.target === "_blank" ? "noopener noreferrer" : void 0,
-			className: cn$14("hover:opacity-80 text-sm font-semibold transition-colors", extraClass),
+			className: cn$16("hover:opacity-80 text-sm font-semibold transition-colors", extraClass),
 			style,
 			children: link.label
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$14("fixed inset-0 flex select-none overflow-hidden", className),
+		className: cn$16("fixed inset-0 flex select-none overflow-hidden", className),
 		style: bgCss,
 		children: [
 			branding && branding.logos.length > 0 && /* @__PURE__ */ jsx("div", {
@@ -3729,7 +3831,7 @@ function CodeInput({ length = 6, value, onChange, disabled = false, error = fals
 //#endregion
 //#region src/components/Skeleton/index.tsx
-const cn$13 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$15 = (...classes) => classes.filter(Boolean).join(" ");
 function Skeleton({ variant = "text", width, height, animate = true, className, lines = 1 }) {
 	const baseStyles = "bg-[var(--dashboard-text-secondary,#6b7280)]/10 relative overflow-hidden";
 	const shimmerStyles = animate ? "after:absolute after:inset-0 after:bg-gradient-to-r after:from-transparent after:via-[var(--dashboard-text-secondary,#6b7280)]/5 after:to-transparent dashboard-animate-shimmer after:content-['']" : "";
@@ -3748,9 +3850,9 @@ function Skeleton({ variant = "text", width, height, animate = true, className,
 	}
 	if (variant === "card" && !height) style.height = "120px";
 	if (variant === "text" && lines > 1) return /* @__PURE__ */ jsx("div", {
-		className: cn$13("flex flex-col gap-2", className),
+		className: cn$15("flex flex-col gap-2", className),
 		children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("div", {
-			className: cn$13(baseStyles, shimmerStyles, variantStyles.text),
+			className: cn$15(baseStyles, shimmerStyles, variantStyles.text),
 			style: {
 				...style,
 				width: i === lines - 1 ? "75%" : style.width || "100%"
@@ -3758,14 +3860,14 @@ function Skeleton({ variant = "text", width, height, animate = true, className,
 		}, i))
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$13(baseStyles, shimmerStyles, variantStyles[variant], className),
+		className: cn$15(baseStyles, shimmerStyles, variantStyles[variant], className),
 		style
 	});
 }
 //#endregion
 //#region src/components/DataGrid/index.tsx
-const cn$12 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$14 = (...classes) => classes.filter(Boolean).join(" ");
 function SortIcon({ sorted }) {
 	if (sorted === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" });
 	if (sorted === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" });
@@ -3820,7 +3922,7 @@ function VirtualRows({ table, rowHeight, onRowClick, compact }) {
 					className: "bg-[var(--dashboard-text-secondary,#6b7280)]/5 sticky top-0 z-10",
 					children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx("th", {
 						scope: "col",
-						className: cn$12("text-left text-xs font-semibold text-[var(--dashboard-text-secondary,#6b7280)] uppercase tracking-wider", compact ? "px-4 py-2" : "px-6 py-3", header.column.getCanSort() && "cursor-pointer select-none"),
+						className: cn$14("text-left text-xs font-semibold text-[var(--dashboard-text-secondary,#6b7280)] uppercase tracking-wider", compact ? "px-4 py-2" : "px-6 py-3", header.column.getCanSort() && "cursor-pointer select-none"),
 						style: { width: header.getSize() },
 						onClick: header.column.getToggleSortingHandler(),
 						children: /* @__PURE__ */ jsxs("div", {
@@ -3835,10 +3937,10 @@ function VirtualRows({ table, rowHeight, onRowClick, compact }) {
 					}),
 					visibleRows.map((row) => /* @__PURE__ */ jsx("tr", {
 						onClick: () => onRowClick?.(row.original),
-						className: cn$12("hover:bg-[var(--dashboard-text-secondary,#6b7280)]/5 transition-colors", onRowClick && "cursor-pointer", row.getIsSelected() && "bg-[var(--dashboard-primary,#37a501)]/5"),
+						className: cn$14("hover:bg-[var(--dashboard-text-secondary,#6b7280)]/5 transition-colors", onRowClick && "cursor-pointer", row.getIsSelected() && "bg-[var(--dashboard-primary,#37a501)]/5"),
 						style: { height: rowHeight },
 						children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", {
-							className: cn$12(cellPadding, "text-sm whitespace-nowrap"),
+							className: cn$14(cellPadding, "text-sm whitespace-nowrap"),
 							children: flexRender(cell.column.columnDef.cell, cell.getContext())
 						}, cell.id))
 					}, row.id)),
@@ -3917,7 +4019,7 @@ function DataGrid({ columns, data, isLoading = false, skeletonRows = 5, sorting:
 	const cellPadding = compact ? "px-4 py-2" : "px-6 py-4";
 	const headerPadding = compact ? "px-4 py-2" : "px-6 py-3";
 	if (enableVirtualization) return /* @__PURE__ */ jsx("div", {
-		className: cn$12("overflow-hidden rounded-lg bg-[var(--dashboard-surface,#ffffff)] shadow-sm", bordered && "border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$14("overflow-hidden rounded-lg bg-[var(--dashboard-surface,#ffffff)] shadow-sm", bordered && "border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
 		children: /* @__PURE__ */ jsx(VirtualRows, {
 			table,
 			rowHeight,
@@ -3926,16 +4028,16 @@ function DataGrid({ columns, data, isLoading = false, skeletonRows = 5, sorting:
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$12("overflow-hidden rounded-lg bg-[var(--dashboard-surface,#ffffff)] shadow-sm", bordered && "border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$14("overflow-hidden rounded-lg bg-[var(--dashboard-surface,#ffffff)] shadow-sm", bordered && "border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "overflow-x-auto",
 			children: /* @__PURE__ */ jsxs("table", {
 				className: "min-w-full divide-y divide-[var(--dashboard-text-secondary,#6b7280)]/20",
 				children: [/* @__PURE__ */ jsx("thead", {
-					className: cn$12("bg-[var(--dashboard-text-secondary,#6b7280)]/5", stickyHeader && "sticky top-0 z-10"),
+					className: cn$14("bg-[var(--dashboard-text-secondary,#6b7280)]/5", stickyHeader && "sticky top-0 z-10"),
 					children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx("th", {
 						scope: "col",
-						className: cn$12("text-left text-xs font-semibold text-[var(--dashboard-text-secondary,#6b7280)] uppercase tracking-wider", headerPadding, header.column.getCanSort() && "cursor-pointer select-none"),
+						className: cn$14("text-left text-xs font-semibold text-[var(--dashboard-text-secondary,#6b7280)] uppercase tracking-wider", headerPadding, header.column.getCanSort() && "cursor-pointer select-none"),
 						style: header.getSize() !== 150 ? { width: header.getSize() } : void 0,
 						onClick: header.column.getToggleSortingHandler(),
 						children: /* @__PURE__ */ jsxs("div", {
@@ -3972,9 +4074,9 @@ function DataGrid({ columns, data, isLoading = false, skeletonRows = 5, sorting:
 						})
 					}) }) : table.getRowModel().rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", {
 						onClick: () => onRowClick?.(row.original),
-						className: cn$12("transition-colors", onRowClick && "cursor-pointer", "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/5", row.getIsSelected() && "bg-[var(--dashboard-primary,#37a501)]/5", striped && rowIndex % 2 === 1 && "bg-[var(--dashboard-text-secondary,#6b7280)]/3"),
+						className: cn$14("transition-colors", onRowClick && "cursor-pointer", "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/5", row.getIsSelected() && "bg-[var(--dashboard-primary,#37a501)]/5", striped && rowIndex % 2 === 1 && "bg-[var(--dashboard-text-secondary,#6b7280)]/3"),
 						children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", {
-							className: cn$12(cellPadding, "text-sm text-[var(--dashboard-text-primary,#2d2d2d)]"),
+							className: cn$14(cellPadding, "text-sm text-[var(--dashboard-text-primary,#2d2d2d)]"),
 							children: flexRender(cell.column.columnDef.cell, cell.getContext())
 						}, cell.id))
 					}, row.id))
@@ -4035,7 +4137,7 @@ function DataGrid({ columns, data, isLoading = false, skeletonRows = 5, sorting:
 //#endregion
 //#region src/components/TreeView/index.tsx
-const cn$11 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$13 = (...classes) => classes.filter(Boolean).join(" ");
 function TreeItem({ node, level, expanded, selectedId, draggable, indentSize, onSelect, onToggle, onMove, renderNode, dragState, setDragState }) {
 	const hasChildren = node.children && node.children.length > 0;
 	const isExpanded = expanded.has(node.id);
@@ -4100,7 +4202,7 @@ function TreeItem({ node, level, expanded, selectedId, draggable, indentSize, on
 		"aria-expanded": hasChildren ? isExpanded : void 0,
 		"aria-selected": isSelected,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn$11("group flex items-center gap-1 rounded-md px-2 py-1.5 transition-colors", isSelected ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-primary,#2d2d2d)]", isDragging && "opacity-40", isDropTarget && dragState.position === "inside" && "ring-2 ring-[var(--dashboard-primary,#37a501)] ring-inset", node.disabled && "opacity-50 cursor-not-allowed"),
+			className: cn$13("group flex items-center gap-1 rounded-md px-2 py-1.5 transition-colors", isSelected ? "bg-[var(--dashboard-primary,#37a501)]/10 text-[var(--dashboard-primary,#37a501)]" : "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 text-[var(--dashboard-text-primary,#2d2d2d)]", isDragging && "opacity-40", isDropTarget && dragState.position === "inside" && "ring-2 ring-[var(--dashboard-primary,#37a501)] ring-inset", node.disabled && "opacity-50 cursor-not-allowed"),
 			style: { paddingLeft: `${level * indentSize + 4}px` },
 			draggable: draggable && !node.disabled,
 			onDragStart: handleDragStart,
@@ -4118,10 +4220,10 @@ function TreeItem({ node, level, expanded, selectedId, draggable, indentSize, on
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => hasChildren && onToggle(node.id),
-					className: cn$11("flex-shrink-0 w-5 h-5 flex items-center justify-center rounded transition-transform", hasChildren ? "cursor-pointer" : "invisible"),
+					className: cn$13("flex-shrink-0 w-5 h-5 flex items-center justify-center rounded transition-transform", hasChildren ? "cursor-pointer" : "invisible"),
 					tabIndex: hasChildren ? 0 : -1,
 					"aria-label": isExpanded ? "Recolher" : "Expandir",
-					children: /* @__PURE__ */ jsx(ChevronRight, { className: cn$11("h-3.5 w-3.5 transition-transform duration-150", isExpanded && "rotate-90") })
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: cn$13("h-3.5 w-3.5 transition-transform duration-150", isExpanded && "rotate-90") })
 				}),
 				renderNode ? /* @__PURE__ */ jsx("div", {
 					className: "flex-1 min-w-0 cursor-pointer",
@@ -4133,7 +4235,7 @@ function TreeItem({ node, level, expanded, selectedId, draggable, indentSize, on
 						children: node.icon
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: cn$11("flex-1 min-w-0 text-sm truncate", !node.disabled && "cursor-pointer"),
+						className: cn$13("flex-1 min-w-0 text-sm truncate", !node.disabled && "cursor-pointer"),
 						onClick: () => !node.disabled && onSelect?.(node),
 						children: node.label
 					}),
@@ -4186,7 +4288,7 @@ function TreeView({ nodes, onSelect, onExpand, onMove, renderNode, selectedId, d
 	}, [onExpand]);
 	return /* @__PURE__ */ jsx("ul", {
 		role: "tree",
-		className: cn$11("select-none", className),
+		className: cn$13("select-none", className),
 		children: nodes.map((node) => /* @__PURE__ */ jsx(TreeItem, {
 			node,
 			level: 0,
@@ -4206,7 +4308,7 @@ function TreeView({ nodes, onSelect, onExpand, onMove, renderNode, selectedId, d
 //#endregion
 //#region src/components/Stepper/index.tsx
-const cn$10 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$12 = (...classes) => classes.filter(Boolean).join(" ");
 function StepIcon({ step, index }) {
 	const status = step.status || "pending";
 	if (status === "completed") return /* @__PURE__ */ jsx("div", {
@@ -4250,17 +4352,17 @@ function Stepper({ steps, activeStep, onStepChange, orientation = "horizontal",
 						type: "button",
 						onClick: () => onStepChange?.(index),
 						disabled: !onStepChange,
-						className: cn$10("relative z-10", onStepChange && "cursor-pointer", !onStepChange && "cursor-default"),
+						className: cn$12("relative z-10", onStepChange && "cursor-pointer", !onStepChange && "cursor-default"),
 						"aria-current": step.status === "active" ? "step" : void 0,
 						children: /* @__PURE__ */ jsx(StepIcon, {
 							step,
 							index
 						})
-					}), index < resolvedSteps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn$10("w-0.5 flex-1 min-h-[32px]", step.status === "completed" ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/20") })]
+					}), index < resolvedSteps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn$12("w-0.5 flex-1 min-h-[32px]", step.status === "completed" ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/20") })]
 				}), /* @__PURE__ */ jsxs("div", {
-					className: cn$10("pb-6", index === resolvedSteps.length - 1 && "pb-0"),
+					className: cn$12("pb-6", index === resolvedSteps.length - 1 && "pb-0"),
 					children: [/* @__PURE__ */ jsx("p", {
-						className: cn$10("text-sm font-medium leading-8", step.status === "active" ? "text-[var(--dashboard-primary,#37a501)]" : step.status === "completed" ? "text-[var(--dashboard-text-primary,#2d2d2d)]" : step.status === "error" ? "text-[var(--dashboard-status-danger,#EF4444)]" : "text-[var(--dashboard-text-secondary,#6b7280)]"),
+						className: cn$12("text-sm font-medium leading-8", step.status === "active" ? "text-[var(--dashboard-primary,#37a501)]" : step.status === "completed" ? "text-[var(--dashboard-text-primary,#2d2d2d)]" : step.status === "error" ? "text-[var(--dashboard-status-danger,#EF4444)]" : "text-[var(--dashboard-text-secondary,#6b7280)]"),
 						children: step.label
 					}), step.description && /* @__PURE__ */ jsx("p", {
 						className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)] mt-0.5",
@@ -4276,12 +4378,12 @@ function Stepper({ steps, activeStep, onStepChange, orientation = "horizontal",
 		children: /* @__PURE__ */ jsx("ol", {
 			className: "flex items-center",
 			children: resolvedSteps.map((step, index) => /* @__PURE__ */ jsxs("li", {
-				className: cn$10("flex items-center", index < resolvedSteps.length - 1 && "flex-1"),
+				className: cn$12("flex items-center", index < resolvedSteps.length - 1 && "flex-1"),
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => onStepChange?.(index),
 					disabled: !onStepChange,
-					className: cn$10("flex items-center gap-2 group", onStepChange && "cursor-pointer", !onStepChange && "cursor-default"),
+					className: cn$12("flex items-center gap-2 group", onStepChange && "cursor-pointer", !onStepChange && "cursor-default"),
 					"aria-current": step.status === "active" ? "step" : void 0,
 					children: [/* @__PURE__ */ jsx(StepIcon, {
 						step,
@@ -4289,14 +4391,14 @@ function Stepper({ steps, activeStep, onStepChange, orientation = "horizontal",
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "hidden sm:block text-left",
 						children: [/* @__PURE__ */ jsx("p", {
-							className: cn$10("text-sm font-medium whitespace-nowrap", step.status === "active" ? "text-[var(--dashboard-primary,#37a501)]" : step.status === "completed" ? "text-[var(--dashboard-text-primary,#2d2d2d)]" : step.status === "error" ? "text-[var(--dashboard-status-danger,#EF4444)]" : "text-[var(--dashboard-text-secondary,#6b7280)]"),
+							className: cn$12("text-sm font-medium whitespace-nowrap", step.status === "active" ? "text-[var(--dashboard-primary,#37a501)]" : step.status === "completed" ? "text-[var(--dashboard-text-primary,#2d2d2d)]" : step.status === "error" ? "text-[var(--dashboard-status-danger,#EF4444)]" : "text-[var(--dashboard-text-secondary,#6b7280)]"),
 							children: step.label
 						}), step.description && /* @__PURE__ */ jsx("p", {
 							className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)] whitespace-nowrap",
 							children: step.description
 						})]
 					})]
-				}), index < resolvedSteps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn$10("flex-1 h-0.5 mx-3", step.status === "completed" ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/20") })]
+				}), index < resolvedSteps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn$12("flex-1 h-0.5 mx-3", step.status === "completed" ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/20") })]
 			}, step.id))
 		})
 	});
@@ -4304,7 +4406,7 @@ function Stepper({ steps, activeStep, onStepChange, orientation = "horizontal",
 //#endregion
 //#region src/components/FileUpload/index.tsx
-const cn$9 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$11 = (...classes) => classes.filter(Boolean).join(" ");
 function formatSize(bytes) {
 	if (bytes < 1024) return `${bytes} B`;
 	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -4400,7 +4502,7 @@ function FileUpload({ accept, maxSize, multiple = false, onUpload, onRemove, pre
 				onDragOver: handleDragOver,
 				onDragLeave: handleDragLeave,
 				onClick: () => !disabled && inputRef.current?.click(),
-				className: cn$9("relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors", isDragging ? "border-[var(--dashboard-primary,#37a501)] bg-[var(--dashboard-primary,#37a501)]/5" : "border-[var(--dashboard-text-secondary,#6b7280)]/30 hover:border-[var(--dashboard-text-secondary,#6b7280)]/50", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+				className: cn$11("relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors", isDragging ? "border-[var(--dashboard-primary,#37a501)] bg-[var(--dashboard-primary,#37a501)]/5" : "border-[var(--dashboard-text-secondary,#6b7280)]/30 hover:border-[var(--dashboard-text-secondary,#6b7280)]/50", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
 				role: "button",
 				tabIndex: disabled ? -1 : 0,
 				"aria-label": label,
@@ -4423,7 +4525,7 @@ function FileUpload({ accept, maxSize, multiple = false, onUpload, onRemove, pre
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col items-center text-center",
 					children: [
-						icon || /* @__PURE__ */ jsx(Upload, { className: cn$9("h-8 w-8 mb-3", isDragging ? "text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)]") }),
+						icon || /* @__PURE__ */ jsx(Upload, { className: cn$11("h-8 w-8 mb-3", isDragging ? "text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)]") }),
 						/* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium text-[var(--dashboard-text-primary,#2d2d2d)]",
 							children: label
@@ -4490,7 +4592,7 @@ function FileUpload({ accept, maxSize, multiple = false, onUpload, onRemove, pre
 //#endregion
 //#region src/components/Tooltip/index.tsx
-const cn$8 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$10 = (...classes) => classes.filter(Boolean).join(" ");
 function Tooltip({ content, position = "top", delay = 200, children, className, maxWidth = 240 }) {
 	const [visible, setVisible] = useState(false);
 	const [positioned, setPositioned] = useState(false);
@@ -4601,14 +4703,14 @@ function Tooltip({ content, position = "top", delay = 200, children, className,
 		ref: tooltipRef,
 		id: idRef.current,
 		role: "tooltip",
-		className: cn$8("fixed z-[10002] rounded-md px-3 py-2 text-xs font-medium", "bg-[var(--dashboard-tooltip-bg,#1a1a1a)] text-[var(--dashboard-tooltip-text,#ffffff)]", "shadow-lg pointer-events-none", positioned && "dashboard-animate-fade-in", className),
+		className: cn$10("fixed z-[10002] rounded-md px-3 py-2 text-xs font-medium", "bg-[var(--dashboard-tooltip-bg,#1a1a1a)] text-[var(--dashboard-tooltip-text,#ffffff)]", "shadow-lg pointer-events-none", positioned && "dashboard-animate-fade-in", className),
 		style: {
 			top: coords.top,
 			left: coords.left,
 			maxWidth,
 			opacity: positioned ? 1 : 0
 		},
-		children: [content, /* @__PURE__ */ jsx("span", { className: cn$8("absolute w-0 h-0 border-[5px]", {
+		children: [content, /* @__PURE__ */ jsx("span", { className: cn$10("absolute w-0 h-0 border-[5px]", {
 			top: "left-1/2 -translate-x-1/2 top-full border-t-[var(--dashboard-tooltip-bg,#1a1a1a)] border-x-transparent border-b-transparent",
 			bottom: "left-1/2 -translate-x-1/2 bottom-full border-b-[var(--dashboard-tooltip-bg,#1a1a1a)] border-x-transparent border-t-transparent",
 			left: "top-1/2 -translate-y-1/2 left-full border-l-[var(--dashboard-tooltip-bg,#1a1a1a)] border-y-transparent border-r-transparent",
@@ -4677,7 +4779,7 @@ function InfoTooltip({ content, term, size = 14, position = "top", maxWidth = 28
 //#endregion
 //#region src/components/Breadcrumb/index.tsx
-const cn$7 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$9 = (...classes) => classes.filter(Boolean).join(" ");
 function Breadcrumb({ items, separator, onNavigate, className }) {
 	const defaultSeparator = /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-[var(--dashboard-text-secondary,#6b7280)] flex-shrink-0" });
 	const handleClick = (e, href) => {
@@ -4699,7 +4801,7 @@ function Breadcrumb({ items, separator, onNavigate, className }) {
 						"aria-hidden": "true",
 						children: separator || defaultSeparator
 					}), isLast ? /* @__PURE__ */ jsxs("span", {
-						className: cn$7("flex items-center gap-1.5 text-sm font-medium", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
+						className: cn$9("flex items-center gap-1.5 text-sm font-medium", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
 						"aria-current": "page",
 						children: [item.icon && /* @__PURE__ */ jsx("span", {
 							className: "flex-shrink-0 h-4 w-4",
@@ -4708,7 +4810,7 @@ function Breadcrumb({ items, separator, onNavigate, className }) {
 					}) : /* @__PURE__ */ jsxs("a", {
 						href: item.href || "#",
 						onClick: (e) => handleClick(e, item.href),
-						className: cn$7("flex items-center gap-1.5 text-sm", "text-[var(--dashboard-text-secondary,#6b7280)]", "hover:text-[var(--dashboard-primary,#37a501)] transition-colors"),
+						className: cn$9("flex items-center gap-1.5 text-sm", "text-[var(--dashboard-text-secondary,#6b7280)]", "hover:text-[var(--dashboard-primary,#37a501)] transition-colors"),
 						children: [item.icon && /* @__PURE__ */ jsx("span", {
 							className: "flex-shrink-0 h-4 w-4",
 							children: item.icon
@@ -4722,7 +4824,7 @@ function Breadcrumb({ items, separator, onNavigate, className }) {
 //#endregion
 //#region src/components/Combobox/index.tsx
-const cn$6 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$8 = (...classes) => classes.filter(Boolean).join(" ");
 function Combobox({ options, value, onChange, multiple = false, searchable = true, placeholder = "Selecione...", label, error, disabled = false, renderOption, noResultsText = "Nenhum resultado encontrado", className }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [query, setQuery] = useState("");
@@ -4852,7 +4954,7 @@ function Combobox({ options, value, onChange, multiple = false, searchable = tru
 	}, [focusedIndex]);
 	const selectedLabels = selectedValues.map((v) => options.find((o) => o.value === v)?.label).filter(Boolean);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$6("space-y-2", className),
+		className: cn$8("space-y-2", className),
 		children: [
 			label && /* @__PURE__ */ jsx("label", {
 				className: "block text-sm text-[var(--dashboard-text-primary,#2d2d2d)]",
@@ -4868,7 +4970,7 @@ function Combobox({ options, value, onChange, multiple = false, searchable = tru
 					"aria-controls": "combobox-listbox",
 					tabIndex: disabled ? -1 : 0,
 					onClick: () => isOpen ? close() : open(),
-					className: cn$6("flex min-h-[40px] w-full items-center gap-2 rounded-lg border px-3 py-2 transition-colors", isOpen ? "border-[var(--dashboard-primary,#37a501)] ring-2 ring-[var(--dashboard-primary,#37a501)]/20" : error ? "border-[var(--dashboard-status-danger,#EF4444)]" : "border-[var(--dashboard-text-secondary,#6b7280)]/30 hover:border-[var(--dashboard-text-secondary,#6b7280)]/50", disabled ? "opacity-50 cursor-not-allowed bg-[var(--dashboard-text-secondary,#6b7280)]/10" : "cursor-pointer bg-[var(--dashboard-surface,#ffffff)]"),
+					className: cn$8("flex min-h-[40px] w-full items-center gap-2 rounded-lg border px-3 py-2 transition-colors", isOpen ? "border-[var(--dashboard-primary,#37a501)] ring-2 ring-[var(--dashboard-primary,#37a501)]/20" : error ? "border-[var(--dashboard-status-danger,#EF4444)]" : "border-[var(--dashboard-text-secondary,#6b7280)]/30 hover:border-[var(--dashboard-text-secondary,#6b7280)]/50", disabled ? "opacity-50 cursor-not-allowed bg-[var(--dashboard-text-secondary,#6b7280)]/10" : "cursor-pointer bg-[var(--dashboard-surface,#ffffff)]"),
 					children: [
 						/* @__PURE__ */ jsx("div", {
 							className: "flex flex-1 flex-wrap items-center gap-1 min-w-0",
@@ -4896,7 +4998,7 @@ function Combobox({ options, value, onChange, multiple = false, searchable = tru
 							"aria-label": "Limpar seleção",
 							children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
 						}),
-						/* @__PURE__ */ jsx(ChevronDown, { className: cn$6("h-4 w-4 flex-shrink-0 text-[var(--dashboard-text-secondary,#6b7280)] transition-transform", isOpen && "rotate-180") })
+						/* @__PURE__ */ jsx(ChevronDown, { className: cn$8("h-4 w-4 flex-shrink-0 text-[var(--dashboard-text-secondary,#6b7280)] transition-transform", isOpen && "rotate-180") })
 					]
 				}), isOpen && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsxs("div", {
 					className: "dc-combobox-portal rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] shadow-lg dashboard-animate-fade-in overflow-hidden",
@@ -4941,7 +5043,7 @@ function Combobox({ options, value, onChange, multiple = false, searchable = tru
 								onClick: () => {
 									if (!option.disabled) toggleOption(option.value);
 								},
-								className: cn$6("flex items-center justify-between px-3 py-2 text-sm transition-colors", option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", isFocused && "bg-[var(--dashboard-text-secondary,#6b7280)]/10", !isFocused && !option.disabled && "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10", isSelected ? "text-[var(--dashboard-primary,#37a501)] font-medium" : "text-[var(--dashboard-text-primary,#2d2d2d)]"),
+								className: cn$8("flex items-center justify-between px-3 py-2 text-sm transition-colors", option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", isFocused && "bg-[var(--dashboard-text-secondary,#6b7280)]/10", !isFocused && !option.disabled && "hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10", isSelected ? "text-[var(--dashboard-primary,#37a501)] font-medium" : "text-[var(--dashboard-text-primary,#2d2d2d)]"),
 								children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 									className: "truncate",
 									children: option.label
@@ -4961,7 +5063,7 @@ function Combobox({ options, value, onChange, multiple = false, searchable = tru
 //#endregion
 //#region src/components/Alert/index.tsx
-const cn$5 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$7 = (...classes) => classes.filter(Boolean).join(" ");
 const variantConfig$1 = {
 	info: {
 		border: "border-[var(--dashboard-status-info,#3b82f6)]",
@@ -4991,24 +5093,24 @@ const variantConfig$1 = {
 function Alert({ variant = "info", title, description, onClose, actions, icon, className }) {
 	const config = variantConfig$1[variant];
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$5("rounded-lg border-l-4 p-4", config.border, config.bg, className),
+		className: cn$7("rounded-lg border-l-4 p-4", config.border, config.bg, className),
 		role: "alert",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-3",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: cn$5("flex-shrink-0 mt-0.5", config.text),
+					className: cn$7("flex-shrink-0 mt-0.5", config.text),
 					children: icon || config.icon
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex-1 min-w-0",
 					children: [
 						title && /* @__PURE__ */ jsx("h3", {
-							className: cn$5("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
+							className: cn$7("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
 							children: title
 						}),
 						description && /* @__PURE__ */ jsx("div", {
-							className: cn$5("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
+							className: cn$7("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
 							children: description
 						}),
 						actions && /* @__PURE__ */ jsx("div", {
@@ -5030,7 +5132,7 @@ function Alert({ variant = "info", title, description, onClose, actions, icon, c
 //#endregion
 //#region src/components/Callout/index.tsx
-const cn$4 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$6 = (...classes) => classes.filter(Boolean).join(" ");
 const variantConfig = {
 	info: {
 		border: "border-[var(--dashboard-status-info,#3b82f6)]",
@@ -5060,20 +5162,20 @@ const variantConfig = {
 function Callout({ variant = "info", title, children, icon, className }) {
 	const config = variantConfig[variant];
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$4("rounded-lg border-l-4 p-4 my-4", config.border, config.bg, className),
+		className: cn$6("rounded-lg border-l-4 p-4 my-4", config.border, config.bg, className),
 		role: "note",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-3",
 			children: [/* @__PURE__ */ jsx("div", {
-				className: cn$4("flex-shrink-0 mt-0.5", config.text),
+				className: cn$6("flex-shrink-0 mt-0.5", config.text),
 				children: icon || config.icon
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex-1 min-w-0",
 				children: [title && /* @__PURE__ */ jsx("p", {
-					className: cn$4("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
+					className: cn$6("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
 					children: title
 				}), children && /* @__PURE__ */ jsx("div", {
-					className: cn$4("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
+					className: cn$6("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
 					children
 				})]
 			})]
@@ -5083,7 +5185,7 @@ function Callout({ variant = "info", title, children, icon, className }) {
 //#endregion
 //#region src/components/CodeBlock/index.tsx
-const cn$3 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$5 = (...classes) => classes.filter(Boolean).join(" ");
 function CodeBlock({ code, language, filename, showLineNumbers = false, className, copyLabel = "Copiar", copiedLabel = "Copiado!" }) {
 	const [copied, setCopied] = useState(false);
 	const handleCopy = useCallback(async () => {
@@ -5095,7 +5197,7 @@ function CodeBlock({ code, language, filename, showLineNumbers = false, classNam
 	}, [code]);
 	const lines = code.split("\n");
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$3("relative rounded-lg overflow-hidden border border-[var(--dashboard-text-secondary,#64748B)]/12 my-4", className),
+		className: cn$5("relative rounded-lg overflow-hidden border border-[var(--dashboard-text-secondary,#64748B)]/12 my-4", className),
 		children: [(filename || language) && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between px-4 py-2 bg-[var(--dashboard-text-primary,#0F172A)] border-b border-[var(--dashboard-text-secondary,#64748B)]/20",
 			children: [
@@ -5129,7 +5231,7 @@ function CodeBlock({ code, language, filename, showLineNumbers = false, classNam
 				})
 			}), /* @__PURE__ */ jsxs("button", {
 				onClick: handleCopy,
-				className: cn$3("absolute top-3 right-3 flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all duration-200 cursor-pointer", copied ? "bg-[var(--dashboard-status-success,#059669)]/20 text-[var(--dashboard-status-success,#059669)]" : "bg-[var(--dashboard-surface,#FFFFFF)]/10 text-[var(--dashboard-surface,#FFFFFF)]/60 hover:bg-[var(--dashboard-surface,#FFFFFF)]/20 hover:text-[var(--dashboard-surface,#FFFFFF)]/80"),
+				className: cn$5("absolute top-3 right-3 flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all duration-200 cursor-pointer", copied ? "bg-[var(--dashboard-status-success,#059669)]/20 text-[var(--dashboard-status-success,#059669)]" : "bg-[var(--dashboard-surface,#FFFFFF)]/10 text-[var(--dashboard-surface,#FFFFFF)]/60 hover:bg-[var(--dashboard-surface,#FFFFFF)]/20 hover:text-[var(--dashboard-surface,#FFFFFF)]/80"),
 				"aria-label": copied ? copiedLabel : copyLabel,
 				title: copied ? copiedLabel : copyLabel,
 				children: [copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsx("span", { children: copied ? copiedLabel : copyLabel })]
@@ -5140,10 +5242,10 @@ function CodeBlock({ code, language, filename, showLineNumbers = false, classNam
 //#endregion
 //#region src/components/EmptyState/index.tsx
-const cn$2 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$4 = (...classes) => classes.filter(Boolean).join(" ");
 function EmptyState({ icon, title, description, action, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$2("flex flex-col items-center justify-center py-12 px-6 text-center", className),
+		className: cn$4("flex flex-col items-center justify-center py-12 px-6 text-center", className),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "flex h-16 w-16 items-center justify-center rounded-full bg-[var(--dashboard-text-secondary,#6b7280)]/10 mb-4",
@@ -5167,7 +5269,7 @@ function EmptyState({ icon, title, description, action, className }) {
 //#endregion
 //#region src/components/StatusBadge/index.tsx
-const cn$1 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$3 = (...classes) => classes.filter(Boolean).join(" ");
 const defaultColorMap = {
 	ACTIVE: "var(--dashboard-status-success,#10B981)",
 	APPROVED: "var(--dashboard-status-success,#10B981)",
@@ -5209,120 +5311,1362 @@ function StatusBadge({ status, colorMap, size = "md", label, dot = true, classNa
 	}[status.toUpperCase().replace(/[\s-]/g, "_")] || "var(--dashboard-text-secondary,#6b7280)";
 	const displayLabel = label || formatLabel(status);
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn$1("inline-flex items-center gap-1.5 rounded-full font-medium whitespace-nowrap", sizeClasses[size], className),
+		className: cn$3("inline-flex items-center gap-1.5 rounded-full font-medium whitespace-nowrap", sizeClasses[size], className),
 		style: {
 			color,
 			backgroundColor: `color-mix(in srgb, ${color} 12%, transparent)`
 		},
 		children: [dot && /* @__PURE__ */ jsx("span", {
-			className: cn$1("rounded-full flex-shrink-0", dotSizeClasses[size]),
+			className: cn$3("rounded-full flex-shrink-0", dotSizeClasses[size]),
 			style: { backgroundColor: color }
 		}), displayLabel]
 	});
 }
 //#endregion
-//#region src/components/TableOfContents/index.tsx
-const cn = (...classes) => classes.filter(Boolean).join(" ");
-function getIdFromUrl(url) {
-	if (typeof url === "string" && url.startsWith("#")) return url.slice(1);
-	return null;
+//#region src/components/IPhoneMockup/index.tsx
+function IPhoneMockup({ screenWidth, screenType = "island", isLandscape = false, frameColor = "#666666", frameOnly = false, statusbarColor = "#CCCCCC", hideStatusBar = false, transparentNavBar = false, hideNavBar = false, className, containerStyle, containerStlye, children }) {
+	const Mockup = useMemo(() => {
+		if (screenType === "legacy") return isLandscape ? IPhoneLegacyLandscape : IPhoneLegacyPortrait;
+		if (screenType === "notch") return isLandscape ? IPhoneNotchLandscape : IPhoneNotchPortrait;
+		return isLandscape ? IPhoneIslandLandscape : IPhoneIslandPortrait;
+	}, [isLandscape, screenType]);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: containerStyle ?? containerStlye,
+		children: /* @__PURE__ */ jsx(Mockup, {
+			screenWidth,
+			frameColor,
+			frameOnly,
+			statusbarColor,
+			hideStatusBar,
+			transparentNavigationBar: transparentNavBar,
+			hideNavigationBar: hideNavBar,
+			children
+		})
+	});
 }
-function arraysShallowEqual(a, b) {
-	if (a === b) return true;
-	if (a.length !== b.length) return false;
-	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
-	return true;
+function createStyles(styles) {
+	return styles;
 }
-function findScrollableParent(el) {
-	let current = el?.parentElement;
-	while (current && current !== document.body) {
-		const overflowY = getComputedStyle(current).overflowY;
-		if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
-			if (current.scrollHeight > current.clientHeight) return current;
+function getStyles({ screenType, isLandscape, getSizeWithRatio, screenWidth, mockupHeight, frameColor, frameWidth, statusbarColor, frameOnly, bezelRadius }) {
+	const frameWidthValue = frameWidth;
+	const halfFrameWidth = Math.floor(frameWidthValue / 2);
+	const widthAndFrame = screenWidth + frameWidthValue * 2;
+	const heightAndFrame = mockupHeight + frameWidthValue * 2;
+	const frameButtonSize = Math.floor(frameWidthValue * .9);
+	const frameButtonPosition = (isLandscape ? mockupHeight : screenWidth) + frameWidthValue + halfFrameWidth + frameButtonSize - halfFrameWidth;
+	const paddingRight = frameOnly ? 0 : isLandscape ? 0 : frameButtonSize - halfFrameWidth;
+	const paddingLeft = paddingRight;
+	const paddingTop = frameOnly ? 0 : isLandscape ? frameButtonSize - halfFrameWidth : 0;
+	const paddingBottom = paddingTop;
+	const isIsland = screenType === "island";
+	const topInset = isLandscape ? 0 : getSizeWithRatio(isIsland ? 59 : 44);
+	const leftInset = isLandscape ? getSizeWithRatio(isIsland ? 59 : 44) : 0;
+	const rightInset = leftInset;
+	const bottomInset = isLandscape ? getSizeWithRatio(21) : getSizeWithRatio(34);
+	const powerPosition = getSizeWithRatio(isIsland ? 280 : 250);
+	return createStyles({
+		container: {
+			display: "flex",
+			flexDirection: isLandscape ? "row" : "column",
+			boxSizing: "content-box",
+			position: "relative",
+			width: widthAndFrame,
+			height: heightAndFrame,
+			paddingRight,
+			paddingLeft,
+			paddingTop,
+			paddingBottom
+		},
+		frame: {
+			display: "flex",
+			flexDirection: "column",
+			position: "relative",
+			boxSizing: "border-box",
+			borderRadius: bezelRadius,
+			borderStyle: "solid",
+			borderWidth: frameWidthValue,
+			borderColor: frameColor,
+			overflow: "hidden"
+		},
+		screen: {
+			display: "flex",
+			flexDirection: isLandscape ? "row" : "column",
+			position: "relative",
+			width: screenWidth,
+			height: mockupHeight,
+			backgroundColor: "transparent",
+			overflow: "hidden"
+		},
+		notchContainer: {
+			display: "flex",
+			flexDirection: "column",
+			width: isLandscape ? leftInset : "100%",
+			height: isLandscape ? "100%" : topInset,
+			backgroundColor: statusbarColor,
+			alignItems: isLandscape ? "flex-start" : "center",
+			justifyContent: isLandscape ? "center" : "flex-start"
+		},
+		notchContainerFullScreen: {
+			display: "flex",
+			flexDirection: "column",
+			position: "absolute",
+			width: isLandscape ? leftInset : "100%",
+			height: isLandscape ? "100%" : topInset,
+			alignItems: isLandscape ? "flex-start" : "center",
+			justifyContent: isLandscape ? "center" : "flex-start",
+			pointerEvents: "none"
+		},
+		safeAreaRight: {
+			width: rightInset,
+			height: "100%",
+			backgroundColor: statusbarColor
+		},
+		island: {
+			width: isLandscape ? getSizeWithRatio(35) : getSizeWithRatio(128),
+			height: isLandscape ? getSizeWithRatio(128) : getSizeWithRatio(35),
+			backgroundColor: frameColor,
+			borderRadius: getSizeWithRatio(50),
+			marginTop: isLandscape ? void 0 : getSizeWithRatio(13),
+			marginLeft: isLandscape ? getSizeWithRatio(13) : void 0
+		},
+		notch: {
+			width: isLandscape ? getSizeWithRatio(31) : getSizeWithRatio(160),
+			height: isLandscape ? getSizeWithRatio(160) : getSizeWithRatio(31),
+			backgroundColor: frameColor,
+			borderBottomLeftRadius: isLandscape ? 0 : getSizeWithRatio(20),
+			borderBottomRightRadius: getSizeWithRatio(20),
+			borderTopRightRadius: isLandscape ? getSizeWithRatio(20) : 0
+		},
+		swipeContainer: {
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			height: bottomInset,
+			backgroundColor: statusbarColor,
+			alignItems: "center",
+			justifyContent: "flex-end"
+		},
+		swipeContainerFullScreen: {
+			display: "flex",
+			flexDirection: "column",
+			position: "absolute",
+			bottom: 0,
+			width: "100%",
+			height: bottomInset,
+			alignItems: "center",
+			justifyContent: "flex-end",
+			pointerEvents: "none"
+		},
+		swipeBar: {
+			backgroundColor: frameColor,
+			borderRadius: getSizeWithRatio(100),
+			width: isLandscape ? getSizeWithRatio(230) : "35%",
+			height: getSizeWithRatio(7),
+			marginBottom: isLandscape ? getSizeWithRatio(5) : getSizeWithRatio(10)
+		},
+		silenceSwitch: {
+			position: "absolute",
+			borderRadius: frameWidthValue,
+			top: isLandscape ? frameButtonPosition : getSizeWithRatio(165),
+			left: isLandscape ? getSizeWithRatio(165) : void 0,
+			right: isLandscape ? void 0 : frameButtonPosition,
+			width: isLandscape ? getSizeWithRatio(34) : frameButtonSize,
+			height: isLandscape ? frameButtonSize : getSizeWithRatio(34),
+			backgroundColor: frameColor
+		},
+		volumeUp: {
+			position: "absolute",
+			borderRadius: frameWidthValue,
+			top: isLandscape ? frameButtonPosition : getSizeWithRatio(230),
+			left: isLandscape ? getSizeWithRatio(230) : void 0,
+			right: isLandscape ? void 0 : frameButtonPosition,
+			width: isLandscape ? getSizeWithRatio(65) : frameButtonSize,
+			height: isLandscape ? frameButtonSize : getSizeWithRatio(65),
+			backgroundColor: frameColor
+		},
+		volumeDown: {
+			position: "absolute",
+			borderRadius: frameWidthValue,
+			top: isLandscape ? frameButtonPosition : getSizeWithRatio(315),
+			left: isLandscape ? getSizeWithRatio(315) : void 0,
+			right: isLandscape ? void 0 : frameButtonPosition,
+			width: isLandscape ? getSizeWithRatio(65) : frameButtonSize,
+			height: isLandscape ? frameButtonSize : getSizeWithRatio(65),
+			backgroundColor: frameColor
+		},
+		power: {
+			position: "absolute",
+			borderRadius: frameWidthValue,
+			top: isLandscape ? void 0 : powerPosition,
+			left: isLandscape ? powerPosition : frameButtonPosition,
+			bottom: isLandscape ? frameButtonPosition : void 0,
+			width: isLandscape ? getSizeWithRatio(105) : frameButtonSize,
+			height: isLandscape ? frameButtonSize : getSizeWithRatio(105),
+			backgroundColor: frameColor
+		},
+		notchPad: {
+			alignSelf: "center",
+			position: "absolute",
+			top: isLandscape ? void 0 : halfFrameWidth,
+			left: isLandscape ? halfFrameWidth : void 0,
+			width: isLandscape ? getSizeWithRatio(20) : getSizeWithRatio(160),
+			height: isLandscape ? getSizeWithRatio(160) : getSizeWithRatio(20),
+			backgroundColor: frameColor
 		}
-		current = current.parentElement;
-	}
-	return document.documentElement;
-}
-function scrollAnchorIntoView(anchor, container, options = {}) {
-	const { behavior = "smooth", block = "center" } = options;
-	const containerRect = container.getBoundingClientRect();
-	const offsetTopRelativeToContainer = anchor.getBoundingClientRect().top - containerRect.top + container.scrollTop;
-	let targetScroll;
-	if (block === "center") targetScroll = offsetTopRelativeToContainer - container.clientHeight / 2 + anchor.clientHeight / 2;
-	else if (block === "end") targetScroll = offsetTopRelativeToContainer - container.clientHeight + anchor.clientHeight;
-	else targetScroll = offsetTopRelativeToContainer;
-	container.scrollTo({
-		top: Math.max(0, targetScroll),
-		behavior
 	});
 }
-var TocObserver = class {
-	constructor() {
-		this.items = [];
-		this.single = false;
-		this.intersectionObserver = null;
-		this.listeners = /* @__PURE__ */ new Set();
-	}
-	listen(fn) {
-		this.listeners.add(fn);
-	}
-	unlisten(fn) {
-		this.listeners.delete(fn);
-	}
-	setItems(nextItems) {
-		if (this.intersectionObserver) for (const item of this.items) {
-			const el = document.getElementById(item.id);
-			if (el) this.intersectionObserver.unobserve(el);
-		}
-		const next = [];
-		for (const item of nextItems) {
-			const id = getIdFromUrl(item.url);
-			if (!id) continue;
-			next.push({
-				id,
-				active: false,
-				fallback: false,
-				t: 0,
-				original: item
-			});
-		}
-		this.update(next);
-		this.observeAll();
-	}
-	watch(options) {
-		if (this.intersectionObserver) return;
-		if (typeof window === "undefined") return;
-		this.intersectionObserver = new IntersectionObserver(this.handleIntersection.bind(this), options);
-		this.observeAll();
-	}
-	unwatch() {
-		this.intersectionObserver?.disconnect();
-		this.intersectionObserver = null;
-	}
-	handleIntersection(entries) {
-		if (entries.length === 0) return;
-		let hasActive = false;
-		const updated = this.items.map((item) => {
-			const entry = entries.find((e) => e.target.id === item.id);
-			let active = entry ? entry.isIntersecting : item.active && !item.fallback;
-			if (this.single && hasActive) active = false;
-			let nextItem = item;
-			if (item.active !== active) nextItem = {
-				...item,
-				t: Date.now(),
-				active,
-				fallback: false
-			};
-			if (active) hasActive = true;
-			return nextItem;
+function IPhoneIslandPortrait(props) {
+	const { screenWidth, frameColor, frameOnly, statusbarColor, hideStatusBar, hideNavigationBar, transparentNavigationBar, children } = props;
+	const styles = useMemo(() => {
+		const getSizeWithRatio = (size) => Math.max(Math.floor(screenWidth * size / 390), 1);
+		return getStyles({
+			screenType: "island",
+			isLandscape: false,
+			getSizeWithRatio,
+			screenWidth,
+			mockupHeight: Math.floor(screenWidth / 9 * 19.5),
+			frameColor,
+			frameWidth: getSizeWithRatio(10),
+			frameOnly,
+			statusbarColor,
+			bezelRadius: getSizeWithRatio(68)
 		});
-		if (!hasActive && entries[0].rootBounds) {
-			const viewTop = entries[0].rootBounds.top;
-			let min = Number.POSITIVE_INFINITY;
-			let fallbackIdx = -1;
-			for (let i = 0; i < updated.length; i++) {
+	}, [
+		screenWidth,
+		frameColor,
+		statusbarColor,
+		frameOnly
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: styles.frame,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles.screen,
+					children: [
+						!hideStatusBar && /* @__PURE__ */ jsx("div", {
+							style: styles.notchContainer,
+							children: /* @__PURE__ */ jsx("div", { style: styles.island })
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								display: "flex",
+								flex: 1,
+								overflow: "hidden"
+							},
+							children
+						}),
+						!hideNavigationBar && !transparentNavigationBar && /* @__PURE__ */ jsx("div", {
+							style: styles.swipeContainer,
+							children: /* @__PURE__ */ jsx("div", { style: styles.swipeBar })
+						})
+					]
+				}),
+				hideStatusBar && /* @__PURE__ */ jsx("div", {
+					style: styles.notchContainerFullScreen,
+					children: /* @__PURE__ */ jsx("div", { style: styles.island })
+				}),
+				!hideNavigationBar && transparentNavigationBar && /* @__PURE__ */ jsx("div", {
+					style: styles.swipeContainerFullScreen,
+					children: /* @__PURE__ */ jsx("div", { style: styles.swipeBar })
+				})
+			]
+		}), !frameOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", { style: styles.silenceSwitch }),
+			/* @__PURE__ */ jsx("div", { style: styles.volumeUp }),
+			/* @__PURE__ */ jsx("div", { style: styles.volumeDown }),
+			/* @__PURE__ */ jsx("div", { style: styles.power })
+		] })]
+	});
+}
+function IPhoneIslandLandscape(props) {
+	const { screenWidth, frameColor, frameOnly, statusbarColor, hideStatusBar, hideNavigationBar, transparentNavigationBar, children } = props;
+	const styles = useMemo(() => {
+		const getSizeWithRatio = (size) => Math.max(Math.floor(screenWidth * size / 844), 1);
+		return getStyles({
+			screenType: "island",
+			isLandscape: true,
+			getSizeWithRatio,
+			screenWidth,
+			mockupHeight: Math.floor(screenWidth / 19.5 * 9),
+			frameColor,
+			frameWidth: getSizeWithRatio(10),
+			frameOnly,
+			statusbarColor,
+			bezelRadius: getSizeWithRatio(68)
+		});
+	}, [
+		screenWidth,
+		frameColor,
+		statusbarColor,
+		frameOnly
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: styles.frame,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: styles.screen,
+					children: [
+						!hideStatusBar && /* @__PURE__ */ jsx("div", {
+							style: styles.notchContainer,
+							children: /* @__PURE__ */ jsx("div", { style: styles.island })
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flex: 1,
+								flexDirection: "column"
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									display: "flex",
+									flex: 1,
+									overflow: "hidden"
+								},
+								children
+							}), !hideNavigationBar && !transparentNavigationBar && /* @__PURE__ */ jsx("div", {
+								style: styles.swipeContainer,
+								children: /* @__PURE__ */ jsx("div", { style: styles.swipeBar })
+							})]
+						}),
+						!hideStatusBar && /* @__PURE__ */ jsx("div", { style: styles.safeAreaRight })
+					]
+				}),
+				hideStatusBar && /* @__PURE__ */ jsx("div", {
+					style: styles.notchContainerFullScreen,
+					children: /* @__PURE__ */ jsx("div", { style: styles.island })
+				}),
+				!hideNavigationBar && transparentNavigationBar && /* @__PURE__ */ jsx("div", {
+					style: styles.swipeContainerFullScreen,
+					children: /* @__PURE__ */ jsx("div", { style: styles.swipeBar })
+				})
+			]
+		}), !frameOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", { style: styles.silenceSwitch }),
+			/* @__PURE__ */ jsx("div", { style: styles.volumeUp }),
+			/* @__PURE__ */ jsx("div", { style: styles.volumeDown }),
+			/* @__PURE__ */ jsx("div", { style: styles.power })
+		] })]
+	});
+}
+function IPhoneNotchPortrait(props) {
+	const { screenWidth, frameColor, frameOnly, statusbarColor, hideStatusBar, hideNavigationBar, transparentNavigationBar, children } = props;
+	const styles = useMemo(() => {
+		const getSizeWithRatio = (size) => Math.max(Math.floor(screenWidth * size / 390), 1);
+		return getStyles({
+			screenType: "notch",
+			isLandscape: false,
+			getSizeWithRatio,
+			screenWidth,
+			mockupHeight: Math.floor(screenWidth / 9 * 19.5),
+			frameColor,
+			frameWidth: getSizeWithRatio(14),
+			frameOnly,
+			statusbarColor,
+			bezelRadius: getSizeWithRatio(64)
+		});
+	}, [
+		screenWidth,
+		frameColor,
+		statusbarColor,
+		frameOnly
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: styles.frame,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: styles.screen,
+						children: [
+							!hideStatusBar && /* @__PURE__ */ jsx("div", {
+								style: styles.notchContainer,
+								children: /* @__PURE__ */ jsx("div", { style: styles.notch })
+							}),
+							/* @__PURE__ */ jsx("div", {
+								style: {
+									display: "flex",
+									flex: 1,
+									overflow: "hidden"
+								},
+								children
+							}),
+							!hideNavigationBar && !transparentNavigationBar && /* @__PURE__ */ jsx("div", {
+								style: styles.swipeContainer,
+								children: /* @__PURE__ */ jsx("div", { style: styles.swipeBar })
+							})
+						]
+					}),
+					hideStatusBar && /* @__PURE__ */ jsx("div", {
+						style: styles.notchContainerFullScreen,
+						children: /* @__PURE__ */ jsx("div", { style: styles.notch })
+					}),
+					!hideNavigationBar && transparentNavigationBar && /* @__PURE__ */ jsx("div", {
+						style: styles.swipeContainerFullScreen,
+						children: /* @__PURE__ */ jsx("div", { style: styles.swipeBar })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { style: styles.notchPad }),
+			!frameOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("div", { style: styles.silenceSwitch }),
+				/* @__PURE__ */ jsx("div", { style: styles.volumeUp }),
+				/* @__PURE__ */ jsx("div", { style: styles.volumeDown }),
+				/* @__PURE__ */ jsx("div", { style: styles.power })
+			] })
+		]
+	});
+}
+function IPhoneNotchLandscape(props) {
+	const { screenWidth, frameColor, frameOnly, statusbarColor, hideStatusBar, hideNavigationBar, transparentNavigationBar, children } = props;
+	const styles = useMemo(() => {
+		const getSizeWithRatio = (size) => Math.max(Math.floor(screenWidth * size / 844), 1);
+		return getStyles({
+			screenType: "notch",
+			isLandscape: true,
+			getSizeWithRatio,
+			screenWidth,
+			mockupHeight: Math.floor(screenWidth / 19.5 * 9),
+			frameColor,
+			frameWidth: getSizeWithRatio(14),
+			frameOnly,
+			statusbarColor,
+			bezelRadius: getSizeWithRatio(64)
+		});
+	}, [
+		screenWidth,
+		frameColor,
+		statusbarColor,
+		frameOnly
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: styles.frame,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: styles.screen,
+						children: [
+							!hideStatusBar && /* @__PURE__ */ jsx("div", {
+								style: styles.notchContainer,
+								children: /* @__PURE__ */ jsx("div", { style: styles.notch })
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									flex: 1,
+									flexDirection: "column"
+								},
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										display: "flex",
+										flex: 1,
+										flexDirection: "column",
+										overflow: "hidden"
+									},
+									children
+								}), !hideNavigationBar && !transparentNavigationBar && /* @__PURE__ */ jsx("div", {
+									style: styles.swipeContainer,
+									children: /* @__PURE__ */ jsx("div", { style: styles.swipeBar })
+								})]
+							}),
+							!hideStatusBar && /* @__PURE__ */ jsx("div", { style: styles.safeAreaRight })
+						]
+					}),
+					hideStatusBar && /* @__PURE__ */ jsx("div", {
+						style: styles.notchContainerFullScreen,
+						children: /* @__PURE__ */ jsx("div", { style: styles.notch })
+					}),
+					!hideNavigationBar && transparentNavigationBar && /* @__PURE__ */ jsx("div", {
+						style: styles.swipeContainerFullScreen,
+						children: /* @__PURE__ */ jsx("div", { style: styles.swipeBar })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { style: styles.notchPad }),
+			!frameOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("div", { style: styles.silenceSwitch }),
+				/* @__PURE__ */ jsx("div", { style: styles.volumeUp }),
+				/* @__PURE__ */ jsx("div", { style: styles.volumeDown }),
+				/* @__PURE__ */ jsx("div", { style: styles.power })
+			] })
+		]
+	});
+}
+function getLegacyStyles({ isLandscape, getSizeWithRatio, screenWidth, mockupHeight, frameColor, statusbarColor, frameOnly }) {
+	const frameWidth = getSizeWithRatio(22);
+	const halfFrameWidth = Math.floor(frameWidth / 2);
+	const widthAndFrame = screenWidth + frameWidth * 2;
+	const heightAndFrame = mockupHeight + frameWidth * 2;
+	const upperBezelSize = getSizeWithRatio(110);
+	const lowerBezelSize = getSizeWithRatio(110);
+	const frameButtonSize = Math.floor(frameWidth * .8);
+	const frameButtonPosition = (isLandscape ? mockupHeight : screenWidth) + frameWidth + halfFrameWidth + frameButtonSize - halfFrameWidth;
+	const paddingRight = frameOnly ? 0 : isLandscape ? 0 : frameButtonSize - halfFrameWidth;
+	const paddingLeft = paddingRight;
+	const paddingTop = frameOnly ? 0 : isLandscape ? frameButtonSize - halfFrameWidth : 0;
+	const paddingBottom = paddingTop;
+	const bezelRadius = getSizeWithRatio(60);
+	return createStyles({
+		container: {
+			display: "flex",
+			flexDirection: isLandscape ? "row" : "column",
+			boxSizing: "content-box",
+			position: "relative",
+			width: isLandscape ? screenWidth + upperBezelSize + lowerBezelSize : widthAndFrame,
+			height: isLandscape ? heightAndFrame : mockupHeight + upperBezelSize + lowerBezelSize,
+			paddingRight,
+			paddingLeft,
+			paddingTop,
+			paddingBottom
+		},
+		frame: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: isLandscape ? "flex-start" : "center",
+			justifyContent: isLandscape ? "center" : "flex-start",
+			position: "relative",
+			boxSizing: "border-box",
+			borderLeftWidth: frameWidth,
+			borderLeftStyle: "solid",
+			borderRightWidth: frameWidth,
+			borderRightStyle: "solid",
+			borderColor: frameColor,
+			width: isLandscape ? screenWidth : widthAndFrame,
+			height: isLandscape ? heightAndFrame : mockupHeight,
+			overflow: "hidden"
+		},
+		upperBezel: {
+			display: "flex",
+			flexDirection: "column",
+			position: "relative",
+			borderTopLeftRadius: bezelRadius,
+			borderTopRightRadius: isLandscape ? 0 : bezelRadius,
+			borderBottomLeftRadius: isLandscape ? bezelRadius : 0,
+			width: isLandscape ? upperBezelSize : widthAndFrame,
+			height: isLandscape ? heightAndFrame : upperBezelSize,
+			backgroundColor: frameColor,
+			justifyContent: "center"
+		},
+		cameraSpeakerContainer: {
+			display: "flex",
+			flexDirection: isLandscape ? "row" : "column",
+			position: "relative",
+			width: "100%",
+			height: "100%",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		camera: {
+			position: "absolute",
+			left: isLandscape ? void 0 : -getSizeWithRatio(38),
+			bottom: isLandscape ? -getSizeWithRatio(38) : 0,
+			width: getSizeWithRatio(10),
+			height: getSizeWithRatio(10),
+			borderRadius: getSizeWithRatio(10),
+			backgroundColor: statusbarColor
+		},
+		speaker: {
+			position: "relative",
+			width: isLandscape ? getSizeWithRatio(10) : getSizeWithRatio(80),
+			height: isLandscape ? getSizeWithRatio(80) : getSizeWithRatio(10),
+			backgroundColor: statusbarColor,
+			borderRadius: getSizeWithRatio(10)
+		},
+		lowerBezel: {
+			display: "flex",
+			flexDirection: isLandscape ? "row" : "column",
+			borderTopRightRadius: isLandscape ? bezelRadius : 0,
+			borderBottomLeftRadius: isLandscape ? 0 : bezelRadius,
+			borderBottomRightRadius: bezelRadius,
+			width: isLandscape ? lowerBezelSize : widthAndFrame,
+			height: isLandscape ? heightAndFrame : lowerBezelSize,
+			backgroundColor: frameColor,
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		homeButton: {
+			width: getSizeWithRatio(65),
+			height: getSizeWithRatio(65),
+			backgroundColor: statusbarColor,
+			borderRadius: getSizeWithRatio(65)
+		},
+		screen: {
+			display: "flex",
+			flexDirection: isLandscape ? "row" : "column",
+			position: "relative",
+			width: screenWidth,
+			height: mockupHeight,
+			backgroundColor: "transparent"
+		},
+		statusbar: {
+			width: "100%",
+			height: getSizeWithRatio(20),
+			backgroundColor: statusbarColor,
+			alignItems: "center"
+		},
+		silenceSwitch: {
+			position: "absolute",
+			borderRadius: frameWidth,
+			top: isLandscape ? frameButtonPosition : getSizeWithRatio(115),
+			left: isLandscape ? getSizeWithRatio(115) : void 0,
+			right: isLandscape ? void 0 : frameButtonPosition,
+			width: isLandscape ? getSizeWithRatio(36) : frameButtonSize,
+			height: isLandscape ? frameButtonSize : getSizeWithRatio(36),
+			backgroundColor: frameColor
+		},
+		volumeUp: {
+			position: "absolute",
+			borderRadius: frameWidth,
+			top: isLandscape ? frameButtonPosition : getSizeWithRatio(185),
+			left: isLandscape ? getSizeWithRatio(185) : void 0,
+			right: frameButtonPosition,
+			width: isLandscape ? getSizeWithRatio(70) : frameButtonSize,
+			height: isLandscape ? frameButtonSize : getSizeWithRatio(70),
+			backgroundColor: frameColor
+		},
+		volumeDown: {
+			position: "absolute",
+			borderRadius: frameWidth,
+			top: isLandscape ? frameButtonPosition : getSizeWithRatio(270),
+			left: isLandscape ? getSizeWithRatio(270) : void 0,
+			right: isLandscape ? void 0 : frameButtonPosition,
+			width: isLandscape ? getSizeWithRatio(70) : frameButtonSize,
+			height: isLandscape ? frameButtonSize : getSizeWithRatio(70),
+			backgroundColor: frameColor
+		},
+		power: {
+			position: "absolute",
+			borderRadius: frameWidth,
+			top: isLandscape ? void 0 : getSizeWithRatio(190),
+			left: isLandscape ? getSizeWithRatio(190) : frameButtonPosition,
+			bottom: isLandscape ? frameButtonPosition : void 0,
+			width: isLandscape ? getSizeWithRatio(64) : frameButtonSize,
+			height: isLandscape ? frameButtonSize : getSizeWithRatio(64),
+			backgroundColor: frameColor
+		}
+	});
+}
+function IPhoneLegacyPortrait(props) {
+	const { screenWidth, frameColor, frameOnly, statusbarColor, hideStatusBar, children } = props;
+	const styles = useMemo(() => {
+		const getSizeWithRatio = (size) => Math.max(Math.floor(screenWidth * size / 375), 1);
+		return getLegacyStyles({
+			isLandscape: false,
+			getSizeWithRatio,
+			screenWidth,
+			mockupHeight: Math.floor(screenWidth / 9 * 16),
+			frameColor,
+			statusbarColor,
+			frameOnly
+		});
+	}, [
+		screenWidth,
+		frameColor,
+		statusbarColor,
+		frameOnly
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: styles.upperBezel,
+				children: /* @__PURE__ */ jsx("div", {
+					style: styles.cameraSpeakerContainer,
+					children: /* @__PURE__ */ jsx("div", {
+						style: styles.speaker,
+						children: /* @__PURE__ */ jsx("div", { style: styles.camera })
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: styles.frame,
+				children: /* @__PURE__ */ jsxs("div", {
+					style: styles.screen,
+					children: [!hideStatusBar && /* @__PURE__ */ jsx("div", { style: styles.statusbar }), /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							flex: 1,
+							overflow: "hidden"
+						},
+						children
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: styles.lowerBezel,
+				children: /* @__PURE__ */ jsx("div", { style: styles.homeButton })
+			}),
+			!frameOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("div", { style: styles.silenceSwitch }),
+				/* @__PURE__ */ jsx("div", { style: styles.volumeUp }),
+				/* @__PURE__ */ jsx("div", { style: styles.volumeDown }),
+				/* @__PURE__ */ jsx("div", { style: styles.power })
+			] })
+		]
+	});
+}
+function IPhoneLegacyLandscape(props) {
+	const { screenWidth, frameColor, frameOnly, statusbarColor, children } = props;
+	const styles = useMemo(() => {
+		const getSizeWithRatio = (size) => Math.max(Math.floor(screenWidth * size / 667), 1);
+		return getLegacyStyles({
+			isLandscape: true,
+			getSizeWithRatio,
+			screenWidth,
+			mockupHeight: Math.floor(screenWidth / 16 * 9),
+			frameColor,
+			statusbarColor,
+			frameOnly
+		});
+	}, [
+		screenWidth,
+		frameColor,
+		statusbarColor,
+		frameOnly
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: styles.upperBezel,
+				children: /* @__PURE__ */ jsx("div", {
+					style: styles.cameraSpeakerContainer,
+					children: /* @__PURE__ */ jsx("div", {
+						style: styles.speaker,
+						children: /* @__PURE__ */ jsx("div", { style: styles.camera })
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: styles.frame,
+				children: /* @__PURE__ */ jsx("div", {
+					style: styles.screen,
+					children: /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							flex: 1,
+							overflow: "hidden"
+						},
+						children
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: styles.lowerBezel,
+				children: /* @__PURE__ */ jsx("div", { style: styles.homeButton })
+			}),
+			!frameOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("div", { style: styles.silenceSwitch }),
+				/* @__PURE__ */ jsx("div", { style: styles.volumeUp }),
+				/* @__PURE__ */ jsx("div", { style: styles.volumeDown }),
+				/* @__PURE__ */ jsx("div", { style: styles.power })
+			] })
+		]
+	});
+}
+//#endregion
+//#region src/components/WhatsAppMockup/index.tsx
+const DEFAULT_WAVEFORM = [
+	10,
+	18,
+	27,
+	14,
+	31,
+	23,
+	38,
+	17,
+	29,
+	21,
+	12,
+	25,
+	15,
+	32,
+	19,
+	11,
+	23,
+	15,
+	29,
+	17
+];
+const WHATSAPP_PALETTES = {
+	dark: {
+		frame: "#0a0d12",
+		statusbar: "#111b21",
+		statusText: "#e9edef",
+		screen: "#0b141a",
+		header: "#111b21",
+		headerText: "#e9edef",
+		mutedText: "#aebac1",
+		subtleText: "#8696a0",
+		action: "#00a884",
+		wallpaperStroke: "#e9edef",
+		wallpaperOpacity: .045,
+		dateBg: "#182229",
+		dateText: "#aebac1",
+		noticeBg: "#182229",
+		noticeText: "#d0b66b",
+		incoming: "#202c33",
+		incomingText: "#e9edef",
+		outgoing: "#005c4b",
+		outgoingText: "#e9edef",
+		outgoingMeta: "#c7d4cf",
+		read: "#53bdeb",
+		avatarBg: "#60b531",
+		composer: "#111b21",
+		composerInput: "#202c33",
+		composerText: "#8696a0",
+		micBg: "#00a884",
+		micIcon: "#07130f",
+		audioWave: "#9ad8ca",
+		audioButtonBg: "#00a884",
+		shadow: "rgba(0, 0, 0, 0.22)"
+	},
+	light: {
+		frame: "#0a0d12",
+		statusbar: "#f7f5f0",
+		statusText: "#111b21",
+		screen: "#efe7db",
+		header: "#f7f5f0",
+		headerText: "#111b21",
+		mutedText: "#667781",
+		subtleText: "#667781",
+		action: "#008069",
+		wallpaperStroke: "#7d6f59",
+		wallpaperOpacity: .075,
+		dateBg: "rgba(255, 255, 255, 0.88)",
+		dateText: "#6b6255",
+		noticeBg: "#fff7d6",
+		noticeText: "#7a6420",
+		incoming: "#ffffff",
+		incomingText: "#111b21",
+		outgoing: "#d9fdd3",
+		outgoingText: "#111b13",
+		outgoingMeta: "#66756b",
+		read: "#53bdeb",
+		avatarBg: "#60b531",
+		composer: "#f7f5f0",
+		composerInput: "#ffffff",
+		composerText: "#667781",
+		micBg: "#00a884",
+		micIcon: "#ffffff",
+		audioWave: "#177866",
+		audioButtonBg: "#00a884",
+		shadow: "rgba(15, 23, 42, 0.11)"
+	}
+};
+const cn$2 = (...classes) => classes.filter(Boolean).join(" ");
+function WhatsAppMockup({ contactName, profilePhoto, profilePhotoAlt, profileAvatar, profileType = "business", contactSubtitle, theme = "dark", headerBackgroundColor, profileAvatarBackgroundColor, messages = [], statusTime = "14:32", dateLabel = "Hoje", encryptionNotice = "Mensagens e ligações são protegidas com criptografia de ponta a ponta.", composerPlaceholder = "Mensagem", composer, showComposer = true, showHeaderActions = true, showWallpaper = true, screenWidth = 266, frameColor, statusbarColor, containerStyle, frameOnly, hideStatusBar, className, phoneClassName, screenClassName, messagesClassName, "aria-label": ariaLabel }) {
+	const palette = WHATSAPP_PALETTES[theme];
+	const resolvedFrameColor = frameColor ?? palette.frame;
+	const resolvedStatusbarColor = statusbarColor ?? palette.statusbar;
+	const subtitle = contactSubtitle === void 0 ? profileType === "business" ? "WhatsApp Business" : void 0 : contactSubtitle || void 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$2("rounded-[2.65rem] shadow-[0_34px_74px_-34px_rgba(15,23,42,0.58)] dark:shadow-[0_34px_86px_-34px_rgba(10,13,18,0.82)]", className),
+		"aria-label": ariaLabel ?? `Conversa no WhatsApp com ${contactName}`,
+		children: /* @__PURE__ */ jsx(IPhoneMockup, {
+			screenWidth,
+			screenType: "island",
+			frameColor: resolvedFrameColor,
+			statusbarColor: resolvedStatusbarColor,
+			hideNavBar: true,
+			frameOnly,
+			hideStatusBar,
+			containerStyle,
+			className: phoneClassName,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn$2("flex h-full w-full flex-col", screenClassName),
+				style: {
+					backgroundColor: palette.screen,
+					color: palette.headerText
+				},
+				children: [
+					/* @__PURE__ */ jsx(StatusBar, {
+						time: statusTime,
+						screenWidth,
+						palette
+					}),
+					/* @__PURE__ */ jsx(WhatsAppHeader, {
+						contactName,
+						subtitle,
+						profilePhoto,
+						profilePhotoAlt,
+						profileAvatar,
+						showActions: showHeaderActions,
+						backgroundColor: headerBackgroundColor ?? palette.header,
+						avatarBackgroundColor: profileAvatarBackgroundColor ?? palette.avatarBg,
+						palette
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn$2("relative flex flex-1 flex-col gap-2 overflow-hidden px-2.5 py-2.5", messagesClassName),
+						children: [
+							showWallpaper ? /* @__PURE__ */ jsx(WhatsAppWallpaper, { palette }) : null,
+							dateLabel ? /* @__PURE__ */ jsx("div", {
+								className: "relative z-10 mx-auto rounded-full px-2.5 py-0.5 text-[9px] font-semibold uppercase shadow-[0_1px_2px_rgba(15,23,42,0.08)]",
+								style: {
+									backgroundColor: palette.dateBg,
+									color: palette.dateText
+								},
+								children: dateLabel
+							}) : null,
+							encryptionNotice ? /* @__PURE__ */ jsx("div", {
+								className: "relative z-10 mx-auto max-w-[92%] rounded-md px-2.5 py-1.5 text-center text-[9px] leading-snug shadow-[0_1px_2px_rgba(15,23,42,0.06)]",
+								style: {
+									backgroundColor: palette.noticeBg,
+									color: palette.noticeText
+								},
+								children: encryptionNotice
+							}) : null,
+							messages.map((message, index) => /* @__PURE__ */ jsx(WhatsAppMessageBubble, {
+								message,
+								palette
+							}, message.id ?? `${message.time}-${index}`))
+						]
+					}),
+					showComposer ? composer ?? /* @__PURE__ */ jsx(WhatsAppComposer, {
+						composerPlaceholder,
+						palette
+					}) : null
+				]
+			})
+		})
+	});
+}
+function StatusBar({ time, screenWidth, palette }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: "absolute left-0 right-0 top-0 z-50 flex items-center justify-between px-6 text-[11px] font-semibold tracking-tight",
+		style: { height: `${Math.floor(screenWidth * 59 / 390)}px` },
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			style: { color: palette.statusText },
+			children: time
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			style: { color: palette.statusText },
+			children: [
+				/* @__PURE__ */ jsx(IosSignal, { color: palette.statusText }),
+				/* @__PURE__ */ jsx(Wifi, {
+					className: "h-3 w-3",
+					strokeWidth: 2.4,
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx(IosBattery, { color: palette.statusText })
+			]
+		})]
+	});
+}
+function IosSignal({ color }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex h-3 w-3 items-end gap-[1px]",
+		"aria-hidden": true,
+		children: [
+			4,
+			6,
+			8,
+			10
+		].map((height) => /* @__PURE__ */ jsx("span", {
+			className: "w-[2px] rounded-sm",
+			style: {
+				height,
+				backgroundColor: color
+			}
+		}, height))
+	});
+}
+function IosBattery({ color }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex items-center gap-[1px]",
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "relative h-[8px] w-[16px] rounded-[2px] border",
+			style: { borderColor: color },
+			children: /* @__PURE__ */ jsx("span", {
+				className: "absolute bottom-[1px] left-[1px] top-[1px] w-[10px] rounded-[1px]",
+				style: { backgroundColor: color }
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "h-[4px] w-[1.5px] rounded-r",
+			style: { backgroundColor: color }
+		})]
+	});
+}
+function WhatsAppHeader({ contactName, subtitle, profilePhoto, profilePhotoAlt, profileAvatar, showActions, backgroundColor, avatarBackgroundColor, palette }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "relative shadow-[0_1px_0_rgba(17,27,33,0.08)]",
+		style: {
+			backgroundColor,
+			color: palette.headerText
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 px-2.5 pb-2 pt-2",
+			children: [
+				/* @__PURE__ */ jsx(ChevronLeft, {
+					className: "h-5 w-5 shrink-0",
+					strokeWidth: 2.4,
+					style: { color: palette.action },
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx(ProfileAvatar, {
+					contactName,
+					profilePhoto,
+					profilePhotoAlt,
+					profileAvatar,
+					backgroundColor: avatarBackgroundColor
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-[13px] font-semibold leading-tight",
+						children: contactName
+					}), subtitle ? /* @__PURE__ */ jsx("p", {
+						className: "truncate text-[10px] leading-tight",
+						style: { color: palette.mutedText },
+						children: subtitle
+					}) : null]
+				}),
+				showActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Video, {
+						className: "h-4 w-4 shrink-0",
+						strokeWidth: 2.2,
+						style: { color: palette.action },
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx(Phone, {
+						className: "h-3.5 w-3.5 shrink-0",
+						strokeWidth: 2.2,
+						style: { color: palette.action },
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsx(MoreVertical, {
+						className: "h-4 w-4 shrink-0",
+						strokeWidth: 2.2,
+						style: { color: palette.action },
+						"aria-hidden": true
+					})
+				] }) : null
+			]
+		})
+	});
+}
+function ProfileAvatar({ contactName, profilePhoto, profilePhotoAlt, profileAvatar, backgroundColor }) {
+	if (profileAvatar) return /* @__PURE__ */ jsx("div", {
+		className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full",
+		style: { backgroundColor },
+		children: profileAvatar
+	});
+	if (profilePhoto) return /* @__PURE__ */ jsx("img", {
+		src: profilePhoto,
+		alt: profilePhotoAlt ?? contactName,
+		className: "h-8 w-8 shrink-0 rounded-full object-cover",
+		style: { backgroundColor }
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-[11px] font-bold uppercase text-white",
+		style: { backgroundColor },
+		children: getInitials(contactName)
+	});
+}
+function getInitials(name) {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	return `${parts[0]?.[0] ?? "W"}${(parts.length > 1 ? parts[parts.length - 1]?.[0] : void 0) ?? ""}`;
+}
+function WhatsAppMessageBubble({ message, palette }) {
+	const direction = message.direction ?? "outgoing";
+	const type = message.type ?? "text";
+	const isOutgoing = direction === "outgoing";
+	const bubbleColor = isOutgoing ? palette.outgoing : palette.incoming;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$2("relative z-10 max-w-[86%] rounded-[14px] px-2.5 py-2 shadow-[0_1px_1.5px_rgba(15,23,42,0.11)]", isOutgoing ? "ml-auto rounded-tr-[4px]" : "mr-auto rounded-tl-[4px]", message.className),
+		style: {
+			backgroundColor: bubbleColor,
+			color: isOutgoing ? palette.outgoingText : palette.incomingText,
+			boxShadow: `0 1px 1.5px ${palette.shadow}`,
+			...message.style
+		},
+		children: [
+			/* @__PURE__ */ jsx(BubbleTail, {
+				side: isOutgoing ? "out" : "in",
+				color: message.style?.backgroundColor?.toString() ?? bubbleColor
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: message.contentClassName,
+				children: message.children ?? (type === "audio" ? /* @__PURE__ */ jsx(AudioMessage, {
+					message,
+					palette
+				}) : type === "custom" ? null : /* @__PURE__ */ jsx("p", {
+					className: "max-w-[31ch] text-[10.5px] leading-snug",
+					children: message.text
+				}))
+			}),
+			message.hideMeta ? null : /* @__PURE__ */ jsx(MessageMeta, {
+				time: message.time,
+				direction,
+				read: message.read,
+				palette
+			})
+		]
+	});
+}
+function AudioMessage({ message, palette }) {
+	const waveform = message.waveform ?? DEFAULT_WAVEFORM;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
+				style: {
+					backgroundColor: palette.audioButtonBg,
+					color: palette.micIcon
+				},
+				children: /* @__PURE__ */ jsx(Play, {
+					className: "ml-0.5 h-3.5 w-3.5 fill-current",
+					strokeWidth: 2.2,
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex h-7 flex-1 items-center gap-[2px]",
+				"aria-hidden": true,
+				children: waveform.map((height, index) => /* @__PURE__ */ jsx("span", {
+					className: "origin-center rounded-full",
+					style: {
+						backgroundColor: palette.audioWave,
+						height: Math.max(8, Math.round(height * .78)),
+						opacity: .76,
+						width: 2
+					}
+				}, `${height}-${index}`))
+			}),
+			message.duration ? /* @__PURE__ */ jsx("span", {
+				className: "text-[10px] font-medium",
+				style: { color: palette.outgoingMeta },
+				children: message.duration
+			}) : null
+		]
+	}), message.text ? /* @__PURE__ */ jsx("p", {
+		className: "mt-1.5 max-w-[29ch] text-[9.5px] leading-snug",
+		style: { color: palette.outgoingMeta },
+		children: message.text
+	}) : null] });
+}
+function MessageMeta({ time, direction, read, palette }) {
+	const isOutgoing = direction === "outgoing";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-1 flex items-center justify-end gap-1 text-[9px]",
+		style: { color: isOutgoing ? palette.outgoingMeta : palette.subtleText },
+		children: [/* @__PURE__ */ jsx("span", { children: time }), isOutgoing ? read === void 0 ? /* @__PURE__ */ jsx(Check, {
+			className: "h-3 w-3",
+			strokeWidth: 2.5,
+			"aria-hidden": true
+		}) : /* @__PURE__ */ jsx(CheckCheck, {
+			className: "h-3 w-3",
+			strokeWidth: 2.5,
+			style: { color: read ? palette.read : void 0 },
+			"aria-hidden": true
+		}) : null]
+	});
+}
+function BubbleTail({ side, color }) {
+	const path = side === "out" ? "M0 0H14C10 1.8 7.4 4.7 6.4 8.3L5.3 12C4.2 7 2.4 2.9 0 0Z" : "M14 0H0C4 1.8 6.6 4.7 7.6 8.3L8.7 12C9.8 7 11.6 2.9 14 0Z";
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
+		className: cn$2("pointer-events-none absolute top-0 h-3.5 w-3.5", side === "out" ? "-right-[7px]" : "-left-[7px]"),
+		style: { fill: color },
+		viewBox: "0 0 14 12",
+		children: /* @__PURE__ */ jsx("path", { d: path })
+	});
+}
+function WhatsAppWallpaper({ palette }) {
+	const patternId = useId().replace(/:/g, "");
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": true,
+		className: "pointer-events-none absolute inset-0 h-full w-full",
+		children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", {
+			id: patternId,
+			width: "46",
+			height: "46",
+			patternUnits: "userSpaceOnUse",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M8 11h12m-6-6v12M31 7c4 0 7 3 7 7 0 5-5 7-7 10-2-3-7-5-7-10 0-4 3-7 7-7Zm-14 25c4 0 6 2 6 5s-2 5-6 5-6-2-6-5 2-5 6-5Zm19 10 6-6m-6 0 6 6",
+				stroke: palette.wallpaperStroke,
+				strokeWidth: "1",
+				fill: "none",
+				opacity: palette.wallpaperOpacity,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M34 29c3 0 5 2 5 4s-2 4-5 4h-6v-4c0-2 3-4 6-4Z",
+				stroke: palette.wallpaperStroke,
+				strokeWidth: "1",
+				fill: "none",
+				opacity: palette.wallpaperOpacity,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})]
+		}) }), /* @__PURE__ */ jsx("rect", {
+			width: "100%",
+			height: "100%",
+			fill: `url(#${patternId})`
+		})]
+	});
+}
+function WhatsAppComposer({ composerPlaceholder, palette }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5 px-2 pb-[22px] pt-2",
+		style: { backgroundColor: palette.composer },
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-full px-2.5 py-1.5 shadow-[0_1px_1px_rgba(15,23,42,0.06)]",
+			style: {
+				backgroundColor: palette.composerInput,
+				color: palette.composerText
+			},
+			children: [
+				/* @__PURE__ */ jsx(Smile, {
+					className: "h-3.5 w-3.5 shrink-0",
+					strokeWidth: 2,
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 truncate text-[10px]",
+					children: composerPlaceholder
+				}),
+				/* @__PURE__ */ jsx(Paperclip, {
+					className: "h-3.5 w-3.5 shrink-0",
+					strokeWidth: 2,
+					"aria-hidden": true
+				}),
+				/* @__PURE__ */ jsx(Camera, {
+					className: "h-3.5 w-3.5 shrink-0",
+					strokeWidth: 2,
+					"aria-hidden": true
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full",
+			style: {
+				backgroundColor: palette.micBg,
+				color: palette.micIcon
+			},
+			children: /* @__PURE__ */ jsx(Mic, {
+				className: "h-3.5 w-3.5",
+				strokeWidth: 2.2,
+				"aria-hidden": true
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/TableOfContents/index.tsx
+const cn$1 = (...classes) => classes.filter(Boolean).join(" ");
+function getIdFromUrl(url) {
+	if (typeof url === "string" && url.startsWith("#")) return url.slice(1);
+	return null;
+}
+function arraysShallowEqual(a, b) {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
+function findScrollableParent(el) {
+	let current = el?.parentElement;
+	while (current && current !== document.body) {
+		const overflowY = getComputedStyle(current).overflowY;
+		if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") {
+			if (current.scrollHeight > current.clientHeight) return current;
+		}
+		current = current.parentElement;
+	}
+	return document.documentElement;
+}
+function scrollAnchorIntoView(anchor, container, options = {}) {
+	const { behavior = "smooth", block = "center" } = options;
+	const containerRect = container.getBoundingClientRect();
+	const offsetTopRelativeToContainer = anchor.getBoundingClientRect().top - containerRect.top + container.scrollTop;
+	let targetScroll;
+	if (block === "center") targetScroll = offsetTopRelativeToContainer - container.clientHeight / 2 + anchor.clientHeight / 2;
+	else if (block === "end") targetScroll = offsetTopRelativeToContainer - container.clientHeight + anchor.clientHeight;
+	else targetScroll = offsetTopRelativeToContainer;
+	container.scrollTo({
+		top: Math.max(0, targetScroll),
+		behavior
+	});
+}
+var TocObserver = class {
+	constructor() {
+		this.items = [];
+		this.single = false;
+		this.intersectionObserver = null;
+		this.listeners = /* @__PURE__ */ new Set();
+	}
+	listen(fn) {
+		this.listeners.add(fn);
+	}
+	unlisten(fn) {
+		this.listeners.delete(fn);
+	}
+	setItems(nextItems) {
+		if (this.intersectionObserver) for (const item of this.items) {
+			const el = document.getElementById(item.id);
+			if (el) this.intersectionObserver.unobserve(el);
+		}
+		const next = [];
+		for (const item of nextItems) {
+			const id = getIdFromUrl(item.url);
+			if (!id) continue;
+			next.push({
+				id,
+				active: false,
+				fallback: false,
+				t: 0,
+				original: item
+			});
+		}
+		this.update(next);
+		this.observeAll();
+	}
+	watch(options) {
+		if (this.intersectionObserver) return;
+		if (typeof window === "undefined") return;
+		this.intersectionObserver = new IntersectionObserver(this.handleIntersection.bind(this), options);
+		this.observeAll();
+	}
+	unwatch() {
+		this.intersectionObserver?.disconnect();
+		this.intersectionObserver = null;
+	}
+	handleIntersection(entries) {
+		if (entries.length === 0) return;
+		let hasActive = false;
+		const updated = this.items.map((item) => {
+			const entry = entries.find((e) => e.target.id === item.id);
+			let active = entry ? entry.isIntersecting : item.active && !item.fallback;
+			if (this.single && hasActive) active = false;
+			let nextItem = item;
+			if (item.active !== active) nextItem = {
+				...item,
+				t: Date.now(),
+				active,
+				fallback: false
+			};
+			if (active) hasActive = true;
+			return nextItem;
+		});
+		if (!hasActive && entries[0].rootBounds) {
+			const viewTop = entries[0].rootBounds.top;
+			let min = Number.POSITIVE_INFINITY;
+			let fallbackIdx = -1;
+			for (let i = 0; i < updated.length; i++) {
 				const el = document.getElementById(updated[i].id);
 				if (!el) continue;
 				const distance = Math.abs(viewTop - el.getBoundingClientRect().top);
@@ -5361,246 +6705,1027 @@ function useObserver() {
 	return observer;
 }
 /**
-* Headless provider that drives the scrollspy. Use directly when you want to
-* render the visual ToC yourself (e.g. mobile drawer, custom layout).
+* Headless provider that drives the scrollspy. Use directly when you want to
+* render the visual ToC yourself (e.g. mobile drawer, custom layout).
+*/
+function TOCProvider({ items, single = false, rootMargin = "0px 0px -70% 0px", threshold = 0, children }) {
+	const observer = useMemo(() => new TocObserver(), []);
+	observer.single = single;
+	useEffect(() => {
+		observer.setItems(items);
+	}, [observer, items]);
+	useEffect(() => {
+		observer.watch({
+			rootMargin,
+			threshold
+		});
+		return () => observer.unwatch();
+	}, [
+		observer,
+		rootMargin,
+		threshold
+	]);
+	return /* @__PURE__ */ jsx(ObserverContext.Provider, {
+		value: observer,
+		children: /* @__PURE__ */ jsx(ItemsContext.Provider, {
+			value: items,
+			children
+		})
+	});
+}
+function useObserverState(select, isEqual = Object.is) {
+	const observer = useObserver();
+	const [value, setValue] = useState(() => select(observer.items));
+	const selectRef = useRef(select);
+	const isEqualRef = useRef(isEqual);
+	selectRef.current = select;
+	isEqualRef.current = isEqual;
+	useEffect(() => {
+		const listener = (items) => {
+			const next = selectRef.current(items);
+			setValue((prev) => isEqualRef.current(prev, next) ? prev : next);
+		};
+		observer.listen(listener);
+		return () => observer.unlisten(listener);
+	}, [observer]);
+	return value;
+}
+/** Returns the id of the most recently activated heading (best guess). */
+function useActiveAnchor() {
+	return useObserverState((items) => {
+		let best;
+		for (const item of items) {
+			if (!item.active) continue;
+			if (!best || item.t > best.t) best = item;
+		}
+		return best?.id;
+	});
+}
+/** Returns the ids of every currently active heading. */
+function useActiveAnchors() {
+	return useObserverState((items) => {
+		const out = [];
+		for (const item of items) if (item.active) out.push(item.id);
+		return out;
+	}, arraysShallowEqual);
+}
+/** Returns the static items list registered with the provider. */
+function useTOCItems() {
+	return useContext(ItemsContext);
+}
+function handleAnchorClick(e, id) {
+	const el = document.getElementById(id);
+	if (!el) return;
+	e.preventDefault();
+	el.scrollIntoView({
+		behavior: "smooth",
+		block: "start"
+	});
+	if (typeof window !== "undefined" && window.history) window.history.replaceState(null, "", `#${id}`);
+}
+function TocAnchor({ item }) {
+	const id = getIdFromUrl(item.url) ?? "";
+	const activeIds = useActiveAnchors();
+	const isActive = id ? activeIds.includes(id) : false;
+	const linksRef = useContext(LinksRefContext);
+	return /* @__PURE__ */ jsx("a", {
+		ref: useCallback((node) => {
+			if (!linksRef || !id) return;
+			if (node) linksRef.current.set(id, node);
+			else linksRef.current.delete(id);
+		}, [linksRef, id]),
+		href: item.url,
+		"data-active": isActive,
+		onClick: (e) => handleAnchorClick(e, id),
+		className: cn$1("py-1.5 text-sm transition-colors scroll-m-4 wrap-anywhere first:pt-0 last:pb-0", "text-[var(--dashboard-text-secondary,#6b7280)]", "hover:text-[var(--dashboard-text-primary,#2d2d2d)]", "data-[active=true]:text-[var(--dashboard-primary,#e74410)]", item.depth <= 2 && "pl-3", item.depth === 3 && "pl-6", item.depth >= 4 && "pl-8"),
+		children: item.title
+	});
+}
+function TocThumb({ computed }) {
+	const ref = useRef(null);
+	const observer = useObserver();
+	const calculate = useCallback((items) => {
+		const out = {};
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return out;
+		let endIdx = startIdx;
+		for (let i = items.length - 1; i >= startIdx; i--) if (items[i].active) {
+			endIdx = i;
+			break;
+		}
+		const startPos = computed.positions[startIdx];
+		const endPos = computed.positions[endIdx];
+		if (!startPos || !endPos) return out;
+		out["--track-top"] = `${startPos[0]}px`;
+		out["--track-bottom"] = `${endPos[1]}px`;
+		return out;
+	}, [computed]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const apply = (items) => {
+			const styles = calculate(items);
+			for (const [k, v] of Object.entries(styles)) el.style.setProperty(k, v);
+		};
+		apply(observer.items);
+		observer.listen(apply);
+		return () => observer.unlisten(apply);
+	}, [observer, calculate]);
+	const initialStyles = calculate(observer.items);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": true,
+		className: "absolute inset-y-0 left-0 w-px bg-[var(--dashboard-primary,#e74410)] transition-[clip-path]",
+		style: {
+			clipPath: "polygon(0 var(--track-top, 0), 100% var(--track-top, 0), 100% var(--track-bottom, 0), 0 var(--track-bottom, 0))",
+			...initialStyles
+		}
+	});
+}
+function TocList({ items, showThumb }) {
+	const containerRef = useRef(null);
+	const [computed, setComputed] = useState(null);
+	const recompute = useCallback(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		if (items.length === 0) {
+			setComputed(null);
+			return;
+		}
+		const positions = [];
+		for (const item of items) {
+			const el = container.querySelector(`a[href="${item.url}"]`);
+			if (!el) {
+				positions.push([0, 0]);
+				continue;
+			}
+			const styles = window.getComputedStyle(el);
+			const top = el.offsetTop + parseFloat(styles.paddingTop || "0");
+			const bottom = el.offsetTop + el.clientHeight - parseFloat(styles.paddingBottom || "0");
+			positions.push([top, bottom]);
+		}
+		setComputed({ positions });
+	}, [items]);
+	useLayoutEffect(() => {
+		recompute();
+	}, [recompute]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => recompute());
+		ro.observe(container);
+		return () => ro.disconnect();
+	}, [recompute]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [showThumb && computed && /* @__PURE__ */ jsx(TocThumb, { computed }), /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: "flex flex-col border-l border-[var(--dashboard-text-secondary,#6b7280)]/15",
+			children: items.map((item) => /* @__PURE__ */ jsx(TocAnchor, { item }, item.url))
+		})]
+	});
+}
+function ActiveChangeReporter({ onActiveChange }) {
+	const ids = useActiveAnchors();
+	const cbRef = useRef(onActiveChange);
+	cbRef.current = onActiveChange;
+	useEffect(() => {
+		cbRef.current(ids);
+	}, [ids]);
+	return null;
+}
+function ActiveScrollSync({ linksRef }) {
+	const activeId = useActiveAnchor();
+	useEffect(() => {
+		if (!activeId) return;
+		const link = linksRef.current.get(activeId);
+		if (!link) return;
+		const container = findScrollableParent(link);
+		if (container === document.documentElement) return;
+		scrollAnchorIntoView(link, container);
+	}, [activeId, linksRef]);
+	return null;
+}
+/**
+* Adapted from Fumadocs (MIT) — https://github.com/fuma-nama/fumadocs
+*
+* Scrollspy table of contents. Renders a sticky list of headings and tracks
+* which are visible in the viewport via IntersectionObserver. The active
+* range is highlighted with a thin animated bar (TocThumb).
 */
-function TOCProvider({ items, single = false, rootMargin = "0px 0px -70% 0px", threshold = 0, children }) {
-	const observer = useMemo(() => new TocObserver(), []);
-	observer.single = single;
-	useEffect(() => {
-		observer.setItems(items);
-	}, [observer, items]);
-	useEffect(() => {
-		observer.watch({
-			rootMargin,
-			threshold
-		});
-		return () => observer.unwatch();
-	}, [
-		observer,
+function TableOfContents({ items, title = "Nesta página", showThumb = true, single = false, rootMargin = "0px 0px -70% 0px", threshold = 0, className, onActiveChange }) {
+	const linksRef = useRef(/* @__PURE__ */ new Map());
+	return /* @__PURE__ */ jsx(TOCProvider, {
+		items,
+		single,
 		rootMargin,
-		threshold
-	]);
-	return /* @__PURE__ */ jsx(ObserverContext.Provider, {
-		value: observer,
-		children: /* @__PURE__ */ jsx(ItemsContext.Provider, {
-			value: items,
-			children
+		threshold,
+		children: /* @__PURE__ */ jsx(LinksRefContext.Provider, {
+			value: linksRef,
+			children: /* @__PURE__ */ jsxs("nav", {
+				"aria-label": typeof title === "string" ? title : "Sumário",
+				className: cn$1("text-sm", className),
+				children: [
+					title !== null && /* @__PURE__ */ jsxs("h3", {
+						className: "inline-flex items-center gap-1.5 text-sm font-medium mb-3 text-[var(--dashboard-text-primary,#2d2d2d)]",
+						children: [/* @__PURE__ */ jsx(Text, {
+							className: "h-4 w-4",
+							"aria-hidden": true
+						}), title]
+					}),
+					/* @__PURE__ */ jsx(TocList, {
+						items,
+						showThumb
+					}),
+					onActiveChange && /* @__PURE__ */ jsx(ActiveChangeReporter, { onActiveChange }),
+					/* @__PURE__ */ jsx(ActiveScrollSync, { linksRef })
+				]
+			})
 		})
 	});
 }
-function useObserverState(select, isEqual = Object.is) {
-	const observer = useObserver();
-	const [value, setValue] = useState(() => select(observer.items));
-	const selectRef = useRef(select);
-	const isEqualRef = useRef(isEqual);
-	selectRef.current = select;
-	isEqualRef.current = isEqual;
-	useEffect(() => {
-		const listener = (items) => {
-			const next = selectRef.current(items);
-			setValue((prev) => isEqualRef.current(prev, next) ? prev : next);
-		};
-		observer.listen(listener);
-		return () => observer.unlisten(listener);
-	}, [observer]);
-	return value;
+//#endregion
+//#region src/components/SocialIcon/index.tsx
+const socialIconNames = [
+	"whatsapp",
+	"instagram",
+	"linkedin",
+	"github",
+	"youtube"
+];
+const socialIconPaths = {
+	whatsapp: {
+		viewBox: "0 0 448 512",
+		path: "M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"
+	},
+	instagram: {
+		viewBox: "0 0 448 512",
+		path: "M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+	},
+	linkedin: {
+		viewBox: "0 0 448 512",
+		path: "M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+	},
+	github: {
+		viewBox: "0 0 496 512",
+		path: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+	},
+	youtube: {
+		viewBox: "0 0 576 512",
+		path: "M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+	}
+};
+function SocialIcon({ name, size = 24, title, fill = "currentColor", ...props }) {
+	const icon = socialIconPaths[name];
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: icon.viewBox,
+		fill,
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": title ? void 0 : true,
+		role: title ? "img" : void 0,
+		...props,
+		children: [title ? /* @__PURE__ */ jsx("title", { children: title }) : null, /* @__PURE__ */ jsx("path", { d: icon.path })]
+	});
 }
-/** Returns the id of the most recently activated heading (best guess). */
-function useActiveAnchor() {
-	return useObserverState((items) => {
-		let best;
-		for (const item of items) {
-			if (!item.active) continue;
-			if (!best || item.t > best.t) best = item;
-		}
-		return best?.id;
+function WhatsappIcon(props) {
+	return /* @__PURE__ */ jsx(SocialIcon, {
+		name: "whatsapp",
+		...props
+	});
+}
+function InstagramIcon(props) {
+	return /* @__PURE__ */ jsx(SocialIcon, {
+		name: "instagram",
+		...props
+	});
+}
+function LinkedinIcon(props) {
+	return /* @__PURE__ */ jsx(SocialIcon, {
+		name: "linkedin",
+		...props
+	});
+}
+function GithubIcon(props) {
+	return /* @__PURE__ */ jsx(SocialIcon, {
+		name: "github",
+		...props
+	});
+}
+function YoutubeIcon(props) {
+	return /* @__PURE__ */ jsx(SocialIcon, {
+		name: "youtube",
+		...props
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/utils.ts
+const cn = (...classes) => classes.filter(Boolean).join(" ");
+function getConversationInitials(participant) {
+	if (participant.initials) return participant.initials;
+	return (participant.name || participant.email || participant.phone || "?").split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+}
+function defaultConversationDateFormatter(value) {
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return "";
+	const diff = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
+	const day = 1440 * 60 * 1e3;
+	if (diff >= 0 && diff < day) return date.toLocaleTimeString("pt-BR", {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+	if (diff >= day && diff < day * 2) return "Ontem";
+	return date.toLocaleDateString("pt-BR", {
+		day: "2-digit",
+		month: "2-digit"
+	});
+}
+function defaultConversationTimeFormatter(value) {
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return "";
+	return date.toLocaleString("pt-BR", {
+		day: "2-digit",
+		month: "2-digit",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationAvatar.tsx
+function ConversationAvatar({ participant, size = "md", className }) {
+	const sizeClass = {
+		sm: "h-9 w-9 text-sm",
+		md: "h-11 w-11 text-base",
+		lg: "h-12 w-12 text-lg"
+	}[size];
+	if (participant.avatarUrl) return /* @__PURE__ */ jsx("img", {
+		src: participant.avatarUrl,
+		alt: participant.name,
+		className: cn("flex-shrink-0 rounded-full object-cover", sizeClass, className)
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-shrink-0 items-center justify-center rounded-full bg-[var(--dashboard-primary,#37a501)]/12 font-semibold text-[var(--dashboard-primary,#37a501)]", sizeClass, className),
+		children: getConversationInitials(participant)
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationComposer.tsx
+function ConversationComposer({ value = "", onChange, onSend, onAttachClick, onFileSelect, acceptedFileTypes, placeholder = "Digite sua mensagem...", disabled = false, sending = false, uploading = false, status = "active", inactiveLabel = "IA esta respondendo esta conversa", expiredLabel = "Janela de atendimento expirada. Envie um template para reabrir a conversa.", attachLabel = "Enviar arquivo", sendLabel = "Enviar mensagem", className }) {
+	const fileInputRef = useRef(null);
+	const isExpired = status === "expired";
+	const isAi = status === "ai";
+	const isDisabled = disabled || status === "disabled" || isExpired || isAi;
+	const canAttach = !!onAttachClick || !!onFileSelect;
+	if (isAi) return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-center gap-2 border-t border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] px-4 py-4 text-xs text-[var(--dashboard-text-secondary,#6b7280)]", className),
+		children: [/* @__PURE__ */ jsx(Bot, {
+			size: 16,
+			className: "text-[var(--dashboard-primary,#37a501)]"
+		}), inactiveLabel]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("border-t border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] px-4 py-3 sm:px-6", className),
+		children: [
+			isExpired && /* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-center gap-2 rounded-lg border border-[var(--dashboard-status-warning,#f59e0b)]/30 bg-[var(--dashboard-status-warning,#f59e0b)]/10 p-2 text-xs text-[var(--dashboard-status-warning,#f59e0b)]",
+				children: [/* @__PURE__ */ jsx(AlertTriangle, {
+					size: 16,
+					className: "flex-shrink-0"
+				}), /* @__PURE__ */ jsx("p", { children: expiredLabel })]
+			}),
+			onFileSelect && /* @__PURE__ */ jsx("input", {
+				ref: fileInputRef,
+				type: "file",
+				className: "hidden",
+				accept: acceptedFileTypes,
+				onChange: (event) => {
+					const file = event.target.files?.[0];
+					if (file) onFileSelect(file);
+					event.target.value = "";
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					canAttach && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							onAttachClick?.();
+							if (onFileSelect) fileInputRef.current?.click();
+						},
+						disabled: disabled || sending || uploading,
+						className: "inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg text-[var(--dashboard-text-secondary,#6b7280)] transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/10 hover:text-[var(--dashboard-primary,#37a501)] disabled:cursor-not-allowed disabled:opacity-50",
+						"aria-label": attachLabel,
+						children: uploading ? /* @__PURE__ */ jsx(Loader2, {
+							size: 18,
+							className: "animate-spin"
+						}) : /* @__PURE__ */ jsx(Paperclip, { size: 18 })
+					}),
+					/* @__PURE__ */ jsx("input", {
+						type: "text",
+						value,
+						onChange: (event) => onChange?.(event.target.value),
+						onKeyDown: (event) => {
+							if (event.key === "Enter" && !event.shiftKey) {
+								event.preventDefault();
+								if (!isDisabled && value.trim() && !sending) onSend?.();
+							}
+						},
+						placeholder: isExpired ? "Mensagens livres indisponiveis" : placeholder,
+						disabled: isDisabled || sending,
+						className: "h-10 min-w-0 flex-1 rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/25 bg-[var(--dashboard-surface,#ffffff)] px-4 text-sm text-[var(--dashboard-text-primary,#2d2d2d)] outline-none transition-colors focus:border-[var(--dashboard-primary,#37a501)] focus:ring-2 focus:ring-[var(--dashboard-primary,#37a501)]/20 disabled:cursor-not-allowed disabled:bg-[var(--dashboard-text-secondary,#6b7280)]/8 disabled:opacity-60"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onSend,
+						disabled: isDisabled || sending || !value.trim(),
+						className: "inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--dashboard-primary,#37a501)] text-white transition-colors hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50",
+						"aria-label": sendLabel,
+						children: sending ? /* @__PURE__ */ jsx(Loader2, {
+							size: 18,
+							className: "animate-spin"
+						}) : /* @__PURE__ */ jsx(Send, { size: 18 })
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationEventSeparator.tsx
+function ConversationEventSeparator({ label, description, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative flex w-full items-center gap-3 py-1", className),
+		title: typeof description === "string" ? description : void 0,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[var(--dashboard-text-secondary,#6b7280)]/25" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "whitespace-nowrap text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[var(--dashboard-text-secondary,#6b7280)]/25" }),
+			description && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute left-1/2 top-full z-10 mt-2 max-w-sm -translate-x-1/2 opacity-0 transition-opacity group-hover:opacity-100",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "rounded-lg bg-[var(--dashboard-text-primary,#2d2d2d)] px-3 py-2 text-xs text-[var(--dashboard-surface,#ffffff)] shadow-lg",
+					children: description
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationSupportBadge.tsx
+function ConversationSupportBadge({ status, label, className }) {
+	if (!status || status === "none") return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold", status === "requested" && "animate-pulse", status === "requested" ? "bg-[var(--dashboard-status-warning,#f59e0b)] text-white" : "bg-[var(--dashboard-primary,#37a501)] text-white", className),
+		children: label || (status === "requested" ? "Aguardando" : "Em suporte")
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationPreviewCard.tsx
+function ConversationPreviewCard({ item, selected = item.selected, onSelect, formatDate = defaultConversationDateFormatter, variant = "card", showContact = true, showMeta = true, showSupportBadge = true, showUnreadBadge = true, contentClassName, className }) {
+	const timeLabel = item.lastMessageLabel || (item.lastMessageAt ? formatDate(item.lastMessageAt) : void 0);
+	const compact = variant === "compact";
+	const list = variant === "list";
+	const content = /* @__PURE__ */ jsxs("div", {
+		className: cn("flex gap-3", compact ? "px-3 py-3" : "px-4 py-4", contentClassName),
+		children: [/* @__PURE__ */ jsx(ConversationAvatar, {
+			participant: item.participant,
+			size: compact ? "md" : "lg"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-1 flex items-start justify-between gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "truncate text-sm font-semibold text-[var(--dashboard-text-primary,#2d2d2d)]",
+							children: item.participant.name
+						}), showContact && (item.participant.phone || item.participant.email) && /* @__PURE__ */ jsx("p", {
+							className: "truncate text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+							children: item.participant.phone || item.participant.email
+						})]
+					}), timeLabel && /* @__PURE__ */ jsx("span", {
+						className: "flex-shrink-0 text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+						children: timeLabel
+					})]
+				}),
+				item.lastMessage && /* @__PURE__ */ jsx("p", {
+					className: cn("text-[var(--dashboard-text-secondary,#6b7280)]", compact ? "truncate text-xs" : "truncate text-sm"),
+					children: item.lastMessage
+				}),
+				(showMeta || showSupportBadge || showUnreadBadge) && /* @__PURE__ */ jsxs("div", {
+					className: "mt-2 flex items-center justify-between gap-2",
+					children: [showMeta ? /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+						children: typeof item.messageCount === "number" ? `${item.messageCount} mensagens` : item.meta
+					}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [showSupportBadge && /* @__PURE__ */ jsx(ConversationSupportBadge, {
+							status: item.supportStatus,
+							label: item.supportLabel
+						}), showUnreadBadge && !!item.unreadCount && item.unreadCount > 0 && /* @__PURE__ */ jsx("span", {
+							className: "inline-flex min-w-5 items-center justify-center rounded-full bg-[var(--dashboard-primary,#37a501)] px-1.5 py-0.5 text-xs font-semibold text-white",
+							children: item.unreadCount
+						})]
+					})]
+				})
+			]
+		})]
+	});
+	const itemClassName = cn("group w-full text-left transition-colors", onSelect && "hover:bg-[var(--dashboard-primary,#37a501)]/8", list ? selected ? "border-l-4 border-[var(--dashboard-primary,#37a501)] bg-[var(--dashboard-primary,#37a501)]/10" : item.supportStatus === "requested" ? "border-l-4 border-[var(--dashboard-status-warning,#f59e0b)] bg-[var(--dashboard-status-warning,#f59e0b)]/8" : item.supportStatus === "active" ? "border-l-4 border-[var(--dashboard-primary,#37a501)] bg-[var(--dashboard-primary,#37a501)]/5" : "border-l-4 border-transparent" : cn("rounded-lg border bg-[var(--dashboard-surface,#ffffff)] shadow-sm", compact ? "border-[var(--dashboard-text-secondary,#6b7280)]/15" : "border-[var(--dashboard-text-secondary,#6b7280)]/20", selected ? "border-[var(--dashboard-primary,#37a501)] ring-2 ring-[var(--dashboard-primary,#37a501)]/15" : item.supportStatus === "requested" ? "border-[var(--dashboard-status-warning,#f59e0b)]/35" : "hover:border-[var(--dashboard-primary,#37a501)]/35"), item.disabled && "cursor-not-allowed opacity-60", className);
+	if (onSelect) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: item.disabled,
+		onClick: () => onSelect(item),
+		className: itemClassName,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: itemClassName,
+		children: content
+	});
+}
+function ConversationListItem(props) {
+	return /* @__PURE__ */ jsx(ConversationPreviewCard, {
+		...props,
+		variant: "list"
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationSearch.tsx
+function ConversationSearch({ value = "", placeholder = "Buscar conversas...", onChange, onClear, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative w-full", className),
+		children: [
+			/* @__PURE__ */ jsx(Search, {
+				size: 18,
+				className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--dashboard-primary,#37a501)]/60"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "search",
+				value,
+				onChange: (event) => onChange?.(event.target.value),
+				placeholder,
+				className: "h-10 w-full rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/25 bg-[var(--dashboard-surface,#ffffff)] pl-10 pr-10 text-sm text-[var(--dashboard-text-primary,#2d2d2d)] outline-none transition-colors focus:border-[var(--dashboard-primary,#37a501)] focus:ring-2 focus:ring-[var(--dashboard-primary,#37a501)]/20"
+			}),
+			value && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClear || (() => onChange?.("")),
+				className: "absolute right-3 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--dashboard-text-secondary,#6b7280)] transition-colors hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 hover:text-[var(--dashboard-text-primary,#2d2d2d)]",
+				"aria-label": "Limpar busca",
+				children: /* @__PURE__ */ jsx(X, { size: 16 })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationList.tsx
+function ConversationList({ items, selectedId, searchValue = "", searchPlaceholder = "Buscar conversas...", onSearchChange, onClearSearch, onSelect, loading = false, emptyTitle = "Nenhuma conversa encontrada", emptyDescription, formatDate, className }) {
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cn("flex min-h-0 flex-col overflow-hidden border-r border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)]", className),
+		children: [(onSearchChange || searchValue) && /* @__PURE__ */ jsx("div", {
+			className: "flex h-20 shrink-0 items-center border-b border-[var(--dashboard-text-secondary,#6b7280)]/20 px-4",
+			children: /* @__PURE__ */ jsx(ConversationSearch, {
+				value: searchValue,
+				placeholder: searchPlaceholder,
+				onChange: onSearchChange,
+				onClear: onClearSearch,
+				className: "w-full"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "conversation-scrollbar min-h-0 flex-1 overflow-y-auto divide-y divide-[var(--dashboard-text-secondary,#6b7280)]/15",
+			children: loading ? /* @__PURE__ */ jsx("div", {
+				className: "flex h-full min-h-64 items-center justify-center p-6",
+				children: /* @__PURE__ */ jsx(Loading, {
+					size: "md",
+					text: "Carregando conversas..."
+				})
+			}) : items.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+				icon: /* @__PURE__ */ jsx(MessageCircle, { className: "h-8 w-8 text-[var(--dashboard-text-secondary,#6b7280)]" }),
+				title: emptyTitle,
+				description: emptyDescription
+			}) : items.map((item) => /* @__PURE__ */ jsx(ConversationPreviewCard, {
+				item,
+				selected: item.id === selectedId || item.selected,
+				onSelect,
+				formatDate,
+				variant: "list"
+			}, item.id))
+		})]
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationMediaPreview.tsx
+function ConversationMediaPreview({ message, onMediaOpen, className }) {
+	const { media, kind } = message;
+	if (kind === "loading-media") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2 py-2 text-sm opacity-75", className),
+		children: [/* @__PURE__ */ jsx(Loader2, {
+			size: 16,
+			className: "animate-spin"
+		}), /* @__PURE__ */ jsx("span", { children: message.pendingLabel || "Carregando midia..." })]
+	});
+	if (!media?.url) return null;
+	if (kind === "image") return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => onMediaOpen?.(message),
+		className: cn("block overflow-hidden rounded-md text-left", className),
+		children: /* @__PURE__ */ jsx("img", {
+			src: media.url,
+			alt: media.alt || media.fileName || "Imagem da conversa",
+			className: "max-h-64 max-w-full rounded-md object-contain",
+			loading: "lazy"
+		})
+	});
+	if (kind === "audio") return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-2", className),
+		children: [/* @__PURE__ */ jsx("audio", {
+			controls: true,
+			className: "max-w-full min-w-60",
+			children: /* @__PURE__ */ jsx("source", {
+				src: media.url,
+				type: media.mimeType || "audio/ogg"
+			})
+		}), message.content && /* @__PURE__ */ jsx("p", {
+			className: "text-xs italic opacity-70",
+			children: message.content
+		})]
+	});
+	if (kind === "video") return /* @__PURE__ */ jsx("video", {
+		controls: true,
+		className: cn("max-h-64 max-w-full rounded-md", className),
+		children: /* @__PURE__ */ jsx("source", {
+			src: media.url,
+			type: media.mimeType || "video/mp4"
+		})
+	});
+	return /* @__PURE__ */ jsxs("a", {
+		href: media.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: cn("flex items-center gap-2 rounded-md bg-current/10 px-3 py-2 transition-colors hover:bg-current/15", className),
+		children: [kind === "file" ? /* @__PURE__ */ jsx(FileText, { size: 18 }) : /* @__PURE__ */ jsx(Paperclip, { size: 18 }), /* @__PURE__ */ jsx("span", {
+			className: "max-w-52 truncate text-sm",
+			children: media.fileName || "Documento"
+		})]
+	});
+}
+//#endregion
+//#region src/components/ConversationPanel/ConversationMessageBubble.tsx
+function ConversationMessageBubble({ message, onMediaOpen, formatTime = defaultConversationTimeFormatter, className }) {
+	const kind = message.kind || "text";
+	const timeLabel = message.timestampLabel || (message.createdAt ? formatTime(message.createdAt) : void 0);
+	if (kind === "event") return /* @__PURE__ */ jsx(ConversationEventSeparator, {
+		label: message.eventLabel || message.content,
+		description: message.eventDescription,
+		className
+	});
+	if (message.direction === "system") return /* @__PURE__ */ jsx("div", {
+		className: cn("flex justify-center", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-lg rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-text-secondary,#6b7280)]/10 px-4 py-2 text-[var(--dashboard-text-primary,#2d2d2d)]",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "mb-1 text-xs font-medium text-[var(--dashboard-text-secondary,#6b7280)]",
+					children: message.authorLabel || "Sistema"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "text-sm",
+					children: message.content
+				}),
+				timeLabel && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+					children: timeLabel
+				})
+			]
+		})
+	});
+	if (kind === "interactive") return /* @__PURE__ */ jsx("div", {
+		className: cn("flex", message.direction === "outbound" ? "justify-end" : "justify-start", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-lg rounded-lg border border-[var(--dashboard-primary,#37a501)]/25 bg-[var(--dashboard-primary,#37a501)]/10 px-4 py-2",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: "mb-1 text-xs font-medium text-[var(--dashboard-primary,#37a501)]",
+					children: message.interactiveLabel || "Resposta"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium text-[var(--dashboard-text-primary,#2d2d2d)]",
+					children: message.interactiveTitle || message.content
+				}),
+				timeLabel && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+					children: timeLabel
+				})
+			]
+		})
+	});
+	const outbound = message.direction === "outbound";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex", outbound ? "justify-end" : "justify-start", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("max-w-[78%] rounded-lg px-4 py-3 text-sm shadow-sm", outbound ? "bg-[var(--dashboard-primary,#37a501)] text-white" : "border border-[var(--dashboard-text-secondary,#6b7280)]/18 bg-[var(--dashboard-surface,#ffffff)] text-[var(--dashboard-text-primary,#2d2d2d)]"),
+			children: [
+				message.authorLabel && /* @__PURE__ */ jsx("p", {
+					className: cn("mb-1 text-xs font-medium", outbound ? "text-white/75" : "text-[var(--dashboard-text-secondary,#6b7280)]"),
+					children: message.authorLabel
+				}),
+				kind !== "text" && /* @__PURE__ */ jsx(ConversationMediaPreview, {
+					message,
+					onMediaOpen
+				}),
+				kind === "text" && message.content && /* @__PURE__ */ jsx("div", {
+					className: "whitespace-pre-wrap break-words leading-relaxed",
+					children: message.content
+				}),
+				timeLabel && /* @__PURE__ */ jsx("p", {
+					className: cn("mt-1 text-xs", outbound ? "text-white/75" : "text-[var(--dashboard-text-secondary,#6b7280)]"),
+					children: timeLabel
+				})
+			]
+		})
 	});
 }
-/** Returns the ids of every currently active heading. */
-function useActiveAnchors() {
-	return useObserverState((items) => {
-		const out = [];
-		for (const item of items) if (item.active) out.push(item.id);
-		return out;
-	}, arraysShallowEqual);
-}
-/** Returns the static items list registered with the provider. */
-function useTOCItems() {
-	return useContext(ItemsContext);
-}
-function handleAnchorClick(e, id) {
-	const el = document.getElementById(id);
-	if (!el) return;
-	e.preventDefault();
-	el.scrollIntoView({
-		behavior: "smooth",
-		block: "start"
+//#endregion
+//#region src/components/ConversationPanel/ConversationThreadHeader.tsx
+function ConversationThreadHeader({ participant, stats, subtitle, supportStatus, supportLabel, onBack, onSettingsClick, actions, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-20 shrink-0 items-center border-b border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] px-4 sm:px-6", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center gap-3",
+			children: [
+				onBack && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onBack,
+					className: "inline-flex h-9 w-9 items-center justify-center rounded-full text-[var(--dashboard-primary,#37a501)] transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/10 md:hidden",
+					"aria-label": "Voltar para lista",
+					children: /* @__PURE__ */ jsx(ArrowLeft, { size: 18 })
+				}),
+				/* @__PURE__ */ jsx(ConversationAvatar, { participant }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-baseline gap-2",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "truncate text-sm font-semibold text-[var(--dashboard-text-primary,#2d2d2d)] sm:text-base",
+							children: participant.name
+						}), (participant.phone || participant.email) && /* @__PURE__ */ jsx("span", {
+							className: "truncate text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+							children: participant.phone || participant.email
+						})]
+					}), (subtitle || stats) && /* @__PURE__ */ jsx("p", {
+						className: "mt-0.5 text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+						children: subtitle || `${stats?.total ?? 0} mensagens · ${stats?.inbound ?? 0} recebidas · ${stats?.outbound ?? 0} enviadas`
+					})]
+				}),
+				onSettingsClick && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onSettingsClick,
+					className: "inline-flex h-8 w-8 items-center justify-center rounded-lg text-[var(--dashboard-text-secondary,#6b7280)] transition-colors hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 hover:text-[var(--dashboard-text-primary,#2d2d2d)]",
+					"aria-label": "Configurar conversa",
+					children: /* @__PURE__ */ jsx(Settings, { size: 16 })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ml-auto flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx(ConversationSupportBadge, {
+						status: supportStatus,
+						label: supportLabel
+					}), actions]
+				})
+			]
+		})
 	});
-	if (typeof window !== "undefined" && window.history) window.history.replaceState(null, "", `#${id}`);
 }
-function TocAnchor({ item }) {
-	const id = getIdFromUrl(item.url) ?? "";
-	const activeIds = useActiveAnchors();
-	const isActive = id ? activeIds.includes(id) : false;
-	const linksRef = useContext(LinksRefContext);
-	return /* @__PURE__ */ jsx("a", {
-		ref: useCallback((node) => {
-			if (!linksRef || !id) return;
-			if (node) linksRef.current.set(id, node);
-			else linksRef.current.delete(id);
-		}, [linksRef, id]),
-		href: item.url,
-		"data-active": isActive,
-		onClick: (e) => handleAnchorClick(e, id),
-		className: cn("py-1.5 text-sm transition-colors scroll-m-4 wrap-anywhere first:pt-0 last:pb-0", "text-[var(--dashboard-text-secondary,#6b7280)]", "hover:text-[var(--dashboard-text-primary,#2d2d2d)]", "data-[active=true]:text-[var(--dashboard-primary,#e74410)]", item.depth <= 2 && "pl-3", item.depth === 3 && "pl-6", item.depth >= 4 && "pl-8"),
-		children: item.title
+//#endregion
+//#region src/components/ConversationPanel/ConversationUnreadMarker.tsx
+function ConversationUnreadMarker({ label = "Novas mensagens", className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex w-full items-center gap-3", className),
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[var(--dashboard-primary,#37a501)]" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "whitespace-nowrap text-xs font-medium text-[var(--dashboard-primary,#37a501)]",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[var(--dashboard-primary,#37a501)]" })
+		]
 	});
 }
-function TocThumb({ computed }) {
-	const ref = useRef(null);
-	const observer = useObserver();
-	const calculate = useCallback((items) => {
-		const out = {};
-		const startIdx = items.findIndex((item) => item.active);
-		if (startIdx === -1) return out;
-		let endIdx = startIdx;
-		for (let i = items.length - 1; i >= startIdx; i--) if (items[i].active) {
-			endIdx = i;
-			break;
-		}
-		const startPos = computed.positions[startIdx];
-		const endPos = computed.positions[endIdx];
-		if (!startPos || !endPos) return out;
-		out["--track-top"] = `${startPos[0]}px`;
-		out["--track-bottom"] = `${endPos[1]}px`;
-		return out;
-	}, [computed]);
-	useEffect(() => {
-		const el = ref.current;
-		if (!el) return;
-		const apply = (items) => {
-			const styles = calculate(items);
-			for (const [k, v] of Object.entries(styles)) el.style.setProperty(k, v);
-		};
-		apply(observer.items);
-		observer.listen(apply);
-		return () => observer.unlisten(apply);
-	}, [observer, calculate]);
-	const initialStyles = calculate(observer.items);
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		"aria-hidden": true,
-		className: "absolute inset-y-0 left-0 w-px bg-[var(--dashboard-primary,#e74410)] transition-[clip-path]",
-		style: {
-			clipPath: "polygon(0 var(--track-top, 0), 100% var(--track-top, 0), 100% var(--track-bottom, 0), 0 var(--track-bottom, 0))",
-			...initialStyles
-		}
+//#endregion
+//#region src/components/ConversationPanel/ConversationThread.tsx
+function ConversationThread({ participant, messages = [], stats, loading = false, loadingLabel = "Carregando mensagens...", emptyTitle = "Selecione uma conversa", emptyDescription = "Escolha uma conversa na lista para visualizar as mensagens.", unreadMessageId, unreadLabel, headerActions, composer, supportStatus, supportLabel, onBack, onSettingsClick, onMediaOpen, formatTime, messagesContainerRef, className }) {
+	if (!participant) return /* @__PURE__ */ jsx("section", {
+		className: cn("flex min-h-0 flex-1 flex-col bg-[var(--dashboard-background,#f2f2f2)]", className),
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			icon: /* @__PURE__ */ jsx(MessageCircle, { className: "h-8 w-8 text-[var(--dashboard-primary,#37a501)]/60" }),
+			title: emptyTitle,
+			description: emptyDescription,
+			className: "h-full min-h-80 flex-1"
+		})
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("flex min-h-0 flex-1 flex-col bg-[var(--dashboard-background,#f2f2f2)]", className),
+		children: [
+			/* @__PURE__ */ jsx(ConversationThreadHeader, {
+				participant,
+				stats,
+				actions: headerActions,
+				supportStatus,
+				supportLabel,
+				onBack,
+				onSettingsClick
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: messagesContainerRef,
+				className: "conversation-scrollbar min-h-0 flex-1 space-y-4 overflow-y-auto p-4 sm:p-6",
+				children: loading ? /* @__PURE__ */ jsx("div", {
+					className: "flex h-full min-h-64 items-center justify-center",
+					children: /* @__PURE__ */ jsx(Loading, {
+						size: "md",
+						text: loadingLabel
+					})
+				}) : messages.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+					icon: /* @__PURE__ */ jsx(MessageCircle, { className: "h-8 w-8 text-[var(--dashboard-text-secondary,#6b7280)]" }),
+					title: "Nenhuma mensagem nesta conversa"
+				}) : messages.map((message) => /* @__PURE__ */ jsxs(React.Fragment, { children: [unreadMessageId === message.id && /* @__PURE__ */ jsx(ConversationUnreadMarker, { label: unreadLabel }), /* @__PURE__ */ jsx(ConversationMessageBubble, {
+					message,
+					onMediaOpen,
+					formatTime
+				})] }, message.id))
+			}),
+			composer
+		]
 	});
 }
-function TocList({ items, showThumb }) {
-	const containerRef = useRef(null);
-	const [computed, setComputed] = useState(null);
-	const recompute = useCallback(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		if (items.length === 0) {
-			setComputed(null);
-			return;
-		}
-		const positions = [];
-		for (const item of items) {
-			const el = container.querySelector(`a[href="${item.url}"]`);
-			if (!el) {
-				positions.push([0, 0]);
-				continue;
-			}
-			const styles = window.getComputedStyle(el);
-			const top = el.offsetTop + parseFloat(styles.paddingTop || "0");
-			const bottom = el.offsetTop + el.clientHeight - parseFloat(styles.paddingBottom || "0");
-			positions.push([top, bottom]);
-		}
-		setComputed({ positions });
-	}, [items]);
-	useLayoutEffect(() => {
-		recompute();
-	}, [recompute]);
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container || typeof ResizeObserver === "undefined") return;
-		const ro = new ResizeObserver(() => recompute());
-		ro.observe(container);
-		return () => ro.disconnect();
-	}, [recompute]);
+//#endregion
+//#region src/components/ConversationPanel/ConversationLayout.tsx
+function ConversationLayout({ title = "Conversas", subtitle, hideHeader = false, connected, conversations, selectedId, selectedParticipant, messages, stats, searchValue, onSearchChange, onClearSearch, onSelectConversation, listLoading, threadLoading, threadActions, composer, supportStatus, supportLabel, unreadMessageId, unreadLabel, onBack, onSettingsClick, onMediaOpen, formatListDate, formatMessageTime, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		children: [showThumb && computed && /* @__PURE__ */ jsx(TocThumb, { computed }), /* @__PURE__ */ jsx("div", {
-			ref: containerRef,
-			className: "flex flex-col border-l border-[var(--dashboard-text-secondary,#6b7280)]/15",
-			children: items.map((item) => /* @__PURE__ */ jsx(TocAnchor, { item }, item.url))
-		})]
+		className: cn("conversation-panel flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)]", className),
+		children: [
+			/* @__PURE__ */ jsx("style", { children: `
+        .conversation-panel .conversation-scrollbar {
+          scrollbar-color: var(--dashboard-primary,#37a501) color-mix(in srgb, var(--dashboard-primary,#37a501) 12%, transparent);
+          scrollbar-width: thin;
+        }
+        .conversation-panel .conversation-scrollbar::-webkit-scrollbar {
+          width: 0.5rem;
+          height: 0.5rem;
+        }
+        .conversation-panel .conversation-scrollbar::-webkit-scrollbar-track {
+          background: color-mix(in srgb, var(--dashboard-primary,#37a501) 10%, transparent);
+          border-radius: 999px;
+        }
+        .conversation-panel .conversation-scrollbar::-webkit-scrollbar-thumb {
+          background: var(--dashboard-primary,#37a501);
+          border-radius: 999px;
+        }
+        .conversation-panel .conversation-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: color-mix(in srgb, var(--dashboard-primary,#37a501) 84%, var(--dashboard-text-primary,#2d2d2d));
+        }
+      ` }),
+			!hideHeader && (title || subtitle || typeof connected === "boolean") && /* @__PURE__ */ jsxs("div", {
+				className: "border-b border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] px-4 py-4 sm:px-6",
+				children: [(title || typeof connected === "boolean") && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [title && /* @__PURE__ */ jsx("h1", {
+						className: "text-xl font-bold text-[var(--dashboard-text-primary,#2d2d2d)]",
+						children: title
+					}), typeof connected === "boolean" && /* @__PURE__ */ jsx("span", {
+						className: cn("h-2 w-2 rounded-full", connected ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/40"),
+						title: connected ? "Conectado em tempo real" : "Desconectado"
+					})]
+				}), subtitle && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-[var(--dashboard-text-secondary,#6b7280)]",
+					children: subtitle
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1 overflow-hidden",
+				children: [/* @__PURE__ */ jsx(ConversationList, {
+					items: conversations,
+					selectedId,
+					searchValue,
+					onSearchChange,
+					onClearSearch,
+					onSelect: onSelectConversation,
+					loading: listLoading,
+					formatDate: formatListDate,
+					className: cn("w-full md:flex md:w-80 lg:w-96", selectedParticipant ? "hidden md:flex" : "flex")
+				}), /* @__PURE__ */ jsx(ConversationThread, {
+					participant: selectedParticipant,
+					messages,
+					stats,
+					loading: threadLoading,
+					headerActions: threadActions,
+					composer,
+					supportStatus,
+					supportLabel,
+					unreadMessageId,
+					unreadLabel,
+					onBack,
+					onSettingsClick,
+					onMediaOpen,
+					formatTime: formatMessageTime,
+					className: cn(selectedParticipant ? "flex" : "hidden md:flex")
+				})]
+			})
+		]
 	});
 }
-function ActiveChangeReporter({ onActiveChange }) {
-	const ids = useActiveAnchors();
-	const cbRef = useRef(onActiveChange);
-	cbRef.current = onActiveChange;
-	useEffect(() => {
-		cbRef.current(ids);
-	}, [ids]);
-	return null;
-}
-function ActiveScrollSync({ linksRef }) {
-	const activeId = useActiveAnchor();
-	useEffect(() => {
-		if (!activeId) return;
-		const link = linksRef.current.get(activeId);
-		if (!link) return;
-		const container = findScrollableParent(link);
-		if (container === document.documentElement) return;
-		scrollAnchorIntoView(link, container);
-	}, [activeId, linksRef]);
-	return null;
+function ConversationPanel(props) {
+	return /* @__PURE__ */ jsx(ConversationLayout, { ...props });
 }
-/**
-* Adapted from Fumadocs (MIT) — https://github.com/fuma-nama/fumadocs
-*
-* Scrollspy table of contents. Renders a sticky list of headings and tracks
-* which are visible in the viewport via IntersectionObserver. The active
-* range is highlighted with a thin animated bar (TocThumb).
-*/
-function TableOfContents({ items, title = "Nesta página", showThumb = true, single = false, rootMargin = "0px 0px -70% 0px", threshold = 0, className, onActiveChange }) {
-	const linksRef = useRef(/* @__PURE__ */ new Map());
-	return /* @__PURE__ */ jsx(TOCProvider, {
-		items,
-		single,
-		rootMargin,
-		threshold,
-		children: /* @__PURE__ */ jsx(LinksRefContext.Provider, {
-			value: linksRef,
-			children: /* @__PURE__ */ jsxs("nav", {
-				"aria-label": typeof title === "string" ? title : "Sumário",
-				className: cn("text-sm", className),
-				children: [
-					title !== null && /* @__PURE__ */ jsxs("h3", {
-						className: "inline-flex items-center gap-1.5 text-sm font-medium mb-3 text-[var(--dashboard-text-primary,#2d2d2d)]",
-						children: [/* @__PURE__ */ jsx(Text, {
-							className: "h-4 w-4",
-							"aria-hidden": true
-						}), title]
-					}),
-					/* @__PURE__ */ jsx(TocList, {
-						items,
-						showThumb
-					}),
-					onActiveChange && /* @__PURE__ */ jsx(ActiveChangeReporter, { onActiveChange }),
-					/* @__PURE__ */ jsx(ActiveScrollSync, { linksRef })
-				]
+//#endregion
+//#region src/components/ConversationPanel/ConversationSupportActions.tsx
+function ConversationSupportActions({ status, stats, reason, startLabel = "Assumir conversa", endLabel = "Encerrar atendimento", endSilentLabel = "Encerrar sem notificar", onStart, onEnd, onEndSilent, startDisabled, endDisabled, endSilentDisabled, activeActions, inactiveActions, className }) {
+	if (status === "active") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [
+			activeActions,
+			onEndSilent && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onEndSilent,
+				disabled: endSilentDisabled,
+				className: "rounded-lg bg-[var(--dashboard-text-secondary,#6b7280)] px-4 py-2 text-sm font-medium text-white transition-colors hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50",
+				children: endSilentLabel
+			}),
+			onEnd && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onEnd,
+				disabled: endDisabled,
+				className: "rounded-lg bg-[var(--dashboard-status-danger,#ef4444)] px-4 py-2 text-sm font-medium text-white transition-colors hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50",
+				children: endLabel
 			})
-		})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-3", className),
+		children: [
+			inactiveActions,
+			(stats || reason) && /* @__PURE__ */ jsxs("div", {
+				className: "text-right",
+				children: [stats && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", {
+					className: "text-xs font-medium text-[var(--dashboard-primary,#37a501)]",
+					children: [stats.total ?? 0, " mensagens"]
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+					children: [
+						stats.inbound ?? 0,
+						" recebidas · ",
+						stats.outbound ?? 0,
+						" enviadas"
+					]
+				})] }), reason && /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-xs text-[var(--dashboard-status-warning,#f59e0b)]",
+					children: reason
+				})]
+			}),
+			onStart && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onStart,
+				disabled: startDisabled,
+				className: "rounded-lg bg-[var(--dashboard-primary,#37a501)] px-4 py-2 text-sm font-medium text-white transition-colors hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50",
+				children: startLabel
+			})
+		]
 	});
 }
+//#endregion
+//#region src/components/ConversationPanel/index.ts
+const conversationMessageIcons = {
+	image: Image,
+	audio: Mic,
+	video: PlaySquare,
+	file: FileText
+};
 //#endregion
 //#region src/config/defaults.ts
 const defaultConfig = {
@@ -5895,5 +8020,5 @@ const modalSizes = {
 };
 //#endregion
-export { Alert, AuthLayout, BadgeStatus, Breadcrumb, Button, Callout, Card, Checkbox, CodeBlock, CodeInput, Combobox, ComparisonLineChart, DashboardProvider, DataGrid, DatePicker, DateRangePicker, DoughnutChart, Dropdown, EmptyState, FileUpload, FilterBar, FormField, Header, HorizontalBarChart, InfoTooltip, Input, KPICard, Loading, LoadingProvider, MetricPanel, Modal, NotificationsProvider, PageLayout, Pagination, ProgressBarList, Sidebar, Skeleton, StatusBadge, Stepper, TOCProvider, Table, TableBody, TableEmpty, TableHeader, TableOfContents, TableSkeleton, Tabs, ThemeProvider, ThemeSwitcher, Title, Toast, ToggleSwitch, Tooltip, TreeView, VerticalBarChart, badgeSizes, componentSizes, createColumnHelper, createConfig, defaultConfig, modalSizes, useActiveAnchor, useActiveAnchors, useConfig, useLoading, useNotifications, useTOCItems, useTheme };
+export { Alert, AuthLayout, BadgeStatus, Breadcrumb, Button, Callout, Card, Checkbox, CodeBlock, CodeInput, Combobox, ComparisonLineChart, ConversationAvatar, ConversationComposer, ConversationEventSeparator, ConversationLayout, ConversationList, ConversationListItem, ConversationMediaPreview, ConversationMessageBubble, ConversationPanel, ConversationPreviewCard, ConversationSearch, ConversationSupportActions, ConversationSupportBadge, ConversationThread, ConversationThreadHeader, ConversationUnreadMarker, DashboardProvider, DataGrid, DatePicker, DateRangePicker, DoughnutChart, Dropdown, EmptyState, FileUpload, FilterBar, FormField, GithubIcon, Header, HorizontalBarChart, IPhoneMockup, InfoTooltip, Input, InstagramIcon, KPICard, LinkedinIcon, Loading, LoadingProvider, MetricPanel, Modal, NotificationsProvider, PageLayout, Pagination, ProgressBarList, Sidebar, Skeleton, SocialIcon, StatusBadge, Stepper, TOCProvider, Table, TableBody, TableEmpty, TableHeader, TableOfContents, TableSkeleton, Tabs, ThemeProvider, ThemeSwitcher, Title, Toast, ToggleSwitch, Tooltip, TreeView, VerticalBarChart, WhatsAppMockup, WhatsappIcon, YoutubeIcon, badgeSizes, componentSizes, conversationMessageIcons, createColumnHelper, createConfig, defaultConfig, modalSizes, socialIconNames, socialIconPaths, useActiveAnchor, useActiveAnchors, useConfig, useLoading, useNotifications, useTOCItems, useTheme };
 //# sourceMappingURL=index.mjs.map