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

@tree-ia/design-system 1.6.0 → 2.2.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, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, 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, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Copy, File, GripVertical, Image, Inbox, Info, Lightbulb, LogOut, Monitor, Moon, Search, ShieldAlert, Sun, Upload, User, X, XCircle } from "lucide-react";
+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 { 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$32 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$35 = (...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 = {
@@ -45,18 +45,18 @@ function Button({ children, variant = "primary", size = "md", isLoading = false,
 		ghost: "bg-transparent hover:bg-[var(--dashboard-text-secondary,#64748B)]/8 text-[var(--dashboard-text-primary,#0F172A)]"
 	};
 	const sizeStyles = {
-		sm: "px-2 py-1 text-xs sm:px-3 sm:py-1.5 sm:text-sm",
-		md: "px-3 py-1.5 text-sm sm:px-4 sm:py-2 sm:text-base",
-		lg: "px-4 py-2 text-base sm:px-6 sm:py-3 sm:text-lg"
+		sm: "h-8 px-2 text-xs sm:px-3 sm:text-sm",
+		md: "h-9 px-3 text-sm sm:px-4 sm:text-base",
+		lg: "h-10 px-4 text-base sm:px-6 sm:text-lg"
 	};
 	const iconOnlySizeStyles = {
-		sm: "w-7 h-7 sm:w-8 sm:h-8",
-		md: "w-9 h-9 sm:w-10 sm:h-10",
-		lg: "w-10 h-10 sm:w-12 sm:h-12"
+		sm: "h-8 w-8",
+		md: "h-9 w-9",
+		lg: "h-10 w-10"
 	};
 	const isIconOnly = !!icon && (children === void 0 || children === null || typeof children === "string" && children.trim() === "");
 	return /* @__PURE__ */ jsx("button", {
-		className: cn$32(baseStyles, variantStyles[variant], isIconOnly ? iconOnlySizeStyles[size] : sizeStyles[size], className),
+		className: cn$35(baseStyles, variantStyles[variant], isIconOnly ? iconOnlySizeStyles[size] : sizeStyles[size], className),
 		disabled: disabled || isLoading,
 		...props,
 		children: isLoading ? /* @__PURE__ */ jsxs("span", {
@@ -81,8 +81,13 @@ function Button({ children, variant = "primary", size = "md", isLoading = false,
 //#endregion
 //#region src/components/Input/index.tsx
-const cn$31 = (...classes) => classes.filter(Boolean).join(" ");
-const Input = React.forwardRef(({ className, type = "text", label, error, children, id, ...props }, ref) => {
+const cn$34 = (...classes) => classes.filter(Boolean).join(" ");
+const sizeStyles = {
+	sm: "h-8 px-2.5 text-xs",
+	md: "h-9 px-3 text-sm",
+	lg: "h-10 px-4 text-base"
+};
+const Input = React.forwardRef(({ className, type = "text", label, error, children, id, size = "md", ...props }, ref) => {
 	const inputId = id || (label ? `input-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full",
@@ -97,7 +102,7 @@ const Input = React.forwardRef(({ className, type = "text", label, error, childr
 				children: [/* @__PURE__ */ jsx("input", {
 					type,
 					id: inputId,
-					className: cn$31("flex h-10 w-full rounded-md border border-[var(--dashboard-text-secondary,#6b7280)]/30 bg-[var(--dashboard-surface,#ffffff)] px-3 py-2 text-sm 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", error ? "border-[var(--dashboard-status-danger,#EF4444)] focus:border-[var(--dashboard-status-danger,#EF4444)]" : void 0, children ? "pr-10" : void 0, className),
+					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),
 					ref,
 					...props
 				}), children && /* @__PURE__ */ jsx("div", {
@@ -116,7 +121,7 @@ Input.displayName = "Input";
 //#endregion
 //#region src/components/Dropdown/index.tsx
-function Dropdown({ options, value, onChange, label, placeholder = "Selecione uma opção", disabled = false, className = "", containerClassName = "", fullWidth = false, size = "medium", error, variant = "default", customDropdownHeight, icon, fitContent = false, isActive = false }) {
+function Dropdown({ options, value, onChange, label, placeholder = "Selecione uma opção", disabled = false, className = "", containerClassName = "", fullWidth = false, size = "md", error, variant = "default", customDropdownHeight, icon, fitContent = false, isActive = false }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isVisible, setIsVisible] = useState(false);
 	const [position, setPosition] = useState({
@@ -127,23 +132,23 @@ function Dropdown({ options, value, onChange, label, placeholder = "Selecione um
 	const dropdownRef = useRef(null);
 	const selectedOption = options.find((option) => option.value === value);
 	const selectedStyle = {
-		small: {
-			container: "h-8 px-2",
+		sm: {
+			container: "h-8 px-2.5",
 			text: "text-xs",
 			wrapper: "space-y-1",
 			label: "text-sm",
 			iconPadding: "pl-8"
 		},
-		medium: {
-			container: "h-10 px-3",
+		md: {
+			container: "h-9 px-3",
 			text: "text-sm",
 			wrapper: "space-y-2",
 			label: "text-base",
 			iconPadding: "pl-10"
 		},
-		large: {
-			container: "h-12 px-4",
-			text: "text-lg",
+		lg: {
+			container: "h-10 px-4",
+			text: "text-base",
 			wrapper: "space-y-3",
 			label: "text-lg",
 			iconPadding: "pl-12"
@@ -362,13 +367,14 @@ function TableEmpty({ message, icon }) {
 //#region src/components/Modal/index.tsx
 const ANIMATION_MS = 200;
 const sizeClasses$2 = {
-	small: "max-w-sm",
-	medium: "max-w-md",
-	large: "max-w-lg",
-	largeXl: "max-w-4xl",
-	extraLarge: "max-w-screen-xl"
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-2xl",
+	"2xl": "max-w-4xl",
+	"3xl": "max-w-screen-xl"
 };
-function Modal({ isOpen, onClose, onSave, title = "", children, showFooter = false, saveButtonText = "Salvar", cancelButtonText = "Cancelar", size = "medium", disableSaveButton = false, saveButtonVariant = "primary", closeOnEscape = true, closeOnOverlayClick = true }) {
+function Modal({ isOpen, onClose, onSave, title = "", children, showFooter = false, saveButtonText = "Salvar", cancelButtonText = "Cancelar", size = "md", disableSaveButton = false, saveButtonVariant = "primary", closeOnEscape = true, closeOnOverlayClick = true }) {
 	const [shouldRender, setShouldRender] = useState(false);
 	const modalRef = useRef(null);
 	if (isOpen && !shouldRender) setShouldRender(true);
@@ -619,7 +625,7 @@ function Pagination({ currentPage, totalPages, onPageChange, itemsPerPage, total
 					options: dropdownOptions,
 					value: String(itemsPerPage),
 					onChange: (val) => onItemsPerPageChange(Number(val)),
-					size: "small",
+					size: "sm",
 					variant: "compact",
 					fitContent: true
 				}), /* @__PURE__ */ jsx("span", {
@@ -751,16 +757,16 @@ function FormField({ label, name, type = "text", value, onChange, error, require
 //#endregion
 //#region src/components/Tabs/index.tsx
-const cn$30 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$33 = (...classes) => classes.filter(Boolean).join(" ");
 function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 	if (variant === "pill") return /* @__PURE__ */ jsx("div", {
-		className: cn$30("flex flex-wrap gap-2", className),
+		className: cn$33("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$30("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$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"),
 				role: "tab",
 				"aria-selected": isActive,
 				children: [
@@ -770,7 +776,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 					}),
 					tab.label,
 					tab.count !== void 0 && /* @__PURE__ */ jsx("span", {
-						className: cn$30("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$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)]"),
 						children: tab.count
 					})
 				]
@@ -778,7 +784,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$30("border-b border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$33("border-b border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
 		children: /* @__PURE__ */ jsx("nav", {
 			className: "flex gap-6",
 			"aria-label": "Tabs",
@@ -786,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$30("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$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"),
 					role: "tab",
 					"aria-selected": isActive,
 					children: [
@@ -796,7 +802,7 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 						}),
 						tab.label,
 						tab.count !== void 0 && /* @__PURE__ */ jsx("span", {
-							className: cn$30("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$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)]"),
 							children: tab.count
 						})
 					]
@@ -808,8 +814,8 @@ function Tabs({ tabs, activeTab, onChange, variant = "underline", className }) {
 //#endregion
 //#region src/components/DateRangePicker/index.tsx
-const cn$29 = (...classes) => classes.filter(Boolean).join(" ");
-const locales = {
+const cn$32 = (...classes) => classes.filter(Boolean).join(" ");
+const locales$1 = {
 	pt: {
 		months: [
 			"Janeiro",
@@ -867,7 +873,7 @@ const locales = {
 };
 function DateRangePicker({ value, onChange, locale = "pt", className }) {
 	const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
-	const l = locales[locale];
+	const l = locales$1[locale];
 	const getDaysInMonth = (date) => {
 		const year = date.getFullYear();
 		const month = date.getMonth();
@@ -915,7 +921,7 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
 	};
 	const days = getDaysInMonth(currentMonth);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$29("w-64 bg-[var(--dashboard-surface,#ffffff)] rounded-lg p-4 shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		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),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between mb-4",
 			children: [
@@ -953,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$29("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$32("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$29("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$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"),
 						children: day
 					})]
 				}, day);
@@ -964,9 +970,157 @@ function DateRangePicker({ value, onChange, locale = "pt", className }) {
 	});
 }
+//#endregion
+//#region src/components/DatePicker/index.tsx
+const cn$31 = (...classes) => classes.filter(Boolean).join(" ");
+const locales = {
+	pt: {
+		months: [
+			"Janeiro",
+			"Fevereiro",
+			"Março",
+			"Abril",
+			"Maio",
+			"Junho",
+			"Julho",
+			"Agosto",
+			"Setembro",
+			"Outubro",
+			"Novembro",
+			"Dezembro"
+		],
+		weekDays: [
+			"D",
+			"S",
+			"T",
+			"Q",
+			"Q",
+			"S",
+			"S"
+		],
+		prevMonth: "Mês anterior",
+		nextMonth: "Próximo mês"
+	},
+	en: {
+		months: [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		],
+		weekDays: [
+			"S",
+			"M",
+			"T",
+			"W",
+			"T",
+			"F",
+			"S"
+		],
+		prevMonth: "Previous month",
+		nextMonth: "Next month"
+	}
+};
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+function DatePicker({ value, onChange, locale = "pt", minDate, maxDate, className }) {
+	const [currentMonth, setCurrentMonth] = useState(value ?? /* @__PURE__ */ new Date());
+	const l = locales[locale];
+	const getDaysInMonth = (date) => {
+		const year = date.getFullYear();
+		const month = date.getMonth();
+		const firstDay = new Date(year, month, 1);
+		const daysInMonth = new Date(year, month + 1, 0).getDate();
+		const startDayOfWeek = firstDay.getDay();
+		const days = [];
+		for (let i = 0; i < startDayOfWeek; i++) days.push(null);
+		for (let i = 1; i <= daysInMonth; i++) days.push(i);
+		return days;
+	};
+	const buildDate = (day) => new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+	const isDisabled = (day) => {
+		const date = buildDate(day);
+		if (minDate && date < startOfDay(minDate)) return true;
+		if (maxDate && date > startOfDay(maxDate)) return true;
+		return false;
+	};
+	const isSelected = (day) => {
+		if (!value) return false;
+		return buildDate(day).getTime() === startOfDay(value).getTime();
+	};
+	const handleDayClick = (day) => {
+		if (isDisabled(day)) return;
+		onChange(buildDate(day));
+	};
+	const previousMonth = () => {
+		setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
+	};
+	const nextMonth = () => {
+		setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
+	};
+	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),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between mb-4",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: previousMonth,
+					className: "p-1 hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 rounded transition-colors cursor-pointer",
+					"aria-label": l.prevMonth,
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4 text-[var(--dashboard-text-primary,#2d2d2d)]" })
+				}),
+				/* @__PURE__ */ jsxs("h2", {
+					className: "text-base font-semibold text-[var(--dashboard-text-primary,#2d2d2d)]",
+					children: [
+						l.months[currentMonth.getMonth()],
+						" ",
+						currentMonth.getFullYear()
+					]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: nextMonth,
+					className: "p-1 hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10 rounded transition-colors cursor-pointer",
+					"aria-label": l.nextMonth,
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-[var(--dashboard-text-primary,#2d2d2d)]" })
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "grid grid-cols-7",
+			children: [l.weekDays.map((day, index) => /* @__PURE__ */ jsx("div", {
+				className: "h-8 w-8 flex items-center justify-center text-xs font-medium text-[var(--dashboard-text-secondary,#6b7280)]",
+				children: day
+			}, index)), days.map((day, index) => {
+				if (day === null) return /* @__PURE__ */ jsx("div", { className: "h-8 w-8" }, `empty-${index}`);
+				const selected = isSelected(day);
+				const disabled = isDisabled(day);
+				return /* @__PURE__ */ jsx("div", {
+					className: "relative h-8 w-8",
+					children: /* @__PURE__ */ jsx("button", {
+						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"),
+						children: day
+					})
+				}, day);
+			})]
+		})]
+	});
+}
 //#endregion
 //#region src/components/Title/index.tsx
-const cn$28 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$30 = (...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",
@@ -1001,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$28(sizeClass, weightStyles[weight], alignStyles[align], colorClass, className),
+		className: cn$30(sizeClass, weightStyles[weight], alignStyles[align], colorClass, className),
 		...props,
 		children
 	});
@@ -1009,7 +1163,7 @@ function Title({ children, level = 1, size, weight = "bold", align = "left", col
 //#endregion
 //#region src/components/ToggleSwitch/index.tsx
-const cn$27 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$29 = (...classes) => classes.filter(Boolean).join(" ");
 const sizeConfig$1 = {
 	sm: {
 		track: "h-5 w-9",
@@ -1033,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$27("inline-flex items-center gap-2", className),
+		className: cn$29("inline-flex items-center gap-2", className),
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
 			role: "switch",
@@ -1041,10 +1195,10 @@ function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label,
 			"aria-label": label,
 			disabled,
 			onClick: () => onChange(!enabled),
-			className: cn$27("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$27("inline-block transform rounded-full bg-white shadow-sm transition-transform", config.thumb, enabled ? config.translateOn : config.translateOff) })
+			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) })
 		}), label && /* @__PURE__ */ jsx("span", {
-			className: cn$27("text-sm text-[var(--dashboard-text-primary,#2d2d2d)]", disabled && "opacity-50"),
+			className: cn$29("text-sm text-[var(--dashboard-text-primary,#2d2d2d)]", disabled && "opacity-50"),
 			children: label
 		})]
 	});
@@ -1052,7 +1206,7 @@ function ToggleSwitch({ enabled, onChange, disabled = false, size = "md", label,
 //#endregion
 //#region src/components/BadgeStatus/index.tsx
-const cn$26 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$28 = (...classes) => classes.filter(Boolean).join(" ");
 const variantStyles = {
 	success: {
 		color: "text-[var(--dashboard-status-success,#10B981)]",
@@ -1083,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$26("inline-flex items-center rounded-full font-medium whitespace-nowrap", sizeClasses$1[size], !useCustomColors && styles.color, !useCustomColors && styles.bgColor, className),
+		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),
 		style: useCustomColors ? {
 			color: color || void 0,
 			backgroundColor: bgColor || void 0
@@ -1094,15 +1248,15 @@ function BadgeStatus({ label, variant = "neutral", color, bgColor, size = "md",
 //#endregion
 //#region src/components/Sidebar/index.tsx
-const cn$25 = (...classes) => classes.filter(Boolean).join(" ");
-function DefaultLink({ href, className, children }) {
+const cn$27 = (...classes) => classes.filter(Boolean).join(" ");
+function DefaultLink$1({ href, className, children }) {
 	return /* @__PURE__ */ jsx("a", {
 		href,
 		className,
 		children
 	});
 }
-function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: LinkComponent = DefaultLink, isCollapsed = false, onToggleCollapse, user, onUserClick, onLogout, logoutLabel = "Sair", footerItems, footerSlot, defaultExpandedIds, persistExpandedKey, className }) {
+function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: LinkComponent = DefaultLink$1, isCollapsed = false, onToggleCollapse, user, onUserClick, onLogout, logoutLabel = "Sair", footerItems, footerSlot, defaultExpandedIds, persistExpandedKey, showMobileHeader = true, className }) {
 	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 	const [expandedIds, setExpandedIds] = useState(() => new Set(defaultExpandedIds ?? []));
 	const cubicBezier = "cubic-bezier(0.4, 0, 0.2, 1)";
@@ -1170,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$25("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$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"),
 			style: { transition: "background-color 200ms, color 200ms" },
 			title: collapsed && !mobile ? item.label : void 0,
 			children: [/* @__PURE__ */ jsx(Icon, {
@@ -1185,7 +1339,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				children: item.label
 			}), /* @__PURE__ */ jsx(ChevronRight, {
 				size: 14,
-				className: cn$25("ml-auto flex-shrink-0 transition-transform duration-200", isExpanded ? "rotate-90" : "")
+				className: cn$27("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)]",
@@ -1197,7 +1351,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 					href: child.href,
 					className: "block",
 					children: /* @__PURE__ */ jsxs("div", {
-						className: cn$25("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$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)]"),
 						style: { transition: "background-color 200ms, color 200ms" },
 						children: [/* @__PURE__ */ jsx(ChildIcon, {
 							size: 15,
@@ -1214,7 +1368,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			href: item.href,
 			className: "block",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cn$25("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$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"),
 				style: { transition: "background-color 200ms, color 200ms" },
 				title: collapsed && !mobile ? item.label : void 0,
 				children: [/* @__PURE__ */ jsx(Icon, {
@@ -1242,7 +1396,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 			children: [group.section && renderSectionHeader(group.section, collapsed), group.items.map((item) => renderMenuItem(item, collapsed, mobile))]
 		}, group.section || `group-${i}`));
 	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("header", {
+	const mobileHeader = /* @__PURE__ */ jsxs("header", {
 		className: "xl:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--dashboard-sidebar-bg,#f0f0f0)] border-b border-[var(--dashboard-sidebar-border,#e0dfe3)]",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-center px-4 h-16 relative",
@@ -1307,8 +1461,9 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				})]
 			})
 		})]
-	}), /* @__PURE__ */ jsxs("aside", {
-		className: cn$25("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),
+	});
+	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),
 		style: { transition: `width 400ms ${cubicBezier}` },
 		children: [onToggleCollapse && /* @__PURE__ */ jsxs("button", {
 			onClick: onToggleCollapse,
@@ -1382,7 +1537,7 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 					children: [
 						user && /* @__PURE__ */ jsxs("button", {
 							onClick: onUserClick,
-							className: cn$25("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$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"),
 							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",
@@ -1415,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$25("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$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"),
 							style: { transition: "background-color 200ms" },
 							title: isCollapsed ? logoutLabel : void 0,
 							children: [/* @__PURE__ */ jsx(LogOut, {
@@ -1438,12 +1593,445 @@ function Sidebar({ menuItems, logo, collapsedLogo, currentPath, linkComponent: L
 				})
 			]
 		})]
-	})] });
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [showMobileHeader && mobileHeader, desktopSidebar] });
+}
+//#endregion
+//#region src/components/Header/index.tsx
+const cn$26 = (...classes) => classes.filter(Boolean).join(" ");
+function isGroup(item) {
+	return "children" in item && Array.isArray(item.children);
+}
+function DefaultLink({ href, className, onClick, children }) {
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		className,
+		onClick,
+		children
+	});
+}
+function useOnClickOutside(ref, handler) {
+	useEffect(() => {
+		const listener = (event) => {
+			if (!ref.current || ref.current.contains(event.target)) return;
+			handler();
+		};
+		document.addEventListener("mousedown", listener);
+		document.addEventListener("touchstart", listener);
+		return () => {
+			document.removeEventListener("mousedown", listener);
+			document.removeEventListener("touchstart", listener);
+		};
+	}, [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 }) {
+	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+	const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+	const [openDropdownId, setOpenDropdownId] = useState(null);
+	const dropdownRef = useRef(null);
+	const userMenuRef = useRef(null);
+	useOnClickOutside(dropdownRef, () => setOpenDropdownId(null));
+	useOnClickOutside(userMenuRef, () => setIsUserMenuOpen(false));
+	const closeMenus = () => {
+		setIsMobileMenuOpen(false);
+		setIsUserMenuOpen(false);
+		setOpenDropdownId(null);
+	};
+	const isItemActive = (item) => {
+		if (isGroup(item)) return item.children.some((child) => currentPath === child.href || child.href !== "/dashboard" && currentPath.startsWith(child.href));
+		return currentPath === item.href;
+	};
+	const renderNavLink = (item, options = {}) => {
+		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"),
+			title: "Em breve",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				size: 18,
+				className: "flex-shrink-0 opacity-40"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "line-through opacity-50",
+				children: item.label
+			})]
+		}, item.id);
+		return /* @__PURE__ */ jsx(LinkComponent, {
+			href: item.href,
+			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)]"),
+				"aria-current": active ? "page" : void 0,
+				children: [/* @__PURE__ */ jsx(Icon, {
+					size: 18,
+					className: "flex-shrink-0"
+				}), /* @__PURE__ */ jsx("span", { children: item.label })]
+			})
+		}, item.id);
+	};
+	const renderDropdown = (group, options = {}) => {
+		const Icon = group.icon;
+		const groupActive = isItemActive(group);
+		const isOpen = openDropdownId === group.id;
+		if (options.mobile) return /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-4 py-2 text-xs font-semibold uppercase tracking-wider text-[var(--dashboard-text-secondary,#6b7280)]",
+				children: [/* @__PURE__ */ jsx(Icon, { size: 16 }), group.label]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "ml-3 space-y-1 border-l border-[var(--dashboard-text-secondary,#6b7280)]/20 pl-3",
+				children: group.children.map((child) => {
+					const active = currentPath === child.href;
+					return child.disabled ? /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium cursor-not-allowed text-[var(--dashboard-text-secondary,#6b7280)]/40",
+						title: "Em breve",
+						children: [/* @__PURE__ */ jsx(child.icon, {
+							size: 16,
+							className: "flex-shrink-0 opacity-40"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "line-through opacity-50",
+							children: child.label
+						})]
+					}, child.id) : /* @__PURE__ */ jsx(LinkComponent, {
+						href: child.href,
+						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)]"),
+							children: [/* @__PURE__ */ jsx(child.icon, {
+								size: 16,
+								className: "flex-shrink-0"
+							}), /* @__PURE__ */ jsx("span", { children: child.label })]
+						})
+					}, child.id);
+				})
+			})]
+		}, group.id);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			ref: isOpen ? dropdownRef : void 0,
+			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)]"),
+				"aria-expanded": isOpen,
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						size: 18,
+						className: "flex-shrink-0"
+					}),
+					/* @__PURE__ */ jsx("span", { children: group.label }),
+					/* @__PURE__ */ jsx(ChevronDown, {
+						size: 14,
+						className: cn$26("flex-shrink-0 transition-transform", isOpen && "rotate-180")
+					})
+				]
+			}), isOpen && /* @__PURE__ */ jsx("div", {
+				className: "absolute left-1/2 top-[calc(100%+0.5rem)] z-50 w-max min-w-full max-w-[24rem] -translate-x-1/2 rounded-xl border border-[var(--dashboard-text-secondary,#6b7280)]/20 bg-[var(--dashboard-surface,#ffffff)] p-1.5 shadow-xl",
+				children: group.children.map((child) => {
+					const active = currentPath === child.href;
+					return child.disabled ? /* @__PURE__ */ jsxs("span", {
+						className: "flex cursor-not-allowed items-center gap-2 rounded-lg px-3 py-2 text-sm text-[var(--dashboard-text-secondary,#6b7280)]/40",
+						title: "Em breve",
+						children: [/* @__PURE__ */ jsx(child.icon, {
+							size: 16,
+							className: "flex-shrink-0 opacity-40"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "whitespace-nowrap line-through opacity-50",
+							children: child.label
+						})]
+					}, child.id) : /* @__PURE__ */ jsx(LinkComponent, {
+						href: child.href,
+						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)]"),
+							children: [
+								/* @__PURE__ */ jsx(child.icon, {
+									size: 16,
+									className: "flex-shrink-0"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "whitespace-nowrap",
+									children: child.label
+								}),
+								active && /* @__PURE__ */ jsx("span", { className: "ml-auto h-1.5 w-1.5 rounded-full bg-[var(--dashboard-primary,#37a501)]" })
+							]
+						})
+					}, child.id);
+				})
+			})]
+		}, group.id);
+	};
+	const renderNavItem = (item, options = {}) => {
+		if (isGroup(item)) return renderDropdown(item, options);
+		return renderNavLink(item, options);
+	};
+	const desktopOffset = typeof desktopOffsetLeft === "number" ? `${desktopOffsetLeft}px` : desktopOffsetLeft;
+	const userEstablishments = establishments.length > 0 ? establishments : user?.subtitle ? [{
+		id: "current",
+		label: user.subtitle,
+		active: true
+	}] : [];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "pointer-events-none fixed inset-x-0 top-0 z-30 h-2 bg-[var(--dashboard-background,#f2f2f2)]"
+		}),
+		/* @__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))]",
+			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))]",
+			style: { "--dashboard-header-offset-left": desktopOffset }
+		}),
+		/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "pointer-events-none fixed right-[var(--dashboard-page-gutter,0px)] top-2 z-30 h-14 w-5 bg-[var(--dashboard-background,#f2f2f2)] transition-[right] duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)]"
+		}),
+		/* @__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))]",
+			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),
+			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)]",
+				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",
+						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",
+						"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",
+						children: [actions, user && /* @__PURE__ */ jsxs("div", {
+							className: "relative 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",
+								"aria-expanded": isUserMenuOpen,
+								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",
+										children: [user.subtitle && /* @__PURE__ */ jsx("p", {
+											className: "truncate text-[11px] leading-4 text-[var(--dashboard-text-secondary,#6b7280)]",
+											children: user.subtitle
+										}), /* @__PURE__ */ jsx("p", {
+											className: "truncate text-sm font-medium leading-4",
+											children: user.name
+										})]
+									}),
+									/* @__PURE__ */ jsx(ChevronDown, {
+										size: 16,
+										className: cn$26("ml-auto flex-shrink-0 transition-transform", 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",
+								children: [
+									/* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: () => {
+											setIsUserMenuOpen(false);
+											onUserClick?.();
+										},
+										className: "flex w-full items-center gap-3 rounded-lg px-3 py-3 text-left transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/8",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "flex h-9 w-9 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: 17 })
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "min-w-0",
+											children: [/* @__PURE__ */ jsx("p", {
+												className: "truncate text-sm font-semibold",
+												children: user.name
+											}), /* @__PURE__ */ jsx("p", {
+												className: "truncate text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+												children: user.email
+											})]
+										})]
+									}),
+									userEstablishments.length > 0 && /* @__PURE__ */ jsxs("div", {
+										className: "mt-1 border-t border-[var(--dashboard-text-secondary,#6b7280)]/15 pt-2",
+										children: [/* @__PURE__ */ jsx("p", {
+											className: "px-3 pb-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--dashboard-text-secondary,#6b7280)]",
+											children: establishmentsLabel
+										}), /* @__PURE__ */ jsx("div", {
+											className: "space-y-1",
+											children: userEstablishments.map((establishment) => {
+												const isDisabled = establishment.disabled || !onEstablishmentChange || establishment.active;
+												return /* @__PURE__ */ jsxs("button", {
+													type: "button",
+													onClick: () => {
+														if (isDisabled) return;
+														setIsUserMenuOpen(false);
+														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"),
+													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(Building2, { size: 15 })
+														}),
+														/* @__PURE__ */ jsxs("div", {
+															className: "min-w-0 flex-1",
+															children: [/* @__PURE__ */ jsx("p", {
+																className: "truncate text-sm font-semibold",
+																children: establishment.label
+															}), establishment.description && /* @__PURE__ */ jsx("p", {
+																className: "truncate text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+																children: establishment.description
+															})]
+														}),
+														establishment.active && /* @__PURE__ */ jsx(Check, {
+															size: 16,
+															className: "flex-shrink-0"
+														})
+													]
+												}, establishment.id);
+											})
+										})]
+									}),
+									onLogout && /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: () => {
+											setIsUserMenuOpen(false);
+											onLogout();
+										},
+										className: "mt-1 flex w-full items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/8",
+										children: [/* @__PURE__ */ jsx(LogOut, { size: 18 }), logoutLabel]
+									})
+								]
+							})]
+						})]
+					}),
+					/* @__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",
+						"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"),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "max-h-[calc(100vh-4rem)] overflow-y-auto px-4 py-3",
+					children: [/* @__PURE__ */ jsx("nav", {
+						className: "space-y-1",
+						"aria-label": "Navegacao principal",
+						children: menuItems.map((item) => renderNavItem(item, { mobile: true }))
+					}), (user || actions || onLogout) && /* @__PURE__ */ jsxs("div", {
+						className: "mt-3 space-y-2 border-t border-[var(--dashboard-text-secondary,#6b7280)]/20 pt-3",
+						children: [
+							actions,
+							user && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => {
+									closeMenus();
+									onUserClick?.();
+								},
+								className: "flex w-full items-center gap-3 rounded-lg bg-[var(--dashboard-background,#f2f2f2)] px-4 py-3 text-left transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/8",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "flex h-9 w-9 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: 17 })
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "min-w-0",
+									children: [
+										user.subtitle && /* @__PURE__ */ jsx("p", {
+											className: "truncate text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+											children: user.subtitle
+										}),
+										/* @__PURE__ */ jsx("p", {
+											className: "truncate text-sm font-semibold",
+											children: user.name
+										}),
+										/* @__PURE__ */ jsx("p", {
+											className: "truncate text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+											children: user.email
+										})
+									]
+								})]
+							}), userEstablishments.length > 0 && /* @__PURE__ */ jsxs("div", {
+								className: "space-y-1",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "px-4 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--dashboard-text-secondary,#6b7280)]",
+									children: establishmentsLabel
+								}), userEstablishments.map((establishment) => {
+									const isDisabled = establishment.disabled || !onEstablishmentChange || establishment.active;
+									return /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: () => {
+											if (isDisabled) return;
+											closeMenus();
+											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"),
+										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(Building2, { size: 15 })
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "min-w-0 flex-1",
+												children: [/* @__PURE__ */ jsx("p", {
+													className: "truncate text-sm font-semibold",
+													children: establishment.label
+												}), establishment.description && /* @__PURE__ */ jsx("p", {
+													className: "truncate text-xs text-[var(--dashboard-text-secondary,#6b7280)]",
+													children: establishment.description
+												})]
+											}),
+											establishment.active && /* @__PURE__ */ jsx(Check, {
+												size: 16,
+												className: "flex-shrink-0"
+											})
+										]
+									}, establishment.id);
+								})]
+							})] }),
+							onLogout && /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => {
+									closeMenus();
+									onLogout();
+								},
+								className: "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition-colors hover:bg-[var(--dashboard-primary,#37a501)]/8",
+								children: [/* @__PURE__ */ jsx(LogOut, { size: 18 }), logoutLabel]
+							})
+						]
+					})]
+				})
+			})]
+		})
+	] });
 }
 //#endregion
 //#region src/components/ThemeSwitcher/index.tsx
-const cn$24 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$25 = (...classes) => classes.filter(Boolean).join(" ");
 const modes = [
 	{
 		value: "light",
@@ -1463,11 +2051,11 @@ const modes = [
 ];
 function ThemeSwitcher({ mode, onModeChange, className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$24("inline-flex items-center gap-1 rounded-lg bg-[var(--dashboard-background,#f2f2f2)] p-1", className),
+		className: cn$25("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$24("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$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)]"),
 			title: label,
 			children: [/* @__PURE__ */ jsx(Icon, { size: 14 }), /* @__PURE__ */ jsx("span", { children: label })]
 		}, value))
@@ -1476,7 +2064,7 @@ function ThemeSwitcher({ mode, onModeChange, className }) {
 //#endregion
 //#region src/components/KPICard/index.tsx
-const cn$23 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$24 = (...classes) => classes.filter(Boolean).join(" ");
 function formatValue(value, format) {
 	switch (format) {
 		case "currency": return new Intl.NumberFormat("pt-BR", {
@@ -1502,16 +2090,23 @@ const trendConfigs = {
 		color: "text-[var(--dashboard-text-secondary,#64748B)] bg-[var(--dashboard-text-secondary,#64748B)]/8"
 	}
 };
-function KPICard({ title, value, variation, trend, format = "number", benchmark, isLoading, className }) {
+function KPICard({ title, value, variation, trend, format = "number", benchmark, icon, isLoading, className }) {
 	if (isLoading) return /* @__PURE__ */ jsx(KPICardSkeleton, { className });
 	const trendConfig = trendConfigs[trend];
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$23("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),
+		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",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-xs font-semibold uppercase tracking-wider text-[var(--dashboard-text-secondary,#64748B)] whitespace-nowrap",
-				children: title
+			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
+				})]
 			}), 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",
@@ -1523,7 +2118,7 @@ function KPICard({ title, value, variation, trend, format = "number", benchmark,
 				className: "text-3xl font-bold text-[var(--dashboard-text-primary,#0F172A)] whitespace-nowrap tracking-tight",
 				children: formatValue(value, format)
 			}), /* @__PURE__ */ jsxs("div", {
-				className: cn$23("inline-flex items-center gap-1 px-2 py-1 rounded-full flex-shrink-0 mb-1", trendConfig.color),
+				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
@@ -1537,7 +2132,7 @@ function KPICard({ title, value, variation, trend, format = "number", benchmark,
 }
 function KPICardSkeleton({ className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$23("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$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),
 		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" })]
@@ -1547,51 +2142,63 @@ function KPICardSkeleton({ className }) {
 //#endregion
 //#region src/components/PageLayout/index.tsx
-const cn$22 = (...classes) => classes.filter(Boolean).join(" ");
-function PageLayout({ title, description, headerActions, children, contentPadding = true, sidebar, sidebarCollapsed = false, sidebarWidth = 280, sidebarCollapsedWidth = 109, className }) {
+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 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$22("min-h-screen bg-[var(--dashboard-background,#f2f2f2)]", className),
-		children: [sidebar, /* @__PURE__ */ jsxs("main", {
-			className: cn$22("pt-16 xl:pt-0", !sidebar && "pt-0"),
-			style: {
-				marginLeft,
-				transition: "margin-left 400ms cubic-bezier(0.4, 0, 0.2, 1)"
-			},
-			children: [
-				/* @__PURE__ */ jsx("style", { children: `
+		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),
+		children: [
+			appHeader,
+			sidebar,
+			/* @__PURE__ */ jsxs("main", {
+				className: mainTopPadding,
+				style: {
+					marginLeft,
+					transition: "margin-left 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+				},
+				children: [
+					/* @__PURE__ */ jsx("style", { children: `
           @media (max-width: 1279px) {
             main {
               margin-left: 0 !important;
             }
           }
         ` }),
-				/* @__PURE__ */ jsxs("div", {
-					className: "border-b border-[var(--dashboard-text-secondary,#6b7280)]/20 px-6 py-4 bg-[var(--dashboard-surface,#ffffff)]",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "mb-4",
-						children: [/* @__PURE__ */ jsx("h1", {
-							className: "text-2xl font-bold text-[var(--dashboard-text-primary,#2d2d2d)]",
-							children: title
-						}), description && /* @__PURE__ */ jsx("p", {
-							className: "text-sm text-[var(--dashboard-text-secondary,#6b7280)] mt-1",
-							children: description
-						})]
-					}), headerActions && /* @__PURE__ */ jsx("div", { children: headerActions })]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: contentPadding ? "p-6" : "",
-					children
-				})
-			]
-		})]
+					/* @__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"),
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-5 lg:flex-row lg:items-end 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
+								})]
+							}), headerActions && /* @__PURE__ */ jsx("div", {
+								className: "flex max-w-full justify-start lg:justify-end",
+								children: headerActions
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: contentPadding ? cn$23(layoutContainer, "py-6") : "",
+						children
+					})
+				]
+			})
+		]
 	});
 }
 //#endregion
 //#region src/components/ComparisonLineChart/index.tsx
 Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title$1, Tooltip$1, Legend, Filler);
-const cn$21 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$22 = (...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 = {
@@ -1685,7 +2292,7 @@ function ComparisonLineChart({ labels, currentPeriodData, previousPeriodData, cu
 		}
 	};
 	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-6", className),
+		className: cn$22("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
@@ -1702,7 +2309,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$20 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$21 = (...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);
@@ -1777,7 +2384,7 @@ function HorizontalBarChart({ labels, datasets, tabs, title, titleIcon, color, v
 		}
 	};
 	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-5 sm:p-6 min-h-[850px] sm:h-full flex flex-col", className),
+		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),
 		children: [
 			title && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 mb-4",
@@ -1790,7 +2397,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$20("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$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"),
 					children: tab.label
 				}, tab.id))
 			}),
@@ -1829,7 +2436,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$19 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$20 = (...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)];
@@ -1892,7 +2499,7 @@ function VerticalBarChart({ labels, data: values, title, titleIcon, color, value
 		}
 	};
 	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 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",
@@ -1948,7 +2555,7 @@ const DEFAULT_COLORS = [
 	"#EA580C",
 	"#4F46E5"
 ];
-const cn$18 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$19 = (...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));
@@ -1988,7 +2595,7 @@ function DoughnutChart({ items, title, titleIcon, centerLabel, centerValue, show
 		}
 	};
 	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", className),
+		className: cn$19("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", {
@@ -1996,7 +2603,7 @@ function DoughnutChart({ items, title, titleIcon, centerLabel, centerValue, show
 				children: title
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: cn$18("flex items-center", showLegend ? "gap-6" : "justify-center"),
+			className: cn$19("flex items-center", showLegend ? "gap-6" : "justify-center"),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "relative flex-shrink-0",
 				style: {
@@ -2049,7 +2656,7 @@ function DoughnutChart({ items, title, titleIcon, centerLabel, centerValue, show
 //#endregion
 //#region src/components/ProgressBarList/index.tsx
-const cn$17 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$18 = (...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));
@@ -2058,7 +2665,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$17("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$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),
 		children: [title && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2 mb-4",
 			children: [titleIcon, /* @__PURE__ */ jsx("h3", {
@@ -2107,19 +2714,237 @@ 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$16 = (...classes) => classes.filter(Boolean).join(" ");
-function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, secondaryColor, onActionClick, actionLabel, isLoading = false, className }) {
+const cn$17 = (...classes) => classes.filter(Boolean).join(" ");
+function formatMetricValue(value, format) {
+	switch (format) {
+		case "currency": return new Intl.NumberFormat("pt-BR", {
+			style: "currency",
+			currency: "BRL"
+		}).format(value);
+		case "percentage": return `${value.toFixed(2)}%`;
+		case "rating": return value.toFixed(2);
+		default: return new Intl.NumberFormat("pt-BR").format(Math.round(value));
+	}
+}
+function calculateVariation(current, previous) {
+	if (previous === 0) return 0;
+	return (current - previous) / previous * 100;
+}
+function escapeHtml(value) {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function getTooltipDateInfo(label) {
+	const dayNames = [
+		"Domingo",
+		"Segunda",
+		"Terca",
+		"Quarta",
+		"Quinta",
+		"Sexta",
+		"Sabado"
+	];
+	const [day, month] = label.split("/").map(Number);
+	if (!day || !month) return {
+		dayName: "",
+		previousDate: ""
+	};
+	const date = new Date((/* @__PURE__ */ new Date()).getFullYear(), month - 1, day);
+	const previousDate = new Date(date);
+	previousDate.setDate(previousDate.getDate() - 7);
+	return {
+		dayName: dayNames[date.getDay()],
+		previousDate: `${String(previousDate.getDate()).padStart(2, "0")}/${String(previousDate.getMonth() + 1).padStart(2, "0")}`
+	};
+}
+function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, secondaryColor, onActionClick, actionLabel, tooltipConfig, isLoading = false, className }) {
 	const [selectedMetricKey, setSelectedMetricKey] = useState(metrics[0]?.key);
 	const [isMobile, setIsMobile] = useState(false);
+	const hideTooltipTimeoutRef = useRef(null);
+	const isTooltipHoveredRef = useRef(false);
 	useEffect(() => {
 		const check = () => setIsMobile(window.innerWidth < 768);
 		check();
 		window.addEventListener("resize", check);
-		return () => window.removeEventListener("resize", check);
+		return () => {
+			window.removeEventListener("resize", check);
+			if (hideTooltipTimeoutRef.current) clearTimeout(hideTooltipTimeoutRef.current);
+		};
 	}, []);
 	const currentMetric = metrics.find((m) => m.key === selectedMetricKey) || metrics[0];
 	const primaryColor = color || (typeof document !== "undefined" ? getComputedStyle(document.documentElement).getPropertyValue("--dashboard-primary").trim() : "") || "#37a501";
 	const secColor = secondaryColor || `${primaryColor}66`;
+	const renderExternalTooltip = (context) => {
+		const { chart, tooltip } = context;
+		const parent = chart.canvas.parentElement;
+		if (!parent) return;
+		let tooltipEl = parent.querySelector(":scope > .metric-panel-chart-tooltip");
+		if (!tooltipEl) {
+			tooltipEl = document.createElement("div");
+			tooltipEl.className = "metric-panel-chart-tooltip";
+			tooltipEl.style.position = "absolute";
+			tooltipEl.style.pointerEvents = "auto";
+			tooltipEl.style.transition = "opacity 0.2s ease";
+			tooltipEl.style.zIndex = "100";
+			tooltipEl.style.opacity = "0";
+			const createdTooltipEl = tooltipEl;
+			createdTooltipEl.addEventListener("mouseenter", () => {
+				isTooltipHoveredRef.current = true;
+				if (hideTooltipTimeoutRef.current) {
+					clearTimeout(hideTooltipTimeoutRef.current);
+					hideTooltipTimeoutRef.current = null;
+				}
+			});
+			createdTooltipEl.addEventListener("mouseleave", () => {
+				isTooltipHoveredRef.current = false;
+				createdTooltipEl.style.opacity = "0";
+			});
+			parent.appendChild(createdTooltipEl);
+		}
+		if (hideTooltipTimeoutRef.current) {
+			clearTimeout(hideTooltipTimeoutRef.current);
+			hideTooltipTimeoutRef.current = null;
+		}
+		if (tooltip.opacity === 0) {
+			hideTooltipTimeoutRef.current = setTimeout(() => {
+				if (!isTooltipHoveredRef.current && tooltipEl) tooltipEl.style.opacity = "0";
+			}, 300);
+			return;
+		}
+		const dataPoint = tooltip.dataPoints?.find((point) => point.datasetIndex === 0);
+		if (!dataPoint) {
+			tooltipEl.style.opacity = "0";
+			return;
+		}
+		const dataIndex = dataPoint.dataIndex;
+		const label = dataPoint.label;
+		const currentValue = typeof dataPoint.parsed.y === "number" ? dataPoint.parsed.y : 0;
+		const previousValue = chartData.metrics[currentMetric.key]?.previousPeriod[dataIndex] || 0;
+		const variation = calculateVariation(currentValue, previousValue);
+		const formattedValue = formatMetricValue(currentValue, currentMetric.format);
+		const formattedPrevious = formatMetricValue(previousValue, currentMetric.format);
+		const { dayName, previousDate } = getTooltipDateInfo(label);
+		const metricUnit = currentMetric.unit || "";
+		const isButtonDisabled = currentValue === 0;
+		const safeLabel = escapeHtml(label);
+		const safeDayName = escapeHtml(dayName);
+		const safePreviousDate = escapeHtml(previousDate);
+		const safeMetricUnit = escapeHtml(metricUnit);
+		const variationSign = variation > 0 ? "+" : "";
+		const variationIcon = variation >= 0 ? "▲" : "▼";
+		const variationColor = variation >= 0 ? "var(--dashboard-status-success,#10B981)" : "var(--dashboard-status-danger,#EF4444)";
+		if (tooltipConfig?.customContent) tooltipEl.innerHTML = tooltipConfig.customContent({
+			value: currentValue,
+			previousValue,
+			variation,
+			date: label,
+			dayName,
+			previousDate,
+			formattedValue,
+			formattedPrevious,
+			metricUnit
+		});
+		else tooltipEl.innerHTML = `
+        <div style="
+          background: var(--dashboard-surface,#ffffff);
+          border-radius: 8px;
+          box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
+          border: 1px solid rgba(93, 114, 128, 0.2);
+          color: var(--dashboard-text-primary,#2d2d2d);
+          padding: 12px;
+          min-width: 220px;
+          max-width: 250px;
+          font-family: inherit;
+        ">
+          <div style="
+            font-size: 11px;
+            font-weight: 500;
+            color: var(--dashboard-text-secondary,#6b7280);
+            margin-bottom: 8px;
+          ">
+            ${safeDayName ? `${safeDayName} ` : ""}${safeLabel}
+          </div>
+          <div style="
+            display: flex;
+            align-items: baseline;
+            gap: 6px;
+            margin-bottom: 10px;
+          ">
+            <div style="
+              font-size: 22px;
+              font-weight: 700;
+              color: ${primaryColor};
+              line-height: 1;
+            ">
+              ${escapeHtml(formattedValue)}${safeMetricUnit ? ` ${safeMetricUnit}` : ""}
+            </div>
+            <div style="
+              display: flex;
+              align-items: center;
+              gap: 3px;
+              color: ${variationColor};
+              font-size: 13px;
+              font-weight: 600;
+            ">
+              <span style="font-size: 10px;">${variationIcon}</span>
+              <span>${variationSign}${Math.abs(variation).toFixed(2)}%</span>
+            </div>
+          </div>
+          <div style="
+            font-size: 11px;
+            color: var(--dashboard-text-secondary,#6b7280);
+            line-height: 1.35;
+            margin-bottom: ${tooltipConfig?.showButton ? "10px" : "0"};
+            padding-bottom: ${tooltipConfig?.showButton ? "10px" : "0"};
+            border-bottom: ${tooltipConfig?.showButton ? "1px solid rgba(93, 114, 128, 0.2)" : "none"};
+          ">
+            em relacao aos <strong style="color: var(--dashboard-text-primary,#2d2d2d);">${escapeHtml(formattedPrevious)}${safeMetricUnit ? ` ${safeMetricUnit}` : ""}</strong>${safePreviousDate ? ` do dia <strong style="color: var(--dashboard-text-primary,#2d2d2d);">${safePreviousDate}</strong>` : ""}
+          </div>
+          ${tooltipConfig?.showButton && tooltipConfig.buttonLabel ? `
+            <button type="button" data-tooltip-action ${isButtonDisabled ? "disabled" : ""} style="
+              width: 100%;
+              padding: 8px 12px;
+              background: ${isButtonDisabled ? "rgba(93, 114, 128, 0.08)" : "var(--dashboard-surface,#ffffff)"};
+              color: ${isButtonDisabled ? "var(--dashboard-text-secondary,#6b7280)" : primaryColor};
+              border: 2px solid ${isButtonDisabled ? "rgba(93, 114, 128, 0.2)" : primaryColor};
+              border-radius: 6px;
+              font-size: 13px;
+              font-weight: 600;
+              font-family: inherit;
+              cursor: ${isButtonDisabled ? "not-allowed" : "pointer"};
+              opacity: ${isButtonDisabled ? "0.65" : "1"};
+            ">
+              ${escapeHtml(tooltipConfig.buttonLabel)}
+            </button>
+          ` : ""}
+        </div>
+      `;
+		const actionButton = tooltipEl.querySelector("[data-tooltip-action]");
+		if (actionButton && !isButtonDisabled) {
+			actionButton.onclick = () => tooltipConfig?.onButtonClick?.(dataIndex, label);
+			actionButton.onmouseenter = () => {
+				actionButton.style.background = primaryColor;
+				actionButton.style.color = "#ffffff";
+			};
+			actionButton.onmouseleave = () => {
+				actionButton.style.background = "var(--dashboard-surface,#ffffff)";
+				actionButton.style.color = primaryColor;
+			};
+		}
+		const tooltipWidth = 250;
+		const tooltipHeight = tooltipConfig?.showButton ? 180 : 140;
+		const offsetX = 15;
+		const centerY = Math.max(0, (chart.height - tooltipHeight) / 2);
+		const isNearRightEdge = tooltip.caretX > chart.width - tooltipWidth - offsetX;
+		tooltipEl.style.opacity = "1";
+		tooltipEl.style.top = `${centerY}px`;
+		if (isNearRightEdge) {
+			tooltipEl.style.left = "auto";
+			tooltipEl.style.right = `${chart.width - tooltip.caretX + offsetX}px`;
+		} else {
+			tooltipEl.style.left = `${tooltip.caretX + offsetX}px`;
+			tooltipEl.style.right = "auto";
+		}
+	};
 	const data = {
 		labels: chartData.labels,
 		datasets: [{
@@ -2171,14 +2996,18 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
 					color: "var(--dashboard-text-secondary, #6b7280)"
 				}
 			},
-			tooltip: {
+			tooltip: { ...tooltipConfig ? {
+				enabled: false,
+				position: "nearest",
+				external: tooltipConfig.enabled ? renderExternalTooltip : void 0
+			} : {
 				backgroundColor: "rgba(45, 45, 45, 0.95)",
 				titleColor: "#fff",
 				bodyColor: "#fff",
 				borderColor: primaryColor,
 				borderWidth: 1,
 				padding: 12
-			}
+			} }
 		},
 		scales: {
 			x: {
@@ -2205,7 +3034,7 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$16("bg-[var(--dashboard-surface,#ffffff)] rounded-lg shadow-sm border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$17("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", {
@@ -2246,7 +3075,7 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
 						const Icon = metric.icon;
 						return /* @__PURE__ */ jsxs("button", {
 							onClick: () => setSelectedMetricKey(metric.key),
-							className: cn$16("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$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"),
 							style: selectedMetricKey === metric.key ? {
 								borderColor: primaryColor,
 								color: primaryColor
@@ -2294,10 +3123,10 @@ function MetricPanel({ title, titleIcon: TitleIcon, metrics, chartData, color, s
 //#endregion
 //#region src/components/FilterBar/index.tsx
-const cn$15 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$16 = (...classes) => classes.filter(Boolean).join(" ");
 function FilterBar({ searchValue, onSearchChange, searchPlaceholder = "Buscar...", children, actions, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$15("flex flex-col gap-3 sm:flex-row sm:items-center sm:flex-wrap", className),
+		className: cn$16("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]",
@@ -2337,7 +3166,7 @@ function FilterBar({ searchValue, onSearchChange, searchPlaceholder = "Buscar...
 //#endregion
 //#region src/components/Checkbox/index.tsx
-const cn$14 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$15 = (...classes) => classes.filter(Boolean).join(" ");
 const sizeConfig = {
 	sm: {
 		box: 16,
@@ -2385,7 +3214,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$14("inline-flex items-center cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", className),
+		className: cn$15("inline-flex items-center cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", className),
 		style: { gap: cfg.gap },
 		children: [
 			/* @__PURE__ */ jsx("input", {
@@ -2436,7 +3265,7 @@ function Checkbox({ name, id, label, checked = false, onChange, disabled = false
 //#endregion
 //#region src/components/AuthLayout/index.tsx
-const cn$13 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$14 = (...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);
@@ -2603,7 +3432,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$13("bg-transparent border-none cursor-pointer hover:opacity-80 text-sm font-semibold p-0 transition-colors", extraClass),
+			className: cn$14("bg-transparent border-none cursor-pointer hover:opacity-80 text-sm font-semibold p-0 transition-colors", extraClass),
 			style,
 			children: link.label
 		});
@@ -2611,13 +3440,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$13("hover:opacity-80 text-sm font-semibold transition-colors", extraClass),
+			className: cn$14("hover:opacity-80 text-sm font-semibold transition-colors", extraClass),
 			style,
 			children: link.label
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$13("fixed inset-0 flex select-none overflow-hidden", className),
+		className: cn$14("fixed inset-0 flex select-none overflow-hidden", className),
 		style: bgCss,
 		children: [
 			branding && branding.logos.length > 0 && /* @__PURE__ */ jsx("div", {
@@ -2900,7 +3729,7 @@ function CodeInput({ length = 6, value, onChange, disabled = false, error = fals
 //#endregion
 //#region src/components/Skeleton/index.tsx
-const cn$12 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$13 = (...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-['']" : "";
@@ -2919,9 +3748,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$12("flex flex-col gap-2", className),
+		className: cn$13("flex flex-col gap-2", className),
 		children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("div", {
-			className: cn$12(baseStyles, shimmerStyles, variantStyles.text),
+			className: cn$13(baseStyles, shimmerStyles, variantStyles.text),
 			style: {
 				...style,
 				width: i === lines - 1 ? "75%" : style.width || "100%"
@@ -2929,14 +3758,14 @@ function Skeleton({ variant = "text", width, height, animate = true, className,
 		}, i))
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$12(baseStyles, shimmerStyles, variantStyles[variant], className),
+		className: cn$13(baseStyles, shimmerStyles, variantStyles[variant], className),
 		style
 	});
 }
 //#endregion
 //#region src/components/DataGrid/index.tsx
-const cn$11 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$12 = (...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" });
@@ -2991,7 +3820,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$11("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$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"),
 						style: { width: header.getSize() },
 						onClick: header.column.getToggleSortingHandler(),
 						children: /* @__PURE__ */ jsxs("div", {
@@ -3006,10 +3835,10 @@ function VirtualRows({ table, rowHeight, onRowClick, compact }) {
 					}),
 					visibleRows.map((row) => /* @__PURE__ */ jsx("tr", {
 						onClick: () => onRowClick?.(row.original),
-						className: cn$11("hover:bg-[var(--dashboard-text-secondary,#6b7280)]/5 transition-colors", onRowClick && "cursor-pointer", row.getIsSelected() && "bg-[var(--dashboard-primary,#37a501)]/5"),
+						className: cn$12("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$11(cellPadding, "text-sm whitespace-nowrap"),
+							className: cn$12(cellPadding, "text-sm whitespace-nowrap"),
 							children: flexRender(cell.column.columnDef.cell, cell.getContext())
 						}, cell.id))
 					}, row.id)),
@@ -3088,7 +3917,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$11("overflow-hidden rounded-lg bg-[var(--dashboard-surface,#ffffff)] shadow-sm", bordered && "border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$12("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,
@@ -3097,16 +3926,16 @@ function DataGrid({ columns, data, isLoading = false, skeletonRows = 5, sorting:
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$11("overflow-hidden rounded-lg bg-[var(--dashboard-surface,#ffffff)] shadow-sm", bordered && "border border-[var(--dashboard-text-secondary,#6b7280)]/20", className),
+		className: cn$12("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$11("bg-[var(--dashboard-text-secondary,#6b7280)]/5", stickyHeader && "sticky top-0 z-10"),
+					className: cn$12("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$11("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$12("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", {
@@ -3143,9 +3972,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$11("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$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"),
 						children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", {
-							className: cn$11(cellPadding, "text-sm text-[var(--dashboard-text-primary,#2d2d2d)]"),
+							className: cn$12(cellPadding, "text-sm text-[var(--dashboard-text-primary,#2d2d2d)]"),
 							children: flexRender(cell.column.columnDef.cell, cell.getContext())
 						}, cell.id))
 					}, row.id))
@@ -3206,7 +4035,7 @@ function DataGrid({ columns, data, isLoading = false, skeletonRows = 5, sorting:
 //#endregion
 //#region src/components/TreeView/index.tsx
-const cn$10 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$11 = (...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);
@@ -3271,7 +4100,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$10("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$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"),
 			style: { paddingLeft: `${level * indentSize + 4}px` },
 			draggable: draggable && !node.disabled,
 			onDragStart: handleDragStart,
@@ -3289,10 +4118,10 @@ function TreeItem({ node, level, expanded, selectedId, draggable, indentSize, on
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => hasChildren && onToggle(node.id),
-					className: cn$10("flex-shrink-0 w-5 h-5 flex items-center justify-center rounded transition-transform", hasChildren ? "cursor-pointer" : "invisible"),
+					className: cn$11("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$10("h-3.5 w-3.5 transition-transform duration-150", isExpanded && "rotate-90") })
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: cn$11("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",
@@ -3304,7 +4133,7 @@ function TreeItem({ node, level, expanded, selectedId, draggable, indentSize, on
 						children: node.icon
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: cn$10("flex-1 min-w-0 text-sm truncate", !node.disabled && "cursor-pointer"),
+						className: cn$11("flex-1 min-w-0 text-sm truncate", !node.disabled && "cursor-pointer"),
 						onClick: () => !node.disabled && onSelect?.(node),
 						children: node.label
 					}),
@@ -3357,7 +4186,7 @@ function TreeView({ nodes, onSelect, onExpand, onMove, renderNode, selectedId, d
 	}, [onExpand]);
 	return /* @__PURE__ */ jsx("ul", {
 		role: "tree",
-		className: cn$10("select-none", className),
+		className: cn$11("select-none", className),
 		children: nodes.map((node) => /* @__PURE__ */ jsx(TreeItem, {
 			node,
 			level: 0,
@@ -3377,7 +4206,7 @@ function TreeView({ nodes, onSelect, onExpand, onMove, renderNode, selectedId, d
 //#endregion
 //#region src/components/Stepper/index.tsx
-const cn$9 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$10 = (...classes) => classes.filter(Boolean).join(" ");
 function StepIcon({ step, index }) {
 	const status = step.status || "pending";
 	if (status === "completed") return /* @__PURE__ */ jsx("div", {
@@ -3421,17 +4250,17 @@ function Stepper({ steps, activeStep, onStepChange, orientation = "horizontal",
 						type: "button",
 						onClick: () => onStepChange?.(index),
 						disabled: !onStepChange,
-						className: cn$9("relative z-10", onStepChange && "cursor-pointer", !onStepChange && "cursor-default"),
+						className: cn$10("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$9("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$10("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$9("pb-6", index === resolvedSteps.length - 1 && "pb-0"),
+					className: cn$10("pb-6", index === resolvedSteps.length - 1 && "pb-0"),
 					children: [/* @__PURE__ */ jsx("p", {
-						className: cn$9("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$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)]"),
 						children: step.label
 					}), step.description && /* @__PURE__ */ jsx("p", {
 						className: "text-xs text-[var(--dashboard-text-secondary,#6b7280)] mt-0.5",
@@ -3447,12 +4276,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$9("flex items-center", index < resolvedSteps.length - 1 && "flex-1"),
+				className: cn$10("flex items-center", index < resolvedSteps.length - 1 && "flex-1"),
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => onStepChange?.(index),
 					disabled: !onStepChange,
-					className: cn$9("flex items-center gap-2 group", onStepChange && "cursor-pointer", !onStepChange && "cursor-default"),
+					className: cn$10("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,
@@ -3460,14 +4289,14 @@ function Stepper({ steps, activeStep, onStepChange, orientation = "horizontal",
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "hidden sm:block text-left",
 						children: [/* @__PURE__ */ jsx("p", {
-							className: cn$9("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$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)]"),
 							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$9("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$10("flex-1 h-0.5 mx-3", step.status === "completed" ? "bg-[var(--dashboard-primary,#37a501)]" : "bg-[var(--dashboard-text-secondary,#6b7280)]/20") })]
 			}, step.id))
 		})
 	});
@@ -3475,7 +4304,7 @@ function Stepper({ steps, activeStep, onStepChange, orientation = "horizontal",
 //#endregion
 //#region src/components/FileUpload/index.tsx
-const cn$8 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$9 = (...classes) => classes.filter(Boolean).join(" ");
 function formatSize(bytes) {
 	if (bytes < 1024) return `${bytes} B`;
 	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -3571,7 +4400,7 @@ function FileUpload({ accept, maxSize, multiple = false, onUpload, onRemove, pre
 				onDragOver: handleDragOver,
 				onDragLeave: handleDragLeave,
 				onClick: () => !disabled && inputRef.current?.click(),
-				className: cn$8("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$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"),
 				role: "button",
 				tabIndex: disabled ? -1 : 0,
 				"aria-label": label,
@@ -3594,7 +4423,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$8("h-8 w-8 mb-3", isDragging ? "text-[var(--dashboard-primary,#37a501)]" : "text-[var(--dashboard-text-secondary,#6b7280)]") }),
+						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)]") }),
 						/* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium text-[var(--dashboard-text-primary,#2d2d2d)]",
 							children: label
@@ -3661,16 +4490,18 @@ function FileUpload({ accept, maxSize, multiple = false, onUpload, onRemove, pre
 //#endregion
 //#region src/components/Tooltip/index.tsx
-const cn$7 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$8 = (...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);
 	const [coords, setCoords] = useState({
 		top: 0,
 		left: 0
 	});
+	const [actualPosition, setActualPosition] = useState(position);
 	const triggerRef = useRef(null);
 	const tooltipRef = useRef(null);
-	const timeoutRef = useRef();
+	const timeoutRef = useRef(null);
 	const idRef = useRef(`tooltip-${Math.random().toString(36).slice(2, 9)}`);
 	const calculatePosition = useCallback(() => {
 		if (!triggerRef.current || !tooltipRef.current) return;
@@ -3679,6 +4510,7 @@ function Tooltip({ content, position = "top", delay = 200, children, className,
 		const gap = 8;
 		let top = 0;
 		let left = 0;
+		let resolvedPosition = position;
 		switch (position) {
 			case "top":
 				top = trigger.top - tooltip.height - gap;
@@ -3697,31 +4529,65 @@ function Tooltip({ content, position = "top", delay = 200, children, className,
 				left = trigger.right + gap;
 				break;
 		}
+		if (position === "top" && top < 8) {
+			top = trigger.bottom + gap;
+			resolvedPosition = "bottom";
+		} else if (position === "bottom" && top + tooltip.height > window.innerHeight - 8) {
+			top = trigger.top - tooltip.height - gap;
+			resolvedPosition = "top";
+		}
 		left = Math.max(8, Math.min(left, window.innerWidth - tooltip.width - 8));
 		top = Math.max(8, Math.min(top, window.innerHeight - tooltip.height - 8));
 		setCoords({
 			top,
 			left
 		});
+		setActualPosition(resolvedPosition);
+		setPositioned(true);
 	}, [position]);
 	const show = useCallback(() => {
 		timeoutRef.current = setTimeout(() => {
 			setVisible(true);
+			setPositioned(false);
 		}, delay);
 	}, [delay]);
 	const hide = useCallback(() => {
 		if (timeoutRef.current) clearTimeout(timeoutRef.current);
 		setVisible(false);
+		setPositioned(false);
 	}, []);
 	useEffect(() => {
-		if (visible) requestAnimationFrame(calculatePosition);
+		if (visible) requestAnimationFrame(() => {
+			requestAnimationFrame(calculatePosition);
+		});
 	}, [visible, calculatePosition]);
 	useEffect(() => {
 		return () => {
 			if (timeoutRef.current) clearTimeout(timeoutRef.current);
 		};
 	}, []);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	let trigger;
+	if (isValidElement(children)) trigger = cloneElement(children, {
+		ref: triggerRef,
+		onMouseEnter: (e) => {
+			show();
+			children.props?.onMouseEnter?.(e);
+		},
+		onMouseLeave: (e) => {
+			hide();
+			children.props?.onMouseLeave?.(e);
+		},
+		onFocus: (e) => {
+			show();
+			children.props?.onFocus?.(e);
+		},
+		onBlur: (e) => {
+			hide();
+			children.props?.onBlur?.(e);
+		},
+		"aria-describedby": visible ? idRef.current : void 0
+	});
+	else trigger = /* @__PURE__ */ jsx("span", {
 		ref: triggerRef,
 		onMouseEnter: show,
 		onMouseLeave: hide,
@@ -3730,23 +4596,88 @@ function Tooltip({ content, position = "top", delay = 200, children, className,
 		"aria-describedby": visible ? idRef.current : void 0,
 		className: "inline-flex",
 		children
-	}), visible && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsx("div", {
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [trigger, visible && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsxs("div", {
 		ref: tooltipRef,
 		id: idRef.current,
 		role: "tooltip",
-		className: cn$7("fixed z-[10002] rounded-md px-3 py-2 text-xs font-medium", "bg-[var(--dashboard-text-primary,#2d2d2d)] text-white", "shadow-lg dashboard-animate-fade-in pointer-events-none", className),
+		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),
 		style: {
 			top: coords.top,
 			left: coords.left,
-			maxWidth
+			maxWidth,
+			opacity: positioned ? 1 : 0
 		},
-		children: content
+		children: [content, /* @__PURE__ */ jsx("span", { className: cn$8("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",
+			right: "top-1/2 -translate-y-1/2 right-full border-r-[var(--dashboard-tooltip-bg,#1a1a1a)] border-y-transparent border-l-transparent"
+		}[actualPosition]) })]
 	}), document.body)] });
 }
+//#endregion
+//#region src/components/InfoTooltip/index.tsx
+function InfoTooltip({ content, term, size = 14, position = "top", maxWidth = 280, className }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: term ? /* @__PURE__ */ jsxs("span", {
+			className: "text-xs leading-relaxed",
+			children: [
+				/* @__PURE__ */ jsx("strong", { children: term }),
+				" — ",
+				content
+			]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "text-xs leading-relaxed",
+			children: content
+		}),
+		position,
+		maxWidth,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			tabIndex: 0,
+			"aria-label": term ? `Informação sobre ${term}` : "Mais informações",
+			className: [
+				"inline-flex items-center justify-center rounded-full",
+				"text-[var(--dashboard-text-secondary,#6b7280)]",
+				"hover:text-[var(--dashboard-text-primary,#2d2d2d)]",
+				"hover:bg-[var(--dashboard-text-secondary,#6b7280)]/10",
+				"transition-colors duration-150 cursor-help",
+				"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--dashboard-primary,#2563EB)]/40",
+				className
+			].filter(Boolean).join(" "),
+			style: {
+				width: size + 6,
+				height: size + 6
+			},
+			children: /* @__PURE__ */ jsxs("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: "12",
+						cy: "12",
+						r: "10"
+					}),
+					/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+					/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+				]
+			})
+		})
+	});
+}
 //#endregion
 //#region src/components/Breadcrumb/index.tsx
-const cn$6 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$7 = (...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) => {
@@ -3768,7 +4699,7 @@ function Breadcrumb({ items, separator, onNavigate, className }) {
 						"aria-hidden": "true",
 						children: separator || defaultSeparator
 					}), isLast ? /* @__PURE__ */ jsxs("span", {
-						className: cn$6("flex items-center gap-1.5 text-sm font-medium", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
+						className: cn$7("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",
@@ -3777,7 +4708,7 @@ function Breadcrumb({ items, separator, onNavigate, className }) {
 					}) : /* @__PURE__ */ jsxs("a", {
 						href: item.href || "#",
 						onClick: (e) => handleClick(e, item.href),
-						className: cn$6("flex items-center gap-1.5 text-sm", "text-[var(--dashboard-text-secondary,#6b7280)]", "hover:text-[var(--dashboard-primary,#37a501)] transition-colors"),
+						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"),
 						children: [item.icon && /* @__PURE__ */ jsx("span", {
 							className: "flex-shrink-0 h-4 w-4",
 							children: item.icon
@@ -3791,7 +4722,7 @@ function Breadcrumb({ items, separator, onNavigate, className }) {
 //#endregion
 //#region src/components/Combobox/index.tsx
-const cn$5 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$6 = (...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("");
@@ -3921,7 +4852,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$5("space-y-2", className),
+		className: cn$6("space-y-2", className),
 		children: [
 			label && /* @__PURE__ */ jsx("label", {
 				className: "block text-sm text-[var(--dashboard-text-primary,#2d2d2d)]",
@@ -3937,7 +4868,7 @@ function Combobox({ options, value, onChange, multiple = false, searchable = tru
 					"aria-controls": "combobox-listbox",
 					tabIndex: disabled ? -1 : 0,
 					onClick: () => isOpen ? close() : open(),
-					className: cn$5("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$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)]"),
 					children: [
 						/* @__PURE__ */ jsx("div", {
 							className: "flex flex-1 flex-wrap items-center gap-1 min-w-0",
@@ -3965,7 +4896,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$5("h-4 w-4 flex-shrink-0 text-[var(--dashboard-text-secondary,#6b7280)] transition-transform", isOpen && "rotate-180") })
+						/* @__PURE__ */ jsx(ChevronDown, { className: cn$6("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",
@@ -4010,7 +4941,7 @@ function Combobox({ options, value, onChange, multiple = false, searchable = tru
 								onClick: () => {
 									if (!option.disabled) toggleOption(option.value);
 								},
-								className: cn$5("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$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)]"),
 								children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 									className: "truncate",
 									children: option.label
@@ -4030,7 +4961,7 @@ function Combobox({ options, value, onChange, multiple = false, searchable = tru
 //#endregion
 //#region src/components/Alert/index.tsx
-const cn$4 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$5 = (...classes) => classes.filter(Boolean).join(" ");
 const variantConfig$1 = {
 	info: {
 		border: "border-[var(--dashboard-status-info,#3b82f6)]",
@@ -4060,24 +4991,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$4("rounded-lg border-l-4 p-4", config.border, config.bg, className),
+		className: cn$5("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$4("flex-shrink-0 mt-0.5", config.text),
+					className: cn$5("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$4("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
+							className: cn$5("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
 							children: title
 						}),
 						description && /* @__PURE__ */ jsx("div", {
-							className: cn$4("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
+							className: cn$5("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
 							children: description
 						}),
 						actions && /* @__PURE__ */ jsx("div", {
@@ -4099,7 +5030,7 @@ function Alert({ variant = "info", title, description, onClose, actions, icon, c
 //#endregion
 //#region src/components/Callout/index.tsx
-const cn$3 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$4 = (...classes) => classes.filter(Boolean).join(" ");
 const variantConfig = {
 	info: {
 		border: "border-[var(--dashboard-status-info,#3b82f6)]",
@@ -4129,20 +5060,20 @@ const variantConfig = {
 function Callout({ variant = "info", title, children, icon, className }) {
 	const config = variantConfig[variant];
 	return /* @__PURE__ */ jsx("div", {
-		className: cn$3("rounded-lg border-l-4 p-4 my-4", config.border, config.bg, className),
+		className: cn$4("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$3("flex-shrink-0 mt-0.5", config.text),
+				className: cn$4("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$3("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
+					className: cn$4("text-sm font-semibold", "text-[var(--dashboard-text-primary,#2d2d2d)]"),
 					children: title
 				}), children && /* @__PURE__ */ jsx("div", {
-					className: cn$3("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
+					className: cn$4("text-sm text-[var(--dashboard-text-secondary,#6b7280)]", title && "mt-1"),
 					children
 				})]
 			})]
@@ -4152,7 +5083,7 @@ function Callout({ variant = "info", title, children, icon, className }) {
 //#endregion
 //#region src/components/CodeBlock/index.tsx
-const cn$2 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$3 = (...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 () => {
@@ -4164,7 +5095,7 @@ function CodeBlock({ code, language, filename, showLineNumbers = false, classNam
 	}, [code]);
 	const lines = code.split("\n");
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$2("relative rounded-lg overflow-hidden border border-[var(--dashboard-text-secondary,#64748B)]/12 my-4", className),
+		className: cn$3("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: [
@@ -4198,7 +5129,7 @@ function CodeBlock({ code, language, filename, showLineNumbers = false, classNam
 				})
 			}), /* @__PURE__ */ jsxs("button", {
 				onClick: handleCopy,
-				className: cn$2("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$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"),
 				"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 })]
@@ -4209,10 +5140,10 @@ function CodeBlock({ code, language, filename, showLineNumbers = false, classNam
 //#endregion
 //#region src/components/EmptyState/index.tsx
-const cn$1 = (...classes) => classes.filter(Boolean).join(" ");
+const cn$2 = (...classes) => classes.filter(Boolean).join(" ");
 function EmptyState({ icon, title, description, action, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn$1("flex flex-col items-center justify-center py-12 px-6 text-center", className),
+		className: cn$2("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",
@@ -4236,7 +5167,7 @@ function EmptyState({ icon, title, description, action, className }) {
 //#endregion
 //#region src/components/StatusBadge/index.tsx
-const cn = (...classes) => classes.filter(Boolean).join(" ");
+const cn$1 = (...classes) => classes.filter(Boolean).join(" ");
 const defaultColorMap = {
 	ACTIVE: "var(--dashboard-status-success,#10B981)",
 	APPROVED: "var(--dashboard-status-success,#10B981)",
@@ -4260,7 +5191,7 @@ const defaultColorMap = {
 };
 const sizeClasses = {
 	sm: "px-2 py-0.5 text-xs",
-	md: "px-2.5 py-1 text-xs",
+	md: "px-2.5 py-1 text-sm",
 	lg: "px-3 py-1 text-sm"
 };
 const dotSizeClasses = {
@@ -4278,18 +5209,398 @@ 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("inline-flex items-center gap-1.5 rounded-full font-medium whitespace-nowrap", sizeClasses[size], className),
+		className: cn$1("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("rounded-full flex-shrink-0", dotSizeClasses[size]),
+			className: cn$1("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;
+}
+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);
+				if (distance < min) {
+					min = distance;
+					fallbackIdx = i;
+				}
+			}
+			if (fallbackIdx !== -1) updated[fallbackIdx] = {
+				...updated[fallbackIdx],
+				active: true,
+				fallback: true,
+				t: Date.now()
+			};
+		}
+		this.update(updated);
+	}
+	observeAll() {
+		if (!this.intersectionObserver) return;
+		for (const item of this.items) {
+			const el = document.getElementById(item.id);
+			if (el) this.intersectionObserver.observe(el);
+		}
+	}
+	update(next) {
+		this.items = next;
+		for (const fn of this.listeners) fn(next);
+	}
+};
+const ObserverContext = createContext(null);
+const ItemsContext = createContext([]);
+const LinksRefContext = createContext(null);
+function useObserver() {
+	const observer = useContext(ObserverContext);
+	if (!observer) throw new Error("TableOfContents hooks must be used inside <TOCProvider> or <TableOfContents>.");
+	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).
+*/
+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("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 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/config/defaults.ts
 const defaultConfig = {
@@ -4309,7 +5620,9 @@ const defaultConfig = {
 		statusDanger: "#DC2626",
 		statusWarning: "#D97706",
 		statusInfo: "#2563EB",
-		statusNeutral: "#64748B"
+		statusNeutral: "#64748B",
+		tooltipBg: "#1a1a1a",
+		tooltipText: "#ffffff"
 	},
 	components: {
 		modal: {
@@ -4523,6 +5836,8 @@ function CSSVarsInjector({ config }) {
 		root.style.setProperty("--dashboard-status-warning", colors.statusWarning);
 		root.style.setProperty("--dashboard-status-info", colors.statusInfo);
 		root.style.setProperty("--dashboard-status-neutral", colors.statusNeutral);
+		root.style.setProperty("--dashboard-tooltip-bg", colors.tooltipBg);
+		root.style.setProperty("--dashboard-tooltip-text", colors.tooltipText);
 	}, [config]);
 	return null;
 }
@@ -4535,5 +5850,50 @@ function DashboardProvider({ config: configOverrides, children }) {
 }
 //#endregion
-export { Alert, AuthLayout, BadgeStatus, Breadcrumb, Button, Callout, Card, Checkbox, CodeBlock, CodeInput, Combobox, ComparisonLineChart, DashboardProvider, DataGrid, DateRangePicker, DoughnutChart, Dropdown, EmptyState, FileUpload, FilterBar, FormField, HorizontalBarChart, Input, KPICard, Loading, LoadingProvider, MetricPanel, Modal, NotificationsProvider, PageLayout, Pagination, ProgressBarList, Sidebar, Skeleton, StatusBadge, Stepper, Table, TableBody, TableEmpty, TableHeader, TableSkeleton, Tabs, ThemeProvider, ThemeSwitcher, Title, Toast, ToggleSwitch, Tooltip, TreeView, VerticalBarChart, createColumnHelper, createConfig, defaultConfig, useConfig, useLoading, useNotifications, useTheme };
+//#region src/config/sizes.ts
+const componentSizes = {
+	sm: {
+		height: "h-8",
+		paddingX: "px-3",
+		paddingY: "py-0",
+		font: "text-xs"
+	},
+	md: {
+		height: "h-9",
+		paddingX: "px-4",
+		paddingY: "py-0",
+		font: "text-sm"
+	},
+	lg: {
+		height: "h-10",
+		paddingX: "px-6",
+		paddingY: "py-0",
+		font: "text-base"
+	}
+};
+const badgeSizes = {
+	sm: {
+		padding: "px-2 py-0.5",
+		font: "text-xs"
+	},
+	md: {
+		padding: "px-3 py-1",
+		font: "text-sm"
+	},
+	lg: {
+		padding: "px-3 py-1",
+		font: "text-sm"
+	}
+};
+const modalSizes = {
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-2xl",
+	"2xl": "max-w-4xl",
+	"3xl": "max-w-screen-xl"
+};
+//#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 };
 //# sourceMappingURL=index.mjs.map