@mlw-packages/react-components 1.9.11 → 1.9.13

package/dist/index.js

@@ -43,6 +43,7 @@ var core = require('@dnd-kit/core');
 var utilities = require('@dnd-kit/utilities');
 var reactRadioGroup = require('@radix-ui/react-radio-group');
 var recharts = require('recharts');
+var useEmblaCarousel = require('embla-carousel-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -84,6 +85,7 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var ptBR3__default = /*#__PURE__*/_interopDefault(ptBR3);
+var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -3755,7 +3757,7 @@ var FileUploader = React32__namespace.forwardRef(
     showPreview = true,
     dropzoneText = "Arraste arquivos aqui ou clique para selecionar",
     dropzoneSubtext,
-    animate: animate2 = true,
+    animate = true,
     ...props
   }, ref) => {
     const [isDragging, setIsDragging] = React32__namespace.useState(false);
@@ -3963,7 +3965,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.motion.p,
             {
               className: "mb-2 text-base font-semibold text-foreground",
-              initial: animate2 ? { opacity: 0, y: -10 } : false,
+              initial: animate ? { opacity: 0, y: -10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.1 },
               children: dropzoneText
@@ -3973,7 +3975,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.motion.p,
             {
               className: "text-sm text-muted-foreground",
-              initial: animate2 ? { opacity: 0, y: -10 } : false,
+              initial: animate ? { opacity: 0, y: -10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.2 },
               children: defaultSubtext
@@ -4017,7 +4019,7 @@ var FileUploader = React32__namespace.forwardRef(
             framerMotion.motion.div,
             {
               className: "mt-6 w-full",
-              initial: animate2 ? { opacity: 0, y: 10 } : false,
+              initial: animate ? { opacity: 0, y: 10 } : false,
               animate: { opacity: 1, y: 0 },
               transition: { delay: 0.3 },
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4032,7 +4034,7 @@ var FileUploader = React32__namespace.forwardRef(
                   framerMotion.motion.div,
                   {
                     layout: true,
-                    initial: animate2 ? { opacity: 0, x: -20 } : false,
+                    initial: animate ? { opacity: 0, x: -20 } : false,
                     animate: { opacity: 1, x: 0 },
                     exit: {
                       opacity: 0,
@@ -4040,7 +4042,7 @@ var FileUploader = React32__namespace.forwardRef(
                       transition: { duration: 0.2 }
                     },
                     transition: {
-                      delay: animate2 ? index * 0.05 : 0,
+                      delay: animate ? index * 0.05 : 0,
                       layout: { duration: 0.2 }
                     },
                     className: cn(
@@ -5738,7 +5740,7 @@ var sheetVariants = classVarianceAuthority.cva(
         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+        right: "inset-y-0 right-0 h-full w-3/4  data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
       }
     },
     defaultVariants: {
@@ -14662,7 +14664,8 @@ var DraggableTooltipComponent = ({
   toggleHighlight,
   showOnlyHighlighted,
   valueFormatter,
-  categoryFormatter
+  categoryFormatter,
+  seriesTypeMap
 }) => {
   const visibleKeys = React32.useMemo(
     () => showOnlyHighlighted && highlightedSeries && highlightedSeries.size > 0 ? dataKeys.filter((k) => highlightedSeries.has(k)) : dataKeys,
@@ -14673,7 +14676,9 @@ var DraggableTooltipComponent = ({
       const numeric = visibleKeys2.map((k) => data2[k]).filter((v) => typeof v === "number");
       return numeric.reduce((s, v) => s + (v || 0), 0);
     }, [data2, visibleKeys2]);
-    const defaultTotalFormatted = total.toLocaleString("pt-BR");
+    const defaultTotalFormatted = total.toLocaleString("pt-BR", {
+      maximumFractionDigits: 0
+    });
     const displayTotal = localformatter ? localformatter({
       value: total,
       formattedValue: defaultTotalFormatted,
@@ -15128,7 +15133,13 @@ var DraggableTooltipComponent = ({
                   0
                 );
                 const val = typeof value === "number" ? value : Number(value) || 0;
-                const defaultFormatted = val.toLocaleString("pt-BR");
+                const isLine = seriesTypeMap?.[key] === "line";
+                const defaultFormatted = isLine ? `${(val / 100).toLocaleString("pt-BR", {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2
+                })}%` : val.toLocaleString("pt-BR", {
+                  maximumFractionDigits: 0
+                });
                 const displayValue = valueFormatter ? valueFormatter({
                   value,
                   formattedValue: defaultFormatted,
@@ -15183,7 +15194,7 @@ var DraggableTooltipComponent = ({
                               children: displayValue
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: absDenominator > 0 ? `${pct.toFixed(1)}%` : "-" })
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: absDenominator > 0 ? `${pct.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%` : "-" })
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -15247,7 +15258,8 @@ var RechartTooltipWithTotal = ({
   valueFormatter,
   categoryFormatter,
   yAxisMap,
-  isBiaxial = false
+  isBiaxial = false,
+  seriesTypeMap
 }) => {
   if (!active || !payload || payload.length === 0) return null;
   const displayLabel = categoryFormatter ? categoryFormatter(String(label ?? "")) : label;
@@ -15256,18 +15268,9 @@ var RechartTooltipWithTotal = ({
   );
   const total = numeric.reduce((sum, p) => sum + (p.value || 0), 0);
   const isTotalNegative = total < 0;
-  const defaultTotalFormatted = (() => {
-    try {
-      if (Math.abs(total) < 1e3) {
-        return new Intl.NumberFormat("pt-BR", {
-          minimumFractionDigits: 2,
-          maximumFractionDigits: 2
-        }).format(total);
-      }
-    } catch {
-    }
-    return total.toLocaleString("pt-BR");
-  })();
+  const defaultTotalFormatted = total.toLocaleString("pt-BR", {
+    maximumFractionDigits: 0
+  });
   const displayTotal = valueFormatter ? valueFormatter({
     value: total,
     formattedValue: defaultTotalFormatted,
@@ -15319,18 +15322,13 @@ var RechartTooltipWithTotal = ({
           const pct = absDenominator > 0 ? Math.abs(value) / absDenominator * 100 : 0;
           const baseColor = finalColors[entry.dataKey] || entry.color || "#999";
           const isNeg = value < 0;
-          const defaultFormatted = (() => {
-            try {
-              if (Math.abs(value) < 1e3) {
-                return new Intl.NumberFormat("pt-BR", {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2
-                }).format(value);
-              }
-            } catch {
-            }
-            return value.toLocaleString("pt-BR");
-          })();
+          const isLine = seriesTypeMap?.[entry.dataKey] === "line";
+          const defaultFormatted = isLine ? `${(value / 100).toLocaleString("pt-BR", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+          })}%` : value.toLocaleString("pt-BR", {
+            maximumFractionDigits: 0
+          });
           const displayValue = valueFormatter ? valueFormatter({
             value: entry.value,
             formattedValue: defaultFormatted,
@@ -15369,8 +15367,14 @@ var RechartTooltipWithTotal = ({
                   const axis = normalize(yAxisMap[entry.dataKey]);
                   const denom = axisDenominators[axis] || 0;
                   const p = denom > 0 ? Math.abs(value) / denom * 100 : 0;
-                  return denom > 0 ? `${p.toFixed(1)}%` : "-";
-                })() : absDenominator > 0 ? `${pct.toFixed(1)}%` : "-" })
+                  return denom > 0 ? `${p.toLocaleString("pt-BR", {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2
+                  })}%` : "-";
+                })() : absDenominator > 0 ? `${pct.toLocaleString("pt-BR", {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2
+                })}%` : "-" })
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -15399,7 +15403,8 @@ var TooltipSimple = ({
   valueFormatter,
   categoryFormatter,
   yAxisMap,
-  isBiaxial = false
+  isBiaxial = false,
+  seriesTypeMap
 }) => {
   if (!active || !payload || payload.length === 0) return null;
   const displayLabel = categoryFormatter ? categoryFormatter(String(label ?? "")) : label;
@@ -15432,18 +15437,13 @@ var TooltipSimple = ({
             );
             pct = axisSum > 0 ? Math.abs(value) / axisSum * 100 : 0;
           }
-          const defaultFormatted = (() => {
-            try {
-              if (Math.abs(value) < 1e3) {
-                return new Intl.NumberFormat("pt-BR", {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2
-                }).format(value);
-              }
-            } catch {
-            }
-            return value.toLocaleString("pt-BR");
-          })();
+          const isLine = seriesTypeMap?.[entry.dataKey] === "line";
+          const defaultFormatted = isLine ? `${(value / 100).toLocaleString("pt-BR", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+          })}%` : value.toLocaleString("pt-BR", {
+            maximumFractionDigits: 0
+          });
           const displayValue = valueFormatter ? valueFormatter({
             value: entry.value,
             formattedValue: defaultFormatted,
@@ -15474,7 +15474,10 @@ var TooltipSimple = ({
                       children: displayValue
                     }
                   ),
-                  isBiaxial ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: pct > 0 ? `${pct.toFixed(1)}%` : "-" }) : null
+                  isBiaxial ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: pct > 0 ? `${pct.toLocaleString("pt-BR", {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2
+                  })}%` : "-" }) : null
                 ] }) })
               ]
             },
@@ -16519,16 +16522,16 @@ var NoData = ({
     "div",
     {
       className: cn(
-        "rounded-xl bg-card relative overflow-hidden w-full border border-border/50 shadow-sm h-full",
+        "rounded-xl bg-card relative overflow-hidden w-full shadow-sm h-full",
         className
       ),
       style: {
         "--pl": `${paddingLeft}px`,
-        "--svg-h": typeof height === "number" ? `${height}px` : String(height)
+        ...typeof height === "number" ? { height } : {}
       },
       role: "img",
       "aria-label": message,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-[var(--svg-h)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-[900px] relative", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex items-center justify-center pl-[var(--pl)] p-6 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-[900px] relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "svg",
           {
@@ -17263,11 +17266,30 @@ function useOpenTooltipForPeriod({
   );
 }
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
+function ChartWrapper({
+  className,
+  children,
+  wrapperRef
+}) {
+  const cls = className ?? "";
+  const hasExplicitSizing = /\bh-/.test(cls) || /\bflex-1\b/.test(cls);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        "w-full overflow-hidden min-w-0 rounded-lg border-border",
+        !hasExplicitSizing && "h-[550px]",
+        className
+      ),
+      children
+    }
+  );
+}
 var Chart = ({
   data,
   series,
   className,
-  height = 350,
   width = "100%",
   colors: colors2 = DEFAULT_COLORS2,
   gridColor,
@@ -17299,19 +17321,7 @@ var Chart = ({
   timeSeries,
   timeSeriesLegend,
   customLegend
-  // 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 } = React32.useMemo(() => {
     return fnSmartConfig({ xAxis, data, labelMap });
   }, [data, xAxis, labelMap]);
@@ -17455,417 +17465,453 @@ var Chart = ({
     maxTooltips,
     effectiveChartWidth
   });
-  const legendSpace = showLegend ? 44 : 0;
-  const xAxisLabelSpace = xAxisLabel ? 18 : 0;
-  const brushSpace = timeSeriesConfig?.height ? 200 : 0;
-  const bottomMargin = 10 + legendSpace + xAxisLabelSpace + brushSpace;
+  const seriesTypeMap = React32.useMemo(() => {
+    const map = {};
+    seriesOrder.forEach((s) => {
+      map[s.key] = s.type;
+    });
+    return map;
+  }, [seriesOrder]);
   if (!data && !isLoading) return null;
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsxRuntime.jsx(
       NoData_default,
       {
         title,
         isLoading: true,
         loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
         paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-        height
+        height: "100%"
       }
-    );
+    ) });
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsxRuntime.jsx(
       NoData_default,
       {
         title,
         paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-        height
+        height: "100%"
       }
-    );
+    ) });
   }
-  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,
-            {
-              title,
-              titlePosition,
-              HORIZONTAL_PADDING_CLASS,
-              customLegend,
-              data,
-              allKeys,
-              processedData,
-              finalColors,
-              mapperConfig,
-              finalValueFormatter,
-              formatBR
-            }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { className, wrapperRef, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex flex-col rounded-lg bg-card py-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ChartHeader,
+        {
+          title,
+          titlePosition,
+          HORIZONTAL_PADDING_CLASS,
+          customLegend,
+          data,
+          allKeys,
+          processedData,
+          finalColors,
+          mapperConfig,
+          finalValueFormatter,
+          formatBR
+        }
+      ),
+      allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsx(
+        ChartControls,
+        {
+          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)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "w-full flex justify-end mb-2",
+            HORIZONTAL_PADDING_CLASS
           ),
-          allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsx(
-            ChartControls,
+          style: {
+            paddingRight: `${finalChartRightMargin}px`,
+            maxWidth: `${chartInnerWidth}px`
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            PeriodsDropdown_default,
             {
-              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
+              rightOffset: finalChartRightMargin
             }
-          ),
-          !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "w-full flex justify-end mb-2",
-                HORIZONTAL_PADDING_CLASS
-              ),
-              style: {
-                paddingRight: `${finalChartRightMargin}px`,
-                maxWidth: `${chartInnerWidth}px`
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                PeriodsDropdown_default,
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 relative overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.ComposedChart,
+        {
+          data: processedData,
+          margin: {
+            top: 10,
+            right: finalChartRightMargin,
+            left: finalChartLeftMargin,
+            bottom: 10
+          },
+          onClick: handleChartClick,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
+              const key = s.key;
+              const color = finalColors[key];
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "linearGradient",
                 {
-                  processedData,
-                  onOpenPeriod: openTooltipForPeriod,
-                  rightOffset: finalChartRightMargin
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: responsiveHeight, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            recharts.ComposedChart,
-            {
-              data: processedData,
-              margin: {
-                top: 10,
-                right: finalChartRightMargin,
-                left: finalChartLeftMargin,
-                bottom: bottomMargin
-              },
-              onClick: handleChartClick,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
-                  const key = s.key;
-                  const color = finalColors[key];
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    "linearGradient",
-                    {
-                      id: `gradient-${key}`,
-                      x1: "0",
-                      y1: "0",
-                      x2: "0",
-                      y2: "0.8",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
-                        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
-                      ]
-                    },
-                    `gradient-${key}`
-                  );
-                }) }),
-                showGrid && /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.CartesianGrid,
-                  {
-                    strokeDasharray: "3 3",
-                    stroke: gridColor || "hsl(var(--muted-foreground))",
-                    opacity: 0.5
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.XAxis,
-                  {
-                    dataKey: xAxisConfig.dataKey,
-                    stroke: "hsl(var(--muted-foreground))",
-                    fontSize: 12,
-                    tickLine: false,
-                    axisLine: false,
-                    tickFormatter: (value) => {
-                      if (categoryFormatter)
-                        return categoryFormatter(value);
-                      if (xAxisConfig.valueFormatter)
-                        return xAxisConfig.valueFormatter(value);
-                      return String(value ?? "");
-                    },
-                    label: xAxisLabel ? {
-                      value: xAxisLabel,
-                      position: "insideBottomRight",
-                      offset: -5,
-                      style: {
-                        fontSize: 12,
-                        fill: "hsl(var(--muted-foreground))",
-                        fontWeight: 500
+                  id: `gradient-${key}`,
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "0.8",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: color,
+                        stopOpacity: 0.8
                       }
-                    } : void 0
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "stop",
+                      {
+                        offset: "90%",
+                        stopColor: color,
+                        stopOpacity: 0.1
+                      }
+                    )
+                  ]
+                },
+                `gradient-${key}`
+              );
+            }) }),
+            showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.CartesianGrid,
+              {
+                strokeDasharray: "3 3",
+                stroke: gridColor || "hsl(var(--muted-foreground))",
+                opacity: 0.5
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: xAxisConfig.dataKey,
+                stroke: "hsl(var(--muted-foreground))",
+                fontSize: 12,
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: (value) => {
+                  if (categoryFormatter)
+                    return categoryFormatter(value);
+                  if (xAxisConfig.valueFormatter)
+                    return xAxisConfig.valueFormatter(
+                      value
+                    );
+                  return String(value ?? "");
+                },
+                label: xAxisLabel ? {
+                  value: xAxisLabel,
+                  position: "insideBottomRight",
+                  offset: -5,
+                  style: {
+                    fontSize: 12,
+                    fill: "hsl(var(--muted-foreground))",
+                    fontWeight: 500
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.YAxis,
-                  {
-                    yAxisId: "left",
-                    width: yAxisTickWidth,
-                    stroke: "hsl(var(--muted-foreground))",
+                } : void 0
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "left",
+                width: yAxisTickWidth,
+                stroke: "hsl(var(--muted-foreground))",
+                fontSize: 12,
+                tickLine: false,
+                axisLine: false,
+                tickFormatter: yTickFormatter,
+                domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
+                tickCount: 6,
+                label: yAxisLabel ? {
+                  value: yAxisLabel,
+                  angle: -90,
+                  position: "left",
+                  dx: leftYAxisLabelDx,
+                  style: {
                     fontSize: 12,
-                    tickLine: false,
-                    axisLine: false,
-                    tickFormatter: yTickFormatter,
-                    domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
-                    tickCount: 6,
-                    label: yAxisLabel ? {
-                      value: yAxisLabel,
-                      angle: -90,
-                      position: "left",
-                      dx: leftYAxisLabelDx,
-                      style: {
-                        fontSize: 12,
-                        fill: "hsl(var(--muted-foreground))",
-                        fontWeight: 500,
-                        textAnchor: "middle"
-                      }
-                    } : void 0
+                    fill: "hsl(var(--muted-foreground))",
+                    fontWeight: 500,
+                    textAnchor: "middle"
                   }
-                ),
-                rightKeys.length > 0 && (() => {
-                  const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
-                    biaxialConfigNormalized,
-                    yTickFormatter,
-                    finalColors
-                  );
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.YAxis,
-                    {
-                      yAxisId: "right",
-                      width: finalChartRightMargin,
-                      orientation: "right",
-                      stroke: "hsl(var(--muted-foreground))",
+                } : void 0
+              }
+            ),
+            rightKeys.length > 0 && (() => {
+              const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
+                biaxialConfigNormalized,
+                yTickFormatter,
+                finalColors
+              );
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.YAxis,
+                {
+                  yAxisId: "right",
+                  width: finalChartRightMargin,
+                  orientation: "right",
+                  stroke: "hsl(var(--muted-foreground))",
+                  fontSize: 12,
+                  tickLine: false,
+                  axisLine: false,
+                  tick: { fill: rightAxisColor },
+                  tickFormatter: rightTickFormatter,
+                  domain: [Math.min(minRightDataValue, 0), niceMaxRight],
+                  tickCount: 6,
+                  label: biaxialConfigNormalized?.label ? {
+                    value: biaxialConfigNormalized.label,
+                    angle: -90,
+                    position: "right",
+                    dx: rightYAxisLabelDx,
+                    style: {
                       fontSize: 12,
-                      tickLine: false,
-                      axisLine: false,
-                      tick: { fill: rightAxisColor },
-                      tickFormatter: rightTickFormatter,
-                      domain: [Math.min(minRightDataValue, 0), niceMaxRight],
-                      tickCount: 6,
-                      label: biaxialConfigNormalized?.label ? {
-                        value: biaxialConfigNormalized.label,
-                        angle: -90,
-                        position: "right",
-                        dx: rightYAxisLabelDx,
-                        style: {
-                          fontSize: 12,
-                          fill: "hsl(var(--muted-foreground))",
-                          fontWeight: 500,
-                          textAnchor: "middle"
-                        }
-                      } : void 0
+                      fill: "hsl(var(--muted-foreground))",
+                      fontWeight: 500,
+                      textAnchor: "middle"
                     }
-                  );
-                })(),
-                showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.Tooltip,
+                  } : void 0
+                }
+              );
+            })(),
+            showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
+                  TooltipWithTotal_default,
                   {
-                    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 }
+                    finalColors,
+                    valueFormatter: finalValueFormatter,
+                    categoryFormatter,
+                    periodLabel,
+                    seriesTypeMap
                   }
-                ),
-                showLegend && /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.Legend,
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  TooltipSimple_default,
                   {
-                    iconSize: 12,
-                    formatter: (value) => {
-                      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
-                        value,
-                        mapperConfig,
-                        labelMap,
-                        legendUppercase
-                      ) });
-                    }
+                    finalColors,
+                    valueFormatter: finalValueFormatter,
+                    categoryFormatter,
+                    periodLabel,
+                    seriesTypeMap
                   }
                 ),
-                seriesOrder.map((s) => {
-                  if (showOnlyHighlighted && !highlightedSeries.has(s.key))
-                    return null;
-                  const { label, color, key } = fnBuildConfigData(
-                    s,
-                    mapperConfig,
-                    labelMap,
-                    finalColors,
-                    rightKeys,
-                    biaxialConfigNormalized
-                  );
-                  if (s.type === "bar") {
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Bar,
+                cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+              }
+            ),
+            showLegend && /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                iconSize: 12,
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
+                  value,
+                  mapperConfig,
+                  labelMap,
+                  legendUppercase
+                ) })
+              }
+            ),
+            seriesOrder.map((s) => {
+              if (showOnlyHighlighted && !highlightedSeries.has(s.key))
+                return null;
+              const { label, color, key } = fnBuildConfigData(
+                s,
+                mapperConfig,
+                labelMap,
+                finalColors,
+                rightKeys,
+                biaxialConfigNormalized
+              );
+              if (s.type === "bar") {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Bar,
+                  {
+                    dataKey: key,
+                    yAxisId: rightKeys.includes(key) ? "right" : "left",
+                    name: label,
+                    fill: color,
+                    radius: [4, 4, 0, 0],
+                    onClick: handleBarClick,
+                    className: "cursor-pointer",
+                    style: { opacity: getSeriesOpacity(key) },
+                    activeBar: /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.Rectangle,
                       {
-                        dataKey: key,
-                        yAxisId: rightKeys.includes(key) ? "right" : "left",
-                        name: label,
                         fill: color,
-                        radius: [4, 4, 0, 0],
-                        onClick: handleBarClick,
-                        className: "cursor-pointer",
-                        style: { opacity: getSeriesOpacity(key) },
-                        activeBar: /* @__PURE__ */ 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) => {
-                              if (!fnContentLabelList(props)) return null;
-                              const inside = renderInsideBarLabel(
-                                color,
-                                finalValueFormatter
-                              );
-                              return inside(props);
-                            },
-                            offset: 0
-                          }
-                        ) : null
-                      },
-                      `bar-${key}`
-                    );
-                  }
-                  if (s.type === "line") {
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Line,
-                      {
-                        dataKey: key,
-                        yAxisId: rightKeys.includes(key) ? "right" : "left",
-                        name: label,
                         stroke: color,
                         strokeWidth: 2,
-                        dot: { r: 3 },
-                        activeDot: { r: 6 },
-                        onClick: handleSeriesClick,
-                        className: "cursor-pointer pointer-events-auto",
-                        style: { opacity: getSeriesOpacity(key) },
-                        children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.LabelList,
-                          {
-                            dataKey: key,
-                            position: "top",
-                            content: pillLabelRenderer_default(
-                              color,
-                              "filled",
-                              (props) => formatLinePercentage(props.value)
-                            ),
-                            offset: 14
-                          }
-                        ) : null
-                      },
-                      `line-${key}`
-                    );
-                  }
-                  if (s.type === "area") {
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Area,
+                        opacity: 0.8
+                      }
+                    ),
+                    children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.LabelList,
                       {
-                        type: "monotone",
                         dataKey: key,
-                        yAxisId: rightKeys.includes(key) ? "right" : "left",
-                        name: label,
-                        stroke: color,
-                        fill: `url(#gradient-${key})`,
-                        fillOpacity: 1,
-                        strokeWidth: 2,
-                        onClick: handleSeriesClick,
-                        className: "cursor-pointer pointer-events-auto",
-                        style: { opacity: getSeriesOpacity(key) },
-                        activeDot: {
-                          r: 6,
-                          fill: color,
-                          stroke: "hsl(var(--background))",
-                          strokeWidth: 2
+                        content: (props) => {
+                          if (!fnContentLabelList(props)) return null;
+                          const inside = renderInsideBarLabel(
+                            color,
+                            finalValueFormatter
+                          );
+                          return inside(props);
                         },
-                        children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.LabelList,
-                          {
-                            dataKey: key,
-                            position: "top",
-                            content: pillLabelRenderer_default(
-                              color,
-                              "soft",
-                              finalValueFormatter
-                            ),
-                            offset: 12
-                          }
-                        ) : null
-                      },
-                      `area-${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
+                        offset: 0
+                      }
+                    ) : null
+                  },
+                  `bar-${key}`
+                );
+              }
+              if (s.type === "line") {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Line,
+                  {
+                    dataKey: key,
+                    yAxisId: rightKeys.includes(key) ? "right" : "left",
+                    name: label,
+                    stroke: color,
+                    strokeWidth: 2,
+                    dot: { r: 3 },
+                    activeDot: { r: 6 },
+                    onClick: handleSeriesClick,
+                    className: "cursor-pointer pointer-events-auto",
+                    style: { opacity: getSeriesOpacity(key) },
+                    children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.LabelList,
+                      {
+                        dataKey: key,
+                        position: "top",
+                        content: pillLabelRenderer_default(
+                          color,
+                          "filled",
+                          (props) => formatLinePercentage(props.value)
+                        ),
+                        offset: 14
+                      }
+                    ) : null
+                  },
+                  `line-${key}`
+                );
+              }
+              if (s.type === "area") {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Area,
+                  {
+                    type: "monotone",
+                    dataKey: key,
+                    yAxisId: rightKeys.includes(key) ? "right" : "left",
+                    name: label,
+                    stroke: color,
+                    fill: `url(#gradient-${key})`,
+                    fillOpacity: 1,
+                    strokeWidth: 2,
+                    onClick: handleSeriesClick,
+                    className: "cursor-pointer pointer-events-auto",
+                    style: { opacity: getSeriesOpacity(key) },
+                    activeDot: {
+                      r: 6,
+                      fill: color,
+                      stroke: "hsl(var(--background))",
+                      strokeWidth: 2
+                    },
+                    children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.LabelList,
+                      {
+                        dataKey: key,
+                        position: "top",
+                        content: pillLabelRenderer_default(
+                          color,
+                          "soft",
+                          finalValueFormatter
+                        ),
+                        offset: 12
+                      }
+                    ) : null
+                  },
+                  `area-${key}`
+                );
+              }
+              return null;
+            })
+          ]
+        }
+      ) }) }),
+      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",
+        seriesTypeMap
+      },
+      tooltip.id
     )),
     enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
       CloseAllButton_default,
@@ -17875,29 +17921,6 @@ var Chart = ({
         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
-        }
-      }
     )
   ] });
 };
@@ -18038,6 +18061,13 @@ var HorizontalChart = ({
       setActiveTooltips
     ]
   );
+  const seriesTypeMap = React32.useMemo(() => {
+    const map = {};
+    seriesOrder.forEach((s) => {
+      map[s.key] = s.type;
+    });
+    return map;
+  }, [seriesOrder]);
   if (!data && !isLoading) return null;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -18277,7 +18307,8 @@ var HorizontalChart = ({
                                 finalColors,
                                 valueFormatter: finalValueFormatter,
                                 categoryFormatter,
-                                periodLabel
+                                periodLabel,
+                                seriesTypeMap
                               }
                             ) : /* @__PURE__ */ jsxRuntime.jsx(
                               TooltipSimple_default,
@@ -18285,7 +18316,8 @@ var HorizontalChart = ({
                                 finalColors,
                                 valueFormatter: finalValueFormatter,
                                 categoryFormatter,
-                                periodLabel
+                                periodLabel,
+                                seriesTypeMap
                               }
                             ),
                             cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
@@ -18371,7 +18403,8 @@ var HorizontalChart = ({
             globalTooltipCount: activeTooltips.length,
             onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
             closeAllButtonPosition: "top-center",
-            closeAllButtonVariant: "floating"
+            closeAllButtonVariant: "floating",
+            seriesTypeMap
           },
           tooltip.id
         )),
@@ -18392,9 +18425,7 @@ var HorizontalChart_default = HorizontalChart;
 var TimeSeries = ({
   data,
   xAxis,
-  chartHeight = 350,
-  height,
-  brushHeight,
+  brushHeight = 60,
   className,
   start,
   end,
@@ -18406,21 +18437,21 @@ var TimeSeries = ({
   miniChartOpacity = 0.2,
   ...rest
 }) => {
-  const brushHeightValue = brushHeight ?? height ?? 60;
   const startIndex = defaultStartIndex ?? start ?? 0;
   const endIndex = defaultEndIndex ?? end;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full flex flex-col", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+  const hasExplicitHeight = /\bh-/.test(className ?? "");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full flex flex-col overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     Chart_default,
     {
       ...rest,
       data,
       xAxis,
-      height: chartHeight + brushHeightValue + 40,
+      className: hasExplicitHeight ? "flex-1 min-h-0" : void 0,
       timeSeries: {
         start: startIndex,
         end: endIndex,
         onRangeChange,
-        height: brushHeightValue,
+        height: brushHeight,
         brushColor,
         brushStroke,
         miniChartOpacity
@@ -18647,6 +18678,145 @@ function Leaderboard({
     }
   );
 }
+var ZoomImage = React32__namespace.forwardRef(
+  ({
+    className,
+    src,
+    alt,
+    maxZoom = 2,
+    transitionDuration = 0.3,
+    borderRadius = 12,
+    imageClassName,
+    ...props
+  }, ref) => {
+    const mouseX = framerMotion.useMotionValue(50);
+    const mouseY = framerMotion.useMotionValue(50);
+    const zoomLevel = framerMotion.useMotionValue(1);
+    const springConfig = { damping: 20, stiffness: 150, mass: 0.5 };
+    const smoothMouseX = framerMotion.useSpring(mouseX, springConfig);
+    const smoothMouseY = framerMotion.useSpring(mouseY, springConfig);
+    const smoothZoomLevel = framerMotion.useSpring(zoomLevel, springConfig);
+    const transformOrigin = framerMotion.useTransform(
+      [smoothMouseX, smoothMouseY],
+      ([latestX, latestY]) => `${latestX}% ${latestY}%`
+    );
+    const touchStartDist = React32__namespace.useRef(0);
+    const touchStartZoom = React32__namespace.useRef(1);
+    const isPinching = React32__namespace.useRef(false);
+    const handleMouseMove = (e) => {
+      if (isPinching.current) return;
+      const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
+      const x = (e.clientX - left) / width * 100;
+      const y = (e.clientY - top) / height * 100;
+      mouseX.set(x);
+      mouseY.set(y);
+    };
+    const innerRef = React32__namespace.useRef(null);
+    React32__namespace.useImperativeHandle(ref, () => innerRef.current);
+    React32__namespace.useEffect(() => {
+      const element = innerRef.current;
+      if (!element) return;
+      const onWheel = (e) => {
+        e.preventDefault();
+        const delta = -e.deltaY * 5e-3;
+        const newZoom = Math.min(Math.max(1, zoomLevel.get() + delta), maxZoom);
+        zoomLevel.set(newZoom);
+      };
+      element.addEventListener("wheel", onWheel, { passive: false });
+      return () => element.removeEventListener("wheel", onWheel);
+    }, [maxZoom, zoomLevel]);
+    const handleMouseLeave = () => {
+      if (!isPinching.current) {
+        mouseX.set(50);
+        mouseY.set(50);
+        zoomLevel.set(1);
+      }
+    };
+    const getDistance = (touches) => {
+      const dx = touches[0].clientX - touches[1].clientX;
+      const dy = touches[0].clientY - touches[1].clientY;
+      return Math.sqrt(dx * dx + dy * dy);
+    };
+    const getCenter = (touches, rect) => {
+      const x = (touches[0].clientX + touches[1].clientX) / 2;
+      const y = (touches[0].clientY + touches[1].clientY) / 2;
+      return {
+        x: (x - rect.left) / rect.width * 100,
+        y: (y - rect.top) / rect.height * 100
+      };
+    };
+    const handleTouchStart = (e) => {
+      if (e.touches.length === 2) {
+        isPinching.current = true;
+        touchStartDist.current = getDistance(e.touches);
+        touchStartZoom.current = zoomLevel.get();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const center = getCenter(e.touches, rect);
+        mouseX.set(center.x);
+        mouseY.set(center.y);
+      }
+    };
+    const handleTouchMove = (e) => {
+      if (e.touches.length === 2 && isPinching.current) {
+        e.preventDefault();
+        const dist = getDistance(e.touches);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const scaleChange = dist / touchStartDist.current;
+        const newZoom = Math.min(
+          Math.max(1, touchStartZoom.current * scaleChange),
+          maxZoom
+        );
+        zoomLevel.set(newZoom);
+        const center = getCenter(e.touches, rect);
+        mouseX.set(center.x);
+        mouseY.set(center.y);
+      }
+    };
+    const handleTouchEnd = (e) => {
+      if (e.touches.length < 2) {
+        if (isPinching.current) {
+          isPinching.current = false;
+        }
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        ref: innerRef,
+        className: cn(
+          "relative w-full h-full overflow-hidden touch-none",
+          className
+        ),
+        style: { borderRadius: `${borderRadius}px` },
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.img,
+          {
+            src,
+            alt,
+            className: cn("w-full h-full object-cover", imageClassName),
+            style: {
+              borderRadius: `${borderRadius}px`,
+              transformOrigin,
+              scale: smoothZoomLevel
+            },
+            transition: {
+              type: "spring",
+              duration: transitionDuration,
+              bounce: 0
+            }
+          }
+        )
+      }
+    );
+  }
+);
+ZoomImage.displayName = "ZoomImage";
 var Lens = ({
   children,
   initialZoom = 1.5,
@@ -18670,11 +18840,17 @@ var Lens = ({
     const y = e.clientY - rect.top;
     setMousePosition({ x, y });
   };
-  const handleWheel = (e) => {
-    if (!isActivated) return;
-    const delta = -e.deltaY * 5e-3;
-    setZoomFactor((prev) => Math.min(Math.max(1.1, prev + delta), maxZoom));
-  };
+  React32__namespace.default.useEffect(() => {
+    const element = containerRef.current;
+    if (!element || !isActivated) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      const delta = -e.deltaY * 5e-3;
+      setZoomFactor((prev) => Math.min(Math.max(1.1, prev + delta), maxZoom));
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => element.removeEventListener("wheel", onWheel);
+  }, [isActivated, maxZoom]);
   const resetZoom = () => {
     setZoomFactor(initialZoom);
     setIsActivated(false);
@@ -18696,7 +18872,6 @@ var Lens = ({
         resetZoom();
       },
       onMouseMove: handleMouseMove,
-      onWheel: handleWheel,
       children: [
         children,
         isStatic ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -18735,9 +18910,9 @@ var Lens = ({
                 top: position.y - lensSize / 2,
                 width: lensSize,
                 height: lensSize,
-                borderRadius: "50%",
-                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2)",
-                background: "radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0.2) 80%, transparent 100%)"
+                borderRadius: "10%",
+                boxShadow: "0 8px 12px rgba(0, 0, 0, 1), 0 4px 16px rgba(5,3, 1, 1)",
+                background: "radial-gradient(circle at center, transparent 100%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%, transparent 100%)"
               }
             }
           )
@@ -18793,137 +18968,73 @@ var Lens = ({
     }
   );
 };
-var ZoomImage = React32__namespace.forwardRef(
-  ({
-    className,
-    src,
-    alt,
-    maxZoom = 2,
-    transitionDuration = 0.3,
-    borderRadius = 12,
-    imageClassName,
-    ...props
-  }, ref) => {
-    const mouseX = framerMotion.useMotionValue(50);
-    const mouseY = framerMotion.useMotionValue(50);
-    const zoomLevel = framerMotion.useMotionValue(1);
-    const springConfig = { damping: 20, stiffness: 150, mass: 0.5 };
-    const smoothMouseX = framerMotion.useSpring(mouseX, springConfig);
-    const smoothMouseY = framerMotion.useSpring(mouseY, springConfig);
-    const smoothZoomLevel = framerMotion.useSpring(zoomLevel, springConfig);
-    const transformOrigin = framerMotion.useTransform(
-      [smoothMouseX, smoothMouseY],
-      ([latestX, latestY]) => `${latestX}% ${latestY}%`
-    );
-    const touchStartDist = React32__namespace.useRef(0);
-    const touchStartZoom = React32__namespace.useRef(1);
-    const isPinching = React32__namespace.useRef(false);
-    const handleMouseMove = (e) => {
-      if (isPinching.current) return;
-      const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
-      const x = (e.clientX - left) / width * 100;
-      const y = (e.clientY - top) / height * 100;
-      mouseX.set(x);
-      mouseY.set(y);
-    };
-    const handleWheel = (e) => {
-      const delta = -e.deltaY * 5e-3;
-      const newZoom = Math.min(Math.max(1, zoomLevel.get() + delta), maxZoom);
-      zoomLevel.set(newZoom);
-    };
-    const handleMouseLeave = () => {
-      if (!isPinching.current) {
-        mouseX.set(50);
-        mouseY.set(50);
-        zoomLevel.set(1);
+function CarouselSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full h-full lg:p-10 sm:p-4 p-2", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-lg h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full bg-muted rounded-lg overflow-hidden relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        className: "absolute inset-0",
+        style: {
+          background: "linear-gradient(105deg, transparent 30%, hsl(var(--muted-foreground) / 0.08) 50%, transparent 70%)",
+          backgroundSize: "200% 100%"
+        },
+        animate: { backgroundPositionX: ["200%", "-200%"] },
+        transition: {
+          duration: 1.6,
+          ease: "linear",
+          repeat: Infinity
+        }
       }
-    };
-    const getDistance = (touches) => {
-      const dx = touches[0].clientX - touches[1].clientX;
-      const dy = touches[0].clientY - touches[1].clientY;
-      return Math.sqrt(dx * dx + dy * dy);
-    };
-    const getCenter = (touches, rect) => {
-      const x = (touches[0].clientX + touches[1].clientX) / 2;
-      const y = (touches[0].clientY + touches[1].clientY) / 2;
-      return {
-        x: (x - rect.left) / rect.width * 100,
-        y: (y - rect.top) / rect.height * 100
-      };
-    };
-    const handleTouchStart = (e) => {
-      if (e.touches.length === 2) {
-        isPinching.current = true;
-        touchStartDist.current = getDistance(e.touches);
-        touchStartZoom.current = zoomLevel.get();
-        const rect = e.currentTarget.getBoundingClientRect();
-        const center = getCenter(e.touches, rect);
-        mouseX.set(center.x);
-        mouseY.set(center.y);
-      }
-    };
-    const handleTouchMove = (e) => {
-      if (e.touches.length === 2 && isPinching.current) {
-        e.preventDefault();
-        const dist = getDistance(e.touches);
-        const rect = e.currentTarget.getBoundingClientRect();
-        const scaleChange = dist / touchStartDist.current;
-        const newZoom = Math.min(
-          Math.max(1, touchStartZoom.current * scaleChange),
-          maxZoom
-        );
-        zoomLevel.set(newZoom);
-        const center = getCenter(e.touches, rect);
-        mouseX.set(center.x);
-        mouseY.set(center.y);
-      }
-    };
-    const handleTouchEnd = (e) => {
-      if (e.touches.length < 2) {
-        if (isPinching.current) {
-          isPinching.current = false;
-        }
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
-        ref,
-        className: cn(
-          "relative w-full h-full overflow-hidden touch-none",
-          className
-        ),
-        style: { borderRadius: `${borderRadius}px` },
-        onMouseMove: handleMouseMove,
-        onMouseLeave: handleMouseLeave,
-        onWheel: handleWheel,
-        onTouchStart: handleTouchStart,
-        onTouchMove: handleTouchMove,
-        onTouchEnd: handleTouchEnd,
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.img,
+        animate: { opacity: [0.3, 0.6, 0.3] },
+        transition: {
+          duration: 2,
+          repeat: Infinity,
+          ease: "easeInOut"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
           {
-            src,
-            alt,
-            className: cn("w-full h-full object-cover", imageClassName),
-            style: {
-              borderRadius: `${borderRadius}px`,
-              transformOrigin,
-              scale: smoothZoomLevel
-            },
-            transition: {
-              type: "spring",
-              duration: transitionDuration,
-              bounce: 0
-            }
+            width: "48",
+            height: "48",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "text-muted-foreground/30",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+            ]
           }
         )
       }
-    );
-  }
-);
-ZoomImage.displayName = "ZoomImage";
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-muted-foreground/10 border border-muted-foreground/10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-muted-foreground/10 border border-muted-foreground/10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 items-center", children: [8, 32, 8, 8].map((w, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        className: "h-2 rounded-full bg-muted-foreground/20",
+        style: { width: w },
+        animate: { opacity: [0.4, 0.7, 0.4] },
+        transition: {
+          duration: 1.8,
+          repeat: Infinity,
+          ease: "easeInOut",
+          delay: i * 0.15
+        }
+      },
+      i
+    )) })
+  ] }) }) }) });
+}
 function CarouselBase({
   items,
   className,
@@ -18935,37 +19046,35 @@ function CarouselBase({
   showIndicators = true,
   autoPlay = false,
   autoPlayInterval = 3e3,
-  springConfig = {
-    stiffness: 300,
-    damping: 30
-  },
   zoomEffect = null,
-  download = false
+  download = false,
+  isLoading = false
 }) {
   const isMobile = useIsMobile();
   const [index, setIndex] = React32.useState(0);
-  const containerRef = React32.useRef(null);
-  const x = framerMotion.useMotionValue(0);
+  const options = React32.useMemo(() => ({ loop: true }), []);
+  const [emblaRef, emblaApi] = useEmblaCarousel__default.default(options);
   const [isDownloading, setIsDownloading] = React32.useState(false);
   const [downloadSuccess, setDownloadSuccess] = React32.useState(false);
   React32.useEffect(() => {
-    if (containerRef.current) {
-      const containerWidth = containerRef.current.offsetWidth || 1;
-      const targetX = -index * containerWidth;
-      framerMotion.animate(x, targetX, {
-        type: "spring",
-        stiffness: springConfig.stiffness,
-        damping: springConfig.damping
-      });
-    }
-  }, [index, x, springConfig.stiffness, springConfig.damping]);
+    if (!emblaApi) return;
+    const onSelect = () => {
+      setIndex(emblaApi.selectedScrollSnap());
+    };
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+    return () => {
+      emblaApi.off("select", onSelect);
+      emblaApi.off("reInit", onSelect);
+    };
+  }, [emblaApi]);
   React32.useEffect(() => {
-    if (!autoPlay || items.length <= 1) return;
+    if (!autoPlay || items.length <= 1 || !emblaApi) return;
     const interval = setInterval(() => {
-      setIndex((i) => (i + 1) % items.length);
+      emblaApi.scrollNext();
     }, autoPlayInterval);
     return () => clearInterval(interval);
-  }, [autoPlay, autoPlayInterval, items.length]);
+  }, [autoPlay, autoPlayInterval, items.length, emblaApi]);
   const handleDownload = async () => {
     if (isDownloading) return;
     setIsDownloading(true);
@@ -18990,21 +19099,36 @@ function CarouselBase({
       setIsDownloading(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 },
+        style: { width, height },
+        className: "h-full",
+        children: /* @__PURE__ */ jsxRuntime.jsx(CarouselSkeleton, { className })
+      },
+      "carousel-skeleton"
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
     {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: { duration: 0.4 },
       className: cn("w-full lg:p-10 sm:p-4 p-2", className),
       style: { width, height },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "relative overflow-hidden rounded-lg h-full",
-            containerClassName
-          ),
-          ref: containerRef,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "flex h-full", style: { x }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-full h-full", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative h-full", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: emblaRef,
+            className: "overflow-hidden rounded-lg h-full cursor-grab active:cursor-grabbing",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 w-full h-full min-w-0", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsxRuntime.jsx(
               ZoomImage,
               {
                 src: item.url,
@@ -19036,156 +19160,400 @@ function CarouselBase({
                 ),
                 draggable: false
               }
-            ) }, item.id)) }),
-            download && /* @__PURE__ */ jsxRuntime.jsx(
-              framerMotion.motion.button,
+            ) }, item.id)) })
+          }
+        ),
+        download && /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.button,
+          {
+            onClick: handleDownload,
+            onPointerDown: (e) => e.stopPropagation(),
+            onTouchStart: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation(),
+            className: cn(
+              "absolute top-4 right-4 z-50 p-2 rounded-full text-white transition-colors border border-white/10",
+              downloadSuccess ? "bg-green-500 hover:bg-green-600" : "bg-black/50 hover:bg-black/70"
+            ),
+            title: "Download image",
+            initial: false,
+            animate: {
+              scale: isDownloading ? 0.9 : 1,
+              backgroundColor: downloadSuccess ? "rgb(34, 197, 94)" : "rgba(0, 0, 0, 0.5)"
+            },
+            whileHover: { scale: 1.05 },
+            whileTap: { scale: 0.95 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.svg,
               {
-                onClick: handleDownload,
-                className: cn(
-                  "absolute top-4 right-4 z-30 p-2 rounded-full text-white transition-colors border border-white/10",
-                  downloadSuccess ? "bg-green-500 hover:bg-green-600" : "bg-black/50 hover:bg-black/70"
-                ),
-                title: "Download image",
-                initial: false,
-                animate: {
-                  scale: isDownloading ? 0.9 : 1,
-                  backgroundColor: downloadSuccess ? "rgb(34, 197, 94)" : "rgba(0, 0, 0, 0.5)"
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                animate: { rotate: 360 },
+                transition: {
+                  repeat: Infinity,
+                  ease: "linear",
+                  duration: 1
                 },
-                whileHover: { scale: 1.05 },
-                whileTap: { scale: 0.95 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsxRuntime.jsx(
-                  framerMotion.motion.svg,
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    animate: { rotate: 360 },
-                    transition: {
-                      repeat: Infinity,
-                      ease: "linear",
-                      duration: 1
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-                  },
-                  "loading"
-                ) : downloadSuccess ? /* @__PURE__ */ jsxRuntime.jsx(
-                  framerMotion.motion.svg,
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    initial: { scale: 0.5, opacity: 0 },
-                    animate: { scale: 1, opacity: 1 },
-                    exit: { scale: 0.5, opacity: 0 },
-                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
-                  },
-                  "success"
-                ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                  framerMotion.motion.svg,
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    initial: { scale: 0.5, opacity: 0 },
-                    animate: { scale: 1, opacity: 1 },
-                    exit: { scale: 0.5, opacity: 0 },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 10 12 15 17 10" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
-                    ]
-                  },
-                  "download"
-                ) })
-              }
-            ),
-            showControls && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.button,
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+              },
+              "loading"
+            ) : downloadSuccess ? /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.svg,
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                initial: { scale: 0.5, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                exit: { scale: 0.5, opacity: 0 },
+                children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+              },
+              "success"
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              framerMotion.motion.svg,
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                initial: { scale: 0.5, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                exit: { scale: 0.5, opacity: 0 },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 10 12 15 17 10" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+                ]
+              },
+              "download"
+            ) })
+          }
+        ),
+        showControls && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.button,
+            {
+              disabled: !emblaApi?.canScrollPrev(),
+              onClick: () => emblaApi?.scrollPrev(),
+              onPointerDown: (e) => e.stopPropagation(),
+              onTouchStart: (e) => e.stopPropagation(),
+              onMouseDown: (e) => e.stopPropagation(),
+              className: `absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-50
+                    ${!emblaApi?.canScrollPrev() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
                 {
-                  disabled: index === 0,
-                  onClick: () => setIndex((i) => Math.max(0, i - 1)),
-                  className: `absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-30
-                  ${index === 0 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
+                  className: "w-6 h-6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
                   children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
+                    "path",
                     {
-                      className: "w-6 h-6",
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: 2,
-                          d: "M15 19l-7-7 7-7"
-                        }
-                      )
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M15 19l-7-7 7-7"
                     }
                   )
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.button,
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.button,
+            {
+              disabled: !emblaApi?.canScrollNext(),
+              onClick: () => emblaApi?.scrollNext(),
+              onPointerDown: (e) => e.stopPropagation(),
+              onTouchStart: (e) => e.stopPropagation(),
+              onMouseDown: (e) => e.stopPropagation(),
+              className: `absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-50
+                    ${!emblaApi?.canScrollNext() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
                 {
-                  disabled: index === items.length - 1,
-                  onClick: () => setIndex((i) => Math.min(items.length - 1, i + 1)),
-                  className: `absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-transform z-30
-                  ${index === items.length - 1 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
+                  className: "w-6 h-6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
                   children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
+                    "path",
                     {
-                      className: "w-6 h-6",
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: 2,
-                          d: "M9 5l7 7-7 7"
-                        }
-                      )
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M9 5l7 7-7 7"
                     }
                   )
                 }
               )
-            ] }),
-            showIndicators && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: items.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => setIndex(i),
-                className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/50"}`
-              },
-              i
-            )) })
-          ]
-        }
-      ) })
+            }
+          )
+        ] }),
+        showIndicators && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-50", children: items.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => emblaApi?.scrollTo(i),
+            onPointerDown: (e) => e.stopPropagation(),
+            onTouchStart: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation(),
+            className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/50"}`
+          },
+          i
+        )) })
+      ] }) })
+    },
+    "carousel-content"
+  ) });
+}
+function useMediaQuery(query) {
+  const [value, setValue] = React32__namespace.useState(false);
+  React32__namespace.useEffect(() => {
+    function onChange(event) {
+      setValue(event.matches);
+    }
+    const result = window.matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+  return value;
+}
+var FULL_CIRCLE = 360;
+var START_ANGLE = -90;
+function degToRad(deg) {
+  return deg * Math.PI / 180;
+}
+function polarToCartesian(radius, angleDeg) {
+  const rad = degToRad(angleDeg);
+  return { x: Math.cos(rad) * radius, y: Math.sin(rad) * radius };
+}
+function slicePath(index, total, wedgeRadius, innerRadius) {
+  if (total <= 0) return "";
+  const anglePerSlice = FULL_CIRCLE / total;
+  const midDeg = START_ANGLE + anglePerSlice * index;
+  const halfSlice = anglePerSlice / 2;
+  const startDeg = midDeg - halfSlice;
+  const endDeg = midDeg + halfSlice;
+  const outerStart = polarToCartesian(wedgeRadius, startDeg);
+  const outerEnd = polarToCartesian(wedgeRadius, endDeg);
+  const innerStart = polarToCartesian(innerRadius, startDeg);
+  const innerEnd = polarToCartesian(innerRadius, endDeg);
+  const largeArcFlag = anglePerSlice > 180 ? 1 : 0;
+  return `M ${outerStart.x} ${outerStart.y} A ${wedgeRadius} ${wedgeRadius} 0 ${largeArcFlag} 1 ${outerEnd.x} ${outerEnd.y} L ${innerEnd.x} ${innerEnd.y} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStart.x} ${innerStart.y} Z`;
+}
+function RadialMenu({
+  children,
+  menuItems,
+  size = 240,
+  iconSize = 24,
+  bandWidth = 60,
+  innerGap = 16,
+  outerGap = 12,
+  outerRingWidth = 8,
+  onSelect
+}) {
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const radius = size / 2;
+  const outerRingOuterRadius = radius;
+  const outerRingInnerRadius = outerRingOuterRadius - outerRingWidth;
+  const wedgeOuterRadius = outerRingInnerRadius - outerGap;
+  const wedgeInnerRadius = wedgeOuterRadius - bandWidth;
+  const iconRingRadius = (wedgeOuterRadius + wedgeInnerRadius) / 2;
+  const centerRadius = Math.max(wedgeInnerRadius - innerGap, 0);
+  const slice = 360 / menuItems.length;
+  const [activeIndex, setActiveIndex] = React32__namespace.useState(null);
+  const timerRef = React32__namespace.useRef(null);
+  const isLongPress = React32__namespace.useRef(false);
+  const handleTouchStart = (e) => {
+    isLongPress.current = false;
+    const touch = e.touches[0];
+    const { clientX, clientY } = touch;
+    timerRef.current = setTimeout(() => {
+      isLongPress.current = true;
+      const event = new MouseEvent("contextmenu", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        clientX,
+        clientY,
+        button: 2,
+        buttons: 2
+      });
+      e.target.dispatchEvent(event);
+    }, 1e3);
+  };
+  const handleTouchEnd = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
     }
-  );
+  };
+  const handleTouchMove = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  };
+  const containerVariants = {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: isMobile ? { duration: 0 } : {
+        delayChildren: 0.05,
+        staggerChildren: 0.03,
+        type: "spring",
+        stiffness: 300,
+        damping: 24
+      }
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.8,
+      transition: isMobile ? { duration: 0 } : { duration: 0.15 }
+    }
+  };
+  const itemVariants2 = {
+    hidden: { opacity: 0, scale: 0, rotate: -20 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      rotate: 0,
+      transition: isMobile ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 20 }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuBase, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "select-none outline-none group touch-none",
+        onTouchStart: handleTouchStart,
+        onTouchEnd: handleTouchEnd,
+        onTouchMove: handleTouchMove,
+        children: children || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-80 flex justify-center items-center border-2 border-dashed border-muted-foreground/20 rounded-xl bg-muted/5 text-muted-foreground hover:bg-muted/10 transition-colors", children: "Right-click or Long-press here (1s)" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ContextMenuContentBase,
+      {
+        className: "p-0 border-none bg-transparent shadow-none overflow-visible -translate-x-1/2 -translate-y-1/2",
+        style: { width: size, height: size },
+        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
+          {
+            className: "relative size-full drop-shadow-xl will-change-transform",
+            variants: containerVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-background/5 blur-2xl -z-10" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  className: "absolute inset-0 size-full overflow-visible",
+                  viewBox: `${-radius} ${-radius} ${radius * 2} ${radius * 2}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      framerMotion.motion.circle,
+                      {
+                        r: centerRadius,
+                        initial: { scale: 0 },
+                        animate: { scale: 1 },
+                        transition: isMobile ? { duration: 0 } : {
+                          type: "spring",
+                          stiffness: 300,
+                          delay: 0.2
+                        },
+                        className: "fill-background stroke-border stroke-1 shadow-inner"
+                      }
+                    ),
+                    menuItems.map((item, index) => {
+                      const Icon = item.icon;
+                      const midDeg = START_ANGLE + slice * index;
+                      const { x: iconX, y: iconY } = polarToCartesian(
+                        iconRingRadius,
+                        midDeg
+                      );
+                      const isActive = activeIndex === index;
+                      const ICON_BOX = iconSize * 2.5;
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        framerMotion.motion.g,
+                        {
+                          variants: itemVariants2,
+                          className: "cursor-pointer outline-none",
+                          onMouseEnter: () => setActiveIndex(index),
+                          onMouseLeave: () => setActiveIndex(null),
+                          onClick: () => onSelect?.(item),
+                          style: { originX: "0px", originY: "0px" },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "path",
+                              {
+                                d: slicePath(
+                                  index,
+                                  menuItems.length,
+                                  wedgeOuterRadius,
+                                  wedgeInnerRadius
+                                ),
+                                className: cn(
+                                  "transition-colors duration-200 stroke-1",
+                                  isActive ? "fill-primary stroke-primary-foreground/20" : "fill-background/90 stroke-border/50 hover:fill-accent"
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "foreignObject",
+                              {
+                                x: iconX - ICON_BOX / 2,
+                                y: iconY - ICON_BOX / 2,
+                                width: ICON_BOX,
+                                height: ICON_BOX,
+                                className: "pointer-events-none",
+                                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  Icon,
+                                  {
+                                    size: iconSize,
+                                    weight: isActive ? "fill" : "regular",
+                                    className: cn(
+                                      "transition-all duration-200",
+                                      isActive ? "text-primary-foreground " : "text-muted-foreground"
+                                    )
+                                  }
+                                ) })
+                              }
+                            )
+                          ]
+                        },
+                        item.id
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
 }
 
 exports.AddButton = AddButton;
@@ -19399,6 +19767,7 @@ exports.ProgressBase = ProgressBase;
 exports.ProgressCirclesBase = ProgressCirclesBase;
 exports.ProgressPanelsBase = ProgressPanelsBase;
 exports.ProgressSegmentsBase = ProgressSegmentsBase;
+exports.RadialMenu = RadialMenu;
 exports.RangePicker = RangePicker;
 exports.RefreshButton = RefreshButton;
 exports.SaveButton = SaveButton;