@mlw-packages/react-components 1.9.6 → 1.9.8

package/dist/index.js

@@ -1891,9 +1891,9 @@ var InputBase = React33__namespace.forwardRef(
         "div",
         {
           className: cn(
-            "flex items-center rounded-md transition h-9 focus-within:ring-1 focus-within:ring-ring focus-within:border-ring bg-background overflow-hidden",
+            "flex items-center rounded-md transition h-9  bg-background overflow-hidden",
             type !== "file" && "border border-input",
-            error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring"
+            error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input"
           ),
           children: [
             leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center px-2", children: leftIcon }),
@@ -1977,87 +1977,130 @@ var CommandInputBase = React33__namespace.forwardRef(({ className, testid: dataT
   }
 ));
 CommandInputBase.displayName = cmdk.Command.Input.displayName;
-var CommandListBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-list", ...props }, ref) => {
-  const listRef = React33__namespace.useRef(null);
-  React33__namespace.useEffect(() => {
-    const element = listRef.current;
-    if (!element) return;
-    const handleWheel = (e) => {
-      const target = e.currentTarget;
-      const { scrollTop, scrollHeight, clientHeight } = target;
-      const isScrollingDown = e.deltaY > 0;
-      const isScrollingUp = e.deltaY < 0;
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-      const isAtTop = scrollTop <= 1;
-      if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
-        e.stopPropagation();
-      }
-    };
-    let touchStartY = 0;
-    const handleTouchStart = (e) => {
-      touchStartY = e.touches[0].clientY;
-      e.stopPropagation();
-    };
-    const handleTouchMove = (e) => {
-      const target = e.currentTarget;
-      const { scrollTop, scrollHeight, clientHeight } = target;
-      const touchCurrentY = e.touches[0].clientY;
-      const touchDeltaY = touchStartY - touchCurrentY;
-      const isScrollingDown = touchDeltaY > 0;
-      const isScrollingUp = touchDeltaY < 0;
-      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
-      const isAtTop = scrollTop <= 1;
-      if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+var CommandDebouncedInputBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-input", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: "flex items-center border-b px-3  border-border",
+    "cmdk-input-wrapper": "",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 text-primary" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        cmdk.Command.Input,
+        {
+          ref,
+          className: cn(
+            "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none text-primary placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          "data-testid": dataTestId,
+          ...props
+        }
+      )
+    ]
+  }
+));
+CommandDebouncedInputBase.displayName = cmdk.Command.Input.displayName;
+var CommandListBase = React33__namespace.forwardRef(
+  ({ className, testid: dataTestId = "command-list", onEndReached, ...props }, ref) => {
+    const listRef = React33__namespace.useRef(null);
+    React33__namespace.useEffect(() => {
+      const element = listRef.current;
+      if (!element) return;
+      const handleWheel = (e) => {
+        const target = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const isScrollingDown = e.deltaY > 0;
+        const isScrollingUp = e.deltaY < 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        const isAtTop = scrollTop <= 1;
+        if (isScrollingDown && isAtBottom && onEndReached) {
+          onEndReached();
+        }
+        if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+          e.stopPropagation();
+        }
+      };
+      const handleScroll = (e) => {
+        const target = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        if (isAtBottom && onEndReached) {
+          onEndReached();
+        }
+      };
+      let touchStartY = 0;
+      const handleTouchStart = (e) => {
+        touchStartY = e.touches[0].clientY;
         e.stopPropagation();
-      } else if (isScrollingDown && isAtBottom || isScrollingUp && isAtTop) {
-        e.preventDefault();
-      }
-    };
-    element.addEventListener("wheel", handleWheel, { passive: false });
-    element.addEventListener("touchstart", handleTouchStart, {
-      passive: false
-    });
-    element.addEventListener("touchmove", handleTouchMove, { passive: false });
-    return () => {
-      element.removeEventListener("wheel", handleWheel);
-      element.removeEventListener("touchmove", handleTouchMove);
-      element.removeEventListener("touchstart", handleTouchStart);
-    };
-  }, []);
-  const combinedRef = React33__namespace.useCallback(
-    (node) => {
-      listRef.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    },
-    [ref]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.List,
-    {
-      ref: combinedRef,
-      className: cn(
-        "max-h-[300px] overflow-y-auto overflow-x-hidden scroll-smooth [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/50",
-        className
-      ),
-      "data-testid": dataTestId,
-      style: {
-        overscrollBehavior: "contain",
-        WebkitOverflowScrolling: "touch",
-        touchAction: "pan-y",
-        scrollbarWidth: "thin",
-        scrollbarColor: "hsl(var(--muted)) transparent",
-        overflowY: "auto",
-        willChange: "scroll-position",
-        transform: "translateZ(0)"
+      };
+      const handleTouchMove = (e) => {
+        const target = e.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const touchCurrentY = e.touches[0].clientY;
+        const touchDeltaY = touchStartY - touchCurrentY;
+        const isScrollingDown = touchDeltaY > 0;
+        const isScrollingUp = touchDeltaY < 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+        const isAtTop = scrollTop <= 1;
+        if (isScrollingDown && isAtBottom && onEndReached) {
+          onEndReached();
+        }
+        if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+          e.stopPropagation();
+        } else if (isScrollingDown && isAtBottom || isScrollingUp && isAtTop) {
+          e.preventDefault();
+        }
+      };
+      element.addEventListener("wheel", handleWheel, { passive: false });
+      element.addEventListener("scroll", handleScroll);
+      element.addEventListener("touchstart", handleTouchStart, {
+        passive: false
+      });
+      element.addEventListener("touchmove", handleTouchMove, {
+        passive: false
+      });
+      return () => {
+        element.removeEventListener("wheel", handleWheel);
+        element.removeEventListener("scroll", handleScroll);
+        element.removeEventListener("touchmove", handleTouchMove);
+        element.removeEventListener("touchstart", handleTouchStart);
+      };
+    }, [onEndReached]);
+    const combinedRef = React33__namespace.useCallback(
+      (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
       },
-      ...props
-    }
-  );
-});
+      [ref]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.Command.List,
+      {
+        ref: combinedRef,
+        className: cn(
+          "max-h-[300px] overflow-y-auto overflow-x-hidden scroll-smooth [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/50",
+          className
+        ),
+        "data-testid": dataTestId,
+        style: {
+          overscrollBehavior: "contain",
+          WebkitOverflowScrolling: "touch",
+          touchAction: "pan-y",
+          scrollbarWidth: "thin",
+          scrollbarColor: "hsl(var(--muted)) transparent",
+          overflowY: "auto",
+          willChange: "scroll-position",
+          transform: "translateZ(0)"
+        },
+        ...props
+      }
+    );
+  }
+);
 CommandListBase.displayName = cmdk.Command.List.displayName;
 var CommandEmptyBase = React33__namespace.forwardRef(({ testid: dataTestId = "command-empty", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   cmdk.Command.Empty,
@@ -2558,8 +2601,8 @@ function MultiSelectTriggerBase({
         "aria-disabled": disabled || void 0,
         disabled,
         className: cn(
-          "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground  dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-          error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring",
+          "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground  dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground hover:text-primary",
+          error ? "border-destructive focus:ring-1 focus:ring-destructive dark:border-red-500" : "border-border focus:ring-1 focus:ring-ring",
           className
         ),
         children: [
@@ -7323,58 +7366,62 @@ function StatusIndicator({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children })
   ] });
 }
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  debounce: debounce2 = 500,
-  label,
-  labelClassname,
-  leftIcon,
-  rightIcon,
-  showLoadingIndicator = false,
-  className,
-  error,
-  ...props
-}) {
-  const [value, setValue] = React33.useState(initialValue);
-  const [isDebouncing, setIsDebouncing] = React33.useState(false);
-  React33.useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-  React33.useEffect(() => {
-    if (value !== initialValue) {
-      setIsDebouncing(true);
-    }
-    const timeout = setTimeout(() => {
-      onChange(value);
-      setIsDebouncing(false);
-    }, debounce2);
-    return () => {
-      clearTimeout(timeout);
-      setIsDebouncing(false);
+var DebouncedInput = React33.forwardRef(
+  ({
+    value: initialValue,
+    onChange,
+    debounce: debounce2 = 500,
+    label,
+    labelClassname,
+    leftIcon,
+    rightIcon,
+    showLoadingIndicator = false,
+    className,
+    error,
+    ...props
+  }, ref) => {
+    const [value, setValue] = React33.useState(initialValue);
+    const [isDebouncing, setIsDebouncing] = React33.useState(false);
+    React33.useEffect(() => {
+      setValue(initialValue);
+    }, [initialValue]);
+    React33.useEffect(() => {
+      if (value !== initialValue) {
+        setIsDebouncing(true);
+      }
+      const timeout = setTimeout(() => {
+        onChange(value);
+        setIsDebouncing(false);
+      }, debounce2);
+      return () => {
+        clearTimeout(timeout);
+        setIsDebouncing(false);
+      };
+    }, [debounce2, initialValue, onChange, value]);
+    const renderRightIcon = () => {
+      if (showLoadingIndicator && isDebouncing) {
+        return /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotchIcon, { className: "h-4 w-4 animate-spin  text-muted-foreground" });
+      }
+      return rightIcon;
     };
-  }, [debounce2, initialValue, onChange, value]);
-  const renderRightIcon = () => {
-    if (showLoadingIndicator && isDebouncing) {
-      return /* @__PURE__ */ jsxRuntime.jsx(react.CircleNotchIcon, { className: "h-4 w-4 animate-spin  text-muted-foreground" });
-    }
-    return rightIcon;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputBase,
-    {
-      ...props,
-      label,
-      labelClassname,
-      leftIcon,
-      rightIcon: renderRightIcon(),
-      className: cn("transition-all duration-200", className),
-      value,
-      onChange: (e) => setValue(e.target.value),
-      error
-    }
-  );
-}
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InputBase,
+      {
+        ...props,
+        ref,
+        label,
+        labelClassname,
+        leftIcon,
+        rightIcon: renderRightIcon(),
+        className: cn("transition-all duration-200", className),
+        value,
+        onChange: (e) => setValue(e.target.value),
+        error
+      }
+    );
+  }
+);
+DebouncedInput.displayName = "DebouncedInput";
 function useCheckboxTree(initialTree) {
   const initialCheckedNodes = React33.useMemo(() => {
     const checkedSet = /* @__PURE__ */ new Set();
@@ -7886,7 +7933,7 @@ function ScrollColumn({
               {
                 className: cn(
                   "snap-center flex items-center justify-center select-none font-bold tabular-nums transition-all duration-200",
-                  isCentered ? "text-2xl sm:text-xl text-foreground scale-110" : "text-base sm:text-sm text-muted-foreground/60"
+                  isCentered ? "text-foreground scale-110" : "text-base sm:text-sm text-muted-foreground/60"
                 ),
                 style: { height: `${itemHeight}px` },
                 children: item.toString().padStart(2, "0")
@@ -9144,19 +9191,19 @@ function getEventColorClassesAgenda(color) {
   const eventColor = color || "sky";
   switch (eventColor) {
     case "sky":
-      return "bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8";
+      return "bg-sky-100 hover:bg-sky-200 text-sky-900 border dark:bg-sky-500/30 dark:hover:bg-sky-500/40 dark:text-sky-50 dark:border-sky-400/40 shadow-sky-500/15  hover:shadow-sky-500/25 transition-all duration-200";
     case "amber":
-      return "bg-amber-200/50 hover:bg-amber-200/40 text-amber-950/80 dark:bg-amber-400/25 dark:hover:bg-amber-400/20 dark:text-amber-200 shadow-amber-700/8";
+      return "bg-amber-100 hover:bg-amber-200 text-amber-900 border dark:bg-amber-500/30 dark:hover:bg-amber-500/40 dark:text-amber-50 dark:border-amber-400/40 shadow-amber-500/15  hover:shadow-amber-500/25 transition-all duration-200";
     case "violet":
-      return "bg-violet-200/50 hover:bg-violet-200/40 text-violet-950/80 dark:bg-violet-400/25 dark:hover:bg-violet-400/20 dark:text-violet-200 shadow-violet-700/8";
+      return "bg-violet-100 hover:bg-violet-200 text-violet-900 border dark:bg-violet-500/30 dark:hover:bg-violet-500/40 dark:text-violet-50 dark:border-violet-400/40 shadow-violet-500/15  hover:shadow-violet-500/25 transition-all duration-200";
     case "rose":
-      return "bg-rose-200/50 hover:bg-rose-200/40 text-rose-950/80 dark:bg-rose-400/25 dark:hover:bg-rose-400/20 dark:text-rose-200 shadow-rose-700/8";
+      return "bg-rose-100 hover:bg-rose-200 text-rose-900 border dark:bg-rose-500/30 dark:hover:bg-rose-500/40 dark:text-rose-50 dark:border-rose-400/40  shadow-rose-500/15  hover:shadow-rose-500/25 transition-all duration-200";
     case "emerald":
-      return "bg-emerald-200/50 hover:bg-emerald-200/40 text-emerald-950/80 dark:bg-emerald-400/25 dark:hover:bg-emerald-400/20 dark:text-emerald-200 shadow-emerald-700/8";
+      return "bg-emerald-100 hover:bg-emerald-200 text-emerald-900 border dark:bg-emerald-500/30 dark:hover:bg-emerald-500/40 dark:text-emerald-50 dark:border-emerald-400/40  shadow-emerald-500/15  hover:shadow-emerald-500/25 transition-all duration-200";
     case "orange":
-      return "bg-orange-200/50 hover:bg-orange-200/40 text-orange-950/80 dark:bg-orange-400/25 dark:hover:bg-orange-400/20 dark:text-orange-200 shadow-orange-700/8";
+      return "bg-orange-100 hover:bg-orange-200 text-orange-900 border dark:bg-orange-500/30 dark:hover:bg-orange-500/40 dark:text-orange-50 dark:border-orange-400/40  shadow-orange-500/15  hover:shadow-orange-500/25 transition-all duration-200";
     default:
-      return "bg-sky-200/50 hover:bg-sky-200/40 text-sky-950/80 dark:bg-sky-400/25 dark:hover:bg-sky-400/20 dark:text-sky-200 shadow-sky-700/8";
+      return "bg-sky-100 hover:bg-sky-200 text-sky-900 border dark:bg-sky-500/30 dark:hover:bg-sky-500/40 dark:text-sky-50 dark:border-sky-400/40  shadow-sky-500/15  hover:shadow-sky-500/25 transition-all duration-200";
   }
 }
 function getBorderRadiusClassesAgenda(isFirstDay, isLastDay) {
@@ -9175,7 +9222,7 @@ function isMultiDayEventAgenda(event) {
   const eventStart = getEventStartDate(event);
   const eventEnd = getEventEndDate(event);
   if (!eventStart || !eventEnd) return !!event.allDay;
-  return event.allDay || eventStart.getDate() !== eventEnd.getDate();
+  return event.allDay || !dateFns.isSameDay(eventStart, eventEnd);
 }
 function getEventsForDayAgenda(events, day) {
   return events.filter((event) => {
@@ -9331,12 +9378,13 @@ function EventWrapper({
     return void 0;
   })();
   const isEventInPast = displayEnd ? dateFns.isPast(displayEnd) : false;
-  const colorClasses = hasValidTimeForWrapper ? getEventColorClassesAgenda(event.color) : "bg-gray-200/50 hover:bg-gray-200/40 text-gray-900/80 dark:bg-gray-700/25 dark:text-gray-200/90 shadow-none";
+  const colorClasses = hasValidTimeForWrapper ? getEventColorClassesAgenda(event.color) : "bg-gray-200/50 hover:bg-gray-200/40 text-gray-900/80 dark:bg-gray-700/25 dark:text-gray-200/90 shadow-none ";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       className: cn(
-        "flex w-full select-none overflow-hidden px-3 py-1 text-left font-medium outline-none transition-transform duration-150 ease-out backdrop-blur-sm focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:border-ring data-dragging:cursor-grabbing data-past-event:line-through data-dragging:shadow-lg sm:px-3 rounded-lg shadow-sm hover:shadow-md border",
+        "flex w-full select-none px-3 py-1 text-left font-medium outline-none transition-transform duration-150 ease-out backdrop-blur-sm focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:border-ring data-dragging:cursor-grabbing data-past-event:line-through data-dragging:shadow-lg sm:px-3 rounded-lg shadow-sm hover:shadow-md border ",
+        className?.includes("overflow-visible") ? "" : "overflow-hidden",
         colorClasses,
         getBorderRadiusClassesAgenda(isFirstDay, isLastDay),
         className
@@ -9961,7 +10009,7 @@ function Select({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ jsxRuntime.jsx(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: pagination && pagination > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ jsxRuntime.jsx(SelectContentBase, { "data-testid": testIds.content ?? "select-content", className: "border-border", children: pagination && pagination > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -10459,7 +10507,7 @@ function MonthViewAgenda({
                       "div",
                       {
                         className: tailwindMerge.twMerge(
-                          `mt-1 inline-flex w-6 h-6 sm:w-7 sm:h-7 items-center justify-center rounded-full text-xs sm:text-sm font-semibold text-muted-foreground`,
+                          `mt-1 inline-flex w-6 h-6 sm:w-7 sm:h-7 items-center justify-center border rounded-md text-xs sm:text-sm font-semibold text-muted-foreground`,
                           dateFns.isToday(day) ? "bg-blue-500 text-white" : ""
                         ),
                         children: dateFns.format(day, "d")
@@ -10492,21 +10540,19 @@ function MonthViewAgenda({
                                       isLastDay,
                                       onClick: (e) => handleEventClick(event, e),
                                       view: "month",
-                                      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 truncate text-[12px] text-foreground", children: [
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] opacity-80", children: "\u2192" }),
-                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: event.title })
-                                      ] })
+                                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 truncate text-[12px] text-foreground" })
                                     }
                                   )
                                 },
                                 `spanning-${event.id}-${day.toISOString().slice(0, 10)}`
                               );
                             }
+                            const isMultiDay = !isLastDay;
                             return /* @__PURE__ */ jsxRuntime.jsx(
                               "div",
                               {
                                 "aria-hidden": isHidden ? "true" : void 0,
-                                className: "aria-hidden:hidden",
+                                className: "aria-hidden:hidden relative",
                                 children: /* @__PURE__ */ jsxRuntime.jsx(
                                   EventItemAgenda,
                                   {
@@ -10515,9 +10561,16 @@ function MonthViewAgenda({
                                     isLastDay,
                                     onClick: (e) => handleEventClick(event, e),
                                     view: "month",
-                                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 sm:gap-2 truncate text-[12px] text-foreground", children: [
+                                    className: isMultiDay ? "overflow-visible" : "",
+                                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 sm:gap-2 truncate text-[12px] text-foreground relative z-10", children: [
                                       !event.allDay && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-normal opacity-80 text-[10px] sm:text-[11px] bg-white/10 px-1 py-0.5 rounded-full", children: dateFns.format(eventStart, "HH:mm") }),
-                                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-xs sm:text-sm", children: event.title })
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        "span",
+                                        {
+                                          className: `font-medium text-xs sm:text-sm ${isMultiDay ? "whitespace-nowrap" : "truncate"}`,
+                                          children: event.title
+                                        }
+                                      )
                                     ] })
                                   }
                                 )
@@ -13283,13 +13336,13 @@ function getEventColorClasses(color) {
 }
 function getBorderRadiusClasses(isFirstDay, isLastDay) {
   if (isFirstDay && isLastDay) {
-    return "rounded";
+    return "rounded-lg";
   }
   if (isFirstDay) {
-    return "rounded-l rounded-r-none";
+    return "rounded-l-lg rounded-r-none";
   }
   if (isLastDay) {
-    return "rounded-r rounded-l-none";
+    return "rounded-r-lg rounded-l-none";
   }
   return "rounded-none";
 }
@@ -14017,8 +14070,7 @@ function MultiSelect({
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage_default, { error })
+    )
   ] });
 }
 
@@ -15124,7 +15176,7 @@ var DraggableTooltipComponent = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
-            className: "fixed pointer-events-none z-30",
+            className: "fixed pointer-events-none z-[9998]",
             variants: guideVariants,
             initial: "hidden",
             animate: "visible",
@@ -15146,7 +15198,7 @@ var DraggableTooltipComponent = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
-            className: "fixed pointer-events-none z-31",
+            className: "fixed pointer-events-none z-[9999]",
             variants: guideDotVariants,
             initial: "hidden",
             animate: "visible",
@@ -15186,7 +15238,7 @@ var DraggableTooltipComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       framerMotion.motion.div,
       {
-        className: "fixed bg-card border border-border rounded-lg shadow-lg z-50 min-w-80 select-none",
+        className: "fixed bg-card border border-border rounded-lg shadow-lg z-[10000] min-w-80 select-none",
         variants: tooltipVariants,
         initial: "hidden",
         animate: "visible",
@@ -15418,7 +15470,7 @@ var RechartTooltipWithTotal = ({
     {
       role: "dialog",
       "aria-label": `Tooltip ${label ?? ""}`,
-      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-xs",
+      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-xs z-[10000]",
       style: { minWidth: 220 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-2", children: [
@@ -15531,7 +15583,7 @@ var TooltipSimple = ({
     {
       role: "dialog",
       "aria-label": `Tooltip ${label ?? ""}`,
-      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-[280px]",
+      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-[280px] z-[10000]",
       style: { minWidth: 220 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
@@ -15720,7 +15772,7 @@ var SystemTooltip = ({
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
     {
-      className: "fixed bg-card/95 backdrop-blur-md border border-border/50 rounded-xl shadow-2xl z-50 w-80 overflow-hidden",
+      className: "fixed bg-card/95 backdrop-blur-md border border-border/50 rounded-xl shadow-2xl z-[10000] w-80 overflow-hidden",
       variants: tooltipVariants2,
       initial: "hidden",
       animate: "visible",
@@ -15795,7 +15847,9 @@ var SystemTooltip = ({
                   "div",
                   {
                     className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all cursor-pointer",
-                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    onClick: () => setExpandedId(
+                      expandedId === conn.id ? null : conn.id
+                    ),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15857,7 +15911,9 @@ var SystemTooltip = ({
                   "div",
                   {
                     className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all cursor-pointer",
-                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    onClick: () => setExpandedId(
+                      expandedId === conn.id ? null : conn.id
+                    ),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -15918,6 +15974,35 @@ var SystemTooltip = ({
   ) });
 };
 var SystemTooltip_default = SystemTooltip;
+
+// src/components/ui/charts/components/tooltips/systemTooltipUtils.ts
+function processNeo4jData(integrations, targetSystemName) {
+  const connections = [];
+  integrations.forEach((integration) => {
+    const origemNome = integration.origem.properties.nome;
+    const destinoNome = integration.destino.properties.nome;
+    if (origemNome === targetSystemName) {
+      connections.push({
+        id: integration.r.elementId,
+        name: destinoNome,
+        type: "saida",
+        integration: integration.r.properties
+      });
+    }
+    if (destinoNome === targetSystemName) {
+      connections.push({
+        id: integration.r.elementId,
+        name: origemNome,
+        type: "entrada",
+        integration: integration.r.properties
+      });
+    }
+  });
+  return {
+    name: targetSystemName,
+    connections
+  };
+}
 var Brush = ({
   data,
   legend,
@@ -16209,6 +16294,119 @@ var HorizontalLegend = ({
   ] }) });
 };
 var HorizontalLegend_default = HorizontalLegend;
+function ChartControls({
+  allKeys,
+  mapperConfig,
+  finalColors,
+  highlightedSeries,
+  toggleHighlight,
+  showOnlyHighlighted,
+  setShowOnlyHighlighted,
+  highlightedSeriesSize,
+  clearHighlights,
+  enableHighlights,
+  enableShowOnly,
+  enablePeriodsDropdown,
+  enableDraggableTooltips,
+  processedData,
+  onOpenPeriod,
+  rightOffset,
+  activePeriods,
+  containerClass,
+  containerWidth
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, children: [
+    enableHighlights && /* @__PURE__ */ jsxRuntime.jsx(
+      Highlights_default,
+      {
+        allKeys,
+        mapperConfig,
+        finalColors,
+        highlightedSeries,
+        toggleHighlight,
+        containerWidth
+      }
+    ),
+    enableShowOnly && /* @__PURE__ */ jsxRuntime.jsx(
+      ShowOnly_default,
+      {
+        showOnlyHighlighted,
+        setShowOnlyHighlighted,
+        highlightedSeriesSize,
+        clearHighlights
+      }
+    ),
+    enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      PeriodsDropdown_default,
+      {
+        processedData: processedData ?? [],
+        onOpenPeriod: onOpenPeriod ?? (() => {
+        }),
+        rightOffset,
+        activePeriods
+      }
+    ) })
+  ] });
+}
+function ChartHeader({
+  title,
+  titlePosition = "left",
+  HORIZONTAL_PADDING_CLASS = "px-24",
+  customLegend,
+  data,
+  allKeys,
+  processedData,
+  finalColors,
+  mapperConfig,
+  finalValueFormatter,
+  formatBR
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "w-full flex items-center mt-3 mb-2",
+          HORIZONTAL_PADDING_CLASS,
+          titlePosition === "center" && "justify-center",
+          titlePosition === "right" && "justify-end",
+          titlePosition === "left" && "justify-start"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
+      }
+    ),
+    customLegend && !!data.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.jsx(
+      ChartTotalLegend_default,
+      {
+        items: allKeys.map((key) => {
+          const values = processedData.map(
+            (d) => Number(d[key] || 0)
+          );
+          const total = values.reduce((a, b) => a + b, 0);
+          const first = values[0] || 0;
+          const last = values[values.length - 1] || 0;
+          const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
+          const formattedTotal = finalValueFormatter ? finalValueFormatter({
+            value: total,
+            formattedValue: String(total)
+          }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
+            total
+          );
+          return {
+            label: mapperConfig[key]?.label || key,
+            value: formattedTotal,
+            color: finalColors[key],
+            trend: {
+              value: Math.abs(trendValue),
+              positive: trendValue >= 0,
+              neutral: trendValue === 0
+            }
+          };
+        })
+      }
+    ) })
+  ] });
+}
 var formatCompactNumber = (value) => {
   const isNegative = value < 0;
   const absValue = Math.abs(value);
@@ -16403,6 +16601,19 @@ var renderInsideBarLabel = (color, valueFormatter) => {
     );
   };
 };
+
+// src/utils/calcDivision.ts
+var calcDivision = (dividend, divisor) => {
+  return dividend / divisor;
+};
+
+// src/components/ui/charts/utils/formatters.ts
+function formatLinePercentage(value) {
+  const numValue = typeof value === "number" ? value : typeof value === "string" ? parseFloat(value) : 0;
+  const percentage = calcDivision(numValue, 100);
+  const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
+  return `${formattedPercentage}%`;
+}
 var ChartBar = ({ x, y, w, h, i, loading }) => {
   const baseY = y - h;
   const d = i * 0.08;
@@ -16496,7 +16707,7 @@ var NoData = ({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
-            className: "w-full h-[var(--svg-h)] opacity-40",
+            className: "w-full h-full opacity-40",
             viewBox: `0 0 900 ${h}`,
             preserveAspectRatio: "none",
             children: [
@@ -16984,45 +17195,133 @@ var useChartMinMax = ({
     };
   }, [processedData, orderBy, xAxisDataKey, categoryFormatter]);
 };
-var filtersOrder = (mapperConfig, series) => {
-  const seriesOrder = [];
-  if (series) {
-    if (series.bar)
-      series.bar.forEach((k) => seriesOrder.push({ type: "bar", key: k }));
-    if (series.line)
-      series.line.forEach((k) => seriesOrder.push({ type: "line", key: k }));
-    if (series.area)
-      series.area.forEach((k) => seriesOrder.push({ type: "area", key: k }));
-  } else {
-    Object.keys(mapperConfig).forEach(
-      (k) => seriesOrder.push({ type: "bar", key: k })
-    );
-  }
-  return seriesOrder;
-};
-var fnOpenTooltipForPeriod = (enableDraggableTooltips, processedData, periodName, activeTooltips, setActiveTooltips, maxTooltips, effectiveChartWidth) => {
-  if (!enableDraggableTooltips) return;
-  const row = processedData.find((r) => String(r.name) === periodName);
-  if (!row) return;
-  const tooltipId = String(periodName);
-  const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
-  if (existingIndex !== -1) {
-    setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
-    return;
-  }
-  if (activeTooltips.length >= maxTooltips) {
-    sonner.toast.warning(
-      `Limite de ${maxTooltips} janelas de informa\xE7\xE3o atingido. A mais antiga ser\xE1 substitu\xEDda.`
-    );
-  }
-  const offsetIndex = activeTooltips.length;
-  const availableWidth = effectiveChartWidth;
-  const gap = 28;
-  const leftGap = 28;
-  const newTooltip = {
-    id: tooltipId,
-    data: row,
-    position: {
+function useProcessedData({
+  data,
+  xAxisKey,
+  timeSeriesConfig,
+  startIndex,
+  endIndex
+}) {
+  return React33.useMemo(() => {
+    const mapped = data.map((item) => ({
+      ...item,
+      name: String(item[xAxisKey] || "N/A")
+    }));
+    if (timeSeriesConfig) {
+      return mapped.slice(startIndex, endIndex + 1);
+    }
+    return mapped;
+  }, [data, xAxisKey, timeSeriesConfig, startIndex, endIndex]);
+}
+function useBiaxial(biaxial, yAxisLabel) {
+  return React33.useMemo(() => {
+    if (!biaxial) return null;
+    if (typeof biaxial === "string") return { key: [biaxial] };
+    if (Array.isArray(biaxial)) return { key: biaxial };
+    const normalized = biaxial;
+    const leftLabelMissing = !yAxisLabel || String(yAxisLabel).trim() === "";
+    const rightLabelMissing = !normalized.label || String(normalized.label).trim() === "";
+    if (leftLabelMissing || rightLabelMissing) {
+      throw new Error(
+        "When using `biaxial`, you must provide both `yAxisLabel` (left axis) and `biaxial.label` (right axis)."
+      );
+    }
+    return normalized;
+  }, [biaxial, yAxisLabel]);
+}
+function useChartLayout({
+  chartMargin,
+  yAxisLabel,
+  AXIS_LABEL_MARGIN,
+  yTickFormatter,
+  minLeftDataValue,
+  niceMaxLeft,
+  rightKeysLength,
+  measuredWidth,
+  width,
+  computedWidth
+}) {
+  const finalChartRightMargin = chartMargin?.right ?? (rightKeysLength > 0 ? AXIS_LABEL_MARGIN : 30);
+  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
+  const yAxisTickWidth = React33.useMemo(() => {
+    const yAxisLabelStr = yAxisLabel === null || yAxisLabel === void 0 ? void 0 : String(yAxisLabel);
+    return computeYAxisTickWidth(
+      chartMargin?.left,
+      yAxisLabelStr,
+      AXIS_LABEL_MARGIN,
+      yTickFormatter,
+      minLeftDataValue,
+      niceMaxLeft
+    );
+  }, [
+    chartMargin?.left,
+    yAxisLabel,
+    AXIS_LABEL_MARGIN,
+    yTickFormatter,
+    minLeftDataValue,
+    niceMaxLeft
+  ]);
+  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));
+  return {
+    finalChartRightMargin,
+    finalChartLeftMargin,
+    yAxisTickWidth,
+    effectiveChartWidth,
+    chartInnerWidth,
+    leftYAxisLabelDx,
+    rightYAxisLabelDx
+  };
+}
+function useSeriesOpacity(highlightedSeries) {
+  return React33.useCallback(
+    (key) => {
+      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
+    },
+    [highlightedSeries]
+  );
+}
+var filtersOrder = (mapperConfig, series) => {
+  const seriesOrder = [];
+  if (series) {
+    if (series.bar)
+      series.bar.forEach((k) => seriesOrder.push({ type: "bar", key: k }));
+    if (series.line)
+      series.line.forEach((k) => seriesOrder.push({ type: "line", key: k }));
+    if (series.area)
+      series.area.forEach((k) => seriesOrder.push({ type: "area", key: k }));
+  } else {
+    Object.keys(mapperConfig).forEach(
+      (k) => seriesOrder.push({ type: "bar", key: k })
+    );
+  }
+  return seriesOrder;
+};
+var fnOpenTooltipForPeriod = (enableDraggableTooltips, processedData, periodName, activeTooltips, setActiveTooltips, maxTooltips, effectiveChartWidth) => {
+  if (!enableDraggableTooltips) return;
+  const row = processedData.find((r) => String(r.name) === periodName);
+  if (!row) return;
+  const tooltipId = String(periodName);
+  const existingIndex = activeTooltips.findIndex((t) => t.id === tooltipId);
+  if (existingIndex !== -1) {
+    setActiveTooltips((prev) => prev.filter((t) => t.id !== tooltipId));
+    return;
+  }
+  if (activeTooltips.length >= maxTooltips) {
+    sonner.toast.warning(
+      `Limite de ${maxTooltips} janelas de informa\xE7\xE3o atingido. A mais antiga ser\xE1 substitu\xEDda.`
+    );
+  }
+  const offsetIndex = activeTooltips.length;
+  const availableWidth = effectiveChartWidth;
+  const gap = 28;
+  const leftGap = 28;
+  const newTooltip = {
+    id: tooltipId,
+    data: row,
+    position: {
       top: 48 + offsetIndex * gap,
       left: Math.max(120, availableWidth - 280 - offsetIndex * leftGap)
     }
@@ -17107,10 +17406,37 @@ var fnContentLabelList = (p) => {
   return needsOutside ? null : true;
 };
 
-// src/utils/calcDivision.ts
-var calcDivision = (dividend, divisor) => {
-  return dividend / divisor;
-};
+// src/components/ui/charts/hooks/useOpenTooltipForPeriod.ts
+function useOpenTooltipForPeriod({
+  enableDraggableTooltips,
+  processedData,
+  activeTooltips,
+  setActiveTooltips,
+  maxTooltips,
+  effectiveChartWidth
+}) {
+  return React33.useCallback(
+    (periodName) => {
+      fnOpenTooltipForPeriod(
+        enableDraggableTooltips,
+        processedData,
+        periodName,
+        activeTooltips,
+        setActiveTooltips,
+        maxTooltips,
+        effectiveChartWidth
+      );
+    },
+    [
+      enableDraggableTooltips,
+      processedData,
+      activeTooltips,
+      effectiveChartWidth,
+      maxTooltips,
+      setActiveTooltips
+    ]
+  );
+}
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
 var Chart = ({
   data,
@@ -17151,6 +17477,16 @@ var Chart = ({
   // horizontal removido
   // orderBy removido
 }) => {
+  const usesFullHeight = typeof height === "string" && (height === "100%" || height === "100vh") || typeof className === "string" && /\bh-full\b/.test(className || "");
+  const responsiveHeight = usesFullHeight ? "100%" : height;
+  const wrapperClass = cn(
+    "w-full min-w-0 rounded-lg border-border",
+    className,
+    "overflow-hidden"
+  );
+  const wrapperStyle = usesFullHeight ? void 0 : {
+    height: typeof responsiveHeight === "number" ? `${responsiveHeight}px` : responsiveHeight
+  };
   const { xAxisConfig, mapperConfig } = React33.useMemo(() => {
     return fnSmartConfig({ xAxis, data, labelMap });
   }, [data, xAxis, labelMap]);
@@ -17185,39 +17521,20 @@ var Chart = ({
     defaultEndIndex: timeSeriesConfig?.end,
     onRangeChange: timeSeriesConfig?.onRangeChange
   });
-  const processedData = React33.useMemo(() => {
-    const mapped = data.map((item) => ({
-      ...item,
-      name: String(item[xAxisConfig.dataKey] || "N/A")
-    }));
-    let result = mapped;
-    if (timeSeriesConfig) {
-      result = mapped.slice(startIndex, endIndex + 1);
-    }
-    return result;
-  }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
+  const processedData = useProcessedData({
+    data,
+    xAxisKey: xAxisConfig.dataKey,
+    timeSeriesConfig,
+    startIndex,
+    endIndex
+  });
   const seriesOrder = filtersOrder(mapperConfig, series);
   const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
   const finalColors = React33.useMemo(
     () => generateColorMap(allKeys, colors2, mapperConfig),
     [allKeys, colors2, mapperConfig]
   );
-  const biaxialConfigNormalized = React33.useMemo(() => {
-    if (!biaxial) return null;
-    if (typeof biaxial === "string") return { key: [biaxial] };
-    if (Array.isArray(biaxial)) return { key: biaxial };
-    return biaxial;
-  }, [biaxial]);
-  React33.useMemo(() => {
-    if (!biaxialConfigNormalized) return;
-    const leftLabelMissing = !yAxisLabel || String(yAxisLabel).trim() === "";
-    const rightLabelMissing = !biaxialConfigNormalized.label || String(biaxialConfigNormalized.label).trim() === "";
-    if (leftLabelMissing || rightLabelMissing) {
-      throw new Error(
-        "When using `biaxial`, you must provide both `yAxisLabel` (left axis) and `biaxial.label` (right axis)."
-      );
-    }
-  }, [biaxialConfigNormalized, yAxisLabel]);
+  const biaxialConfigNormalized = useBiaxial(biaxial, yAxisLabel);
   const rightKeys = React33.useMemo(
     () => biaxialConfigNormalized?.key ?? [],
     [biaxialConfigNormalized]
@@ -17272,12 +17589,7 @@ var Chart = ({
       setActiveTooltips
     }
   );
-  const getSeriesOpacity = React33.useCallback(
-    (key) => {
-      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
-    },
-    [highlightedSeries]
-  );
+  const getSeriesOpacity = useSeriesOpacity(highlightedSeries);
   const finalValueFormatter = React33.useMemo(
     () => createValueFormatter(valueFormatter, formatBR),
     [valueFormatter, formatBR]
@@ -17288,51 +17600,40 @@ var Chart = ({
   );
   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 = React33.useMemo(() => {
-    return computeYAxisTickWidth(
-      chartMargin?.left,
-      yAxisLabel,
-      AXIS_LABEL_MARGIN,
-      yTickFormatter,
-      minLeftDataValue,
-      niceMaxLeft
-    );
-  }, [
-    chartMargin?.left,
+  const HORIZONTAL_PADDING_CLASS = "px-24";
+  const teste = "pl-24 pr-4";
+  const {
+    finalChartRightMargin,
+    finalChartLeftMargin,
+    yAxisTickWidth,
+    effectiveChartWidth,
+    chartInnerWidth,
+    leftYAxisLabelDx,
+    rightYAxisLabelDx
+  } = useChartLayout({
+    chartMargin,
     yAxisLabel,
+    AXIS_LABEL_MARGIN,
     yTickFormatter,
     minLeftDataValue,
-    niceMaxLeft
-  ]);
-  const HORIZONTAL_PADDING_CLASS = "px-24";
-  const teste = "pl-24 pr-4";
-  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 = React33.useCallback(
-    (periodName) => {
-      fnOpenTooltipForPeriod(
-        enableDraggableTooltips,
-        processedData,
-        periodName,
-        activeTooltips,
-        setActiveTooltips,
-        maxTooltips,
-        effectiveChartWidth
-      );
-    },
-    [
-      enableDraggableTooltips,
-      processedData,
-      activeTooltips,
-      effectiveChartWidth,
-      maxTooltips,
-      setActiveTooltips
-    ]
-  );
+    niceMaxLeft,
+    rightKeysLength: rightKeys.length,
+    measuredWidth,
+    width,
+    computedWidth
+  });
+  const openTooltipForPeriod = useOpenTooltipForPeriod({
+    enableDraggableTooltips,
+    processedData,
+    activeTooltips,
+    setActiveTooltips,
+    maxTooltips,
+    effectiveChartWidth
+  });
+  const legendSpace = showLegend ? 44 : 0;
+  const xAxisLabelSpace = xAxisLabel ? 18 : 0;
+  const brushSpace = timeSeriesConfig?.height ? 200 : 0;
+  const bottomMargin = 10 + legendSpace + xAxisLabelSpace + brushSpace;
   if (!data && !isLoading) return null;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17347,128 +17648,62 @@ var Chart = ({
     );
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        NoData_default,
-        {
-          title,
-          paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-          height
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: effectiveChartWidth, height, children: [
-        xAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: effectiveChartWidth - 40,
-            y: height - 10,
-            fontSize: 12,
-            fill: "hsl(var(--muted-foreground))",
-            fontWeight: 500,
-            textAnchor: "end",
-            children: xAxisLabel
-          }
-        ),
-        yAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: 20,
-            y: 40,
-            fontSize: 12,
-            fill: "hsl(var(--muted-foreground))",
-            fontWeight: 500,
-            textAnchor: "start",
-            transform: `rotate(-90 20 40)`,
-            children: yAxisLabel
-          }
-        )
-      ] }) })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      NoData_default,
+      {
+        title,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+        height
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: cn(
-        "w-full overflow-hidden min-w-0 rounded-lg border-border",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: wrapperClass, style: wrapperStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1",
+        style: usesFullHeight ? { height: "100%" } : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChartHeader,
             {
-              className: cn(
-                "w-full flex items-center mt-3 mb-2",
-                HORIZONTAL_PADDING_CLASS,
-                titlePosition === "center" && "justify-center",
-                titlePosition === "right" && "justify-end",
-                titlePosition === "left" && "justify-start"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
+              title,
+              titlePosition,
+              HORIZONTAL_PADDING_CLASS,
+              customLegend,
+              data,
+              allKeys,
+              processedData,
+              finalColors,
+              mapperConfig,
+              finalValueFormatter,
+              formatBR
             }
           ),
-          customLegend && !!data.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.jsx(
-            ChartTotalLegend_default,
+          allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsx(
+            ChartControls,
             {
-              items: allKeys.map((key) => {
-                const values = processedData.map(
-                  (d) => Number(d[key] || 0)
-                );
-                const total = values.reduce((a, b) => a + b, 0);
-                const first = values[0] || 0;
-                const last = values[values.length - 1] || 0;
-                const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
-                const formattedTotal = finalValueFormatter ? finalValueFormatter({
-                  value: total,
-                  formattedValue: String(total)
-                }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
-                  total
-                );
-                return {
-                  label: mapperConfig[key]?.label || key,
-                  value: formattedTotal,
-                  color: finalColors[key],
-                  trend: {
-                    value: Math.abs(trendValue),
-                    positive: trendValue >= 0,
-                    neutral: trendValue === 0
-                  }
-                };
-              })
+              allKeys,
+              mapperConfig,
+              finalColors,
+              highlightedSeries,
+              toggleHighlight,
+              showOnlyHighlighted,
+              setShowOnlyHighlighted,
+              highlightedSeriesSize: highlightedSeries.size,
+              clearHighlights,
+              enableHighlights,
+              enableShowOnly,
+              enablePeriodsDropdown,
+              enableDraggableTooltips,
+              processedData,
+              onOpenPeriod: openTooltipForPeriod,
+              rightOffset: finalChartRightMargin,
+              activePeriods,
+              containerClass: cn("flex items-center gap-2", teste),
+              containerWidth: chartInnerWidth
             }
-          ) }),
-          allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", teste), children: [
-            enableHighlights && /* @__PURE__ */ jsxRuntime.jsx(
-              Highlights_default,
-              {
-                allKeys,
-                mapperConfig,
-                finalColors,
-                highlightedSeries,
-                toggleHighlight,
-                containerWidth: chartInnerWidth
-              }
-            ),
-            enableShowOnly && /* @__PURE__ */ jsxRuntime.jsx(
-              ShowOnly_default,
-              {
-                showOnlyHighlighted,
-                setShowOnlyHighlighted,
-                highlightedSeriesSize: highlightedSeries.size,
-                clearHighlights
-              }
-            ),
-            enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              PeriodsDropdown_default,
-              {
-                processedData,
-                onOpenPeriod: openTooltipForPeriod,
-                rightOffset: finalChartRightMargin,
-                activePeriods
-              }
-            ) })
-          ] }),
+          ),
           !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -17490,16 +17725,15 @@ var Chart = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: responsiveHeight, children: /* @__PURE__ */ jsxRuntime.jsxs(
             recharts.ComposedChart,
             {
               data: processedData,
-              height,
               margin: {
                 top: 10,
                 right: finalChartRightMargin,
                 left: finalChartLeftMargin,
-                bottom: 10
+                bottom: bottomMargin
               },
               onClick: handleChartClick,
               children: [
@@ -17707,12 +17941,6 @@ var Chart = ({
                     );
                   }
                   if (s.type === "line") {
-                    const lineFormatter = (props) => {
-                      const numValue = typeof props.value === "number" ? props.value : typeof props.value === "string" ? parseFloat(props.value) : 0;
-                      const percentage = calcDivision(numValue, 100);
-                      const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
-                      return `${formattedPercentage}%`;
-                    };
                     return /* @__PURE__ */ jsxRuntime.jsx(
                       recharts.Line,
                       {
@@ -17734,7 +17962,7 @@ var Chart = ({
                             content: pillLabelRenderer_default(
                               color,
                               "filled",
-                              lineFormatter
+                              (props) => formatLinePercentage(props.value)
                             ),
                             offset: 14
                           }
@@ -17786,67 +18014,67 @@ var Chart = ({
               ]
             }
           ) })
-        ] }),
-        enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          CloseAllButton_default,
-          {
-            count: activeTooltips.length,
-            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
-            position: "top-center",
-            variant: "floating"
-          }
-        ),
-        timeSeriesConfig && /* @__PURE__ */ jsxRuntime.jsx(
-          Brush_default,
-          {
-            legend: timeSeriesLegend,
-            data,
-            startIndex,
-            endIndex,
-            onMouseDown: handleMouseDown,
-            brushRef,
-            xAxisKey: xAxisConfig.dataKey,
-            seriesOrder,
-            finalColors,
-            brushHeight: timeSeriesConfig.height,
-            brushColor: timeSeriesConfig.brushColor,
-            miniChartOpacity: timeSeriesConfig.miniChartOpacity,
-            showGrid,
-            gridColor,
-            margin: {
-              left: finalChartLeftMargin,
-              right: finalChartRightMargin
-            }
-          }
-        )
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      CloseAllButton_default,
+      {
+        count: activeTooltips.length,
+        onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+        position: "top-center",
+        variant: "floating"
+      }
+    ),
+    timeSeriesConfig && /* @__PURE__ */ jsxRuntime.jsx(
+      Brush_default,
+      {
+        legend: timeSeriesLegend,
+        data,
+        startIndex,
+        endIndex,
+        onMouseDown: handleMouseDown,
+        brushRef,
+        xAxisKey: xAxisConfig.dataKey,
+        seriesOrder,
+        finalColors,
+        brushHeight: timeSeriesConfig.height,
+        brushColor: timeSeriesConfig.brushColor,
+        miniChartOpacity: timeSeriesConfig.miniChartOpacity,
+        showGrid,
+        gridColor,
+        margin: {
+          left: finalChartLeftMargin,
+          right: finalChartRightMargin
+        }
+      }
+    )
+  ] });
 };
 var Chart_default = Chart;
 var DEFAULT_COLORS3 = ["#0d1136", "#666655", "#1a1a1a"];
@@ -18149,7 +18377,7 @@ var HorizontalChart = ({
                       margin: {
                         top: 10,
                         right: finalChartRightMargin,
-                        left: finalChartLeftMargin,
+                        left: 55 + finalChartLeftMargin,
                         bottom: 10
                       },
                       onClick: handleChartClick,
@@ -18192,9 +18420,9 @@ var HorizontalChart = ({
                             dataKey: xAxisConfig.dataKey,
                             stroke: "hsl(var(--muted-foreground))",
                             fontSize: 12,
-                            tickLine: false,
-                            axisLine: false,
-                            width: 125,
+                            tickLine: true,
+                            minTickGap: 24,
+                            axisLine: true,
                             tickFormatter: (value) => {
                               if (categoryFormatter)
                                 return categoryFormatter(value);
@@ -18336,109 +18564,6 @@ var HorizontalChart = ({
   );
 };
 var HorizontalChart_default = HorizontalChart;
-var defaultData = [
-  { name: "Vendas", value: 4e3 },
-  { name: "Marketing", value: 3e3 },
-  { name: "Desenvolvimento", value: 2e3 },
-  { name: "Suporte", value: 1e3 },
-  { name: "Outros", value: 800 }
-];
-var DEFAULT_COLORS4 = [
-  "#55af7d",
-  // verde do projeto
-  "#8e68ff",
-  // roxo do projeto
-  "#2273e1",
-  // azul do projeto
-  "#f59e0b",
-  // amarelo complementar
-  "#ef4444",
-  // vermelho complementar
-  "#8b5cf6",
-  // roxo claro
-  "#06b6d4",
-  // ciano
-  "#84cc16"
-  // verde lima
-];
-var RADIAN = Math.PI / 180;
-var renderCustomizedLabel = ({
-  cx = 0,
-  cy = 0,
-  midAngle = 0,
-  innerRadius = 0,
-  outerRadius = 0,
-  percent = 0
-}) => {
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "text",
-    {
-      x,
-      y,
-      fill: "white",
-      textAnchor: x > cx ? "start" : "end",
-      dominantBaseline: "central",
-      fontSize: 12,
-      fontWeight: "600",
-      children: `${(percent * 100).toFixed(0)}%`
-    }
-  );
-};
-var CustomPieChart = ({
-  data = defaultData,
-  className,
-  height = 400,
-  width = "100%",
-  colors: colors2,
-  showTooltip = true,
-  showLegend = true,
-  showLabels = true,
-  innerRadius = 0,
-  outerRadius = 120,
-  centerX = "50%",
-  centerY = "50%"
-}) => {
-  const finalColors = colors2 || DEFAULT_COLORS4;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Pie,
-      {
-        data,
-        cx: centerX,
-        cy: centerY,
-        labelLine: false,
-        label: showLabels ? renderCustomizedLabel : false,
-        outerRadius,
-        innerRadius,
-        fill: "#8884d8",
-        dataKey: "value",
-        children: data.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Cell,
-          {
-            fill: finalColors[index % finalColors.length]
-          },
-          `cell-${entry.name}-${index}`
-        ))
-      }
-    ),
-    showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Tooltip,
-      {
-        contentStyle: {
-          backgroundColor: "hsl(var(--popover))",
-          border: "1px solid hsl(var(--border))",
-          borderRadius: "6px",
-          color: "hsl(var(--popover-foreground))"
-        }
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
-  ] }) }) });
-};
-var PieChart_default = CustomPieChart;
 var TimeSeries = ({
   data,
   xAxis,
@@ -18747,6 +18872,8 @@ exports.CarouselNextBase = CarouselNextBase;
 exports.CarouselPreviousBase = CarouselPreviousBase;
 exports.ChangeButton = ChangeButton;
 exports.Chart = Chart_default;
+exports.ChartControls = ChartControls;
+exports.ChartHeader = ChartHeader;
 exports.ChartTotalLegend = ChartTotalLegend_default;
 exports.CheckButton = CheckButton;
 exports.CheckboxBase = CheckboxBase;
@@ -18902,7 +19029,6 @@ exports.NoData = NoData_default;
 exports.NotificationButton = NotificationButton;
 exports.NumericInput = NumericInput;
 exports.PeriodsDropdown = PeriodsDropdown_default;
-exports.PieChart = PieChart_default;
 exports.PopoverAnchorBase = PopoverAnchorBase;
 exports.PopoverBase = PopoverBase;
 exports.PopoverContentBase = PopoverContentBase;
@@ -19025,6 +19151,7 @@ exports.detectDataFields = detectDataFields;
 exports.detectXAxis = detectXAxis;
 exports.display12HourValue = display12HourValue;
 exports.formatFieldName = formatFieldName;
+exports.formatLinePercentage = formatLinePercentage;
 exports.generateAdditionalColors = generateAdditionalColors;
 exports.generateColorMap = generateColorMap;
 exports.getAgendaEventsForDay = getAgendaEventsForDay;
@@ -19061,6 +19188,7 @@ exports.isValidHour = isValidHour;
 exports.isValidMinuteOrSecond = isValidMinuteOrSecond;
 exports.niceCeil = niceCeil;
 exports.normalizeAttendDate = normalizeAttendDate;
+exports.processNeo4jData = processNeo4jData;
 exports.renderInsideBarLabel = renderInsideBarLabel;
 exports.renderPillLabel = pillLabelRenderer_default;
 exports.resolveChartMargins = resolveChartMargins;
@@ -19073,11 +19201,13 @@ exports.setSeconds = setSeconds;
 exports.sortEvents = sortEvents;
 exports.sortEventsAgenda = sortEventsAgenda;
 exports.toast = toast;
+exports.useBiaxial = useBiaxial;
 exports.useCalendarDnd = useCalendarDnd;
 exports.useCalendarDndAgenda = useCalendarDndAgenda;
 exports.useChartClick = useChartClick;
 exports.useChartDimensions = useChartDimensions;
 exports.useChartHighlights = useChartHighlights;
+exports.useChartLayout = useChartLayout;
 exports.useChartMinMax = useChartMinMax;
 exports.useChartTooltips = useChartTooltips;
 exports.useCurrentTimeIndicator = useCurrentTimeIndicator;
@@ -19086,6 +19216,9 @@ exports.useDrag = useDrag;
 exports.useEventVisibility = useEventVisibility;
 exports.useEventVisibilityAgenda = useEventVisibilityAgenda;
 exports.useIsMobile = useIsMobile;
+exports.useOpenTooltipForPeriod = useOpenTooltipForPeriod;
+exports.useProcessedData = useProcessedData;
+exports.useSeriesOpacity = useSeriesOpacity;
 exports.useTheme = useTheme;
 exports.useTimeSeriesRange = useTimeSeriesRange;
 exports.visualForItem = visualForItem;