@mlw-packages/react-components 1.8.4 → 1.8.6

package/dist/index.js

@@ -515,6 +515,7 @@ __export(index_exports, {
   BreadcrumbListBase: () => BreadcrumbListBase,
   BreadcrumbPageBase: () => BreadcrumbPageBase,
   BreadcrumbSeparatorBase: () => BreadcrumbSeparatorBase,
+  Brush: () => Brush_default,
   ButtonBase: () => ButtonBase,
   ButtonGroupBase: () => ButtonGroupBase,
   CalendarBase: () => CalendarBase,
@@ -768,6 +769,7 @@ __export(index_exports, {
   ThemeProviderBase: () => ThemeProviderBase,
   TimePicker: () => TimePicker,
   TimePickerInput: () => TimePickerInput,
+  TimeSeries: () => TimeSeries_default,
   Toaster: () => Toaster,
   TooltipBase: () => TooltipBase,
   TooltipContentBase: () => TooltipContentBase,
@@ -863,6 +865,7 @@ __export(index_exports, {
   useEventVisibilityAgenda: () => useEventVisibilityAgenda,
   useIsMobile: () => useIsMobile,
   useTheme: () => useTheme,
+  useTimeSeriesRange: () => useTimeSeriesRange,
   visualForItem: () => visualForItem
 });
 module.exports = __toCommonJS(index_exports);
@@ -1021,18 +1024,12 @@ var DialogContentBase = React2.forwardRef(
         {
           ref,
           className: cn(
-            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-hidden rounded-md",
+            "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-auto rounded-md border-border",
             className
           ),
           "data-testid": dataTestId,
           ...props,
-          onWheel: (e) => {
-            try {
-              userOnWheel?.(e);
-            } finally {
-              e.stopPropagation();
-            }
-          },
+          onWheel: userOnWheel,
           children: [
             children,
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(DialogPrimitive.Close, { className: "absolute right-3 top-3 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10 touch-manipulation", children: [
@@ -1349,7 +1346,7 @@ var ProgressBase = React5.forwardRef(
       default:
         return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
           label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LabelBase_default, { className: "py-2", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
             showValue && valuePosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-12 text-sm text-right font-extrabold", children: [
               Math.round(value || 0),
               "%"
@@ -1561,45 +1558,55 @@ function SkeletonBase({
 var import_react2 = require("@phosphor-icons/react");
 var import_sonner = require("sonner");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var iconBaseClass = "w-5 h-auto";
+var iconBaseClass = "w-5 h-5";
 var Toaster = ({ testId, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_sonner.Toaster,
     {
       className: "toaster group",
       position: "top-center",
+      duration: 4e3,
       toastOptions: {
+        style: {
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)"
+        },
         classNames: {
           toast: `
             group toast
-            bg-background
+            bg-background/95
             text-foreground
-            shadow-lg rounded-md
+            shadow-xl rounded-lg
             border-l-4
             border-border
             flex items-center gap-3
-            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50 data-[type=success]:text-green-800 data-[type=success]:border-green-500
-            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50 data-[type=error]:text-red-800 data-[type=error]:border-red-500
-            data-[type=WarningIcon]:border-l-yellow-500 data-[type=WarningIcon]:bg-yellow-50 data-[type=WarningIcon]:text-yellow-800 data-[type=WarningIcon]:border-yellow-500
-            data-[type=InfoIcon]:border-l-blue-500 data-[type=InfoIcon]:bg-blue-50 data-[type=InfoIcon]:text-blue-800 data-[type=InfoIcon]:border-blue-500
+            transition-all duration-300
+            hover:scale-[1.02] hover:shadow-2xl
+            data-[type=success]:border-l-green-500 data-[type=success]:bg-green-50/95 data-[type=success]:text-green-800 data-[type=success]:border-green-500
+            data-[type=error]:border-l-red-500 data-[type=error]:bg-red-50/95 data-[type=error]:text-red-800 data-[type=error]:border-red-500
+            data-[type=warning]:border-l-yellow-500 data-[type=warning]:bg-yellow-50/95 data-[type=warning]:text-yellow-800 data-[type=warning]:border-yellow-500
+            data-[type=info]:border-l-blue-500 data-[type=info]:bg-blue-50/95 data-[type=info]:text-blue-800 data-[type=info]:border-blue-500
           `,
           description: `
-            text-sm
+            text-xs
+            font-semibold
             group-[.toast]:text-neutral-600
           `,
           actionButton: `
             ml-auto
             rounded-md px-3 py-1 text-sm font-semibold
             bg-neutral-800 text-white
-            hover:bg-neutral-700
-            transition-colors duration-200
+            hover:bg-neutral-700 hover:scale-105
+            transition-all duration-200
+            active:scale-95
           `,
           cancelButton: `
             ml-2
             rounded-md px-3 py-1 text-sm font-semibold
             bg-neutral-100 text-neutral-700
-            hover:bg-neutral-200
-            transition-colors duration-200
+            hover:bg-neutral-200 hover:scale-105
+            transition-all duration-200
+            active:scale-95
           `
         }
       },
@@ -1609,24 +1616,52 @@ var Toaster = ({ testId, ...props }) => {
   );
 };
 var toast = {
-  success: (message) => import_sonner.toast.success(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.CheckCircleIcon, { className: `${iconBaseClass} text-green-600`, weight: "fill" }),
+  success: (message, description) => import_sonner.toast.success(message, {
+    description,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react2.CheckCircleIcon,
+      {
+        className: `${iconBaseClass} text-green-600`,
+        weight: "fill"
+      }
+    ),
     className: "sonner-success"
   }),
-  error: (message) => import_sonner.toast.error(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.XCircleIcon, { className: `${iconBaseClass} text-red-600`, weight: "fill" }),
+  error: (message, description) => import_sonner.toast.error(message, {
+    description,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react2.XCircleIcon,
+      {
+        className: `${iconBaseClass} text-red-600`,
+        weight: "fill"
+      }
+    ),
     className: "sonner-error"
   }),
-  warning: (message) => import_sonner.toast.warning(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.WarningIcon, { className: `${iconBaseClass} text-yellow-600`, weight: "fill" }),
-    className: "sonner-WarningIcon"
+  warning: (message, description) => import_sonner.toast.warning(message, {
+    description,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react2.WarningIcon,
+      {
+        className: `${iconBaseClass} text-yellow-600`,
+        weight: "fill"
+      }
+    ),
+    className: "sonner-warning"
   }),
-  info: (message) => import_sonner.toast.info(message, {
+  info: (message, description) => import_sonner.toast.info(message, {
+    description,
     icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.InfoIcon, { className: `${iconBaseClass} text-blue-600`, weight: "fill" }),
-    className: "sonner-InfoIcon"
+    className: "sonner-info"
   }),
-  loading: (message) => (0, import_sonner.toast)(message, {
-    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react2.SpinnerIcon, { className: `${iconBaseClass} animate-spin text-neutral-500`, weight: "fill" }),
+  loading: (message, description) => (0, import_sonner.toast)(message, {
+    description,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react2.CircleNotchIcon,
+      {
+        className: `${iconBaseClass} animate-spin text-gray-600`
+      }
+    ),
     className: "sonner-loading"
   })
 };
@@ -1774,12 +1809,21 @@ var TooltipTriggerBase = React7.forwardRef(({ children, onPointerDown, ...props
     },
     [onPointerDown]
   );
+  const onClick = React7.useCallback(
+    (e) => {
+      if (onPointerDown) {
+        onPointerDown(e);
+      }
+    },
+    [onPointerDown]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     TooltipPrimitive.Trigger,
     {
       ref,
       tabIndex: -1,
       onPointerDown: onPointerDown ? handlePointerDown : void 0,
+      onClick,
       "data-tooltip-trigger": true,
       "aria-describedby": "tooltip-content",
       ...props,
@@ -1944,7 +1988,7 @@ var ModalContentBase = React9.forwardRef(
           ref,
           className: cn(
             "fixed z-50 grid w-full gap-4 border bg-background p-6 shadow-lg sm:rounded-lg max-h-[90dvh] overflow-auto",
-            "data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out",
+            "data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out border-border",
             positionClass,
             sizeClass,
             className
@@ -2024,7 +2068,7 @@ var buttonVariantsBase = (0, import_class_variance_authority2.cva)(
       variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:border-input dark:hover:bg-background/95",
+        outline: "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:border-input dark:hover:bg-background/95",
         select: "box-border border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:hover:bg-background/95",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
@@ -2380,6 +2424,11 @@ var PopoverContentBase = React13.forwardRef(
         className
       ),
       "data-testid": dataTestId,
+      onInteractOutside: (event) => {
+        props.onInteractOutside?.(event);
+        if (event.defaultPrevented) return;
+        event.stopPropagation();
+      },
       ...props
     }
   ) })
@@ -2441,7 +2490,7 @@ function ComboboxBase({
   testIds = {},
   onClear,
   hasSelected = false,
-  hiddenClean = (node) => node
+  hideClear = false
 }) {
   const [open, setOpen] = (0, import_react9.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
@@ -2455,13 +2504,13 @@ function ComboboxBase({
           {
             open,
             onOpenChange: (v) => !disabled && setOpen(v),
-            modal: true,
+            modal: false,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 PopoverTriggerBase,
                 {
                   asChild: true,
-                  className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)]",
+                  className: "flex w-full justify-between dark:bg-[hsl(231,15%,19%)] p-3",
                   children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                     ButtonBase,
                     {
@@ -2479,19 +2528,17 @@ function ComboboxBase({
                       children: [
                         renderSelected,
                         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_framer_motion2.motion.span, { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-row gap-0 items-center ", children: [
-                          hasSelected && onClear && !disabled && hiddenClean(
-                            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                              ClearButton,
-                              {
-                                onClick: (e) => {
-                                  if (e) e.stopPropagation();
-                                  if (onClear && !disabled) {
-                                    onClear();
-                                    if (!keepOpen) setOpen(false);
-                                  }
+                          hasSelected && onClear && !disabled && !hideClear && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                            ClearButton,
+                            {
+                              onClick: (e) => {
+                                if (e) e.stopPropagation();
+                                if (onClear && !disabled) {
+                                  onClear();
+                                  if (!keepOpen) setOpen(false);
                                 }
                               }
-                            )
+                            }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                             import_framer_motion2.motion.div,
@@ -2607,7 +2654,8 @@ function Combobox({
   label,
   labelClassname,
   testIds,
-  error
+  error,
+  hideClear = false
 }) {
   const selectedItem = items.find((item) => item.value === selected);
   const renderSelected = (0, import_react11.useMemo)(() => {
@@ -2653,7 +2701,8 @@ function Combobox({
         testIds,
         onClear: handleClear,
         isMulti: false,
-        hasSelected: !!selectedItem
+        hasSelected: !!selectedItem,
+        hideClear
       }
     )
   ] });
@@ -2728,14 +2777,19 @@ function MultiSelectBase({
   onValuesChange,
   disabled,
   empty,
-  error
+  error,
+  initialItems
 }) {
   const [open, setOpen] = (0, import_react13.useState)(false);
   const [internalValues, setInternalValues] = (0, import_react13.useState)(
     new Set(values ?? defaultValues)
   );
   const selectedValues = values ? new Set(values) : internalValues;
-  const [items, setItems] = (0, import_react13.useState)(/* @__PURE__ */ new Map());
+  const [items, setItems] = (0, import_react13.useState)(() => {
+    if (!initialItems) return /* @__PURE__ */ new Map();
+    if (initialItems instanceof Map) return new Map(initialItems);
+    return new Map(initialItems.map((it) => [it.value, it.label]));
+  });
   function toggleValue(value) {
     if (disabled) return;
     const getNewSet = (prev) => {
@@ -2951,41 +3005,48 @@ function MultiSelectContentBase({
   ...props
 }) {
   const canSearch = typeof search === "object" ? true : search;
-  const { emptyMessage, items } = useMultiSelectContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PopoverContentBase, { className: "w-[--radix-popover-trigger-width] relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md p-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_framer_motion3.motion.div,
+  const { emptyMessage, items, open } = useMultiSelectContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    PopoverContentBase,
     {
-      initial: { opacity: 0, scale: 0.95 },
-      animate: { opacity: 1, scale: 1 },
-      exit: { opacity: 0, scale: 0.95 },
-      transition: { duration: 0.2 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(" "), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-        CommandBase,
+      forceMount: true,
+      className: "w-[--radix-popover-trigger-width] relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md p-0",
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_framer_motion3.motion.div,
         {
-          ...props,
-          filter: (value, search2) => {
-            const labelNode = items.get(value);
-            const label = typeof labelNode === "string" ? labelNode : value;
-            if (label.toLowerCase().includes(search2.toLowerCase()))
-              return 1;
-            return 0;
-          },
-          children: [
-            canSearch ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              CommandInputBase,
-              {
-                placeholder: typeof search === "object" ? search.placeholder : void 0
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { autoFocus: true, className: "sr-only" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CommandListBase, { children: [
-              canSearch && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CommandEmptyBase, { children: typeof search === "object" ? search.emptyMessage ?? emptyMessage : emptyMessage }),
-              children
-            ] })
-          ]
+          initial: { opacity: 0, scale: 0.95 },
+          animate: { opacity: open ? 1 : 0, scale: open ? 1 : 0.95 },
+          transition: { duration: 0.2 },
+          style: { pointerEvents: open ? "auto" : "none" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(" "), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            CommandBase,
+            {
+              ...props,
+              filter: (value, search2) => {
+                const labelNode = items.get(value);
+                const label = typeof labelNode === "string" ? labelNode : value;
+                if (label.toLowerCase().includes(search2.toLowerCase()))
+                  return 1;
+                return 0;
+              },
+              children: [
+                canSearch ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  CommandInputBase,
+                  {
+                    placeholder: typeof search === "object" ? search.placeholder : void 0
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { autoFocus: true, className: "sr-only" }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CommandListBase, { children: [
+                  canSearch && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CommandEmptyBase, { children: typeof search === "object" ? search.emptyMessage ?? emptyMessage : emptyMessage }),
+                  children
+                ] })
+              ]
+            }
+          ) })
         }
-      ) })
+      )
     }
-  ) }) });
+  ) });
 }
 function MultiSelectItemBase({
   value,
@@ -3087,6 +3148,7 @@ function MultiCombobox({
             disabled,
             empty,
             error,
+            initialItems: items,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 MultiSelectTriggerBase,
@@ -3127,8 +3189,7 @@ function MultiCombobox({
               )
             ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ErrorMessage_default, { error })
+        )
       ]
     }
   );
@@ -3208,6 +3269,11 @@ var SelectContentBase = React14.forwardRef(
       ),
       position,
       "data-testid": dataTestId,
+      onPointerDownOutside: (event) => {
+        props.onPointerDownOutside?.(event);
+        if (event.defaultPrevented) return;
+        event.stopPropagation();
+      },
       ...props,
       asChild: true,
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -3356,7 +3422,7 @@ var DropDownMenuContentBase = React15.forwardRef(
           exit: { opacity: 0, scale: 0.95, y: 5 },
           transition: { duration: 0.2, ease: "easeOut" },
           className: cn(
-            "min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+            "min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border",
             className
           ),
           children: props.children
@@ -3540,35 +3606,13 @@ function ModeToggleBase({
       setTheme(newTheme);
       return;
     }
-    const button = buttonRef.current;
-    const rect = button.getBoundingClientRect();
+    const rect = buttonRef.current.getBoundingClientRect();
     const x = rect.left + rect.width / 2;
     const y = rect.top + rect.height / 2;
     const endRadius = Math.hypot(
       Math.max(x, window.innerWidth - x),
       Math.max(y, window.innerHeight - y)
     );
-    const styleId = "theme-transition-styles";
-    if (!document.getElementById(styleId)) {
-      const style = document.createElement("style");
-      style.id = styleId;
-      style.textContent = `
-        ::view-transition-old(root),
-        ::view-transition-new(root) {
-          animation: none;
-          mix-blend-mode: normal;
-        }
-        
-        ::view-transition-old(root) {
-          z-index: 1;
-        }
-        
-        ::view-transition-new(root) {
-          z-index: 2;
-        }
-      `;
-      document.head.appendChild(style);
-    }
     const transition = document.startViewTransition(async () => {
       setTheme(newTheme);
     });
@@ -3576,14 +3620,14 @@ function ModeToggleBase({
     document.documentElement.animate(
       [
         {
-          clipPath: `circle(0% at ${x}px ${y}px)`
+          clipPath: `circle(0px at ${x}px ${y}px)`
         },
         {
           clipPath: `circle(${Math.ceil(endRadius)}px at ${x}px ${y}px)`
         }
       ],
       {
-        duration: 600,
+        duration: 400,
         easing: "cubic-bezier(0.4, 0, 0.2, 1)",
         pseudoElement: "::view-transition-new(root)"
       }
@@ -3743,7 +3787,7 @@ var CardBase = React17.forwardRef(({ className, testid: dataTestId = "card-base"
   {
     ref,
     className: cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border border-border bg-card text-card-foreground shadow",
       className
     ),
     "data-testid": dataTestId,
@@ -7911,7 +7955,7 @@ function CalendarBase2({
     "div",
     {
       className: cn(
-        "rounded-md border bg-background p-3 overflow-hidden flex flex-col",
+        "rounded-md border p-3 overflow-hidden flex flex-col",
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
@@ -7932,12 +7976,12 @@ function CalendarBase2({
             button_previous: cn(
               buttonVariantsBase({ variant: "outline" }),
               "h-8 w-8 flex items-center justify-center p-0 rounded-md transition-transform duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 active:scale-95 absolute right-11 top-0 z-10",
-              isMobile ? "mr-8" : ""
+              isMobile ? "" : ""
             ),
             button_next: cn(
               buttonVariantsBase({ variant: "outline" }),
               "h-8 w-8 flex items-center justify-center p-0 rounded-md transition-transform duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/40 active:scale-95 absolute right-0 top-0 z-10",
-              isMobile ? "mr-8" : ""
+              isMobile ? "" : ""
             ),
             month_grid: "w-full min-w-0 flex-1 grid grid-rows-[auto_1fr] gap-2",
             weekdays: "grid grid-cols-7 gap-1 mb-1",
@@ -7957,8 +8001,8 @@ function CalendarBase2({
             ),
             selected: "bg-primary text-primary-foreground hover:bg-primary/90 focus:bg-primary/90 font-semibold hover:text-white rounded-md",
             today: "bg-muted text-foreground font-bold ring-2 ring-primary/30 ring-inset rounded-md",
-            outside: "text-muted-foreground/40 opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
-            disabled: "text-muted-foreground/30 opacity-40 cursor-not-allowed",
+            outside: "text-muted-foreground opacity-60 aria-selected:bg-muted/50 aria-selected:text-foreground",
+            disabled: "text-muted-foreground cursor-not-allowed",
             range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
             hidden: "invisible",
             ...classNames
@@ -7988,29 +8032,19 @@ var import_react46 = require("@phosphor-icons/react");
 // src/components/ui/picker/TimeScrollPicker.tsx
 var import_react43 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var ITEM_HEIGHT = 39;
-var ITEM_HEIGHT_MOBILE = 32;
+var ITEM_HEIGHT = 38.5;
 var VISIBLE_ITEMS = 5;
-var VISIBLE_ITEMS_MOBILE = 3;
 var CENTER_INDEX = Math.floor(VISIBLE_ITEMS / 2);
-var CENTER_INDEX_MOBILE = Math.floor(VISIBLE_ITEMS_MOBILE / 2);
-function ScrollColumn({
-  value,
-  onChange,
-  max,
-  label,
-  hideSeconds
-}) {
-  const isMobile = useIsMobile();
+function ScrollColumn({ value, onChange, max, label }) {
   const containerRef = (0, import_react43.useRef)(null);
   const items = Array.from({ length: max }, (_, i) => i);
   const [isDragging, setIsDragging] = (0, import_react43.useState)(false);
   const [startY, setStartY] = (0, import_react43.useState)(0);
   const [scrollTop, setScrollTop] = (0, import_react43.useState)(0);
   const scrollTimeoutRef = (0, import_react43.useRef)(null);
-  const itemHeight = isMobile ? ITEM_HEIGHT_MOBILE : ITEM_HEIGHT;
-  const centerIndex = isMobile ? CENTER_INDEX_MOBILE : CENTER_INDEX;
-  const visibleItems = isMobile ? VISIBLE_ITEMS_MOBILE : VISIBLE_ITEMS;
+  const itemHeight = ITEM_HEIGHT;
+  const centerIndex = CENTER_INDEX;
+  const visibleItems = VISIBLE_ITEMS;
   const containerHeight = visibleItems * itemHeight;
   (0, import_react43.useEffect)(() => {
     if (containerRef.current && !isDragging) {
@@ -8029,7 +8063,9 @@ function ScrollColumn({
       }
     };
   }, []);
-  const handleScroll = () => {
+  const handleScroll = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
     if (!containerRef.current || isDragging) return;
     if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
     scrollTimeoutRef.current = setTimeout(() => {
@@ -8067,15 +8103,18 @@ function ScrollColumn({
   const handleMouseLeave = () => {
     if (isDragging) handleMouseUp();
   };
-  const containerWidth = isMobile ? hideSeconds ? "w-16" : "w-8" : "w-16";
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-muted-foreground rounded-md font-semibold text-[clamp(0.575rem,1.2vw,0.75rem)] sm:text-[clamp(0.65rem,1.1vw,0.825rem)] text-center pb-1 uppercase tracking-wider", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("relative", containerWidth), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  const handleWheel = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-muted-foreground rounded-md font-semibold text-sm sm:text-sm text-center pb-2 uppercase tracking-wider", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("relative w-20 sm:w-16"), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "div",
       {
         ref: containerRef,
-        className: "overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+        className: "overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] touch-action-pan-y",
         onScroll: handleScroll,
+        onWheel: handleWheel,
         onMouseDown: handleMouseDown,
         onMouseMove: handleMouseMove,
         onMouseUp: handleMouseUp,
@@ -8092,9 +8131,9 @@ function ScrollColumn({
             "div",
             {
               className: cn(
-                "flex items-center justify-center select-none font-semibold tabular-nums",
+                "flex items-center justify-center select-none font-semibold tabular-nums transition-all duration-150",
                 isDragging ? "cursor-grabbing" : "",
-                isSelected ? "sm:text-lg text-md text-foreground" : "sm:text-sm text-xs text-muted-foreground"
+                isSelected ? "text-lg sm:text-xl text-foreground scale-110" : "text-sm sm:text-base text-muted-foreground opacity-60"
               ),
               style: { height: `${itemHeight}px` },
               onClick: () => !isDragging && onChange(item),
@@ -8112,10 +8151,9 @@ function TimeScrollPicker({
   setDate,
   hideSeconds = false
 }) {
-  const isMobile = useIsMobile();
   const currentDate = date || /* @__PURE__ */ new Date();
-  const itemHeight = isMobile ? ITEM_HEIGHT_MOBILE : ITEM_HEIGHT;
-  const centerIndex = isMobile ? CENTER_INDEX_MOBILE : CENTER_INDEX;
+  const itemHeight = ITEM_HEIGHT;
+  const centerIndex = CENTER_INDEX;
   const handleTimeChange = (type, value) => {
     const newDate = new Date(currentDate);
     if (type === "hours") newDate.setHours(value);
@@ -8123,13 +8161,13 @@ function TimeScrollPicker({
     else newDate.setSeconds(value);
     setDate(newDate);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center justify-center gap-2 p-3", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: cn("relative flex gap-2"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center justify-center gap-2 p-3 sm:p-4", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: cn("relative flex gap-4 sm:gap-3"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "div",
       {
-        className: "absolute left-0 right-0  pointer-events-none z-10 rounded-md bg-primary/5",
+        className: "absolute left-0 right-0 pointer-events-none z-10 rounded-lg bg-primary/10 border border-primary/20",
         style: {
-          top: `calc(1.75rem + ${centerIndex * itemHeight}px)`,
+          top: `calc(1.85rem + ${centerIndex * itemHeight}px)`,
           height: `${itemHeight}px`
         }
       }
@@ -8217,12 +8255,17 @@ function DateTimePicker({
 }) {
   const [internalDate, setInternalDate] = (0, import_react45.useState)(date);
   const [open, setOpen] = (0, import_react45.useState)(false);
+  const [activeTab, setActiveTab] = (0, import_react45.useState)("calendar");
   const isMobile = useIsMobile();
   const handleSelect = (newDay) => {
     if (!newDay) return;
     if (!internalDate) {
       const now = /* @__PURE__ */ new Date();
-      newDay.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
+      newDay.setUTCHours(
+        now.getUTCHours(),
+        now.getUTCMinutes(),
+        now.getUTCSeconds()
+      );
       setInternalDate(newDay);
       onChange?.(newDay);
       return;
@@ -8235,7 +8278,6 @@ function DateTimePicker({
   };
   const handleTimeChange = (newDate) => {
     setInternalDate(newDate);
-    onChange?.(newDate);
   };
   const getTimeFormat = () => {
     if (hideTime) return "";
@@ -8252,6 +8294,9 @@ function DateTimePicker({
   };
   (0, import_react45.useEffect)(() => {
     setInternalDate(date);
+    if (open) {
+      setActiveTab("calendar");
+    }
   }, [date, open]);
   const { ref: contentRef, center } = use_auto_center_default(open);
   const basePopoverClass = "w-auto max-w-[calc(100vw-16px)] p-0 border-none shadow-none";
@@ -8291,12 +8336,55 @@ function DateTimePicker({
       ]
     }
   );
-  const renderPickerContent = () => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "p-3 border rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  const renderPickerContent = () => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "p-2 sm:p-3 border border-border rounded-md", children: [
+    isMobile && !hideTime ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "min-h-[380px] max-h-[calc(400px)]", children: [
+      internalDate && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex  items-center gap-3 px-4 py-3 rounded-lg ", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "text-md font-semibold", children: [
+        (0, import_date_fns.format)(internalDate, "dd 'de' MMMM 'de' yyyy", {
+          locale: import_locale2.ptBR
+        }),
+        " ",
+        "- ",
+        (0, import_date_fns.format)(internalDate, hideSeconds ? "HH:mm" : "HH:mm:ss")
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(TabsBase, { value: activeTab, onValueChange: setActiveTab, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(TabsListBase, { className: "", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TabsTriggerBase, { value: "calendar", className: "flex-1", children: "Data" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TabsTriggerBase, { value: "time", className: "flex-1", children: "Hor\xE1rio" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TabsContentBase, { value: "calendar", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          CalendarBase2,
+          {
+            mode: "single",
+            locale: import_locale2.ptBR,
+            selected: internalDate ?? void 0,
+            onSelect: (d) => handleSelect(d ?? null),
+            autoFocus: true,
+            defaultMonth: fromDate ?? toDate ?? internalDate ?? void 0,
+            ...fromDate && { startMonth: fromDate },
+            ...toDate && { endMonth: toDate },
+            ...fromDate || toDate ? {
+              disabled: [
+                ...fromDate ? [{ before: fromDate }] : [],
+                ...toDate ? [{ after: toDate }] : []
+              ]
+            } : {},
+            className: cn("w-full rounded-none border-none")
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TabsContentBase, { value: "time", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex flex-col items-center justify-center gap-4 py-2 min-h-[330px]", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          TimeScrollPicker,
+          {
+            setDate: (d) => handleTimeChange(d ?? null),
+            date: internalDate,
+            hideSeconds
+          }
+        ) }) })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
       "div",
       {
         ref: contentRef,
-        className: "flex sm:flex-row max-h-auto overflow-y-auto border-none rounded-md",
+        className: "flex flex-col sm:flex-row max-h-auto overflow-y-auto border-none rounded-md",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             CalendarBase2,
@@ -8310,15 +8398,14 @@ function DateTimePicker({
               ...fromDate && { startMonth: fromDate },
               ...toDate && { endMonth: toDate },
               ...fromDate || toDate ? {
-                hidden: [
+                disabled: [
                   ...fromDate ? [{ before: fromDate }] : [],
                   ...toDate ? [{ after: toDate }] : []
                 ]
               } : {},
               className: cn(
                 "w-max rounded-none border-none",
-                !hideTime && "sm:rounded-r-none rounded-b-none",
-                isMobile ? "border-b-transparent w-full" : ""
+                !hideTime && "sm:rounded-r-none"
               )
             }
           ),
@@ -8327,7 +8414,7 @@ function DateTimePicker({
             {
               className: cn(
                 "flex flex-col items-center justify-center",
-                isMobile ? "border-none" : "border-l"
+                "border-l"
               ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-[clamp(0.85rem,1.4vw,1.125rem)] sm:text-[clamp(0.9rem,1.6vw,1.125rem)] font-semibold capitalize text-left", children: "Hor\xE1rio" }),
@@ -8345,60 +8432,61 @@ function DateTimePicker({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex rounded-md p-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "grid grid-cols-2 w-full gap-12", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-          ButtonBase,
-          {
-            variant: "outline",
-            size: "icon",
-            className: "no-active-animation",
-            tooltip: "Hoje",
-            onClick: () => {
-              const now = /* @__PURE__ */ new Date();
-              const selected = hideTime ? new Date(
-                now.getFullYear(),
-                now.getMonth(),
-                now.getDate(),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex rounded-md p-1.5 gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        ButtonBase,
+        {
+          variant: "outline",
+          className: "no-active-animation",
+          tooltip: "Hoje",
+          size: "icon",
+          onClick: () => {
+            const now = /* @__PURE__ */ new Date();
+            const selected = hideTime ? new Date(
+              Date.UTC(
+                now.getUTCFullYear(),
+                now.getUTCMonth(),
+                now.getUTCDate(),
                 0,
                 0,
                 0,
                 0
-              ) : now;
-              setInternalDate(selected);
-              onChange?.(selected);
-              onConfirm?.(selected);
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react46.CalendarDotIcon, { className: "h-4 w-4" })
-          }
-        ),
+              )
+            ) : now;
+            setInternalDate(selected);
+            onChange?.(selected);
+            onConfirm?.(selected);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react46.CalendarDotIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "grid grid-cols-2 sm:flex-row w-full gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           ButtonBase,
           {
-            className: "no-active-animation rounded-md bg-background text-gray-800 border hover:bg-muted/50 overflow-y-hidden w-full",
+            className: "no-active-animation rounded-md bg-background text-primary border hover:bg-muted/50 overflow-hidden flex-1 min-w-0 border-border",
             onClick: () => setOpen(false),
             children: "Cancelar"
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          ButtonBase,
+          {
+            className: cn(
+              "no-active-animation rounded-md bg-emerald-600",
+              internalDate ? "hover:bg-emerald-700" : "opacity-50 cursor-not-allowed"
+            ),
+            disabled: !internalDate,
+            onClick: () => {
+              if (!internalDate) return;
+              setOpen(false);
+              onConfirm?.(internalDate);
+            },
+            children: "Confirmar"
+          }
         )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-        ButtonBase,
-        {
-          className: cn(
-            "no-active-animation rounded-none bg-emerald-600",
-            internalDate ? "hover:bg-emerald-700" : "opacity-50 cursor-not-allowed",
-            isMobile ? "" : "rounded-md"
-          ),
-          disabled: !internalDate,
-          onClick: () => {
-            if (!internalDate) return;
-            setOpen(false);
-            onConfirm?.(internalDate);
-          },
-          children: "Confirmar"
-        }
-      )
-    ] }) })
+      ] })
+    ] })
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("w-full sm:w-auto", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(LabelBase_default, { children: label }),
@@ -8413,7 +8501,7 @@ function DateTimePicker({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ErrorMessage_default, { error }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogContentBase, { className: "p-0 max-w-[min(95vw,450px)] max-h-[90vh] overflow-hidden", children: renderPickerContent() })
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DialogContentBase, { className: "p-0 max-w-[min(95vw,450px)] max-h-[95vh] overflow-y-auto", children: renderPickerContent() })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         PopoverTriggerBase,
@@ -8473,7 +8561,7 @@ function RangePicker({
   const { ref: contentRef, center } = use_auto_center_default(open);
   const basePopoverClass = "w-auto max-w-[calc(100vw-16px)] p-0 border shadow-none";
   const centeredPopoverClass = "w-auto max-w-[calc(100vw-16px)] p-0 border shadow-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50";
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn("w-full sm:w-auto", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: cn("w-full sm:w-auto ", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(LabelBase_default, { children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
@@ -8481,7 +8569,7 @@ function RangePicker({
         {
           disabled,
           asChild: true,
-          className: cn(error && "border-red-500"),
+          className: cn(error && "border-red-500 "),
           children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
             ButtonBase,
             {
@@ -8504,17 +8592,25 @@ function RangePicker({
                     })} - ${(0, import_date_fns2.format)(range.to, "P", { locale: dateFnsLocale })}` : "Selecione um intervalo"
                   }
                 ),
-                range && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                  ClearButton,
-                  {
-                    className: "-mr-3",
-                    onClick: (e) => {
-                      e?.stopPropagation();
-                      handleClear();
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_framer_motion12.motion.span, { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row gap-0 items-center ", children: [
+                  range && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    ClearButton,
+                    {
+                      onClick: (e) => {
+                        e?.stopPropagation();
+                        handleClear();
+                      }
                     }
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react47.CalendarBlankIcon, { className: "flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6" })
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                    import_framer_motion12.motion.div,
+                    {
+                      animate: { rotate: open ? 15 : 0 },
+                      transition: { duration: 0.03 },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react47.CalendarBlankIcon, { className: "h-4 w-4" })
+                    }
+                  )
+                ] }) })
               ]
             }
           )
@@ -8537,7 +8633,7 @@ function RangePicker({
               animate: { opacity: 1, y: 0 },
               exit: { opacity: 0, y: -4 },
               transition: { duration: 0.18, ease: "easeOut" },
-              className: "border rounded-md shadow-xl ",
+              className: "border border-border rounded-md shadow-xl ",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   import_framer_motion12.motion.div,
@@ -10266,7 +10362,7 @@ function Select({
   labelClassname,
   className,
   pagination,
-  hideClear = true
+  hideClear = false
 }) {
   const [page, setPage] = (0, import_react57.useState)(1);
   const [animating, setAnimating] = (0, import_react57.useState)(false);
@@ -10338,7 +10434,7 @@ function Select({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_framer_motion14.motion.span, { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-row gap-0 items-center ", children: [
-                  hideClear && selected && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                  !hideClear && selected && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
                     ClearButton,
                     {
                       onClick: () => {
@@ -10578,7 +10674,7 @@ function EventAgenda({
     "div",
     {
       className: cn(
-        "flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1 px-6 py-2",
+        "flex flex-col rounded-lg border has-data-[slot=month-view]:flex-1 px-6 py-2 border-border",
         className
       ),
       style: {
@@ -10623,7 +10719,8 @@ function EventAgenda({
                 },
                 items: selectItems,
                 className: "gap-2 px-3 py-1.5 max-[479px]:h-8",
-                placeholder: viewLabel(view)
+                placeholder: viewLabel(view),
+                hideClear: true
               }
             ) })
           ] }),
@@ -14383,6 +14480,12 @@ function MultiSelect({
     const id = setTimeout(() => setAnimating(false), 220);
     return () => clearTimeout(id);
   }, [page, pagination]);
+  const initialItems = (0, import_react86.useMemo)(() => {
+    if (groupItems) {
+      return Object.values(groupItems).flat();
+    }
+    return items ?? [];
+  }, [items, groupItems]);
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { "data-testid": testIds.root ?? "multiselect-root", children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(LabelBase_default, { className: labelClassname, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
@@ -14394,6 +14497,7 @@ function MultiSelect({
         disabled,
         empty,
         error,
+        initialItems,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             MultiSelectTriggerBase,
@@ -14537,13 +14641,13 @@ function MultiSelect({
 }
 
 // src/components/ui/charts/Chart.tsx
-var import_react96 = require("react");
-var import_recharts = require("recharts");
+var import_react97 = require("react");
+var import_recharts2 = require("recharts");
 
 // src/components/ui/charts/utils/helpers.ts
 var formatFieldName = (fieldName) => {
   return fieldName.split(/[/_-]/).filter(Boolean).map((word) => {
-    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    return word.charAt(0).toUpperCase() + word.slice(1);
   }).join(" ").trim();
 };
 var detectDataFields = (data, xAxisKey) => {
@@ -16098,8 +16202,205 @@ var TooltipSimple = ({
 };
 var TooltipSimple_default = TooltipSimple;
 
-// src/components/ui/charts/utils/pillLabelRenderer.tsx
+// src/components/ui/charts/components/Brush.tsx
+var import_recharts = require("recharts");
 var import_jsx_runtime94 = require("react/jsx-runtime");
+var Brush = ({
+  data,
+  startIndex,
+  endIndex,
+  onMouseDown,
+  brushRef,
+  xAxisKey,
+  seriesOrder,
+  finalColors,
+  brushHeight = 80,
+  brushColor,
+  miniChartOpacity = 0.3,
+  margin = { left: 0, right: 0 }
+}) => {
+  const dataLength = data.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "w-full px-8 pb-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+      "div",
+      {
+        className: "relative rounded-md border bg-muted/5 shadow-inner",
+        style: { height: brushHeight },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 pointer-events-none rounded-md",
+              style: { opacity: miniChartOpacity },
+              children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: brushHeight, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+                import_recharts.ComposedChart,
+                {
+                  data: data.map((item) => ({
+                    ...item,
+                    name: String(item[xAxisKey] || "N/A")
+                  })),
+                  height: brushHeight,
+                  margin: {
+                    top: 5,
+                    right: margin.right ?? 30,
+                    left: margin.left ?? 0,
+                    bottom: 5
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_recharts.XAxis, { dataKey: xAxisKey, hide: true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_recharts.YAxis, { yAxisId: "left", hide: true }),
+                    seriesOrder.map((s) => {
+                      const key = s.key;
+                      const color = finalColors[key];
+                      if (s.type === "bar") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                          import_recharts.Bar,
+                          {
+                            dataKey: key,
+                            yAxisId: "left",
+                            fill: color,
+                            radius: [2, 2, 0, 0]
+                          },
+                          `brush-bar-${key}`
+                        );
+                      }
+                      if (s.type === "line") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                          import_recharts.Line,
+                          {
+                            type: "monotone",
+                            dataKey: key,
+                            yAxisId: "left",
+                            stroke: color,
+                            strokeWidth: 1.5,
+                            dot: false
+                          },
+                          `brush-line-${key}`
+                        );
+                      }
+                      if (s.type === "area") {
+                        return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                          import_recharts.Area,
+                          {
+                            type: "monotone",
+                            dataKey: key,
+                            yAxisId: "left",
+                            stroke: color,
+                            fill: `url(#gradient-${key})`,
+                            strokeWidth: 1.5
+                          },
+                          `brush-area-${key}`
+                        );
+                      }
+                      return null;
+                    })
+                  ]
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+            "div",
+            {
+              ref: brushRef,
+              className: "absolute inset-0 cursor-move rounded-md",
+              style: { userSelect: "none" },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 left-0 bg-muted/60 pointer-events-none rounded-md",
+                    style: {
+                      width: `${startIndex / (dataLength - 1) * 100}%`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 right-0 bg-muted/60 pointer-events-none rounded-md",
+                    style: {
+                      width: `${(dataLength - 1 - endIndex) / (dataLength - 1) * 100}%`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+                  "div",
+                  {
+                    className: "absolute top-0 bottom-0 border cursor-move group rounded-md border-primary/30",
+                    style: {
+                      left: `${startIndex / (dataLength - 1) * 100}%`,
+                      right: `${(dataLength - 1 - endIndex) / (dataLength - 1) * 100}%`,
+                      backgroundColor: "hsl(var(--primary) / 0.03)"
+                    },
+                    onMouseDown: (e) => onMouseDown(e, "middle"),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                        "div",
+                        {
+                          className: "absolute top-1/2 -translate-y-1/2 -left-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
+                          onMouseDown: (e) => {
+                            e.stopPropagation();
+                            onMouseDown(e, "start");
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                            "div",
+                            {
+                              className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
+                              style: {
+                                backgroundColor: brushColor ?? "hsl(var(--primary) / 0.7)"
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                        "div",
+                        {
+                          className: "absolute top-1/2 -translate-y-1/2 -right-3 w-6 h-10 flex items-center justify-center cursor-ew-resize active:scale-95 transition-all",
+                          onMouseDown: (e) => {
+                            e.stopPropagation();
+                            onMouseDown(e, "end");
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                            "div",
+                            {
+                              className: "w-2 h-7 rounded-full shadow-md ring-2 ring-background flex flex-col items-center justify-center gap-0.5",
+                              style: {
+                                backgroundColor: brushColor ?? "hsl(var(--primary) / 0.7)"
+                              }
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex justify-between items-center mt-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { children: [
+        data[startIndex]?.[xAxisKey],
+        " - ",
+        data[endIndex]?.[xAxisKey]
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { children: [
+        endIndex - startIndex + 1,
+        " de ",
+        dataLength,
+        " per\xEDodos"
+      ] })
+    ] })
+  ] });
+};
+var Brush_default = Brush;
+
+// src/components/ui/charts/utils/pillLabelRenderer.tsx
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var formatCompactNumber = (value) => {
   const isNegative = value < 0;
   const absValue = Math.abs(value);
@@ -16190,8 +16491,8 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
     } else {
       textColor = "#374151";
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "rect",
         {
           x: rectX,
@@ -16204,7 +16505,7 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
           strokeWidth: rectStroke ? 1 : 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         "text",
         {
           x: textX,
@@ -16275,7 +16576,7 @@ var renderInsideBarLabel = (color, valueFormatter2) => {
       const heightFactor = Math.max(0.8, Math.min(1.6, pHeight / heightRef));
       fontSize = Math.min(18, Math.max(8, Math.round(fontSize * heightFactor)));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       "text",
       {
         x: centerX,
@@ -16294,7 +16595,7 @@ var renderInsideBarLabel = (color, valueFormatter2) => {
 
 // src/components/ui/charts/NoData.tsx
 var import_framer_motion21 = require("framer-motion");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var ChartBar = ({ x, y, w, h, i, loading }) => {
   const baseY = y - h;
   const d = i * 0.08;
@@ -16305,8 +16606,8 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
     ease: "easeInOut",
     delay: d
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       import_framer_motion21.motion.rect,
       {
         x,
@@ -16321,7 +16622,7 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
         style: { transformBox: "fill-box", originY: 1 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       import_framer_motion21.motion.rect,
       {
         x,
@@ -16337,7 +16638,7 @@ var ChartBar = ({ x, y, w, h, i, loading }) => {
         style: { transformBox: "fill-box", originY: 1 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       import_framer_motion21.motion.line,
       {
         x1: x + w / 2,
@@ -16371,7 +16672,7 @@ var NoData = ({
     { x: 580, w: 100, h: h * 0.35 },
     { x: 700, w: 100, h: h * 0.3 }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     "div",
     {
       className: cn(
@@ -16384,17 +16685,17 @@ var NoData = ({
       },
       role: "img",
       "aria-label": message,
-      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "w-full max-w-[900px] relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "w-full max-w-[900px] relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
           "svg",
           {
             className: "w-full h-[var(--svg-h)] opacity-40",
             viewBox: `0 0 900 ${h}`,
             preserveAspectRatio: "none",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("defs", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("linearGradient", { id: "bg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("defs", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("linearGradient", { id: "bg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                     "stop",
                     {
                       offset: "0%",
@@ -16402,7 +16703,7 @@ var NoData = ({
                       stopOpacity: "0.15"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                     "stop",
                     {
                       offset: "100%",
@@ -16411,8 +16712,8 @@ var NoData = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("linearGradient", { id: "gg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("linearGradient", { id: "gg", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                     "stop",
                     {
                       offset: "0%",
@@ -16420,7 +16721,7 @@ var NoData = ({
                       stopOpacity: "0.4"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                     "stop",
                     {
                       offset: "100%",
@@ -16429,17 +16730,17 @@ var NoData = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("filter", { id: "s", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "3" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feOffset", { dx: "0", dy: "2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feComponentTransfer", { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feFuncA", { type: "linear", slope: "0.2" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("feMerge", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feMergeNode", {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("feMergeNode", { in: "SourceGraphic" })
+                /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("filter", { id: "s", x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feOffset", { dx: "0", dy: "2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feComponentTransfer", { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feFuncA", { type: "linear", slope: "0.2" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("feMerge", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feMergeNode", {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("feMergeNode", { in: "SourceGraphic" })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "rect",
                 {
                   x: 0,
@@ -16450,7 +16751,7 @@ var NoData = ({
                   rx: 8
                 }
               ),
-              [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              [...Array(6)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "line",
                 {
                   x1: 50,
@@ -16463,7 +16764,7 @@ var NoData = ({
                 },
                 i
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "line",
                 {
                   x1: 50,
@@ -16475,7 +16776,7 @@ var NoData = ({
                   opacity: 0.5
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "line",
                 {
                   x1: 50,
@@ -16487,7 +16788,7 @@ var NoData = ({
                   opacity: 0.5
                 }
               ),
-              bars.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              bars.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 ChartBar,
                 {
                   x: b.x,
@@ -16502,15 +16803,15 @@ var NoData = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "pointer-events-auto bg-card/95 backdrop-blur-sm px-8 py-6 rounded-xl border border-border/50 shadow-lg text-center max-w-md", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "flex flex-col items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none h-[var(--svg-h)]", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "pointer-events-auto bg-card/95 backdrop-blur-sm px-8 py-6 rounded-xl border border-border/50 shadow-lg text-center max-w-md", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "flex flex-col items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
           LoadingBase,
           {
             size: "xl",
             message: loadingMessage ?? "Carregando"
           }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("h3", { className: "text-xl font-semibold text-foreground mb-2", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: "text-lg font-medium text-foreground/90 mb-2", children: message })
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("h3", { className: "text-xl font-semibold text-foreground mb-2", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "text-lg font-medium text-foreground/90 mb-2", children: message })
         ] }) }) })
       ] }) })
     }
@@ -16731,14 +17032,132 @@ var useChartClick = ({
   };
 };
 
-// src/components/ui/charts/Chart.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
-var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
-var Chart = ({
-  data,
-  series,
-  className,
-  height = 350,
+// src/components/ui/charts/hooks/useTimeSeriesRange.ts
+var import_react96 = require("react");
+function useTimeSeriesRange({
+  dataLength,
+  defaultStartIndex = 0,
+  defaultEndIndex,
+  onRangeChange
+}) {
+  const [startIndex, setStartIndex] = (0, import_react96.useState)(defaultStartIndex);
+  const [endIndex, setEndIndex] = (0, import_react96.useState)(
+    defaultEndIndex ?? Math.max(0, dataLength - 1)
+  );
+  const [isDragging, setIsDragging] = (0, import_react96.useState)(null);
+  const [dragStartX, setDragStartX] = (0, import_react96.useState)(0);
+  const [initialStartIndex, setInitialStartIndex] = (0, import_react96.useState)(0);
+  const [initialEndIndex, setInitialEndIndex] = (0, import_react96.useState)(0);
+  const brushRef = (0, import_react96.useRef)(null);
+  (0, import_react96.useEffect)(() => {
+    if (dataLength > 0) {
+      setStartIndex((prev) => Math.min(prev, dataLength - 1));
+      setEndIndex((prev) => {
+        if (prev >= dataLength - 2 || defaultEndIndex === void 0) {
+          return dataLength - 1;
+        }
+        return Math.min(prev, dataLength - 1);
+      });
+    }
+  }, [dataLength, defaultEndIndex]);
+  const handleRangeChange = (0, import_react96.useCallback)(
+    (newStart, newEnd) => {
+      const clampedStart = Math.max(0, Math.min(newStart, dataLength - 1));
+      const clampedEnd = Math.max(
+        clampedStart,
+        Math.min(newEnd, dataLength - 1)
+      );
+      setStartIndex(clampedStart);
+      setEndIndex(clampedEnd);
+      if (onRangeChange) {
+        onRangeChange(clampedStart, clampedEnd);
+      }
+    },
+    [dataLength, onRangeChange]
+  );
+  const handleMouseDown = (0, import_react96.useCallback)(
+    (e, type) => {
+      e.preventDefault();
+      setIsDragging(type);
+      setDragStartX(e.clientX);
+      setInitialStartIndex(startIndex);
+      setInitialEndIndex(endIndex);
+    },
+    [startIndex, endIndex]
+  );
+  const handleMouseMove = (0, import_react96.useCallback)(
+    (e) => {
+      if (!isDragging || !brushRef.current) return;
+      const brushWidth = brushRef.current.offsetWidth;
+      const deltaX = e.clientX - dragStartX;
+      const indexDelta = Math.round(deltaX / brushWidth * dataLength);
+      if (isDragging === "start") {
+        const newStart = Math.max(
+          0,
+          Math.min(initialStartIndex + indexDelta, endIndex - 1)
+        );
+        handleRangeChange(newStart, endIndex);
+      } else if (isDragging === "end") {
+        const newEnd = Math.max(
+          startIndex + 1,
+          Math.min(initialEndIndex + indexDelta, dataLength - 1)
+        );
+        handleRangeChange(startIndex, newEnd);
+      } else if (isDragging === "middle") {
+        const rangeSize = initialEndIndex - initialStartIndex;
+        let newStart = initialStartIndex + indexDelta;
+        let newEnd = initialEndIndex + indexDelta;
+        if (newStart < 0) {
+          newStart = 0;
+          newEnd = rangeSize;
+        } else if (newEnd >= dataLength) {
+          newEnd = dataLength - 1;
+          newStart = newEnd - rangeSize;
+        }
+        handleRangeChange(newStart, newEnd);
+      }
+    },
+    [
+      isDragging,
+      dragStartX,
+      dataLength,
+      startIndex,
+      endIndex,
+      initialStartIndex,
+      initialEndIndex,
+      handleRangeChange
+    ]
+  );
+  const handleMouseUp = (0, import_react96.useCallback)(() => {
+    setIsDragging(null);
+  }, []);
+  (0, import_react96.useEffect)(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  return {
+    startIndex,
+    endIndex,
+    isDragging,
+    brushRef,
+    handleMouseDown
+  };
+}
+
+// src/components/ui/charts/Chart.tsx
+var import_jsx_runtime97 = require("react/jsx-runtime");
+var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
+var Chart = ({
+  data,
+  series,
+  className,
+  height = 350,
   width = "100%",
   colors: colors2 = DEFAULT_COLORS2,
   gridColor,
@@ -16765,9 +17184,10 @@ var Chart = ({
   formatBR = false,
   legendUppercase = false,
   chartMargin,
-  isLoading = false
+  isLoading = false,
+  timeSeries
 }) => {
-  const smartConfig = (0, import_react96.useMemo)(() => {
+  const smartConfig = (0, import_react97.useMemo)(() => {
     const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
     const xAxisConfig2 = typeof xAxis === "string" ? {
       dataKey: resolvedXAxisKey,
@@ -16805,15 +17225,38 @@ var Chart = ({
     onTooltipPositionChange,
     setActiveTooltips
   } = useChartTooltips(maxTooltips);
-  (0, import_react96.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     if (highlightedSeries.size === 0 && showOnlyHighlighted) {
       setShowOnlyHighlighted(false);
     }
   }, [highlightedSeries, showOnlyHighlighted, setShowOnlyHighlighted]);
-  const processedData = data.map((item) => ({
-    ...item,
-    name: String(item[xAxisConfig.dataKey] || "N/A")
-  }));
+  const timeSeriesConfig = (0, import_react97.useMemo)(() => {
+    if (typeof timeSeries === "boolean") {
+      return timeSeries ? {} : void 0;
+    }
+    return timeSeries;
+  }, [timeSeries]);
+  const {
+    startIndex,
+    endIndex,
+    brushRef,
+    handleMouseDown
+  } = useTimeSeriesRange({
+    dataLength: data.length,
+    defaultStartIndex: timeSeriesConfig?.start,
+    defaultEndIndex: timeSeriesConfig?.end,
+    onRangeChange: timeSeriesConfig?.onRangeChange
+  });
+  const processedData = (0, import_react97.useMemo)(() => {
+    const mapped = data.map((item) => ({
+      ...item,
+      name: String(item[xAxisConfig.dataKey] || "N/A")
+    }));
+    if (timeSeriesConfig) {
+      return mapped.slice(startIndex, endIndex + 1);
+    }
+    return mapped;
+  }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
   const seriesOrder = [];
   if (series) {
     if (series.bar)
@@ -16828,17 +17271,17 @@ var Chart = ({
     );
   }
   const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
-  const finalColors = (0, import_react96.useMemo)(
+  const finalColors = (0, import_react97.useMemo)(
     () => generateColorMap(allKeys, colors2, mapperConfig),
     [allKeys, colors2, mapperConfig]
   );
-  const biaxialConfigNormalized = (0, import_react96.useMemo)(() => {
+  const biaxialConfigNormalized = (0, import_react97.useMemo)(() => {
     if (!biaxial) return null;
     if (typeof biaxial === "string") return { key: [biaxial] };
     if (Array.isArray(biaxial)) return { key: biaxial };
     return biaxial;
   }, [biaxial]);
-  (0, import_react96.useMemo)(() => {
+  (0, import_react97.useMemo)(() => {
     if (!biaxialConfigNormalized) return;
     const leftLabelMissing = !yAxisLabel || String(yAxisLabel).trim() === "";
     const rightLabelMissing = !biaxialConfigNormalized.label || String(biaxialConfigNormalized.label).trim() === "";
@@ -16848,43 +17291,43 @@ var Chart = ({
       );
     }
   }, [biaxialConfigNormalized, yAxisLabel]);
-  const rightKeys = (0, import_react96.useMemo)(
+  const rightKeys = (0, import_react97.useMemo)(
     () => biaxialConfigNormalized?.key ?? [],
     [biaxialConfigNormalized]
   );
-  const leftKeys = (0, import_react96.useMemo)(
+  const leftKeys = (0, import_react97.useMemo)(
     () => allKeys.filter((k) => !rightKeys.includes(k)),
     [allKeys, rightKeys]
   );
-  const activePeriods = (0, import_react96.useMemo)(
+  const activePeriods = (0, import_react97.useMemo)(
     () => activeTooltips.map((t) => adaptDataForTooltip(t.data, xAxisConfig.dataKey).name),
     [activeTooltips, xAxisConfig.dataKey]
   );
-  const maxLeftDataValue = (0, import_react96.useMemo)(() => {
+  const maxLeftDataValue = (0, import_react97.useMemo)(() => {
     const numericKeys = leftKeys.length > 0 ? leftKeys : allKeys;
     return getMaxDataValue(processedData, numericKeys);
   }, [processedData, leftKeys, allKeys]);
-  const minLeftDataValue = (0, import_react96.useMemo)(() => {
+  const minLeftDataValue = (0, import_react97.useMemo)(() => {
     const numericKeys = leftKeys.length > 0 ? leftKeys : allKeys;
     return getMinDataValue(processedData, numericKeys);
   }, [processedData, leftKeys, allKeys]);
-  const maxRightDataValue = (0, import_react96.useMemo)(() => {
+  const maxRightDataValue = (0, import_react97.useMemo)(() => {
     if (rightKeys.length === 0) return 0;
     return getMaxDataValue(processedData, rightKeys);
   }, [processedData, rightKeys]);
-  const minRightDataValue = (0, import_react96.useMemo)(() => {
+  const minRightDataValue = (0, import_react97.useMemo)(() => {
     if (rightKeys.length === 0) return 0;
     return getMinDataValue(processedData, rightKeys);
   }, [processedData, rightKeys]);
-  const niceMaxLeft = (0, import_react96.useMemo)(
+  const niceMaxLeft = (0, import_react97.useMemo)(
     () => computeNiceMax(maxLeftDataValue),
     [maxLeftDataValue]
   );
-  const niceMaxRight = (0, import_react96.useMemo)(
+  const niceMaxRight = (0, import_react97.useMemo)(
     () => computeNiceMax(maxRightDataValue),
     [maxRightDataValue]
   );
-  const computedWidth = (0, import_react96.useMemo)(
+  const computedWidth = (0, import_react97.useMemo)(
     () => computeChartWidth(
       width,
       processedData.length,
@@ -16902,32 +17345,29 @@ var Chart = ({
       setActiveTooltips
     }
   );
-  const titleClassName = (0, import_react96.useMemo)(
-    () => "text-[1.4rem] font-semibold text-foreground mb-3",
-    []
+  const getSeriesOpacity = (0, import_react97.useCallback)(
+    (key) => {
+      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
+    },
+    [highlightedSeries]
   );
-  const finalValueFormatter = (0, import_react96.useMemo)(
+  const finalValueFormatter = (0, import_react97.useMemo)(
     () => createValueFormatter(valueFormatter2, formatBR),
     [valueFormatter2, formatBR]
   );
-  const yTickFormatter = (0, import_react96.useMemo)(
+  const yTickFormatter = (0, import_react97.useMemo)(
     () => createYTickFormatter(finalValueFormatter),
     [finalValueFormatter]
   );
-  const finalEnableHighlights = enableHighlights;
-  const finalEnableShowOnly = enableShowOnly;
-  const finalEnablePeriodsDropdown = enablePeriodsDropdown && enableDraggableTooltips;
-  const defaultChartRightMargin = 30;
-  const defaultChartLeftMargin = 0;
-  const axisLabelMargin = 56;
-  const containerPaddingLeft = -6;
-  const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? axisLabelMargin : defaultChartRightMargin);
-  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? axisLabelMargin : defaultChartLeftMargin);
-  const yAxisTickWidth = (0, import_react96.useMemo)(
+  const AXIS_LABEL_MARGIN = 56;
+  const CONTAINER_PADDING_LEFT = -6;
+  const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? AXIS_LABEL_MARGIN : 30);
+  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
+  const yAxisTickWidth = (0, import_react97.useMemo)(
     () => computeYAxisTickWidth(
       chartMargin?.left,
       yAxisLabel,
-      axisLabelMargin,
+      AXIS_LABEL_MARGIN,
       yTickFormatter,
       minLeftDataValue,
       niceMaxLeft
@@ -16940,19 +17380,13 @@ var Chart = ({
       niceMaxLeft
     ]
   );
-  const composedChartLeftMargin = chartMargin?.left ?? defaultChartLeftMargin;
-  const composedChartRightMargin = chartMargin?.right ?? defaultChartRightMargin;
   const finalChartTopMargin = chartMargin?.top ?? (showLabels ? 48 : 20);
-  const baseBottom = chartMargin?.bottom ?? 5;
-  const extraForXAxisLabel = xAxisLabel ? 22 : 0;
-  const extraForLegend = showLegend ? 36 : 0;
-  const finalChartBottomMargin = baseBottom + extraForXAxisLabel + extraForLegend;
-  const measuredInner = measuredWidth ? Math.max(0, measuredWidth - 32) : void 0;
-  const effectiveChartWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
-  const chartInnerWidth = effectiveChartWidth - composedChartLeftMargin - composedChartRightMargin;
+  const finalChartBottomMargin = (chartMargin?.bottom ?? 5) + (xAxisLabel ? 22 : 0) + (showLegend ? 36 : 0);
+  const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : computedWidth;
+  const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
   const leftYAxisLabelDx = -Math.max(12, Math.round(yAxisTickWidth / 2));
   const rightYAxisLabelDx = Math.max(12, Math.round(finalChartRightMargin / 2));
-  const openTooltipForPeriod = (0, import_react96.useCallback)(
+  const openTooltipForPeriod = (0, import_react97.useCallback)(
     (periodName) => {
       if (!enableDraggableTooltips) return;
       const row = processedData.find((r) => String(r.name) === periodName);
@@ -16969,7 +17403,7 @@ var Chart = ({
         );
       }
       const offsetIndex = activeTooltips.length;
-      const availableWidth = typeof width === "number" ? width : measuredInner ?? computedWidth;
+      const availableWidth = effectiveChartWidth;
       const gap = 28;
       const leftGap = 28;
       const newTooltip = {
@@ -16989,525 +17423,500 @@ var Chart = ({
       enableDraggableTooltips,
       processedData,
       activeTooltips,
-      width,
-      measuredInner,
-      computedWidth,
+      effectiveChartWidth,
       maxTooltips,
       setActiveTooltips
     ]
   );
   if (!data && !isLoading) return null;
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       NoData_default,
       {
         title,
         isLoading: true,
         loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
-        paddingLeft: containerPaddingLeft + finalChartLeftMargin,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
         height
       }
     );
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       NoData_default,
       {
         title,
-        paddingLeft: containerPaddingLeft + finalChartLeftMargin,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
         height
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ref: wrapperRef, className: "w-full overflow-hidden min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     "div",
     {
-      ref: wrapperRef,
-      style: {
-        width: "100%",
-        overflowX: "hidden",
-        overflowY: "hidden",
-        minWidth: 0
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-        "div",
-        {
-          className: cn("rounded-lg bg-card relative", className),
-          style: { width: "100%", maxWidth: "100%", minWidth: 0 },
-          children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-              "div",
-              {
-                style: {
-                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
-                  width: "100%",
-                  display: "flex",
-                  justifyContent: titlePosition === "center" ? "center" : titlePosition === "right" ? "flex-end" : "flex-start",
-                  alignItems: "center",
-                  marginTop: "19px"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: titleClassName, children: title })
-              }
+      className: cn(
+        "rounded-lg bg-card relative w-full max-w-full min-w-0",
+        className
+      ),
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "div",
+          {
+            className: cn(
+              "w-full flex items-center mt-[19px] ml-[90px]",
+              titlePosition === "center" && "justify-center",
+              titlePosition === "right" && "justify-end",
+              titlePosition === "left" && "justify-start"
             ),
-            allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly) && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-              "div",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "text-[1.4rem] font-semibold text-foreground mb-3", children: title })
+          }
+        ),
+        allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center w-[98%] ml-[90px] gap-2", children: [
+          enableHighlights && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            Highlights_default,
+            {
+              allKeys,
+              mapperConfig,
+              finalColors,
+              highlightedSeries,
+              toggleHighlight,
+              containerWidth: chartInnerWidth
+            }
+          ),
+          enableShowOnly && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            ShowOnly_default,
+            {
+              showOnlyHighlighted,
+              setShowOnlyHighlighted,
+              highlightedSeriesSize: highlightedSeries.size,
+              clearHighlights
+            }
+          ),
+          enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            PeriodsDropdown_default,
+            {
+              processedData,
+              onOpenPeriod: openTooltipForPeriod,
+              rightOffset: finalChartRightMargin,
+              activePeriods
+            }
+          ) })
+        ] }),
+        !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "div",
+          {
+            className: "w-full flex justify-end",
+            style: {
+              paddingLeft: `${CONTAINER_PADDING_LEFT + finalChartLeftMargin}px`,
+              paddingRight: `${finalChartRightMargin}px`,
+              maxWidth: `${chartInnerWidth}px`
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+              PeriodsDropdown_default,
               {
-                className: "flex items-center w-full",
-                style: {
-                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
-                  width: "98%",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.5rem"
-                },
-                children: [
-                  finalEnableHighlights && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    Highlights_default,
-                    {
-                      allKeys,
-                      mapperConfig,
-                      finalColors,
-                      highlightedSeries,
-                      toggleHighlight,
-                      containerWidth: chartInnerWidth
-                    }
-                  ),
-                  finalEnableShowOnly && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    ShowOnly_default,
-                    {
-                      showOnlyHighlighted,
-                      setShowOnlyHighlighted,
-                      highlightedSeriesSize: highlightedSeries.size,
-                      clearHighlights
-                    }
-                  ),
-                  finalEnablePeriodsDropdown && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    "div",
-                    {
-                      style: {
-                        marginLeft: "auto",
-                        display: "flex",
-                        alignItems: "center"
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        PeriodsDropdown_default,
-                        {
-                          processedData,
-                          onOpenPeriod: openTooltipForPeriod,
-                          rightOffset: finalChartRightMargin,
-                          activePeriods
-                        }
-                      )
-                    }
-                  )
-                ]
+                processedData,
+                onOpenPeriod: openTooltipForPeriod,
+                rightOffset: finalChartRightMargin
               }
-            ),
-            !(allKeys.length > 0 && (finalEnableHighlights || finalEnableShowOnly)) && finalEnablePeriodsDropdown && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-              "div",
-              {
-                style: {
-                  paddingLeft: `${containerPaddingLeft + finalChartLeftMargin}px`,
-                  paddingRight: `${finalChartRightMargin}px`,
-                  width: "100%",
-                  maxWidth: `${chartInnerWidth}px`,
-                  display: "flex",
-                  justifyContent: "flex-end"
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                  PeriodsDropdown_default,
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+          import_recharts2.ComposedChart,
+          {
+            data: processedData,
+            height,
+            margin: {
+              top: finalChartTopMargin,
+              right: finalChartRightMargin,
+              left: finalChartLeftMargin,
+              bottom: finalChartBottomMargin
+            },
+            onClick: handleChartClick,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
+                const key = s.key;
+                const color = finalColors[key];
+                return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+                  "linearGradient",
                   {
-                    processedData,
-                    onOpenPeriod: openTooltipForPeriod,
-                    rightOffset: finalChartRightMargin
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-              import_recharts.ComposedChart,
-              {
-                data: processedData,
-                height,
-                margin: {
-                  top: finalChartTopMargin,
-                  right: finalChartRightMargin,
-                  left: finalChartLeftMargin,
-                  bottom: finalChartBottomMargin
-                },
-                onClick: handleChartClick,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
-                    const key = s.key;
-                    const color = finalColors[key];
-                    return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
-                      "linearGradient",
-                      {
-                        id: `gradient-${key}`,
-                        x1: "0",
-                        y1: "0",
-                        x2: "0",
-                        y2: "0.8",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
-                          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
-                        ]
-                      },
-                      `gradient-${key}`
-                    );
-                  }) }),
-                  showGrid && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.CartesianGrid,
-                    {
-                      strokeDasharray: "3 3",
-                      stroke: gridColor || "hsl(var(--muted-foreground))",
-                      opacity: 0.5
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.XAxis,
-                    {
-                      dataKey: xAxisConfig.dataKey,
-                      stroke: "hsl(var(--muted-foreground))",
+                    id: `gradient-${key}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "0.8",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
+                    ]
+                  },
+                  `gradient-${key}`
+                );
+              }) }),
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  stroke: gridColor || "hsl(var(--muted-foreground))",
+                  opacity: 0.5
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.XAxis,
+                {
+                  dataKey: xAxisConfig.dataKey,
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: (value) => {
+                    if (categoryFormatter)
+                      return categoryFormatter(value);
+                    if (xAxisConfig.valueFormatter)
+                      return xAxisConfig.valueFormatter(value);
+                    return String(value ?? "");
+                  },
+                  label: xAxisLabel ? {
+                    value: xAxisLabel,
+                    position: "insideBottomRight",
+                    offset: -5,
+                    style: {
                       fontSize: 12,
-                      tickLine: false,
-                      axisLine: false,
-                      tickFormatter: (value) => {
-                        if (categoryFormatter)
-                          return categoryFormatter(value);
-                        if (xAxisConfig.valueFormatter)
-                          return xAxisConfig.valueFormatter(value);
-                        return String(value ?? "");
-                      },
-                      label: xAxisLabel ? {
-                        value: xAxisLabel,
-                        position: "insideBottomRight",
-                        offset: -5,
-                        style: {
-                          fontSize: 12,
-                          fill: "hsl(var(--muted-foreground))",
-                          fontWeight: 500
-                        }
-                      } : void 0
+                      fill: "hsl(var(--muted-foreground))",
+                      fontWeight: 500
                     }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.YAxis,
-                    {
-                      yAxisId: "left",
-                      width: yAxisTickWidth,
-                      stroke: "hsl(var(--muted-foreground))",
+                  } : void 0
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.YAxis,
+                {
+                  yAxisId: "left",
+                  width: yAxisTickWidth,
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tickFormatter: yTickFormatter,
+                  domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
+                  tickCount: 6,
+                  label: yAxisLabel ? {
+                    value: yAxisLabel,
+                    angle: -90,
+                    position: "left",
+                    dx: leftYAxisLabelDx,
+                    style: {
                       fontSize: 12,
-                      tickLine: false,
-                      axisLine: false,
-                      tickFormatter: yTickFormatter,
-                      domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
-                      tickCount: 6,
-                      label: yAxisLabel ? {
-                        value: yAxisLabel,
-                        angle: -90,
-                        position: "left",
-                        dx: leftYAxisLabelDx,
-                        style: {
-                          fontSize: 12,
-                          fill: "hsl(var(--muted-foreground))",
-                          fontWeight: 500,
-                          textAnchor: "middle"
-                        }
-                      } : void 0
+                      fill: "hsl(var(--muted-foreground))",
+                      fontWeight: 500,
+                      textAnchor: "middle"
                     }
-                  ),
-                  minLeftDataValue < 0 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.ReferenceLine,
-                    {
-                      y: 0,
-                      yAxisId: "left",
-                      stroke: "hsl(var(--muted-foreground))",
-                      strokeWidth: 1,
-                      strokeDasharray: "4 4"
-                    }
-                  ),
-                  rightKeys.length > 0 && (() => {
-                    const decimals = typeof biaxialConfigNormalized?.decimals === "number" ? Math.max(0, Math.floor(biaxialConfigNormalized.decimals)) : 2;
-                    const rightTickFormatter = (v) => {
-                      if (biaxialConfigNormalized?.percentage) {
-                        const num = Number(String(v));
-                        const nf = new Intl.NumberFormat("pt-BR", {
-                          minimumFractionDigits: decimals,
-                          maximumFractionDigits: decimals
-                        });
-                        const out = Number.isNaN(num) ? String(v ?? "") : nf.format(num);
-                        return `${out}%`;
-                      }
-                      return yTickFormatter(v);
-                    };
-                    const firstRightKey = biaxialConfigNormalized?.key && biaxialConfigNormalized.key[0];
-                    const defaultRightColor = firstRightKey && finalColors[firstRightKey] || "hsl(var(--muted-foreground))";
-                    const rightAxisColor = (() => {
-                      if (!biaxialConfigNormalized) return defaultRightColor;
-                      if (typeof biaxialConfigNormalized.stroke === "string")
-                        return biaxialConfigNormalized.stroke;
-                      if (biaxialConfigNormalized.stroke && firstRightKey && typeof biaxialConfigNormalized.stroke === "object")
-                        return biaxialConfigNormalized.stroke[firstRightKey] || defaultRightColor;
-                      return defaultRightColor;
-                    })();
-                    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                      import_recharts.YAxis,
-                      {
-                        yAxisId: "right",
-                        width: finalChartRightMargin,
-                        orientation: "right",
-                        stroke: "hsl(var(--muted-foreground))",
+                  } : void 0
+                }
+              ),
+              minLeftDataValue < 0 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.ReferenceLine,
+                {
+                  y: 0,
+                  yAxisId: "left",
+                  stroke: "hsl(var(--muted-foreground))",
+                  strokeWidth: 1,
+                  strokeDasharray: "4 4"
+                }
+              ),
+              rightKeys.length > 0 && (() => {
+                const decimals = typeof biaxialConfigNormalized?.decimals === "number" ? Math.max(0, Math.floor(biaxialConfigNormalized.decimals)) : 2;
+                const rightTickFormatter = (v) => {
+                  if (biaxialConfigNormalized?.percentage) {
+                    const num = Number(String(v));
+                    const nf = new Intl.NumberFormat("pt-BR", {
+                      minimumFractionDigits: decimals,
+                      maximumFractionDigits: decimals
+                    });
+                    const out = Number.isNaN(num) ? String(v ?? "") : nf.format(num);
+                    return `${out}%`;
+                  }
+                  return yTickFormatter(v);
+                };
+                const firstRightKey = biaxialConfigNormalized?.key && biaxialConfigNormalized.key[0];
+                const defaultRightColor = firstRightKey && finalColors[firstRightKey] || "hsl(var(--muted-foreground))";
+                const rightAxisColor = (() => {
+                  if (!biaxialConfigNormalized) return defaultRightColor;
+                  if (typeof biaxialConfigNormalized.stroke === "string")
+                    return biaxialConfigNormalized.stroke;
+                  if (biaxialConfigNormalized.stroke && firstRightKey && typeof biaxialConfigNormalized.stroke === "object")
+                    return biaxialConfigNormalized.stroke[firstRightKey] || defaultRightColor;
+                  return defaultRightColor;
+                })();
+                return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                  import_recharts2.YAxis,
+                  {
+                    yAxisId: "right",
+                    width: finalChartRightMargin,
+                    orientation: "right",
+                    stroke: "hsl(var(--muted-foreground))",
+                    fontSize: 12,
+                    tickLine: false,
+                    axisLine: false,
+                    tick: { fill: rightAxisColor },
+                    tickFormatter: rightTickFormatter,
+                    domain: [Math.min(minRightDataValue, 0), niceMaxRight],
+                    tickCount: 6,
+                    label: biaxialConfigNormalized?.label ? {
+                      value: biaxialConfigNormalized.label,
+                      angle: -90,
+                      position: "right",
+                      dx: rightYAxisLabelDx,
+                      style: {
                         fontSize: 12,
-                        tickLine: false,
-                        axisLine: false,
-                        tick: { fill: rightAxisColor },
-                        tickFormatter: rightTickFormatter,
-                        domain: [Math.min(minRightDataValue, 0), niceMaxRight],
-                        tickCount: 6,
-                        label: biaxialConfigNormalized?.label ? {
-                          value: biaxialConfigNormalized.label,
-                          angle: -90,
-                          position: "right",
-                          dx: rightYAxisLabelDx,
-                          style: {
-                            fontSize: 12,
-                            fill: "hsl(var(--muted-foreground))",
-                            fontWeight: 500,
-                            textAnchor: "middle"
-                          }
-                        } : void 0
+                        fill: "hsl(var(--muted-foreground))",
+                        fontWeight: 500,
+                        textAnchor: "middle"
                       }
-                    );
-                  })(),
-                  showTooltip && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.Tooltip,
+                    } : void 0
+                  }
+                );
+              })(),
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.Tooltip,
+                {
+                  content: showTooltipTotal ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    TooltipWithTotal_default,
                     {
-                      content: showTooltipTotal ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        TooltipWithTotal_default,
-                        {
-                          finalColors,
-                          valueFormatter: finalValueFormatter,
-                          categoryFormatter,
-                          periodLabel
-                        }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        TooltipSimple_default,
-                        {
-                          finalColors,
-                          valueFormatter: finalValueFormatter,
-                          categoryFormatter,
-                          periodLabel
-                        }
-                      ),
-                      cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                      finalColors,
+                      valueFormatter: finalValueFormatter,
+                      categoryFormatter,
+                      periodLabel
                     }
-                  ),
-                  showLegend && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                    import_recharts.Legend,
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    TooltipSimple_default,
                     {
-                      wrapperStyle: {
-                        color: "hsl(var(--foreground))",
-                        fontSize: "14px",
-                        paddingTop: "8px",
-                        letterSpacing: 0
-                      },
-                      formatter: (value) => {
-                        const key = String(value);
-                        const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
-                        const displayLabel = legendUppercase ? label.toUpperCase() : label;
-                        return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { style: { letterSpacing: 0 }, children: displayLabel });
-                      }
+                      finalColors,
+                      valueFormatter: finalValueFormatter,
+                      categoryFormatter,
+                      periodLabel
                     }
                   ),
-                  seriesOrder.map((s) => {
-                    const key = s.key;
-                    if (showOnlyHighlighted && !highlightedSeries.has(key))
-                      return null;
+                  cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                }
+              ),
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                import_recharts2.Legend,
+                {
+                  wrapperStyle: {
+                    color: "hsl(var(--foreground))",
+                    fontSize: "14px",
+                    paddingTop: "8px",
+                    letterSpacing: 0
+                  },
+                  formatter: (value) => {
+                    const key = String(value);
                     const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
-                    let color = finalColors[key];
-                    if (rightKeys.includes(key) && biaxialConfigNormalized?.stroke) {
-                      if (typeof biaxialConfigNormalized.stroke === "string") {
-                        color = biaxialConfigNormalized.stroke;
-                      } else {
-                        color = biaxialConfigNormalized.stroke[key] ?? color;
-                      }
-                    }
-                    if (s.type === "bar") {
-                      return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        import_recharts.Bar,
+                    const displayLabel = legendUppercase ? label.toUpperCase() : label;
+                    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "tracking-[0]", children: displayLabel });
+                  }
+                }
+              ),
+              seriesOrder.map((s) => {
+                const key = s.key;
+                if (showOnlyHighlighted && !highlightedSeries.has(key))
+                  return null;
+                const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
+                let color = finalColors[key];
+                if (rightKeys.includes(key) && biaxialConfigNormalized?.stroke) {
+                  if (typeof biaxialConfigNormalized.stroke === "string") {
+                    color = biaxialConfigNormalized.stroke;
+                  } else {
+                    color = biaxialConfigNormalized.stroke[key] ?? color;
+                  }
+                }
+                if (s.type === "bar") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    import_recharts2.Bar,
+                    {
+                      dataKey: key,
+                      yAxisId: rightKeys.includes(key) ? "right" : "left",
+                      name: label,
+                      fill: color,
+                      radius: [4, 4, 0, 0],
+                      onClick: handleBarClick,
+                      className: "cursor-pointer",
+                      style: { opacity: getSeriesOpacity(key) },
+                      activeBar: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        import_recharts2.Rectangle,
                         {
-                          dataKey: key,
-                          yAxisId: rightKeys.includes(key) ? "right" : "left",
-                          name: label,
                           fill: color,
-                          radius: [4, 4, 0, 0],
-                          onClick: handleBarClick,
-                          style: {
-                            cursor: "pointer",
-                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
-                          },
-                          activeBar: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                            import_recharts.Rectangle,
-                            {
-                              fill: color,
-                              stroke: color,
-                              strokeWidth: 2,
-                              opacity: 0.8
-                            }
-                          ),
-                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                            import_recharts.LabelList,
-                            {
-                              dataKey: key,
-                              content: (props) => {
-                                const p = props;
-                                const barHeight = typeof p.height === "number" ? p.height : typeof p.height === "string" ? Number(p.height) : 0;
-                                const barWidth = typeof p.width === "number" ? p.width : typeof p.width === "string" ? Number(p.width) : 0;
-                                const smallThreshold = 14;
-                                const needsOutside = barHeight > 0 && barHeight < smallThreshold || barWidth > 0 && barWidth < smallThreshold;
-                                if (needsOutside) {
-                                  return null;
-                                }
-                                const inside = renderInsideBarLabel(
-                                  color,
-                                  finalValueFormatter
-                                );
-                                return inside(props);
-                              },
-                              offset: 0
-                            }
-                          ) : null
-                        },
-                        `bar-${key}`
-                      );
-                    }
-                    if (s.type === "line") {
-                      return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        import_recharts.Line,
-                        {
-                          dataKey: key,
-                          yAxisId: rightKeys.includes(key) ? "right" : "left",
-                          name: label,
                           stroke: color,
                           strokeWidth: 2,
-                          dot: { r: 3 },
-                          activeDot: { r: 6 },
-                          onClick: handleSeriesClick,
-                          style: {
-                            cursor: "pointer",
-                            pointerEvents: "all",
-                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
-                          },
-                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                            import_recharts.LabelList,
-                            {
-                              dataKey: key,
-                              position: "top",
-                              content: pillLabelRenderer_default(
-                                color,
-                                "filled",
-                                finalValueFormatter
-                              ),
-                              offset: 14
-                            }
-                          ) : null
-                        },
-                        `line-${key}`
-                      );
-                    }
-                    if (s.type === "area") {
-                      return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                        import_recharts.Area,
+                          opacity: 0.8
+                        }
+                      ),
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        import_recharts2.LabelList,
                         {
-                          type: "monotone",
                           dataKey: key,
-                          yAxisId: rightKeys.includes(key) ? "right" : "left",
-                          name: label,
-                          stroke: color,
-                          fill: `url(#gradient-${key})`,
-                          fillOpacity: 1,
-                          strokeWidth: 2,
-                          onClick: handleSeriesClick,
-                          style: {
-                            cursor: "pointer",
-                            pointerEvents: "all",
-                            opacity: highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1
-                          },
-                          activeDot: {
-                            r: 6,
-                            fill: color,
-                            stroke: "hsl(var(--background))",
-                            strokeWidth: 2
-                          },
-                          children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-                            import_recharts.LabelList,
-                            {
-                              dataKey: key,
-                              position: "top",
-                              content: pillLabelRenderer_default(
-                                color,
-                                "soft",
-                                finalValueFormatter
-                              ),
-                              offset: 12
+                          content: (props) => {
+                            const p = props;
+                            const barHeight = typeof p.height === "number" ? p.height : typeof p.height === "string" ? Number(p.height) : 0;
+                            const barWidth = typeof p.width === "number" ? p.width : typeof p.width === "string" ? Number(p.width) : 0;
+                            const smallThreshold = 14;
+                            const needsOutside = barHeight > 0 && barHeight < smallThreshold || barWidth > 0 && barWidth < smallThreshold;
+                            if (needsOutside) {
+                              return null;
                             }
-                          ) : null
-                        },
-                        `area-${key}`
-                      );
-                    }
-                    return null;
-                  })
-                ]
-              }
-            ) }),
-            enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-              DraggableTooltip_default,
-              {
-                id: tooltip.id,
-                data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
-                position: tooltip.position,
-                title,
-                dataKeys: allKeys,
-                finalColors,
-                highlightedSeries,
-                toggleHighlight,
-                showOnlyHighlighted,
-                onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
-                onPositionChange: onTooltipPositionChange,
-                periodLabel,
-                dataLabel: "Dados do Per\xEDodo",
-                valueFormatter: finalValueFormatter,
-                categoryFormatter,
-                globalTooltipCount: activeTooltips.length,
-                onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
-                closeAllButtonPosition: "top-center",
-                closeAllButtonVariant: "floating"
-              },
-              tooltip.id
-            )),
-            enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-              CloseAllButton_default,
-              {
-                count: activeTooltips.length,
-                onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
-                position: "top-center",
-                variant: "floating"
-              }
-            )
-          ]
-        }
-      )
+                            const inside = renderInsideBarLabel(
+                              color,
+                              finalValueFormatter
+                            );
+                            return inside(props);
+                          },
+                          offset: 0
+                        }
+                      ) : null
+                    },
+                    `bar-${key}`
+                  );
+                }
+                if (s.type === "line") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    import_recharts2.Line,
+                    {
+                      dataKey: key,
+                      yAxisId: rightKeys.includes(key) ? "right" : "left",
+                      name: label,
+                      stroke: color,
+                      strokeWidth: 2,
+                      dot: { r: 3 },
+                      activeDot: { r: 6 },
+                      onClick: handleSeriesClick,
+                      className: "cursor-pointer pointer-events-auto",
+                      style: { opacity: getSeriesOpacity(key) },
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        import_recharts2.LabelList,
+                        {
+                          dataKey: key,
+                          position: "top",
+                          content: pillLabelRenderer_default(
+                            color,
+                            "filled",
+                            finalValueFormatter
+                          ),
+                          offset: 14
+                        }
+                      ) : null
+                    },
+                    `line-${key}`
+                  );
+                }
+                if (s.type === "area") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                    import_recharts2.Area,
+                    {
+                      type: "monotone",
+                      dataKey: key,
+                      yAxisId: rightKeys.includes(key) ? "right" : "left",
+                      name: label,
+                      stroke: color,
+                      fill: `url(#gradient-${key})`,
+                      fillOpacity: 1,
+                      strokeWidth: 2,
+                      onClick: handleSeriesClick,
+                      className: "cursor-pointer pointer-events-auto",
+                      style: { opacity: getSeriesOpacity(key) },
+                      activeDot: {
+                        r: 6,
+                        fill: color,
+                        stroke: "hsl(var(--background))",
+                        strokeWidth: 2
+                      },
+                      children: showLabels && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                        import_recharts2.LabelList,
+                        {
+                          dataKey: key,
+                          position: "top",
+                          content: pillLabelRenderer_default(
+                            color,
+                            "soft",
+                            finalValueFormatter
+                          ),
+                          offset: 12
+                        }
+                      ) : null
+                    },
+                    `area-${key}`
+                  );
+                }
+                return null;
+              })
+            ]
+          }
+        ) }),
+        enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          DraggableTooltip_default,
+          {
+            id: tooltip.id,
+            data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
+            position: tooltip.position,
+            title,
+            dataKeys: allKeys,
+            finalColors,
+            highlightedSeries,
+            toggleHighlight,
+            showOnlyHighlighted,
+            onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
+            onPositionChange: onTooltipPositionChange,
+            periodLabel,
+            dataLabel: "Dados do Per\xEDodo",
+            valueFormatter: finalValueFormatter,
+            categoryFormatter,
+            globalTooltipCount: activeTooltips.length,
+            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+            closeAllButtonPosition: "top-center",
+            closeAllButtonVariant: "floating"
+          },
+          tooltip.id
+        )),
+        enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          CloseAllButton_default,
+          {
+            count: activeTooltips.length,
+            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+            position: "top-center",
+            variant: "floating"
+          }
+        ),
+        timeSeriesConfig && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          Brush_default,
+          {
+            data,
+            startIndex,
+            endIndex,
+            onMouseDown: handleMouseDown,
+            brushRef,
+            xAxisKey: xAxisConfig.dataKey,
+            seriesOrder,
+            finalColors,
+            brushHeight: timeSeriesConfig.height,
+            brushColor: timeSeriesConfig.brushColor,
+            miniChartOpacity: timeSeriesConfig.miniChartOpacity,
+            showGrid,
+            gridColor,
+            margin: {
+              left: finalChartLeftMargin,
+              right: finalChartRightMargin
+            }
+          }
+        )
+      ]
     }
-  );
+  ) });
 };
 var Chart_default = Chart;
 
 // src/components/ui/charts/BarChart.tsx
-var import_react97 = require("react");
-var import_recharts2 = require("recharts");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_react98 = require("react");
+var import_recharts3 = require("recharts");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var DEFAULT_COLORS3 = ["#55af7d", "#8e68ff", "#2273e1"];
 var BarChart = ({
   data,
@@ -17537,7 +17946,7 @@ var BarChart = ({
     containerPaddingLeft,
     16
   );
-  const smartConfig = (0, import_react97.useMemo)(() => {
+  const smartConfig = (0, import_react98.useMemo)(() => {
     const providedMapper = yAxis ?? mapper;
     if (autoDetect === true || xAxis == null || providedMapper == null) {
       const detectedXAxis = detectXAxis(data);
@@ -17587,14 +17996,14 @@ var BarChart = ({
     return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
   }, [data, xAxis, mapper, yAxis, autoDetect, labelMap]);
   const { xAxisConfig, mapperConfig } = smartConfig;
-  const [activeTooltips, setActiveTooltips] = (0, import_react97.useState)([]);
-  const [isDragging, setIsDragging] = (0, import_react97.useState)(null);
-  const [dragOffset, setDragOffset] = (0, import_react97.useState)({
+  const [activeTooltips, setActiveTooltips] = (0, import_react98.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react98.useState)(null);
+  const [dragOffset, setDragOffset] = (0, import_react98.useState)({
     x: 0,
     y: 0
   });
-  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react97.useState)(0);
-  const [alignmentGuides, setAlignmentGuides] = (0, import_react97.useState)([]);
+  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react98.useState)(0);
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react98.useState)([]);
   const processedData = data.map((item) => ({
     ...item,
     name: String(item[xAxisConfig.dataKey] || "N/A")
@@ -17617,7 +18026,7 @@ var BarChart = ({
       // Garantir que tem a propriedade 'name'
     };
   };
-  const maxDataValue = (0, import_react97.useMemo)(() => {
+  const maxDataValue = (0, import_react98.useMemo)(() => {
     let max = 0;
     const keys = Object.keys(mapperConfig);
     for (const row of processedData) {
@@ -17630,7 +18039,7 @@ var BarChart = ({
     }
     return max;
   }, [processedData, mapperConfig]);
-  const niceMax = (0, import_react97.useMemo)(() => {
+  const niceMax = (0, import_react98.useMemo)(() => {
     let padding2 = 0.08;
     if (maxDataValue > 1e6) padding2 = 0.05;
     if (maxDataValue > 1e7) padding2 = 0.03;
@@ -17671,7 +18080,7 @@ var BarChart = ({
   const GUIDE_THRESHOLD2 = 60;
   const STRONG_SNAP_THRESHOLD2 = 35;
   const PRECISION_SNAP_THRESHOLD2 = 8;
-  const updateAlignmentGuides = (0, import_react97.useCallback)(
+  const updateAlignmentGuides = (0, import_react98.useCallback)(
     (draggedTooltipId, currentPosition) => {
       if (!isDragging) return;
       const getAllTooltips = () => {
@@ -17735,7 +18144,7 @@ var BarChart = ({
     },
     [isDragging, activeTooltips]
   );
-  const snapToGuides = (0, import_react97.useCallback)(
+  const snapToGuides = (0, import_react98.useCallback)(
     (position) => {
       const snappedPosition = { ...position };
       let hasSnapped = false;
@@ -17797,7 +18206,7 @@ var BarChart = ({
     setIsDragging(tooltipId);
     setDragOffset({ x: offsetX, y: offsetY });
   };
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     let rafId;
     let lastMousePosition = { x: 0, y: 0 };
     const handleGlobalMouseMove = (e) => {
@@ -17855,7 +18264,7 @@ var BarChart = ({
     updateAlignmentGuides,
     snapToGuides
   ]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     const handleCloseAllTooltips = () => {
       setActiveTooltips([]);
       setGlobalTooltipCount(0);
@@ -17865,7 +18274,7 @@ var BarChart = ({
       window.removeEventListener("closeAllTooltips", handleCloseAllTooltips);
     };
   }, []);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     const handleTooltipCountRequest = () => {
       window.dispatchEvent(
         new CustomEvent("tooltipCountResponse", {
@@ -17904,7 +18313,7 @@ var BarChart = ({
       );
     };
   }, [activeTooltips]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (isDragging) return;
     let totalCount = 0;
     const handleCountResponse = (event) => {
@@ -17928,25 +18337,25 @@ var BarChart = ({
     label
   }) => {
     if (!active || !payload) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "font-medium text-foreground mb-2", children: label }),
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: "font-medium text-foreground mb-2", children: label }),
       payload.map(
-        (entry, index) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+        (entry, index) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
             "div",
             {
               className: "w-3 h-3 rounded-sm",
               style: { backgroundColor: entry.color }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { className: "text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "text-muted-foreground", children: [
             entry.name,
             ":"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
         ] }, index)
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
     ] });
   };
   const getTitleClassName = (position) => {
@@ -17960,7 +18369,7 @@ var BarChart = ({
         return `${baseClasses} text-left`;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
     "div",
     {
       className: cn("rounded-lg bg-card p-4 relative", className),
@@ -17969,9 +18378,9 @@ var BarChart = ({
         maxWidth: "100%"
       },
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("h3", { className: getTitleClassName(titlePosition), children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
-          import_recharts2.BarChart,
+        title && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("h3", { className: getTitleClassName(titlePosition), children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+          import_recharts3.BarChart,
           {
             data: processedData,
             width: typeof width === "number" ? width : 900,
@@ -17979,16 +18388,16 @@ var BarChart = ({
             margin: resolveChartMargins(margins, chartMargins, showLabels),
             onClick: handleChartClick,
             children: [
-              showGrid && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.CartesianGrid,
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.CartesianGrid,
                 {
                   strokeDasharray: "3 3",
                   stroke: gridColor || "hsl(var(--muted-foreground))",
                   opacity: 0.5
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.XAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.XAxis,
                 {
                   dataKey: xAxisConfig.dataKey,
                   stroke: "hsl(var(--muted-foreground))",
@@ -17998,8 +18407,8 @@ var BarChart = ({
                   tickFormatter: xAxisConfig.valueFormatter
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.YAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.YAxis,
                 {
                   stroke: "hsl(var(--muted-foreground))",
                   fontSize: 12,
@@ -18010,15 +18419,15 @@ var BarChart = ({
                   tickCount: 6
                 }
               ),
-              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.Tooltip,
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.Tooltip,
                 {
-                  content: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(CustomTooltip, {}),
+                  content: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CustomTooltip, {}),
                   cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
                 }
               ),
-              showLegend && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                import_recharts2.Legend,
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                import_recharts3.Legend,
                 {
                   wrapperStyle: {
                     color: "hsl(var(--foreground))",
@@ -18028,8 +18437,8 @@ var BarChart = ({
               ),
               dataKeys.map((key) => {
                 const fieldConfig = mapperConfig[key];
-                return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                  import_recharts2.Bar,
+                return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                  import_recharts3.Bar,
                   {
                     dataKey: key,
                     name: fieldConfig?.label || key,
@@ -18037,8 +18446,8 @@ var BarChart = ({
                     radius: [4, 4, 0, 0],
                     onClick: handleBarClick,
                     style: { cursor: "pointer" },
-                    activeBar: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                      import_recharts2.Rectangle,
+                    activeBar: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                      import_recharts3.Rectangle,
                       {
                         fill: finalColors[key],
                         stroke: finalColors[key],
@@ -18046,8 +18455,8 @@ var BarChart = ({
                         opacity: 0.8
                       }
                     ),
-                    children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-                      import_recharts2.LabelList,
+                    children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                      import_recharts3.LabelList,
                       {
                         dataKey: key,
                         position: "top",
@@ -18083,8 +18492,8 @@ var BarChart = ({
             guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
             guide.targetTooltip.top + guide.targetTooltip.height / 2
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-30",
@@ -18103,7 +18512,7 @@ var BarChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18119,7 +18528,7 @@ var BarChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18137,7 +18546,7 @@ var BarChart = ({
             )
           ] }, index);
         }),
-        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
           DraggableTooltip_default,
           {
             id: tooltip.id,
@@ -18170,9 +18579,9 @@ var BarChart = ({
 var BarChart_default = BarChart;
 
 // src/components/ui/charts/LineChart.tsx
-var import_react98 = require("react");
-var import_recharts3 = require("recharts");
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_react99 = require("react");
+var import_recharts4 = require("recharts");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var defaultData = [
   { name: "A", value: 100 },
   { name: "B", value: 200 },
@@ -18204,14 +18613,14 @@ var CustomLineChart = ({
     containerPaddingLeft,
     16
   );
-  const [activeTooltips, setActiveTooltips] = (0, import_react98.useState)([]);
-  const [isDragging, setIsDragging] = (0, import_react98.useState)(null);
-  const [dragOffset, setDragOffset] = (0, import_react98.useState)({
+  const [activeTooltips, setActiveTooltips] = (0, import_react99.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react99.useState)(null);
+  const [dragOffset, setDragOffset] = (0, import_react99.useState)({
     x: 0,
     y: 0
   });
-  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react98.useState)(0);
-  const [alignmentGuides, setAlignmentGuides] = (0, import_react98.useState)([]);
+  const [globalTooltipCount, setGlobalTooltipCount] = (0, import_react99.useState)(0);
+  const [alignmentGuides, setAlignmentGuides] = (0, import_react99.useState)([]);
   const generateColors = (dataKeys2) => {
     const colorMap = {};
     const allColors = generateAdditionalColors(colors2, dataKeys2.length);
@@ -18220,12 +18629,12 @@ var CustomLineChart = ({
     });
     return colorMap;
   };
-  const dataKeys = (0, import_react98.useMemo)(
+  const dataKeys = (0, import_react99.useMemo)(
     () => data.length > 0 ? Object.keys(data[0]).filter((key) => key !== "name") : [],
     [data]
   );
   const finalColors = generateColors(dataKeys);
-  const maxDataValue = (0, import_react98.useMemo)(() => {
+  const maxDataValue = (0, import_react99.useMemo)(() => {
     let max = 0;
     for (const row of data) {
       const r = row;
@@ -18237,7 +18646,7 @@ var CustomLineChart = ({
     }
     return max;
   }, [data, dataKeys]);
-  const niceMax = (0, import_react98.useMemo)(() => {
+  const niceMax = (0, import_react99.useMemo)(() => {
     let padding2 = 0.08;
     if (maxDataValue > 1e6) padding2 = 0.05;
     if (maxDataValue > 1e7) padding2 = 0.03;
@@ -18271,7 +18680,7 @@ var CustomLineChart = ({
         setActiveTooltips((prev) => [...prev, newTooltip]);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
       "circle",
       {
         cx,
@@ -18313,10 +18722,10 @@ var CustomLineChart = ({
   const handleChartBackgroundClick = () => {
     setActiveTooltips([]);
   };
-  const handleCloseAllTooltips = (0, import_react98.useCallback)(() => {
+  const handleCloseAllTooltips = (0, import_react99.useCallback)(() => {
     window.dispatchEvent(new CustomEvent("closeAllTooltips"));
   }, []);
-  const updateAlignmentGuides = (0, import_react98.useCallback)(
+  const updateAlignmentGuides = (0, import_react99.useCallback)(
     (draggedTooltipId, draggedPosition) => {
       const SNAP_THRESHOLD = 15;
       const draggedTooltip = activeTooltips.find(
@@ -18397,7 +18806,7 @@ var CustomLineChart = ({
     },
     [activeTooltips]
   );
-  const snapToGuides = (0, import_react98.useCallback)(
+  const snapToGuides = (0, import_react99.useCallback)(
     (position) => {
       const SNAP_DISTANCE = 10;
       const snappedPosition = { ...position };
@@ -18425,7 +18834,7 @@ var CustomLineChart = ({
     setIsDragging(tooltipId);
     setDragOffset({ x: offsetX, y: offsetY });
   };
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     let rafId;
     let lastMousePosition = { x: 0, y: 0 };
     const handleGlobalMouseMove = (e) => {
@@ -18472,7 +18881,7 @@ var CustomLineChart = ({
     updateAlignmentGuides,
     snapToGuides
   ]);
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     const handleCloseAllTooltips2 = () => {
       setActiveTooltips([]);
       setGlobalTooltipCount(0);
@@ -18482,7 +18891,7 @@ var CustomLineChart = ({
       window.removeEventListener("closeAllTooltips", handleCloseAllTooltips2);
     };
   }, []);
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     const handleTooltipCountRequest = () => {
       window.dispatchEvent(
         new CustomEvent("tooltipCountResponse", {
@@ -18526,7 +18935,7 @@ var CustomLineChart = ({
       );
     };
   }, [activeTooltips]);
-  (0, import_react98.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     if (isDragging) return;
     let totalCount = 0;
     const handleCountResponse = (event) => {
@@ -18554,7 +18963,7 @@ var CustomLineChart = ({
         return "text-left";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: cn("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: cn("relative", className), children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "div",
     {
       className: "rounded-lg bg-card p-4 relative border border-border",
@@ -18564,9 +18973,9 @@ var CustomLineChart = ({
       },
       onClick: handleChartBackgroundClick,
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
-          import_recharts3.LineChart,
+        title && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+          import_recharts4.LineChart,
           {
             data,
             width: typeof width === "number" ? width : 900,
@@ -18574,24 +18983,24 @@ var CustomLineChart = ({
             margin: resolveChartMargins(margins, chartMargins, showLabels),
             onClick: handleChartClick,
             children: [
-              showGrid && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.CartesianGrid,
+              showGrid && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.CartesianGrid,
                 {
                   strokeDasharray: "3 3",
                   stroke: gridColor || "hsl(var(--muted-foreground))",
                   opacity: 0.3
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.XAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.XAxis,
                 {
                   dataKey: "name",
                   className: "fill-muted-foreground text-xs",
                   fontSize: 12
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.YAxis,
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.YAxis,
                 {
                   className: "fill-muted-foreground text-xs",
                   fontSize: 12,
@@ -18600,9 +19009,9 @@ var CustomLineChart = ({
                   tickCount: 6
                 }
               ),
-              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_recharts3.Tooltip, { content: () => null }),
-              showLegend && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.Legend,
+              showTooltip && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_recharts4.Tooltip, { content: () => null }),
+              showLegend && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.Legend,
                 {
                   wrapperStyle: {
                     fontSize: "12px",
@@ -18610,17 +19019,17 @@ var CustomLineChart = ({
                   }
                 }
               ),
-              dataKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                import_recharts3.Line,
+              dataKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                import_recharts4.Line,
                 {
                   type: "monotone",
                   dataKey: key,
                   stroke: finalColors[key],
                   strokeWidth,
                   dot: showDots ? { r: 4, cursor: "pointer" } : false,
-                  activeDot: (props) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(ClickableDot, { ...props, dataKey: key }),
-                  children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                    import_recharts3.LabelList,
+                  activeDot: (props) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ClickableDot, { ...props, dataKey: key }),
+                  children: showLabels && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+                    import_recharts4.LabelList,
                     {
                       dataKey: key,
                       position: "top",
@@ -18656,8 +19065,8 @@ var CustomLineChart = ({
             guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
             guide.targetTooltip.top + guide.targetTooltip.height / 2
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-30",
@@ -18676,7 +19085,7 @@ var CustomLineChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18692,7 +19101,7 @@ var CustomLineChart = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
               "div",
               {
                 className: "fixed pointer-events-none z-31",
@@ -18710,7 +19119,7 @@ var CustomLineChart = ({
             )
           ] }, index);
         }),
-        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+        activeTooltips.map((tooltip, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
           DraggableTooltip_default,
           {
             id: tooltip.id,
@@ -18741,8 +19150,8 @@ var CustomLineChart = ({
 var LineChart_default = CustomLineChart;
 
 // src/components/ui/charts/PieChart.tsx
-var import_recharts4 = require("recharts");
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_recharts5 = require("recharts");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var defaultData2 = [
   { name: "Vendas", value: 4e3 },
   { name: "Marketing", value: 3e3 },
@@ -18780,7 +19189,7 @@ var renderCustomizedLabel = ({
   const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
   const x = cx + radius * Math.cos(-midAngle * RADIAN);
   const y = cy + radius * Math.sin(-midAngle * RADIAN);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "text",
     {
       x,
@@ -18809,9 +19218,9 @@ var CustomPieChart = ({
   centerY = "50%"
 }) => {
   const finalColors = colors2 || DEFAULT_COLORS5;
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_recharts4.ResponsiveContainer, { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_recharts4.PieChart, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-      import_recharts4.Pie,
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_recharts5.ResponsiveContainer, { width, height, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_recharts5.PieChart, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      import_recharts5.Pie,
       {
         data,
         cx: centerX,
@@ -18822,8 +19231,8 @@ var CustomPieChart = ({
         innerRadius,
         fill: "#8884d8",
         dataKey: "value",
-        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-          import_recharts4.Cell,
+        children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+          import_recharts5.Cell,
           {
             fill: finalColors[index % finalColors.length]
           },
@@ -18831,8 +19240,8 @@ var CustomPieChart = ({
         ))
       }
     ),
-    showTooltip && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-      import_recharts4.Tooltip,
+    showTooltip && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      import_recharts5.Tooltip,
       {
         contentStyle: {
           backgroundColor: "hsl(var(--popover))",
@@ -18842,96 +19251,154 @@ var CustomPieChart = ({
         }
       }
     ),
-    showLegend && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_recharts4.Legend, {})
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_recharts5.Legend, {})
   ] }) }) });
 };
 var PieChart_default = CustomPieChart;
 
+// src/components/ui/charts/TimeSeries.tsx
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var TimeSeries = ({
+  data,
+  xAxis,
+  chartHeight = 350,
+  height,
+  brushHeight,
+  className,
+  start,
+  end,
+  defaultStartIndex,
+  defaultEndIndex,
+  onRangeChange,
+  brushColor,
+  brushStroke,
+  miniChartOpacity = 0.2,
+  ...rest
+}) => {
+  const brushHeightValue = brushHeight ?? height ?? 60;
+  const startIndex = defaultStartIndex ?? start ?? 0;
+  const endIndex = defaultEndIndex ?? end;
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: cn("w-full flex flex-col", className), children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    Chart_default,
+    {
+      ...rest,
+      data,
+      xAxis,
+      height: chartHeight + brushHeightValue + 40,
+      timeSeries: {
+        start: startIndex,
+        end: endIndex,
+        onRangeChange,
+        height: brushHeightValue,
+        brushColor,
+        brushStroke,
+        miniChartOpacity
+      }
+    }
+  ) });
+};
+var TimeSeries_default = TimeSeries;
+
 // src/components/ui/LeaderBoard.tsx
-var import_react99 = require("@phosphor-icons/react");
-var import_react100 = require("react");
+var import_react100 = require("@phosphor-icons/react");
+var import_react101 = require("react");
 var import_framer_motion22 = require("framer-motion");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 function Leaderboard({
   items,
   order: initialOrder = "desc",
   title = "LeaderBoard",
   className,
-  isLoading = false
+  isLoading = false,
+  legend
 }) {
-  const [order, setOrder] = (0, import_react100.useState)(initialOrder);
+  const [order, setOrder] = (0, import_react101.useState)(initialOrder);
   const mockData = [
-    { name: "Ana", percentage: 92 },
-    { name: "Bruno", percentage: 81 },
-    { name: "Carla", percentage: 74 },
-    { name: "Daniel", percentage: 68 },
-    { name: "Eduardo", percentage: 55 },
-    { name: "Fernanda", percentage: 44 },
-    { name: "Gabriela", percentage: 33 },
-    { name: "Heitor", percentage: 28 },
-    { name: "Isabela", percentage: 22 },
-    { name: "Jo\xE3o", percentage: 18 }
+    { name: "Ana", value: 92 },
+    { name: "Bruno", value: 81 },
+    { name: "Carla", value: 74 },
+    { name: "Daniel", value: 68 },
+    { name: "Eduardo", value: 55 },
+    { name: "Fernanda", value: 44 },
+    { name: "Gabriela", value: 33 },
+    { name: "Heitor", value: 28 },
+    { name: "Isabela", value: 22 },
+    { name: "Jo\xE3o", value: 18 }
   ];
   const data = items ?? mockData;
-  const sortedData = [...data].sort(
-    (a, b) => order === "desc" ? b.percentage - a.percentage : a.percentage - b.percentage
-  );
-  const getBadgeColor = (pct) => {
-    if (pct >= 75) return "red";
-    if (pct >= 25) return "yellow";
+  const sortedData = [...data].sort((a, b) => {
+    const aValue = typeof a.value === "string" ? parseFloat(a.value) || a.value : a.value;
+    const bValue = typeof b.value === "string" ? parseFloat(b.value) || b.value : b.value;
+    if (typeof aValue === "number" && typeof bValue === "number") {
+      return order === "desc" ? bValue - aValue : aValue - bValue;
+    }
+    if (typeof aValue === "string" && typeof bValue === "string") {
+      return order === "desc" ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue);
+    }
+    if (typeof aValue === "number") return order === "desc" ? -1 : 1;
+    return order === "desc" ? 1 : -1;
+  });
+  const getBadgeColor = (value) => {
+    const numValue = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(numValue)) return "green";
+    if (numValue >= 75) return "red";
+    if (numValue >= 25) return "yellow";
     return "green";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
     "div",
     {
       className: `border rounded-xl flex flex-col max-h-80 w-96 ${className}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center justify-between p-4 border-b flex-shrink-0 gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("h2", { className: "text-lg font-semibold px-1", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("h2", { className: "text-lg font-semibold px-1", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
             ButtonBase,
             {
               size: "icon",
               variant: "ghost",
               onClick: () => setOrder(order === "desc" ? "asc" : "desc"),
               disabled: isLoading || sortedData.length === 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react99.CaretUpDownIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_react100.CaretUpDownIcon, {})
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "overflow-y-auto flex-1", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center justify-between p-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center gap-3 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SkeletonBase, { className: "w-8 h-8 rounded-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SkeletonBase, { className: "h-4 w-36" })
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "overflow-y-auto flex-1", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center justify-between p-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-3 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkeletonBase, { className: "w-8 h-8 rounded-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkeletonBase, { className: "h-4 w-36" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SkeletonBase, { className: "h-6 w-12 rounded-full" })
-        ] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "flex items-center justify-center h-full py-12", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "text-muted-foreground text-sm", children: "Sem dados dispon\xEDveis" }) }) : /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-          import_framer_motion22.motion.span,
-          {
-            initial: { opacity: 0, y: 10 },
-            animate: { opacity: 1, y: 0 },
-            transition: { delay: idx * 5e-3 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("li", { className: "flex items-center justify-between py-3 border-b last:border-b-0 hover:bg-muted transition-colors px-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "text-sm text-gray-400 w-6 h-6 border rounded-full text-center bg-muted/50", children: idx + 1 }),
-                /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "font-medium", children: item.name })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
-                Badge,
-                {
-                  color: getBadgeColor(item.percentage),
-                  size: "md",
-                  className: "font-bold",
-                  children: [
-                    item.percentage,
-                    "%"
-                  ]
-                }
-              )
-            ] })
-          },
-          idx
-        )) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkeletonBase, { className: "h-6 w-12 rounded-full" })
+        ] }, idx)) }) : sortedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex items-center justify-center h-full py-12", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "text-muted-foreground text-sm", children: "Sem dados dispon\xEDveis" }) }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center justify-between py-2.5 px-4 border-b flex-shrink-0 gap-3 sticky top-0 bg-background", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider pl-1", children: legend?.[0]?.[0] ?? "Participante" }),
+            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: legend?.[0]?.[1] ?? "Pontua\xE7\xE3o" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("ul", { children: sortedData.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+            import_framer_motion22.motion.span,
+            {
+              initial: { opacity: 0, y: 10 },
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: idx * 5e-3 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("li", { className: "flex items-center justify-between py-3 border-b last:border-b-0 hover:bg-muted transition-colors px-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "text-sm text-gray-400 w-6 h-6 border rounded-full text-center bg-muted/50", children: idx + 1 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "font-medium", children: item.name })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                  Badge,
+                  {
+                    color: getBadgeColor(item.value),
+                    size: "md",
+                    className: "font-bold",
+                    children: item.value
+                  }
+                )
+              ] })
+            },
+            idx
+          )) })
+        ] }) })
       ]
     }
   );