@mlw-packages/react-components 1.8.4 → 1.8.5

package/dist/index.js

@@ -1021,18 +1021,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 +1343,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),
               "%"
@@ -1944,7 +1938,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 +2018,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 +2374,11 @@ var PopoverContentBase = React13.forwardRef(
         className
       ),
       "data-testid": dataTestId,
+      onInteractOutside: (event) => {
+        props.onInteractOutside?.(event);
+        if (event.defaultPrevented) return;
+        event.stopPropagation();
+      },
       ...props
     }
   ) })
@@ -2441,7 +2440,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 +2454,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 +2478,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 +2604,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 +2651,8 @@ function Combobox({
         testIds,
         onClear: handleClear,
         isMulti: false,
-        hasSelected: !!selectedItem
+        hasSelected: !!selectedItem,
+        hideClear
       }
     )
   ] });
@@ -2728,14 +2727,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 +2955,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 +3098,7 @@ function MultiCombobox({
             disabled,
             empty,
             error,
+            initialItems: items,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 MultiSelectTriggerBase,
@@ -3208,6 +3220,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 +3373,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 +3557,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 +3571,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 +3738,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 +7906,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 +7927,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 +7952,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 line-through decoration-2",
             range_middle: "aria-selected:bg-muted aria-selected:text-foreground",
             hidden: "invisible",
             ...classNames
@@ -7988,29 +7983,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 +8014,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 +8054,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 +8082,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 +8102,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 +8112,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 +8206,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 +8229,6 @@ function DateTimePicker({
   };
   const handleTimeChange = (newDate) => {
     setInternalDate(newDate);
-    onChange?.(newDate);
   };
   const getTimeFormat = () => {
     if (hideTime) return "";
@@ -8252,6 +8245,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 +8287,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 +8349,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 +8365,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 +8383,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 +8452,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 +8512,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 +8520,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 +8543,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 +8584,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 +10313,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 +10385,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 +10625,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 +10670,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 +14431,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 +14448,7 @@ function MultiSelect({
         disabled,
         empty,
         error,
+        initialItems,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             MultiSelectTriggerBase,
@@ -16902,9 +16957,11 @@ var Chart = ({
       setActiveTooltips
     }
   );
-  const titleClassName = (0, import_react96.useMemo)(
-    () => "text-[1.4rem] font-semibold text-foreground mb-3",
-    []
+  const getSeriesOpacity = (0, import_react96.useCallback)(
+    (key) => {
+      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
+    },
+    [highlightedSeries]
   );
   const finalValueFormatter = (0, import_react96.useMemo)(
     () => createValueFormatter(valueFormatter2, formatBR),
@@ -16914,20 +16971,15 @@ var Chart = ({
     () => 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 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_react96.useMemo)(
     () => computeYAxisTickWidth(
       chartMargin?.left,
       yAxisLabel,
-      axisLabelMargin,
+      AXIS_LABEL_MARGIN,
       yTickFormatter,
       minLeftDataValue,
       niceMaxLeft
@@ -16940,16 +16992,10 @@ 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)(
@@ -16969,7 +17015,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,9 +17035,7 @@ var Chart = ({
       enableDraggableTooltips,
       processedData,
       activeTooltips,
-      width,
-      measuredInner,
-      computedWidth,
+      effectiveChartWidth,
       maxTooltips,
       setActiveTooltips
     ]
@@ -17004,7 +17048,7 @@ var Chart = ({
         title,
         isLoading: true,
         loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
-        paddingLeft: containerPaddingLeft + finalChartLeftMargin,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
         height
       }
     );
@@ -17014,493 +17058,448 @@ var Chart = ({
       NoData_default,
       {
         title,
-        paddingLeft: containerPaddingLeft + finalChartLeftMargin,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
         height
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { ref: wrapperRef, className: "w-full overflow-hidden min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime96.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_runtime96.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_runtime96.jsx)("div", { className: "text-[1.4rem] font-semibold text-foreground mb-3", children: title })
+          }
+        ),
+        allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex items-center w-[98%] ml-[90px] gap-2", children: [
+          enableHighlights && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+            Highlights_default,
+            {
+              allKeys,
+              mapperConfig,
+              finalColors,
+              highlightedSeries,
+              toggleHighlight,
+              containerWidth: chartInnerWidth
+            }
+          ),
+          enableShowOnly && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+            ShowOnly_default,
+            {
+              showOnlyHighlighted,
+              setShowOnlyHighlighted,
+              highlightedSeriesSize: highlightedSeries.size,
+              clearHighlights
+            }
+          ),
+          enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+            PeriodsDropdown_default,
+            {
+              processedData,
+              onOpenPeriod: openTooltipForPeriod,
+              rightOffset: finalChartRightMargin,
+              activePeriods
+            }
+          ) })
+        ] }),
+        !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ (0, import_jsx_runtime96.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_runtime96.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_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",
                   {
-                    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_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))",
+                  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_runtime96.jsx)(
+                import_recharts.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
-                    }
-                  ),
-                  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"
+                      fill: "hsl(var(--muted-foreground))",
+                      fontWeight: 500,
+                      textAnchor: "middle"
                     }
-                  ),
-                  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_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))",
+                    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_runtime96.jsx)(
+                import_recharts.Tooltip,
+                {
+                  content: showTooltipTotal ? /* @__PURE__ */ (0, import_jsx_runtime96.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_runtime96.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_runtime96.jsx)(
+                import_recharts.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_runtime96.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_runtime96.jsx)(
+                    import_recharts.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_runtime96.jsx)(
+                        import_recharts.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_runtime96.jsx)(
+                        import_recharts.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_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,
+                      className: "cursor-pointer pointer-events-auto",
+                      style: { opacity: getSeriesOpacity(key) },
+                      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,
+                    {
+                      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_runtime96.jsx)(
+                        import_recharts.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_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"
+          }
+        )
+      ]
     }
-  );
+  ) });
 };
 var Chart_default = Chart;
 
@@ -18857,28 +18856,40 @@ function Leaderboard({
   order: initialOrder = "desc",
   title = "LeaderBoard",
   className,
-  isLoading = false
+  isLoading = false,
+  legend
 }) {
   const [order, setOrder] = (0, import_react100.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)(
@@ -18886,7 +18897,7 @@ function Leaderboard({
     {
       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.jsxs)("div", { className: "flex items-center justify-between py-2 px-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)(
             ButtonBase,
@@ -18905,33 +18916,36 @@ function Leaderboard({
             /* @__PURE__ */ (0, import_jsx_runtime100.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
-        )) }) })
+        ] }, 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.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime100.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_runtime100.jsx)("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider pl-1", children: legend?.[0]?.[0] ?? "Participante" }),
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: legend?.[0]?.[1] ?? "Pontua\xE7\xE3o" })
+          ] }),
+          /* @__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.jsx)(
+                  Badge,
+                  {
+                    color: getBadgeColor(item.value),
+                    size: "md",
+                    className: "font-bold",
+                    children: item.value
+                  }
+                )
+              ] })
+            },
+            idx
+          )) })
+        ] }) })
       ]
     }
   );