@mlw-packages/react-components 1.9.12 → 1.9.14

package/dist/index.mjs

@@ -14621,7 +14621,8 @@ var DraggableTooltipComponent = ({
   toggleHighlight,
   showOnlyHighlighted,
   valueFormatter,
-  categoryFormatter
+  categoryFormatter,
+  seriesTypeMap
 }) => {
   const visibleKeys = useMemo(
     () => showOnlyHighlighted && highlightedSeries && highlightedSeries.size > 0 ? dataKeys.filter((k) => highlightedSeries.has(k)) : dataKeys,
@@ -14632,7 +14633,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,
@@ -15087,7 +15090,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,
@@ -15142,7 +15151,7 @@ var DraggableTooltipComponent = ({
                               children: displayValue
                             }
                           ),
-                          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: absDenominator > 0 ? `${pct.toFixed(1)}%` : "-" })
+                          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: absDenominator > 0 ? `${pct.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%` : "-" })
                         ] })
                       ] }),
                       /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -15206,7 +15215,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;
@@ -15215,18 +15225,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,
@@ -15278,18 +15279,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,
@@ -15328,8 +15324,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__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsx(
@@ -15358,7 +15360,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;
@@ -15391,18 +15394,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,
@@ -15433,7 +15431,10 @@ var TooltipSimple = ({
                       children: displayValue
                     }
                   ),
-                  isBiaxial ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: pct > 0 ? `${pct.toFixed(1)}%` : "-" }) : null
+                  isBiaxial ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: pct > 0 ? `${pct.toLocaleString("pt-BR", {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2
+                  })}%` : "-" }) : null
                 ] }) })
               ]
             },
@@ -16478,7 +16479,7 @@ 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: {
@@ -17421,6 +17422,13 @@ var Chart = ({
     maxTooltips,
     effectiveChartWidth
   });
+  const seriesTypeMap = useMemo(() => {
+    const map = {};
+    seriesOrder.forEach((s) => {
+      map[s.key] = s.type;
+    });
+    return map;
+  }, [seriesOrder]);
   if (!data && !isLoading) return null;
   if (isLoading) {
     return /* @__PURE__ */ jsx(ChartWrapper, { className, children: /* @__PURE__ */ jsx(
@@ -17659,7 +17667,8 @@ var Chart = ({
                     finalColors,
                     valueFormatter: finalValueFormatter,
                     categoryFormatter,
-                    periodLabel
+                    periodLabel,
+                    seriesTypeMap
                   }
                 ) : /* @__PURE__ */ jsx(
                   TooltipSimple_default,
@@ -17667,7 +17676,8 @@ var Chart = ({
                     finalColors,
                     valueFormatter: finalValueFormatter,
                     categoryFormatter,
-                    periodLabel
+                    periodLabel,
+                    seriesTypeMap
                   }
                 ),
                 cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
@@ -17855,7 +17865,8 @@ var Chart = ({
         globalTooltipCount: activeTooltips.length,
         onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
         closeAllButtonPosition: "top-center",
-        closeAllButtonVariant: "floating"
+        closeAllButtonVariant: "floating",
+        seriesTypeMap
       },
       tooltip.id
     )),
@@ -18007,6 +18018,13 @@ var HorizontalChart = ({
       setActiveTooltips
     ]
   );
+  const seriesTypeMap = useMemo(() => {
+    const map = {};
+    seriesOrder.forEach((s) => {
+      map[s.key] = s.type;
+    });
+    return map;
+  }, [seriesOrder]);
   if (!data && !isLoading) return null;
   if (isLoading) {
     return /* @__PURE__ */ jsx(
@@ -18246,7 +18264,8 @@ var HorizontalChart = ({
                                 finalColors,
                                 valueFormatter: finalValueFormatter,
                                 categoryFormatter,
-                                periodLabel
+                                periodLabel,
+                                seriesTypeMap
                               }
                             ) : /* @__PURE__ */ jsx(
                               TooltipSimple_default,
@@ -18254,7 +18273,8 @@ var HorizontalChart = ({
                                 finalColors,
                                 valueFormatter: finalValueFormatter,
                                 categoryFormatter,
-                                periodLabel
+                                periodLabel,
+                                seriesTypeMap
                               }
                             ),
                             cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
@@ -18340,7 +18360,8 @@ var HorizontalChart = ({
             globalTooltipCount: activeTooltips.length,
             onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
             closeAllButtonPosition: "top-center",
-            closeAllButtonVariant: "floating"
+            closeAllButtonVariant: "floating",
+            seriesTypeMap
           },
           tooltip.id
         )),
@@ -18535,7 +18556,7 @@ function Leaderboard({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `border rounded-xl flex flex-col max-h-80 w-[52rem]  ${className}`,
+      className: `border rounded-xl flex flex-col max-h-80 ${className}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 px-4 border-b flex-shrink-0 gap-3 ", children: [
           /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold px-1 whitespace-nowrap", children: title }),
@@ -18552,7 +18573,7 @@ function Leaderboard({
                 },
                 placeholder: "Pesquisar...",
                 leftIcon: /* @__PURE__ */ jsx(MagnifyingGlassIcon, { size: 16 }),
-                className: "h-8 py-1 w-24"
+                className: "h-8 py-1"
               }
             ),
             /* @__PURE__ */ jsx(
@@ -18647,11 +18668,20 @@ var ZoomImage = React32.forwardRef(
       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 innerRef = React32.useRef(null);
+    React32.useImperativeHandle(ref, () => innerRef.current);
+    React32.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);
@@ -18709,7 +18739,7 @@ var ZoomImage = React32.forwardRef(
     return /* @__PURE__ */ jsx(
       motion.div,
       {
-        ref,
+        ref: innerRef,
         className: cn(
           "relative w-full h-full overflow-hidden touch-none",
           className
@@ -18717,7 +18747,6 @@ var ZoomImage = React32.forwardRef(
         style: { borderRadius: `${borderRadius}px` },
         onMouseMove: handleMouseMove,
         onMouseLeave: handleMouseLeave,
-        onWheel: handleWheel,
         onTouchStart: handleTouchStart,
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
@@ -18768,11 +18797,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__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);
@@ -18794,7 +18829,6 @@ var Lens = ({
         resetZoom();
       },
       onMouseMove: handleMouseMove,
-      onWheel: handleWheel,
       children: [
         children,
         isStatic ? /* @__PURE__ */ jsxs("div", { children: [
@@ -18833,9 +18867,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%)"
               }
             }
           )
@@ -18892,7 +18926,7 @@ var Lens = ({
   );
 };
 function CarouselSkeleton({ className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full h-full lg:p-10 sm:p-4 p-2", className), children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-lg h-full", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full bg-muted rounded-lg overflow-hidden relative", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full h-full lg:p-10 sm:p-4 p-2", className), children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-lg h-full", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full min-h-[300px] bg-muted rounded-lg overflow-hidden relative", children: [
     /* @__PURE__ */ jsx(
       motion.div,
       {
@@ -18964,7 +18998,6 @@ function CarouselBase({
   containerClassName,
   imageClassName,
   width,
-  height,
   showControls = true,
   showIndicators = true,
   autoPlay = false,
@@ -18975,7 +19008,8 @@ function CarouselBase({
 }) {
   const isMobile = useIsMobile();
   const [index, setIndex] = useState(0);
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+  const options = useMemo(() => ({ loop: true }), []);
+  const [emblaRef, emblaApi] = useEmblaCarousel(options);
   const [isDownloading, setIsDownloading] = useState(false);
   const [downloadSuccess, setDownloadSuccess] = useState(false);
   useEffect(() => {
@@ -18997,11 +19031,6 @@ function CarouselBase({
     }, autoPlayInterval);
     return () => clearInterval(interval);
   }, [autoPlay, autoPlayInterval, items.length, emblaApi]);
-  useEffect(() => {
-    if (emblaApi && index !== emblaApi.selectedScrollSnap()) {
-      emblaApi.scrollTo(index);
-    }
-  }, [index, emblaApi]);
   const handleDownload = async () => {
     if (isDownloading) return;
     setIsDownloading(true);
@@ -19034,7 +19063,7 @@ function CarouselBase({
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         transition: { duration: 0.3 },
-        style: { width, height },
+        style: { width },
         className: "h-full",
         children: /* @__PURE__ */ jsx(CarouselSkeleton, { className })
       },
@@ -19048,17 +19077,14 @@ function CarouselBase({
       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__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "relative overflow-hidden rounded-lg h-full cursor-grab active:cursor-grabbing",
-            containerClassName
-          ),
-          ref: emblaRef,
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-full", children: items.map((item) => /* @__PURE__ */ jsx("div", { className: "shrink-0 w-full h-full min-w-0", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsx(
+      style: { width },
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 h-full", children: /* @__PURE__ */ jsxs("div", { className: cn("relative h-full", containerClassName), children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: emblaRef,
+            className: "overflow-hidden rounded-lg h-full cursor-grab active:cursor-grabbing",
+            children: /* @__PURE__ */ jsx("div", { className: "flex h-full", children: items.map((item) => /* @__PURE__ */ jsx("div", { className: "shrink-0 w-full h-full min-w-0", children: isMobile || zoomEffect === "scale" ? /* @__PURE__ */ jsx(
               ZoomImage,
               {
                 src: item.url,
@@ -19090,154 +19116,166 @@ function CarouselBase({
                 ),
                 draggable: false
               }
-            ) }, item.id)) }),
-            download && /* @__PURE__ */ jsx(
-              motion.button,
+            ) }, item.id)) })
+          }
+        ),
+        download && /* @__PURE__ */ jsx(
+          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__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsx(
+              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__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: isDownloading ? /* @__PURE__ */ jsx(
-                  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__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-                  },
-                  "loading"
-                ) : downloadSuccess ? /* @__PURE__ */ jsx(
-                  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__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
-                  },
-                  "success"
-                ) : /* @__PURE__ */ jsxs(
-                  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__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                      /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
-                      /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
-                    ]
-                  },
-                  "download"
-                ) })
-              }
-            ),
-            showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                motion.button,
-                {
-                  disabled: !emblaApi?.canScrollPrev(),
-                  onClick: () => emblaApi?.scrollPrev(),
-                  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
+                children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+              },
+              "loading"
+            ) : downloadSuccess ? /* @__PURE__ */ jsx(
+              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__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+              },
+              "success"
+            ) : /* @__PURE__ */ jsxs(
+              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__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+                  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+                ]
+              },
+              "download"
+            ) })
+          }
+        ),
+        showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+                "svg",
+                {
+                  className: "w-6 h-6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
                   children: /* @__PURE__ */ jsx(
-                    "svg",
+                    "path",
                     {
-                      className: "w-6 h-6",
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ 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__ */ jsx(
-                motion.button,
-                {
-                  disabled: !emblaApi?.canScrollNext(),
-                  onClick: () => emblaApi?.scrollNext(),
-                  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
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+                "svg",
+                {
+                  className: "w-6 h-6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
                   children: /* @__PURE__ */ jsx(
-                    "svg",
+                    "path",
                     {
-                      className: "w-6 h-6",
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2", children: items.map((_, i) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => emblaApi?.scrollTo(i),
-                className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/50"}`
-              },
-              i
-            )) })
-          ]
-        }
-      ) })
+            }
+          )
+        ] }),
+        showIndicators && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-50", children: items.map((_, i) => /* @__PURE__ */ 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"
   ) });