@mlw-packages/react-components 1.9.11 → 1.9.12

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: {
@@ -16524,11 +16526,11 @@ var NoData = ({
       ),
       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 +17265,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 +17320,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,393 +17464,419 @@ 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;
   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
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "stop",
+                      {
+                        offset: "90%",
+                        stopColor: color,
+                        stopOpacity: 0.1
                       }
-                    } : void 0
+                    )
+                  ]
+                },
+                `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
                   }
-                ),
-                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
                   }
                 ),
-                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;
-                })
-              ]
-            }
-          ) })
-        ]
-      }
-    ),
+                        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,
       {
@@ -17875,29 +17910,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
-        }
-      }
     )
   ] });
 };
@@ -18392,9 +18404,7 @@ var HorizontalChart_default = HorizontalChart;
 var TimeSeries = ({
   data,
   xAxis,
-  chartHeight = 350,
-  height,
-  brushHeight,
+  brushHeight = 60,
   className,
   start,
   end,
@@ -18406,21 +18416,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,16 +18657,147 @@ function Leaderboard({
     }
   );
 }
-var Lens = ({
-  children,
-  initialZoom = 1.5,
-  maxZoom = 4,
-  lensSize = 150,
-  isStatic = false,
-  position = { x: 200, y: 150 },
-  hovering,
-  setHovering
-}) => {
+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);
+      }
+    };
+    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,
+        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,
+          {
+            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,
+  maxZoom = 4,
+  lensSize = 150,
+  isStatic = false,
+  position = { x: 200, y: 150 },
+  hovering,
+  setHovering
+}) => {
   const containerRef = React32.useRef(null);
   const [localIsHovering, setLocalIsHovering] = React32.useState(false);
   const isHovering = hovering !== void 0 ? hovering : localIsHovering;
@@ -18793,137 +18934,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);
-      }
-    };
-    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;
+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
         }
       }
-    };
-    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 +19012,39 @@ 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 [emblaRef, emblaApi] = useEmblaCarousel__default.default({ loop: true });
   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]);
+  React32.useEffect(() => {
+    if (emblaApi && index !== emblaApi.selectedScrollSnap()) {
+      emblaApi.scrollTo(index);
+    }
+  }, [index, emblaApi]);
   const handleDownload = async () => {
     if (isDownloading) return;
     setIsDownloading(true);
@@ -18990,21 +19069,39 @@ 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",
+            "relative overflow-hidden rounded-lg h-full cursor-grab active:cursor-grabbing",
             containerClassName
           ),
-          ref: containerRef,
+          ref: emblaRef,
           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(
+            /* @__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,
@@ -19121,10 +19218,10 @@ function CarouselBase({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  disabled: index === 0,
-                  onClick: () => setIndex((i) => Math.max(0, i - 1)),
+                  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
-                  ${index === 0 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
+                    ${!emblaApi?.canScrollPrev() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",
                     {
@@ -19148,10 +19245,10 @@ function CarouselBase({
               /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.button,
                 {
-                  disabled: index === items.length - 1,
-                  onClick: () => setIndex((i) => Math.min(items.length - 1, i + 1)),
+                  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
-                  ${index === items.length - 1 ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
+                    ${!emblaApi?.canScrollNext() ? "opacity-40 cursor-not-allowed" : "bg-secondary hover:scale-110 hover:opacity-100 opacity-70"}`,
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     "svg",
                     {
@@ -19176,7 +19273,7 @@ function CarouselBase({
             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),
+                onClick: () => emblaApi?.scrollTo(i),
                 className: `h-2 rounded-full transition-all ${i === index ? "w-8 bg-white" : "w-2 bg-white/50"}`
               },
               i
@@ -19184,8 +19281,240 @@ function CarouselBase({
           ]
         }
       ) })
+    },
+    "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 +19728,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;