@mlw-packages/react-components 1.9.5 → 1.9.7

package/dist/index.js

@@ -2558,8 +2558,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: [
@@ -7886,7 +7886,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")
@@ -14017,8 +14017,7 @@ function MultiSelect({
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage_default, { error })
+    )
   ] });
 }
 
@@ -15418,7 +15417,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-9999",
       style: { minWidth: 220 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-2", children: [
@@ -15531,7 +15530,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-9999",
       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: [
@@ -16170,7 +16169,7 @@ var HorizontalLegend = ({
     const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName2(key);
     return legendUppercase ? label.toUpperCase() : label;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 sm:gap-3 md:gap-4 overflow-x-auto", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-left gap-2 sm:gap-3 md:gap-4 overflow-x-auto", children: [
     allKeys.map((key) => {
       const displayLabel = formatLegendLabel(key);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 flex-shrink-0", children: [
@@ -16209,6 +16208,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 +16515,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;
@@ -16984,6 +17109,94 @@ var useChartMinMax = ({
     };
   }, [processedData, orderBy, xAxisDataKey, categoryFormatter]);
 };
+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) {
@@ -17107,10 +17320,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,
@@ -17185,39 +17425,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 +17493,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 +17504,36 @@ 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
+  });
   if (!data && !isLoading) return null;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17347,128 +17548,65 @@ 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",
+        "w-full overflow-hidden min-w-0 rounded-lg border-border h-full",
         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",
+          /* @__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,7 +17628,7 @@ var Chart = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
             recharts.ComposedChart,
             {
               data: processedData,
@@ -17707,12 +17845,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 +17866,7 @@ var Chart = ({
                             content: pillLabelRenderer_default(
                               color,
                               "filled",
-                              lineFormatter
+                              (props) => formatLinePercentage(props.value)
                             ),
                             offset: 14
                           }
@@ -17849,109 +17981,493 @@ var Chart = ({
   );
 };
 var Chart_default = Chart;
-var defaultData = [
-  { name: "Vendas", value: 4e3 },
-  { name: "Marketing", value: 3e3 },
-  { name: "Desenvolvimento", value: 2e3 },
-  { name: "Suporte", value: 1e3 },
-  { name: "Outros", value: 800 }
-];
-var DEFAULT_COLORS3 = [
-  "#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,
+var DEFAULT_COLORS3 = ["#0d1136", "#666655", "#1a1a1a"];
+var HorizontalChart = ({
+  data,
+  series,
   className,
-  height = 400,
+  height = 500,
   width = "100%",
-  colors: colors2,
+  colors: colors2 = DEFAULT_COLORS3,
+  gridColor,
+  showGrid = true,
   showTooltip = true,
   showLegend = true,
-  showLabels = true,
-  innerRadius = 0,
-  outerRadius = 120,
-  centerX = "50%",
-  centerY = "50%"
+  title,
+  titlePosition = "left",
+  showLabels = false,
+  labelsVisibility = { bar: true },
+  xAxis,
+  xAxisLabel,
+  yAxisLabel,
+  labelMap,
+  valueFormatter,
+  categoryFormatter,
+  enableHighlights = false,
+  enableShowOnly = false,
+  enablePeriodsDropdown = false,
+  enableDraggableTooltips = false,
+  showTooltipTotal = false,
+  periodLabel = "Per\xEDodo",
+  maxTooltips = 5,
+  formatBR = false,
+  legendUppercase = false,
+  chartMargin,
+  isLoading = false,
+  customLegend,
+  orderBy
 }) => {
-  const finalColors = colors2 || DEFAULT_COLORS3;
-  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,
+  const { xAxisConfig, mapperConfig } = React33.useMemo(() => {
+    return fnSmartConfig({ xAxis, data, labelMap });
+  }, [data, xAxis, labelMap]);
+  const {
+    highlightedSeries,
+    showOnlyHighlighted,
+    toggleHighlight,
+    setShowOnlyHighlighted,
+    clearHighlights
+  } = useChartHighlights();
+  const { wrapperRef, measuredWidth } = useChartDimensions();
+  const {
+    activeTooltips,
+    toggleTooltip,
+    onTooltipPositionChange,
+    setActiveTooltips
+  } = useChartTooltips(maxTooltips);
+  React33.useEffect(() => {
+    if (highlightedSeries.size === 0 && showOnlyHighlighted) {
+      setShowOnlyHighlighted(false);
+    }
+  }, [highlightedSeries, showOnlyHighlighted, setShowOnlyHighlighted]);
+  const processedData = React33.useMemo(() => {
+    const mapped = data.map((item) => ({
+      ...item,
+      name: String(item[xAxisConfig.dataKey] || "N/A")
+    }));
+    if (orderBy && mapped.length > 0) {
+      return [...mapped].sort((a, b) => {
+        const valueA = Number(a[orderBy]) || 0;
+        const valueB = Number(b[orderBy]) || 0;
+        return valueB - valueA;
+      });
+    }
+    return mapped;
+  }, [data, xAxisConfig.dataKey, orderBy]);
+  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 activePeriods = React33.useMemo(
+    () => activeTooltips.map((t) => adaptDataForTooltip(t.data, xAxisConfig.dataKey).name),
+    [activeTooltips, xAxisConfig.dataKey]
+  );
+  const maxDataValue = React33.useMemo(() => {
+    return getMaxDataValue(processedData, allKeys);
+  }, [processedData, allKeys]);
+  const minDataValue = React33.useMemo(() => {
+    return getMinDataValue(processedData, allKeys);
+  }, [processedData, allKeys]);
+  const niceMax = React33.useMemo(() => computeNiceMax(maxDataValue), [maxDataValue]);
+  const { handleChartClick, handleBarClick } = useChartClick({
+    enableDraggableTooltips,
+    xAxisDataKey: xAxisConfig.dataKey,
+    toggleTooltip,
+    setActiveTooltips
+  });
+  const getSeriesOpacity = React33.useCallback(
+    (key) => {
+      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
+    },
+    [highlightedSeries]
+  );
+  const finalValueFormatter = React33.useMemo(
+    () => createValueFormatter(valueFormatter, formatBR),
+    [valueFormatter, formatBR]
+  );
+  const yTickFormatter = React33.useMemo(
+    () => createYTickFormatter(finalValueFormatter),
+    [finalValueFormatter]
+  );
+  const CONTAINER_PADDING_LEFT = -6;
+  const finalChartRightMargin = chartMargin?.right ?? 0;
+  const finalChartLeftMargin = chartMargin?.left ?? 0;
+  const HORIZONTAL_PADDING_CLASS = "px-6";
+  const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : 800;
+  const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
+  const openTooltipForPeriod = React33.useCallback(
+    (periodName) => {
+      fnOpenTooltipForPeriod(
+        enableDraggableTooltips,
+        processedData,
+        periodName,
+        activeTooltips,
+        setActiveTooltips,
+        maxTooltips,
+        effectiveChartWidth
+      );
+    },
+    [
+      enableDraggableTooltips,
+      processedData,
+      activeTooltips,
+      effectiveChartWidth,
+      maxTooltips,
+      setActiveTooltips
+    ]
+  );
+  if (!data && !isLoading) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      NoData_default,
       {
-        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}`
-        ))
+        title,
+        isLoading: true,
+        loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+        height
       }
-    ),
-    showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Tooltip,
+    );
+  }
+  if (Array.isArray(data) && data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      NoData_default,
       {
-        contentStyle: {
-          backgroundColor: "hsl(var(--popover))",
-          border: "1px solid hsl(var(--border))",
-          borderRadius: "6px",
-          color: "hsl(var(--popover-foreground))"
-        }
+        title,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+        height
       }
-    ),
-    showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
-  ] }) }) });
+    ) });
+  }
+  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",
+            {
+              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
+                  }
+                };
+              })
+            }
+          ) }),
+          allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn("flex items-center gap-2", HORIZONTAL_PADDING_CLASS),
+              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",
+            {
+              className: cn(
+                "w-full flex justify-end mb-2",
+                HORIZONTAL_PADDING_CLASS
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                PeriodsDropdown_default,
+                {
+                  processedData,
+                  onOpenPeriod: openTooltipForPeriod,
+                  rightOffset: finalChartRightMargin
+                }
+              )
+            }
+          ),
+          showLegend && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-3", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.jsx(
+            HorizontalLegend_default,
+            {
+              allKeys,
+              mapperConfig,
+              finalColors,
+              labelMap,
+              legendUppercase
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "overflow-y-auto overflow-x-hidden px-6",
+                "scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent mb-2"
+              ),
+              style: {
+                maxHeight: height
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.ResponsiveContainer,
+                {
+                  width: "100%",
+                  height: Math.max(height, processedData.length * 50),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    recharts.ComposedChart,
+                    {
+                      layout: "vertical",
+                      data: processedData,
+                      height: Math.max(height, processedData.length * 50),
+                      margin: {
+                        top: 10,
+                        right: finalChartRightMargin,
+                        left: 55 + finalChartLeftMargin,
+                        bottom: 10
+                      },
+                      onClick: handleChartClick,
+                      children: [
+                        showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.CartesianGrid,
+                          {
+                            strokeDasharray: "3 3",
+                            stroke: gridColor || "hsl(var(--muted-foreground))",
+                            opacity: 0.5
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.XAxis,
+                          {
+                            type: "number",
+                            stroke: "hsl(var(--muted-foreground))",
+                            fontSize: 12,
+                            tickLine: false,
+                            orientation: "top",
+                            axisLine: false,
+                            tickFormatter: yTickFormatter,
+                            domain: [Math.min(minDataValue, 0), niceMax],
+                            label: yAxisLabel ? {
+                              value: yAxisLabel,
+                              position: "insideTopRight",
+                              offset: -1,
+                              style: {
+                                fontSize: 12,
+                                fill: "hsl(var(--muted-foreground))",
+                                fontWeight: 500
+                              }
+                            } : void 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.YAxis,
+                          {
+                            type: "category",
+                            dataKey: xAxisConfig.dataKey,
+                            stroke: "hsl(var(--muted-foreground))",
+                            fontSize: 12,
+                            tickLine: true,
+                            minTickGap: 24,
+                            axisLine: true,
+                            tickFormatter: (value) => {
+                              if (categoryFormatter)
+                                return categoryFormatter(value);
+                              if (xAxisConfig.valueFormatter)
+                                return xAxisConfig.valueFormatter(value);
+                              return String(value ?? "");
+                            },
+                            label: xAxisLabel ? {
+                              value: xAxisLabel,
+                              angle: -90,
+                              position: "insideTopLeft",
+                              style: {
+                                fontSize: 12,
+                                fill: "hsl(var(--muted-foreground))",
+                                fontWeight: 500,
+                                textAnchor: "middle"
+                              }
+                            } : void 0
+                          }
+                        ),
+                        showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Tooltip,
+                          {
+                            content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
+                              TooltipWithTotal_default,
+                              {
+                                finalColors,
+                                valueFormatter: finalValueFormatter,
+                                categoryFormatter,
+                                periodLabel
+                              }
+                            ) : /* @__PURE__ */ jsxRuntime.jsx(
+                              TooltipSimple_default,
+                              {
+                                finalColors,
+                                valueFormatter: finalValueFormatter,
+                                categoryFormatter,
+                                periodLabel
+                              }
+                            ),
+                            cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                          }
+                        ),
+                        seriesOrder.map((s) => {
+                          if (showOnlyHighlighted && !highlightedSeries.has(s.key))
+                            return null;
+                          const { label, color, key } = fnBuildConfigData(
+                            s,
+                            mapperConfig,
+                            labelMap,
+                            finalColors,
+                            [],
+                            null
+                          );
+                          if (s.type === "bar") {
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              recharts.Bar,
+                              {
+                                dataKey: key,
+                                name: label,
+                                fill: color,
+                                radius: [0, 4, 4, 0],
+                                onClick: handleBarClick,
+                                className: "cursor-pointer",
+                                style: { opacity: getSeriesOpacity(key) },
+                                activeBar: /* @__PURE__ */ jsxRuntime.jsx(
+                                  recharts.Rectangle,
+                                  {
+                                    fill: color,
+                                    stroke: color,
+                                    strokeWidth: 2,
+                                    opacity: 0.8
+                                  }
+                                ),
+                                children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
+                                  recharts.LabelList,
+                                  {
+                                    dataKey: key,
+                                    content: (props) => {
+                                      const inside = renderInsideBarLabel(
+                                        color,
+                                        finalValueFormatter
+                                      );
+                                      return inside(props);
+                                    },
+                                    offset: 0
+                                  }
+                                ) : null
+                              },
+                              `bar-${key}`
+                            );
+                          }
+                          return null;
+                        })
+                      ]
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        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"
+          }
+        )
+      ]
+    }
+  );
 };
-var PieChart_default = CustomPieChart;
+var HorizontalChart_default = HorizontalChart;
 var TimeSeries = ({
   data,
   xAxis,
@@ -18260,6 +18776,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;
@@ -18364,6 +18882,7 @@ exports.FileUploader = FileUploader;
 exports.FilterButton = FilterButton;
 exports.HideButton = HideButton;
 exports.Highlights = Highlights_default;
+exports.HorizontalChart = HorizontalChart_default;
 exports.HorizontalLegend = HorizontalLegend_default;
 exports.HoverCardBase = HoverCardBase;
 exports.HoverCardContentBase = HoverCardContentBase;
@@ -18414,7 +18933,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;
@@ -18537,6 +19055,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;
@@ -18585,11 +19104,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;
@@ -18598,6 +19119,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;