@mlw-packages/react-components 1.8.8 → 1.8.10

package/dist/index.js

@@ -688,7 +688,7 @@ var DialogContentBase = React33__namespace.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-auto rounded-md border-border",
+            "fixed left-[50%] top-[50%] z-50 w-lg grid 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,
@@ -697,7 +697,7 @@ var DialogContentBase = React33__namespace.forwardRef(
           children: [
             children,
             /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.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: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "h-5 w-5 sm:h-4 sm:w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "h-6 w-6 sm:h-4 sm:w-4 hover:text-red-500 font-extrabold" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
             ] })
           ]
@@ -1070,7 +1070,7 @@ var ProgressBase = React33__namespace.forwardRef(
                 ]
               }
             ),
-            showValue && valuePosition === "right" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-12 text-sm font-extrabold text-left", children: [
+            showValue && valuePosition === "right" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: " text-sm font-bold text-left", children: [
               Math.round(value || 0),
               "%"
             ] }),
@@ -1332,35 +1332,55 @@ var useDrag = (options = {}) => {
   const [positions, setPositions] = React33.useState({});
   const dragStartPos = React33.useRef(null);
   const dragId = React33.useRef(null);
-  const handleMouseDown = React33.useCallback((id, e) => {
-    e.preventDefault();
-    const currentPosition = positions[id] || { top: 0, left: 0 };
-    dragStartPos.current = {
-      x: e.clientX,
-      y: e.clientY,
-      elementX: currentPosition.left,
-      elementY: currentPosition.top
-    };
-    dragId.current = id;
-    setIsDragging(id);
-    options.onDragStart?.(id);
-  }, [positions, options]);
-  const handleMouseMove = React33.useCallback((e) => {
-    if (!isDragging || !dragStartPos.current || !dragId.current) return;
-    const deltaX = e.clientX - dragStartPos.current.x;
-    const deltaY = e.clientY - dragStartPos.current.y;
-    const newPosition = {
-      left: dragStartPos.current.elementX + deltaX,
-      top: dragStartPos.current.elementY + deltaY
-    };
-    newPosition.left = Math.max(0, Math.min(window.innerWidth - 300, newPosition.left));
-    newPosition.top = Math.max(0, Math.min(window.innerHeight - 200, newPosition.top));
-    setPositions((prev) => ({
-      ...prev,
-      [dragId.current]: newPosition
-    }));
-    options.onDrag?.(dragId.current, newPosition);
-  }, [isDragging, options]);
+  const handleDragStart = React33.useCallback(
+    (id, e) => {
+      const isTouchEvent = "touches" in e;
+      const clientX = isTouchEvent ? e.touches[0].clientX : e.clientX;
+      const clientY = isTouchEvent ? e.touches[0].clientY : e.clientY;
+      if (!isTouchEvent) {
+        e.preventDefault();
+      }
+      const currentPosition = positions[id] || { top: 0, left: 0 };
+      dragStartPos.current = {
+        x: clientX,
+        y: clientY,
+        elementX: currentPosition.left,
+        elementY: currentPosition.top
+      };
+      dragId.current = id;
+      setIsDragging(id);
+      options.onDragStart?.(id);
+    },
+    [positions, options]
+  );
+  const handleMouseMove = React33.useCallback(
+    (e) => {
+      if (!isDragging || !dragStartPos.current || !dragId.current) return;
+      const isTouchEvent = "touches" in e;
+      const clientX = isTouchEvent ? e.touches[0].clientX : e.clientX;
+      const clientY = isTouchEvent ? e.touches[0].clientY : e.clientY;
+      const deltaX = clientX - dragStartPos.current.x;
+      const deltaY = clientY - dragStartPos.current.y;
+      const newPosition = {
+        left: dragStartPos.current.elementX + deltaX,
+        top: dragStartPos.current.elementY + deltaY
+      };
+      newPosition.left = Math.max(
+        0,
+        Math.min(window.innerWidth - 300, newPosition.left)
+      );
+      newPosition.top = Math.max(
+        0,
+        Math.min(window.innerHeight - 200, newPosition.top)
+      );
+      setPositions((prev) => ({
+        ...prev,
+        [dragId.current]: newPosition
+      }));
+      options.onDrag?.(dragId.current, newPosition);
+    },
+    [isDragging, options]
+  );
   const handleMouseUp = React33.useCallback(() => {
     if (dragId.current) {
       options.onDragEnd?.(dragId.current);
@@ -1373,10 +1393,16 @@ var useDrag = (options = {}) => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("touchmove", handleMouseMove, {
+        passive: false
+      });
+      document.addEventListener("touchend", handleMouseUp);
       document.body.style.userSelect = "none";
       return () => {
         document.removeEventListener("mousemove", handleMouseMove);
         document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("touchmove", handleMouseMove);
+        document.removeEventListener("touchend", handleMouseUp);
         document.body.style.userSelect = "";
       };
     }
@@ -1387,14 +1413,20 @@ var useDrag = (options = {}) => {
       [id]: position
     }));
   }, []);
-  const getPosition = React33.useCallback((id) => {
-    return positions[id] || { top: 0, left: 0 };
-  }, [positions]);
-  const isElementDragging = React33.useCallback((id) => {
-    return isDragging === id;
-  }, [isDragging]);
+  const getPosition = React33.useCallback(
+    (id) => {
+      return positions[id] || { top: 0, left: 0 };
+    },
+    [positions]
+  );
+  const isElementDragging = React33.useCallback(
+    (id) => {
+      return isDragging === id;
+    },
+    [isDragging]
+  );
   return {
-    handleMouseDown,
+    handleMouseDown: handleDragStart,
     getPosition,
     setPosition,
     isElementDragging,
@@ -1435,7 +1467,8 @@ var TooltipBase = ({ children, delayDuration = TOOLTIP_DELAY_DURATION, ...props
   ) });
 };
 TooltipBase.displayName = "TooltipBase";
-var TooltipTriggerBase = React33__namespace.forwardRef(({ children, onPointerDown, ...props }, ref) => {
+var TooltipTriggerBase = React33__namespace.forwardRef(({ children, onPointerDown, onClick: propOnClick, ...props }, ref) => {
+  const { setOpen, isMobile } = React33__namespace.useContext(TooltipClickContext);
   const handlePointerDown = React33__namespace.useCallback(
     (e) => {
       if (onPointerDown) {
@@ -1446,11 +1479,26 @@ var TooltipTriggerBase = React33__namespace.forwardRef(({ children, onPointerDow
   );
   const onClick = React33__namespace.useCallback(
     (e) => {
+      if (propOnClick) {
+        propOnClick(e);
+      }
       if (onPointerDown) {
         onPointerDown(e);
       }
+      if (isMobile && setOpen) {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
     },
-    [onPointerDown]
+    [onPointerDown, isMobile, setOpen, propOnClick]
+  );
+  const preventDefaultOnMobile = React33__namespace.useCallback(
+    (e) => {
+      if (isMobile) {
+        e.preventDefault();
+      }
+    },
+    [isMobile]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     TooltipPrimitive__namespace.Trigger,
@@ -1459,6 +1507,9 @@ var TooltipTriggerBase = React33__namespace.forwardRef(({ children, onPointerDow
       tabIndex: -1,
       onPointerDown: onPointerDown ? handlePointerDown : void 0,
       onClick,
+      onFocus: preventDefaultOnMobile,
+      onMouseEnter: preventDefaultOnMobile,
+      onMouseLeave: preventDefaultOnMobile,
       "data-tooltip-trigger": true,
       "aria-describedby": "tooltip-content",
       ...props,
@@ -3161,9 +3212,13 @@ function ModeToggleBase({
   className,
   variant = "ghost"
 }) {
+  const [mounted, setMounted] = React33.useState(false);
   const { setTheme, theme: currentTheme } = useTheme();
   const buttonRef = React33.useRef(null);
-  const isDark = currentTheme?.includes("dark") || currentTheme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  React33.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const isDark = mounted && (currentTheme?.includes("dark") || currentTheme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
   const toggleTheme = async (newTheme) => {
     if (!buttonRef.current || !document.startViewTransition) {
       setTheme(newTheme);
@@ -3204,7 +3259,7 @@ function ModeToggleBase({
         variant,
         size: "icon",
         className: cn(
-          "relative overflow-hidden border-transparent group",
+          "relative overflow-hidden group",
           className
         ),
         children: [
@@ -3230,7 +3285,7 @@ function ModeToggleBase({
       DropDownMenuContentBase,
       {
         align: "end",
-        className: "border-border bg-popover text-popover-foreground min-w-[140px]",
+        className: "border-border bg-popover text-popover-foreground min-w-[140px] ",
         children: themes.map((theme) => {
           const isActive = currentTheme === theme;
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3238,8 +3293,8 @@ function ModeToggleBase({
             {
               onClick: () => toggleTheme(theme),
               className: cn(
-                "gap-3 transition-all duration-200",
-                isActive ? "bg-accent/80 text-accent-foreground border-l-2 border-primary font-medium pl-1.5" : "hover:bg-accent hover:text-accent-foreground"
+                "gap-2 transition-all duration-200",
+                isActive ? "bg-accent/80 text-accent-foreground border-l-2 border-primary font-medium pl-1.5 my-0.5" : "hover:bg-accent hover:text-accent-foreground"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ThemeIcon, { theme }),
@@ -7471,18 +7526,17 @@ function ScrollColumn({ value, onChange, max, label }) {
       }
     }, 100);
   };
-  const handleMouseDown = (e) => {
+  const handleStart = (pageY) => {
     if (!containerRef.current) return;
     setIsDragging(true);
-    setStartY(e.pageY);
+    setStartY(pageY);
     setScrollTop(containerRef.current.scrollTop);
   };
-  const handleMouseMove = (e) => {
+  const handleMove = (pageY) => {
     if (!isDragging || !containerRef.current) return;
-    e.preventDefault();
-    containerRef.current.scrollTop = scrollTop + (startY - e.pageY) * 2;
+    containerRef.current.scrollTop = scrollTop + (startY - pageY) * 2;
   };
-  const handleMouseUp = () => {
+  const handleEnd = () => {
     if (!containerRef.current) return;
     setIsDragging(false);
     requestAnimationFrame(() => {
@@ -7494,8 +7548,32 @@ function ScrollColumn({ value, onChange, max, label }) {
       }
     });
   };
+  const handleMouseDown = (e) => {
+    handleStart(e.pageY);
+  };
+  const handleMouseMove = (e) => {
+    if (isDragging) {
+      e.preventDefault();
+      handleMove(e.pageY);
+    }
+  };
+  const handleMouseUp = () => {
+    handleEnd();
+  };
   const handleMouseLeave = () => {
-    if (isDragging) handleMouseUp();
+    if (isDragging) handleEnd();
+  };
+  const handleTouchStart = (e) => {
+    handleStart(e.touches[0].pageY);
+  };
+  const handleTouchMove = (e) => {
+    if (isDragging) {
+      if (e.cancelable) e.preventDefault();
+      handleMove(e.touches[0].pageY);
+    }
+  };
+  const handleTouchEnd = () => {
+    handleEnd();
   };
   const handleWheel = (e) => {
     e.stopPropagation();
@@ -7513,6 +7591,9 @@ function ScrollColumn({ value, onChange, max, label }) {
         onMouseMove: handleMouseMove,
         onMouseUp: handleMouseUp,
         onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
         style: {
           height: `${containerHeight}px`,
           paddingTop: `${centerIndex * itemHeight}px`,
@@ -13826,7 +13907,7 @@ function MultiSelect({
 
 // src/components/ui/charts/utils/helpers.ts
 var formatFieldName = (fieldName) => {
-  return fieldName.split(/[/_-]/).filter(Boolean).map((word) => {
+  return (fieldName.match(/[^/_-]+/g) || []).map((word) => {
     return word.charAt(0).toUpperCase() + word.slice(1);
   }).join(" ").trim();
 };
@@ -14553,7 +14634,7 @@ var DraggableTooltipComponent = ({
   highlightedSeries,
   toggleHighlight,
   showOnlyHighlighted,
-  valueFormatter: valueFormatter2,
+  valueFormatter,
   categoryFormatter
 }) => {
   const visibleKeys = React33.useMemo(
@@ -14969,7 +15050,7 @@ var DraggableTooltipComponent = ({
               {
                 data,
                 visibleKeys,
-                valueFormatter: valueFormatter2
+                valueFormatter
               }
             ) })
           ] }) }),
@@ -14988,7 +15069,7 @@ var DraggableTooltipComponent = ({
                 );
                 const val = typeof value === "number" ? value : Number(value) || 0;
                 const defaultFormatted = val.toLocaleString("pt-BR");
-                const displayValue = valueFormatter2 ? valueFormatter2({
+                const displayValue = valueFormatter ? valueFormatter({
                   value,
                   formattedValue: defaultFormatted,
                   dataKey: key,
@@ -15069,7 +15150,7 @@ var DraggableTooltipComponent = ({
                 highlightedSeries,
                 toggleHighlight,
                 finalColors,
-                valueFormatter2
+                valueFormatter
               ]
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-2 border-t", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
@@ -15103,7 +15184,7 @@ var RechartTooltipWithTotal = ({
   finalColors = {},
   periodLabel = "Per\xEDodo",
   totalLabel = "Total",
-  valueFormatter: valueFormatter2,
+  valueFormatter,
   categoryFormatter,
   yAxisMap,
   isBiaxial = false
@@ -15127,7 +15208,7 @@ var RechartTooltipWithTotal = ({
     }
     return total.toLocaleString("pt-BR");
   })();
-  const displayTotal = valueFormatter2 ? valueFormatter2({
+  const displayTotal = valueFormatter ? valueFormatter({
     value: total,
     formattedValue: defaultTotalFormatted,
     dataKey: "total",
@@ -15190,7 +15271,7 @@ var RechartTooltipWithTotal = ({
             }
             return value.toLocaleString("pt-BR");
           })();
-          const displayValue = valueFormatter2 ? valueFormatter2({
+          const displayValue = valueFormatter ? valueFormatter({
             value: entry.value,
             formattedValue: defaultFormatted,
             dataKey: entry.dataKey,
@@ -15255,7 +15336,7 @@ var TooltipSimple = ({
   label,
   finalColors = {},
   periodLabel = "Per\xEDodo",
-  valueFormatter: valueFormatter2,
+  valueFormatter,
   categoryFormatter,
   yAxisMap,
   isBiaxial = false
@@ -15303,7 +15384,7 @@ var TooltipSimple = ({
             }
             return value.toLocaleString("pt-BR");
           })();
-          const displayValue = valueFormatter2 ? valueFormatter2({
+          const displayValue = valueFormatter ? valueFormatter({
             value: entry.value,
             formattedValue: defaultFormatted,
             dataKey: entry.dataKey,
@@ -15345,6 +15426,210 @@ var TooltipSimple = ({
   );
 };
 var TooltipSimple_default = TooltipSimple;
+var tooltipVariants2 = {
+  hidden: {
+    opacity: 0,
+    scale: 0.96,
+    transition: { type: "spring", stiffness: 400, damping: 28 }
+  },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: { type: "spring", stiffness: 300, damping: 28 }
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.96,
+    transition: { type: "spring", stiffness: 400, damping: 28 }
+  }
+};
+var SystemTooltip = ({
+  id,
+  data,
+  position,
+  title = "Conex\xF5es",
+  onMouseDown,
+  onClose,
+  onPositionChange
+}) => {
+  const [localPos, setLocalPos] = React33.useState(position);
+  const [dragging, setDragging] = React33.useState(false);
+  const offsetRef = React33.useRef({ x: 0, y: 0 });
+  const lastMouse = React33.useRef({ x: 0, y: 0 });
+  React33.useEffect(() => setLocalPos(position), [position]);
+  React33.useEffect(() => {
+    let rafId = null;
+    const handleMouseMove = (e) => {
+      if (!dragging) return;
+      lastMouse.current = { x: e.clientX, y: e.clientY };
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        const newLeft = lastMouse.current.x - offsetRef.current.x;
+        const newTop = lastMouse.current.y - offsetRef.current.y;
+        const rawPosition = {
+          top: Math.max(0, Math.min(newTop, window.innerHeight - 200)),
+          left: Math.max(0, Math.min(newLeft, window.innerWidth - 320))
+        };
+        setLocalPos(rawPosition);
+        if (onPositionChange) onPositionChange(id, rawPosition);
+      });
+    };
+    const handleMouseUp = () => {
+      if (dragging) {
+        setDragging(false);
+        if (rafId) cancelAnimationFrame(rafId);
+      }
+    };
+    if (dragging) {
+      document.addEventListener("mousemove", handleMouseMove, {
+        passive: true
+      });
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+    }
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [dragging, id, onPositionChange]);
+  const handleMouseDownLocal = React33.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const rect = e.currentTarget.closest(".fixed")?.getBoundingClientRect();
+      if (!rect) return;
+      offsetRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      setDragging(true);
+      onMouseDown?.(id, e);
+    },
+    [id, onMouseDown]
+  );
+  const handleTouchStartLocal = React33.useCallback(
+    (e) => {
+      e.stopPropagation();
+      const touch = e.touches[0];
+      if (!touch) return;
+      const rect = e.currentTarget.closest(".fixed")?.getBoundingClientRect();
+      if (!rect) return;
+      offsetRef.current = {
+        x: touch.clientX - rect.left,
+        y: touch.clientY - rect.top
+      };
+      setDragging(true);
+      onMouseDown?.(id, e);
+    },
+    [id, onMouseDown]
+  );
+  const entries = React33.useMemo(
+    () => data.connections.filter((c) => c.type === "entrada"),
+    [data.connections]
+  );
+  const exits = React33.useMemo(
+    () => data.connections.filter((c) => c.type === "saida"),
+    [data.connections]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      className: "fixed bg-card/95 backdrop-blur-md border border-border/50 rounded-xl shadow-2xl z-50 w-80 overflow-hidden",
+      variants: tooltipVariants2,
+      initial: "hidden",
+      animate: "visible",
+      exit: "exit",
+      style: {
+        top: localPos.top,
+        left: localPos.left
+      },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between py-1 border-b border-border/10 bg-muted/30 ",
+            onMouseDown: handleMouseDownLocal,
+            onTouchStart: handleTouchStartLocal,
+            style: {
+              touchAction: "none",
+              cursor: dragging ? "grabbing" : "grab"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded", children: /* @__PURE__ */ jsxRuntime.jsx(react.DotsSixVerticalIcon, { size: 16, className: "text-primary" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: title })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ButtonBase,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => onClose(id),
+                  className: "text-muted-foreground hover:text-destructive transition-colors hover:bg-destructive/10 mr-1",
+                  style: { cursor: "pointer" },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ssr.XIcon, { size: 16 })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pt-4 pb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-foreground tracking-tight truncate", children: data.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-bold text-muted-foreground tracking-tight truncate", children: data.description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-4 space-y-4 max-h-[300px] overflow-y-auto [&::-webkit-scrollbar]:w- [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SeparatorBase, { className: "w-full" }),
+          entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Entradas" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: entries.map((conn) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    react.ArrowRight,
+                    {
+                      size: 14,
+                      className: "text-emerald-500 shrink-0 rotate-180"
+                    }
+                  )
+                ]
+              },
+              conn.id
+            )) })
+          ] }),
+          exits.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-500" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Sa\xEDdas" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: exits.map((conn) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(react.ArrowRight, { size: 14, className: "text-blue-500 shrink-0" })
+                ]
+              },
+              conn.id
+            )) })
+          ] }),
+          data.connections.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+        ] })
+      ]
+    },
+    id
+  ) });
+};
+var SystemTooltip_default = SystemTooltip;
 var Brush = ({
   data,
   legend,
@@ -15599,11 +15884,11 @@ var parseNumber = (v) => {
     return Number(v);
   return void 0;
 };
-var renderPillLabel = (color, variant, valueFormatter2) => {
+var renderPillLabel = (color, variant, valueFormatter) => {
   return (props) => {
     const { x, y, value } = props;
     const defaultFormatted = typeof value === "number" ? formatCompactNumber(value) : String(value ?? "");
-    const text = valueFormatter2 ? valueFormatter2({
+    const text = valueFormatter ? valueFormatter({
       value,
       formattedValue: defaultFormatted,
       ...props
@@ -15692,11 +15977,11 @@ var renderPillLabel = (color, variant, valueFormatter2) => {
   };
 };
 var pillLabelRenderer_default = renderPillLabel;
-var renderInsideBarLabel = (color, valueFormatter2) => {
+var renderInsideBarLabel = (color, valueFormatter) => {
   return (props) => {
     const { x, y, value, width, height, viewBox, cx, cy, index } = props;
     const defaultFormatted = typeof value === "number" ? formatCompactNumber(value) : String(value ?? "");
-    const text = valueFormatter2 ? valueFormatter2({ value, formattedValue: defaultFormatted, ...props }) : defaultFormatted;
+    const text = valueFormatter ? valueFormatter({ value, formattedValue: defaultFormatted, ...props }) : defaultFormatted;
     const parseNumberLocal = (v) => {
       if (typeof v === "number") return v;
       if (typeof v === "string" && v.trim() !== "" && !Number.isNaN(Number(v)))
@@ -15841,7 +16126,7 @@ var NoData = ({
     "div",
     {
       className: cn(
-        "rounded-xl bg-card relative overflow-hidden w-full border border-border/50 shadow-sm",
+        "rounded-xl bg-card relative overflow-hidden w-full border border-border/50 shadow-sm h-full",
         className
       ),
       style: {
@@ -16298,6 +16583,128 @@ function useTimeSeriesRange({
     handleMouseDown
   };
 }
+var filtersOrder = (mapperConfig, series) => {
+  const seriesOrder = [];
+  if (series) {
+    if (series.bar)
+      series.bar.forEach((k) => seriesOrder.push({ type: "bar", key: k }));
+    if (series.line)
+      series.line.forEach((k) => seriesOrder.push({ type: "line", key: k }));
+    if (series.area)
+      series.area.forEach((k) => seriesOrder.push({ type: "area", key: k }));
+  } else {
+    Object.keys(mapperConfig).forEach(
+      (k) => seriesOrder.push({ type: "bar", key: k })
+    );
+  }
+  return seriesOrder;
+};
+var fnOpenTooltipForPeriod = (enableDraggableTooltips, processedData, periodName, activeTooltips, setActiveTooltips, maxTooltips, effectiveChartWidth) => {
+  if (!enableDraggableTooltips) return;
+  const row = processedData.find((r) => String(r.name) === periodName);
+  if (!row) return;
+  const tooltipId = String(periodName);
+  const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
+  if (existingIndex !== -1) {
+    setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
+    return;
+  }
+  if (activeTooltips.length >= maxTooltips) {
+    sonner.toast.warning(
+      `Limite de ${maxTooltips} janelas de informa\xE7\xE3o atingido. A mais antiga ser\xE1 substitu\xEDda.`
+    );
+  }
+  const offsetIndex = activeTooltips.length;
+  const availableWidth = effectiveChartWidth;
+  const gap = 28;
+  const leftGap = 28;
+  const newTooltip = {
+    id: tooltipId,
+    data: row,
+    position: {
+      top: 48 + offsetIndex * gap,
+      left: Math.max(120, availableWidth - 280 - offsetIndex * leftGap)
+    }
+  };
+  setActiveTooltips((prev) => {
+    const next = [...prev, newTooltip];
+    return next.length > maxTooltips ? next.slice(1) : next;
+  });
+};
+var fnSmartConfig = ({ xAxis, data, labelMap }) => {
+  const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
+  const xAxisConfig = typeof xAxis === "string" ? {
+    dataKey: resolvedXAxisKey,
+    label: formatFieldName(resolvedXAxisKey),
+    autoLabel: true
+  } : {
+    dataKey: resolvedXAxisKey,
+    label: xAxis?.label ?? formatFieldName(resolvedXAxisKey),
+    valueFormatter: xAxis?.valueFormatter,
+    autoLabel: xAxis?.autoLabel ?? true
+  };
+  const detectedFields = detectDataFields(data, xAxisConfig.dataKey);
+  const mapperConfig = detectedFields.reduce((acc, field) => {
+    acc[field] = {
+      label: labelMap?.[field] ?? formatFieldName(field),
+      type: "number",
+      visible: true
+    };
+    return acc;
+  }, {});
+  return { xAxisConfig, mapperConfig };
+};
+var fnConfigRightKeys = (biaxialConfigNormalized, yTickFormatter, finalColors) => {
+  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 { rightAxisColor, rightTickFormatter };
+};
+var fnFormatterValueLegend = (value, mapperConfig, labelMap, legendUppercase) => {
+  const key = String(value);
+  const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
+  return legendUppercase ? label.toUpperCase() : label;
+};
+var fnBuildConfigData = (s, mapperConfig, labelMap, finalColors, rightKeys, biaxialConfigNormalized) => {
+  const key = s.key;
+  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;
+    }
+  }
+  return { label, color, key };
+};
+var fnContentLabelList = (p) => {
+  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;
+  return needsOutside ? null : true;
+};
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
 var Chart = ({
   data,
@@ -16319,7 +16726,7 @@ var Chart = ({
   xAxisLabel,
   yAxisLabel,
   labelMap,
-  valueFormatter: valueFormatter2,
+  valueFormatter,
   categoryFormatter,
   enableHighlights = false,
   enableShowOnly = false,
@@ -16336,30 +16743,9 @@ var Chart = ({
   timeSeriesLegend,
   customLegend
 }) => {
-  const smartConfig = React33.useMemo(() => {
-    const resolvedXAxisKey = typeof xAxis === "string" ? xAxis : xAxis && xAxis.dataKey || detectXAxis(data);
-    const xAxisConfig2 = typeof xAxis === "string" ? {
-      dataKey: resolvedXAxisKey,
-      label: formatFieldName(resolvedXAxisKey),
-      autoLabel: true
-    } : {
-      dataKey: resolvedXAxisKey,
-      label: xAxis?.label ?? formatFieldName(resolvedXAxisKey),
-      valueFormatter: xAxis?.valueFormatter,
-      autoLabel: xAxis?.autoLabel ?? true
-    };
-    const detectedFields = detectDataFields(data, xAxisConfig2.dataKey);
-    const mapperConfig2 = detectedFields.reduce((acc, field) => {
-      acc[field] = {
-        label: labelMap?.[field] ?? formatFieldName(field),
-        type: "number",
-        visible: true
-      };
-      return acc;
-    }, {});
-    return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
+  const { xAxisConfig, mapperConfig } = React33.useMemo(() => {
+    return fnSmartConfig({ xAxis, data, labelMap });
   }, [data, xAxis, labelMap]);
-  const { xAxisConfig, mapperConfig } = smartConfig;
   const {
     highlightedSeries,
     showOnlyHighlighted,
@@ -16401,19 +16787,7 @@ var Chart = ({
     }
     return mapped;
   }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
-  const seriesOrder = [];
-  if (series) {
-    if (series.bar)
-      series.bar.forEach((k) => seriesOrder.push({ type: "bar", key: k }));
-    if (series.line)
-      series.line.forEach((k) => seriesOrder.push({ type: "line", key: k }));
-    if (series.area)
-      series.area.forEach((k) => seriesOrder.push({ type: "area", key: k }));
-  } else {
-    Object.keys(mapperConfig).forEach(
-      (k) => seriesOrder.push({ type: "bar", key: k })
-    );
-  }
+  const seriesOrder = filtersOrder(mapperConfig, series);
   const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
   const finalColors = React33.useMemo(
     () => generateColorMap(allKeys, colors2, mapperConfig),
@@ -16496,8 +16870,8 @@ var Chart = ({
     [highlightedSeries]
   );
   const finalValueFormatter = React33.useMemo(
-    () => createValueFormatter(valueFormatter2, formatBR),
-    [valueFormatter2, formatBR]
+    () => createValueFormatter(valueFormatter, formatBR),
+    [valueFormatter, formatBR]
   );
   const yTickFormatter = React33.useMemo(
     () => createYTickFormatter(finalValueFormatter),
@@ -16532,36 +16906,15 @@ var Chart = ({
   const rightYAxisLabelDx = Math.max(12, Math.round(finalChartRightMargin / 2));
   const openTooltipForPeriod = React33.useCallback(
     (periodName) => {
-      if (!enableDraggableTooltips) return;
-      const row = processedData.find((r) => String(r.name) === periodName);
-      if (!row) return;
-      const tooltipId = String(periodName);
-      const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
-      if (existingIndex !== -1) {
-        setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
-        return;
-      }
-      if (activeTooltips.length >= maxTooltips) {
-        sonner.toast.warning(
-          `Limite de ${maxTooltips} janelas de informa\xE7\xE3o atingido. A mais antiga ser\xE1 substitu\xEDda.`
-        );
-      }
-      const offsetIndex = activeTooltips.length;
-      const availableWidth = effectiveChartWidth;
-      const gap = 28;
-      const leftGap = 28;
-      const newTooltip = {
-        id: tooltipId,
-        data: row,
-        position: {
-          top: 48 + offsetIndex * gap,
-          left: Math.max(120, availableWidth - 280 - offsetIndex * leftGap)
-        }
-      };
-      setActiveTooltips((prev) => {
-        const next = [...prev, newTooltip];
-        return next.length > maxTooltips ? next.slice(1) : next;
-      });
+      fnOpenTooltipForPeriod(
+        enableDraggableTooltips,
+        processedData,
+        periodName,
+        activeTooltips,
+        setActiveTooltips,
+        maxTooltips,
+        effectiveChartWidth
+      );
     },
     [
       enableDraggableTooltips,
@@ -16800,29 +17153,7 @@ var Chart = ({
                 }
               ),
               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;
-                })();
+                const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(biaxialConfigNormalized, yTickFormatter, finalColors);
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   recharts.YAxis,
                   {
@@ -16880,38 +17211,26 @@ var Chart = ({
                 {
                   iconSize: 12,
                   formatter: (value) => {
-                    const key = String(value);
-                    const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName(key);
-                    const displayLabel = legendUppercase ? label.toUpperCase() : label;
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        className: "inline-flex items-center gap-2 px-1 py-1.5",
-                        style: {
-                          fontSize: "13px",
-                          fontWeight: 600,
-                          letterSpacing: "0.01em",
-                          color: "hsl(var(--foreground))"
-                        },
-                        children: displayLabel
-                      }
-                    );
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0]", children: fnFormatterValueLegend(
+                      value,
+                      mapperConfig,
+                      labelMap,
+                      legendUppercase
+                    ) });
                   }
                 }
               ),
               seriesOrder.map((s) => {
-                const key = s.key;
-                if (showOnlyHighlighted && !highlightedSeries.has(key))
+                if (showOnlyHighlighted && !highlightedSeries.has(s.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;
-                  }
-                }
+                const { label, color, key } = fnBuildConfigData(
+                  s,
+                  mapperConfig,
+                  labelMap,
+                  finalColors,
+                  rightKeys,
+                  biaxialConfigNormalized
+                );
                 if (s.type === "bar") {
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     recharts.Bar,
@@ -16938,14 +17257,8 @@ var Chart = ({
                         {
                           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) {
+                            if (!fnContentLabelList(props))
                               return null;
-                            }
                             const inside = renderInsideBarLabel(
                               color,
                               finalValueFormatter
@@ -18469,8 +18782,7 @@ function Leaderboard({
   title = "LeaderBoard",
   className,
   isLoading = false,
-  legend,
-  best = false
+  legend
 }) {
   const [order, setOrder] = React33.useState(initialOrder);
   const [searchTerm, setSearchTerm] = React33.useState("");
@@ -18502,55 +18814,54 @@ function Leaderboard({
     if (typeof aValue === "number") return order === "desc" ? -1 : 1;
     return order === "desc" ? 1 : -1;
   });
-  const getBadgeColor = (value, index, total) => {
-    if (best) {
-      const third = total / 3;
-      if (best) {
-        if (index < third) return "green";
-        if (index < 2 * third) return "yellow";
-        return "red";
-      }
-    }
+  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";
+    if (numValue > 100) return "green";
+    if (numValue >= 95) return "yellow";
+    return "red";
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `border rounded-xl flex flex-col max-h-80 w-96  ${className}`,
+      className: `border rounded-xl flex flex-col max-h-80 w-[52rem]  ${className}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3 ", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold px-1 whitespace-nowrap", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-            InputBase,
-            {
-              value: searchTerm,
-              onChange: (e) => setSearchTerm(e.target.value),
-              placeholder: "Pesquisar...",
-              leftIcon: /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { size: 16 }),
-              className: "h-8 py-1"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ButtonBase,
-            {
-              size: "icon",
-              variant: "outline",
-              onClick: () => setOrder(order === "desc" ? "asc" : "desc"),
-              disabled: isLoading || sortedData.length === 0,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.div,
-                {
-                  animate: { rotate: order === "asc" ? 180 : 0 },
-                  transition: { type: "spring", stiffness: 300, damping: 20 },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretUpDownIcon, {})
-                }
-              )
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InputBase,
+              {
+                value: searchTerm,
+                onChange: (e) => {
+                  const value = e.target.value;
+                  if (/^[a-zA-Z0-9\s()À-ÿ~^´`]*$/.test(value)) {
+                    setSearchTerm(value);
+                  }
+                },
+                placeholder: "Pesquisar...",
+                leftIcon: /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { size: 16 }),
+                className: "h-8 py-1 w-24"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ButtonBase,
+              {
+                size: "icon",
+                variant: "outline",
+                onClick: () => setOrder(order === "desc" ? "asc" : "desc"),
+                disabled: isLoading || sortedData.length === 0,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.div,
+                  {
+                    animate: { rotate: order === "asc" ? 180 : 0 },
+                    transition: { type: "spring", stiffness: 300, damping: 20 },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretUpDownIcon, {})
+                  }
+                )
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-1", children: [
@@ -18577,7 +18888,7 @@ function Leaderboard({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Badge,
                   {
-                    color: getBadgeColor(item.value, idx, sortedData.length),
+                    color: getBadgeColor(item.value),
                     size: "md",
                     className: "font-bold",
                     children: item.value
@@ -18862,6 +19173,7 @@ exports.StartHour = StartHour;
 exports.StartHourAgenda = StartHourAgenda;
 exports.StatusIndicator = StatusIndicator;
 exports.SwitchBase = SwitchBase;
+exports.SystemTooltip = SystemTooltip_default;
 exports.TableBase = TableBase;
 exports.TableBodyBase = TableBodyBase;
 exports.TableCaptionBase = TableCaptionBase;