@devalok/shilp-sutra 0.27.2 → 0.29.0

package/dist/ui/charts/index.js

@@ -1,115 +1,115 @@
 "use client";
-import { jsx as e, jsxs as g, Fragment as te } from "react/jsx-runtime";
-import * as ne from "react";
-import { useRef as ye, useState as me, useEffect as xe, useCallback as ke } from "react";
-import { cn as H } from "../lib/utils.js";
-import { scaleBand as Se, scaleLinear as oe, scalePoint as Ce } from "d3-scale";
-import { tweens as se, motionProps as ie } from "../lib/motion.js";
+import { jsx as e, jsxs as p, Fragment as ee } from "react/jsx-runtime";
+import * as te from "react";
+import { useRef as ve, useState as de, useEffect as ye, useCallback as ke } from "react";
+import { cn as Q } from "../lib/utils.js";
+import { scaleBand as Ge, scaleLinear as ae, scalePoint as Ce } from "d3-scale";
+import { tweens as le, motionProps as se } from "../lib/motion.js";
 import { axisLeft as Xe, axisBottom as De, axisRight as Pe, axisTop as ze } from "d3-axis";
 import { select as Be } from "d3-selection";
 import { u as Ve } from "../../_chunks/motion-provider.js";
-import { m as re } from "../../_chunks/framer.js";
-import { line as he, curveMonotoneX as de, curveLinear as Ae, stack as _e, stackOrderNone as je, stackOffsetNone as Te, area as Ne, pie as Ye, arc as ve, lineRadial as Oe, curveLinearClosed as We } from "d3-shape";
+import { m as ne } from "../../_chunks/framer.js";
+import { line as me, curveMonotoneX as ue, curveLinear as Ae, stack as _e, stackOrderNone as je, stackOffsetNone as Te, area as Me, pie as Ye, arc as ge, lineRadial as Oe, curveLinearClosed as We } from "d3-shape";
 const Ie = {
   top: 20,
   right: 20,
   bottom: 40,
   left: 50
-}, be = ne.forwardRef(
+}, xe = te.forwardRef(
   ({
     height: t = 300,
-    margin: o,
-    className: a,
+    margin: a,
+    className: o,
     children: y,
-    ...f
+    ...m
   }, x) => {
-    const i = ye(null), [M, B] = me(0), N = { ...Ie, ...o };
-    xe(() => {
-      if (!i.current) return;
-      const T = new ResizeObserver((D) => {
-        const R = D[0];
-        R && B(R.contentRect.width);
+    const c = ve(null), [M, z] = de(0), N = { ...Ie, ...a };
+    ye(() => {
+      if (!c.current) return;
+      const j = new ResizeObserver((P) => {
+        const R = P[0];
+        R && z(R.contentRect.width);
       });
-      return T.observe(i.current), () => T.disconnect();
+      return j.observe(c.current), () => j.disconnect();
     }, []);
     const A = Math.max(0, M - N.left - N.right), k = Math.max(0, t - N.top - N.bottom);
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: (T) => {
-          i.current = T, typeof x == "function" ? x(T) : x && (x.current = T);
+        ref: (j) => {
+          c.current = j, typeof x == "function" ? x(j) : x && (x.current = j);
         },
-        className: H("relative w-full", a),
-        ...f,
+        className: Q("relative w-full", o),
+        ...m,
         children: M > 0 && /* @__PURE__ */ e("svg", { width: M, height: t, role: "img", "aria-label": "Chart", children: /* @__PURE__ */ e("g", { transform: `translate(${N.left},${N.top})`, children: y({ width: A, height: k, margin: N }) }) })
       }
     );
   }
 );
-be.displayName = "ChartContainer";
-function ee({
+xe.displayName = "ChartContainer";
+function K({
   scale: t,
-  orientation: o,
-  transform: a,
+  orientation: a,
+  transform: o,
   tickCount: y,
-  tickFormat: f,
+  tickFormat: m,
   label: x,
-  className: i
+  className: c
 }) {
-  const M = ye(null);
-  return xe(() => {
+  const M = ve(null);
+  return ye(() => {
     if (!M.current) return;
     const N = {
       top: ze,
       right: Pe,
       bottom: De,
       left: Xe
-    }[o];
+    }[a];
     let A = N(t);
-    y && (A = A.ticks(y)), f && (A = A.tickFormat(f));
+    y && (A = A.ticks(y)), m && (A = A.tickFormat(m));
     const k = Be(M.current);
     k.call(A), k.selectAll(".tick line").attr("stroke", "var(--color-surface-border)"), k.selectAll(".tick text").attr("fill", "var(--color-surface-fg-muted)").attr("font-size", "var(--font-size-xs)"), k.selectAll(".domain").attr("stroke", "var(--color-surface-border-strong)");
-  }, [t, o, y, f]), /* @__PURE__ */ e("g", { ref: M, transform: a, className: i, children: x && /* @__PURE__ */ e(
+  }, [t, a, y, m]), /* @__PURE__ */ e("g", { ref: M, transform: o, className: c, children: x && /* @__PURE__ */ e(
     "text",
     {
       textAnchor: "middle",
       fill: "var(--color-surface-fg-muted)",
       fontSize: "var(--font-size-sm)",
-      ...o === "bottom" ? { x: "50%", dy: 35 } : o === "left" ? { transform: "rotate(-90)", y: -40, x: 0 } : {},
+      ...a === "bottom" ? { x: "50%", dy: 35 } : a === "left" ? { transform: "rotate(-90)", y: -40, x: 0 } : {},
       children: x
     }
   ) });
 }
-ee.displayName = "Axis";
-function fe({
+K.displayName = "Axis";
+function he({
   width: t,
-  height: o,
-  xScale: a,
+  height: a,
+  xScale: o,
   yScale: y,
-  horizontal: f = !0,
+  horizontal: m = !0,
   vertical: x = !1
 }) {
-  return /* @__PURE__ */ g("g", { className: "grid-lines", children: [
-    f && (y == null ? void 0 : y.ticks) && y.ticks().map((i, M) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ p("g", { className: "grid-lines", children: [
+    m && y?.ticks && y.ticks().map((c, M) => /* @__PURE__ */ e(
       "line",
       {
         x1: 0,
         x2: t,
-        y1: y(i),
-        y2: y(i),
+        y1: y(c),
+        y2: y(c),
         stroke: "var(--color-surface-border)",
         strokeDasharray: "3,3",
         opacity: 0.6
       },
       `h-${M}`
     )),
-    x && (a == null ? void 0 : a.ticks) && a.ticks().map((i, M) => /* @__PURE__ */ e(
+    x && o?.ticks && o.ticks().map((c, M) => /* @__PURE__ */ e(
       "line",
       {
-        x1: a(i),
-        x2: a(i),
+        x1: o(c),
+        x2: o(c),
         y1: 0,
-        y2: o,
+        y2: a,
         stroke: "var(--color-surface-border)",
         strokeDasharray: "3,3",
         opacity: 0.6
@@ -118,62 +118,62 @@ function fe({
     ))
   ] });
 }
-fe.displayName = "GridLines";
-function ce({ items: t, position: o = "bottom", className: a }) {
+he.displayName = "GridLines";
+function ce({ items: t, position: a = "bottom", className: o }) {
   return /* @__PURE__ */ e(
     "div",
     {
-      className: H(
+      className: Q(
         "flex gap-ds-04 text-ds-sm text-surface-fg-muted",
-        o === "left" || o === "right" ? "flex-col" : "flex-row flex-wrap justify-center",
-        a
+        a === "left" || a === "right" ? "flex-col" : "flex-row flex-wrap justify-center",
+        o
       ),
-      children: t.map((f) => /* @__PURE__ */ g("div", { className: "flex items-center gap-ds-02", children: [
+      children: t.map((m) => /* @__PURE__ */ p("div", { className: "flex items-center gap-ds-02", children: [
         /* @__PURE__ */ e(
           "span",
           {
             className: "inline-block h-3 w-3 shrink-0 rounded-ds-sm",
-            style: { backgroundColor: f.color }
+            style: { backgroundColor: m.color }
           }
         ),
-        /* @__PURE__ */ e("span", { children: f.label })
-      ] }, f.label))
+        /* @__PURE__ */ e("span", { children: m.label })
+      ] }, m.label))
     }
   );
 }
 ce.displayName = "Legend";
-function ue({ state: t, className: o }) {
+function ie({ state: t, className: a }) {
   return t.visible ? /* @__PURE__ */ e(
     "div",
     {
-      className: H(
+      className: Q(
         "pointer-events-none absolute z-tooltip",
         "rounded-ds-md border border-surface-border-strong",
         "bg-surface-overlay px-ds-03 py-ds-02",
         "shadow-raised-hover",
         "text-ds-sm text-surface-fg",
-        o
+        a
       ),
       style: { left: t.x + 12, top: t.y - 12 },
       children: t.content
     }
   ) : null;
 }
-ue.displayName = "ChartTooltip";
-function pe() {
-  const [t, o] = me({
+ie.displayName = "ChartTooltip";
+function fe() {
+  const [t, a] = de({
     visible: !1,
     x: 0,
     y: 0,
     content: null
-  }), a = ke((f, x, i) => {
-    o({ visible: !0, x: f, y: x, content: i });
+  }), o = ke((m, x, c) => {
+    a({ visible: !0, x: m, y: x, content: c });
   }, []), y = ke(() => {
-    o((f) => ({ ...f, visible: !1 }));
+    a((m) => ({ ...m, visible: !1 }));
   }, []);
-  return { tooltip: t, show: a, hide: y };
+  return { tooltip: t, show: o, hide: y };
 }
-const Me = [
+const be = [
   "chart-1",
   "chart-2",
   "chart-3",
@@ -186,141 +186,140 @@ const Me = [
 function Re(t) {
   return `var(--${t})`;
 }
-function ae(t, o = 0) {
-  return t ? Me.includes(t) ? Re(t) : t : Re(Me[o % Me.length]);
+function re(t, a = 0) {
+  return t ? be.includes(t) ? Re(t) : t : Re(be[a % be.length]);
 }
-function le() {
+function oe() {
   const { reducedMotion: t } = Ve();
   return t;
 }
-function Fe(t, o = 300) {
-  return t ? 0 : o;
+function Fe(t, a = 300) {
+  return t ? 0 : a;
 }
-const Ee = ne.forwardRef(
+const Ee = te.forwardRef(
   ({
     data: t,
-    xKey: o,
-    yKey: a,
+    xKey: a,
+    yKey: o,
     orientation: y = "vertical",
-    stacked: f = !1,
+    stacked: m = !1,
     grouped: x = !1,
-    color: i,
+    color: c,
     height: M = 300,
-    showGrid: B = !0,
+    showGrid: z = !0,
     showTooltip: N = !0,
     showLegend: A = !1,
     animate: k = !0,
-    barRadius: T = 4,
-    xLabel: D,
+    barRadius: j = 4,
+    xLabel: P,
     yLabel: R,
-    seriesLabels: w,
-    className: Z,
-    ...E
-  }, q) => {
-    const { tooltip: U, show: O, hide: _ } = pe(), Q = le(), h = y === "vertical", X = k && !Q, b = Array.isArray(a) ? a : [a], c = b.length > 1, j = c ? b.map(
-      ($, L) => ae(
-        Array.isArray(i) ? i[L] : typeof i == "string" ? i : void 0,
+    seriesLabels: X,
+    className: E,
+    ...W
+  }, U) => {
+    const { tooltip: I, show: T, hide: B } = fe(), q = oe(), d = y === "vertical", w = k && !q, b = Array.isArray(o) ? o : [o], i = b.length > 1, V = i ? b.map(
+      ($, L) => re(
+        Array.isArray(c) ? c[L] : typeof c == "string" ? c : void 0,
         L
       )
     ) : [
-      ae(
-        typeof i == "string" ? i : Array.isArray(i) ? i[0] : void 0,
+      re(
+        typeof c == "string" ? c : Array.isArray(c) ? c[0] : void 0,
         0
       )
     ];
-    return /* @__PURE__ */ g(
-      re.div,
+    return /* @__PURE__ */ p(
+      ne.div,
       {
-        ref: q,
-        className: H("relative", Z),
-        ...X ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ie(E),
+        ref: U,
+        className: Q("relative", E),
+        ...w ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: le.fade } : {},
+        ...se(W),
         children: [
-          /* @__PURE__ */ e(be, { height: M, children: ({ width: $, height: L, margin: u }) => {
-            const s = t.map((G) => String(G[o]));
+          /* @__PURE__ */ e(xe, { height: M, children: ({ width: $, height: L, margin: u }) => {
+            const s = t.map((S) => String(S[a]));
             let l;
-            f ? l = Math.max(
+            m ? l = Math.max(
               ...t.map(
-                (G) => b.reduce((S, C) => S + (Number(G[C]) || 0), 0)
+                (S) => b.reduce((G, C) => G + (Number(S[C]) || 0), 0)
               )
             ) : l = Math.max(
-              ...t.flatMap((G) => b.map((S) => Number(G[S]) || 0))
+              ...t.flatMap((S) => b.map((G) => Number(S[G]) || 0))
             );
-            const p = Se().domain(s).range(h ? [0, $] : [0, L]).padding(0.2), n = oe().domain([0, l * 1.1]).range(h ? [L, 0] : [0, $]).nice(), r = p.bandwidth(), d = c && x ? r / b.length : r;
-            return /* @__PURE__ */ g(te, { children: [
-              B && /* @__PURE__ */ e(
-                fe,
+            const g = Ge().domain(s).range(d ? [0, $] : [0, L]).padding(0.2), n = ae().domain([0, l * 1.1]).range(d ? [L, 0] : [0, $]).nice(), r = g.bandwidth(), f = i && x ? r / b.length : r;
+            return /* @__PURE__ */ p(ee, { children: [
+              z && /* @__PURE__ */ e(
+                he,
                 {
                   width: $,
                   height: L,
-                  yScale: h ? n : void 0,
-                  xScale: h ? void 0 : n,
-                  horizontal: h,
-                  vertical: !h
+                  yScale: d ? n : void 0,
+                  xScale: d ? void 0 : n,
+                  horizontal: d,
+                  vertical: !d
                 }
               ),
-              t.map((G) => {
-                const S = String(G[o]);
+              t.map((S) => {
+                const G = String(S[a]);
                 let C = 0;
-                return b.map((W, m) => {
-                  const v = Number(G[W]) || 0, P = j[m] || j[0];
-                  let I, V, J, z;
-                  return h ? (I = (p(S) ?? 0) + (x && c ? m * d : 0), V = n(f ? C + v : v), J = d, z = f ? n(C) - n(C + v) : L - n(v)) : (I = f ? n(C) : 0, V = (p(S) ?? 0) + (x && c ? m * d : 0), J = f ? n(C + v) - n(C) : n(v), z = d), f && (C += v), /* @__PURE__ */ e(
+                return b.map((J, h) => {
+                  const v = Number(S[J]) || 0, _ = V[h] || V[0];
+                  let Y, F, H, D;
+                  return d ? (Y = (g(G) ?? 0) + (x && i ? h * f : 0), F = n(m ? C + v : v), H = f, D = m ? n(C) - n(C + v) : L - n(v)) : (Y = m ? n(C) : 0, F = (g(G) ?? 0) + (x && i ? h * f : 0), H = m ? n(C + v) - n(C) : n(v), D = f), m && (C += v), /* @__PURE__ */ e(
                     "rect",
                     {
-                      x: I,
-                      y: V,
-                      width: Math.max(0, J),
-                      height: Math.max(0, z),
-                      rx: T,
-                      fill: P,
+                      x: Y,
+                      y: F,
+                      width: Math.max(0, H),
+                      height: Math.max(0, D),
+                      rx: j,
+                      fill: _,
                       className: "transition-opacity hover:opacity-80",
-                      onMouseMove: (F) => {
-                        var Y;
+                      onMouseMove: (Z) => {
                         if (N) {
-                          const K = (Y = F.currentTarget.closest("div")) == null ? void 0 : Y.getBoundingClientRect();
-                          O(
-                            F.clientX - ((K == null ? void 0 : K.left) ?? 0),
-                            F.clientY - ((K == null ? void 0 : K.top) ?? 0),
-                            /* @__PURE__ */ g("div", { children: [
-                              /* @__PURE__ */ e("div", { className: "font-medium", children: S }),
-                              c && /* @__PURE__ */ e("div", { className: "text-surface-fg-muted", children: (w == null ? void 0 : w[m]) ?? W }),
+                          const O = Z.currentTarget.closest("div")?.getBoundingClientRect();
+                          T(
+                            Z.clientX - (O?.left ?? 0),
+                            Z.clientY - (O?.top ?? 0),
+                            /* @__PURE__ */ p("div", { children: [
+                              /* @__PURE__ */ e("div", { className: "font-medium", children: G }),
+                              i && /* @__PURE__ */ e("div", { className: "text-surface-fg-muted", children: X?.[h] ?? J }),
                               /* @__PURE__ */ e("div", { children: v.toLocaleString() })
                             ] })
                           );
                         }
                       },
-                      onMouseLeave: _
+                      onMouseLeave: B
                     },
-                    `${S}-${W}`
+                    `${G}-${J}`
                   );
                 });
               }),
-              h ? /* @__PURE__ */ g(te, { children: [
+              d ? /* @__PURE__ */ p(ee, { children: [
                 /* @__PURE__ */ e(
-                  ee,
+                  K,
                   {
-                    scale: p,
+                    scale: g,
                     orientation: "bottom",
                     transform: `translate(0,${L})`,
-                    label: D
+                    label: P
                   }
                 ),
-                /* @__PURE__ */ e(ee, { scale: n, orientation: "left", label: R })
-              ] }) : /* @__PURE__ */ g(te, { children: [
+                /* @__PURE__ */ e(K, { scale: n, orientation: "left", label: R })
+              ] }) : /* @__PURE__ */ p(ee, { children: [
                 /* @__PURE__ */ e(
-                  ee,
+                  K,
                   {
                     scale: n,
                     orientation: "bottom",
                     transform: `translate(0,${L})`,
-                    label: D
+                    label: P
                   }
                 ),
                 /* @__PURE__ */ e(
-                  ee,
+                  K,
                   {
-                    scale: p,
+                    scale: g,
                     orientation: "left",
                     label: R
                   }
@@ -328,13 +327,13 @@ const Ee = ne.forwardRef(
               ] })
             ] });
           } }),
-          N && /* @__PURE__ */ e(ue, { state: U }),
-          A && c && /* @__PURE__ */ e(
+          N && /* @__PURE__ */ e(ie, { state: I }),
+          A && i && /* @__PURE__ */ e(
             ce,
             {
               items: b.map(($, L) => ({
-                label: (w == null ? void 0 : w[L]) ?? $,
-                color: j[L]
+                label: X?.[L] ?? $,
+                color: V[L]
               })),
               className: "mt-ds-04"
             }
@@ -345,106 +344,105 @@ const Ee = ne.forwardRef(
   }
 );
 Ee.displayName = "BarChart";
-const Ue = ne.forwardRef(
+const Ue = te.forwardRef(
   ({
     data: t,
-    xKey: o,
-    series: a,
+    xKey: a,
+    series: o,
     curved: y = !1,
-    showDots: f = !1,
+    showDots: m = !1,
     dotSize: x = 4,
-    strokeWidth: i = 2,
+    strokeWidth: c = 2,
     height: M = 300,
-    showGrid: B = !0,
+    showGrid: z = !0,
     showTooltip: N = !0,
     showLegend: A = !1,
     animate: k = !0,
-    xLabel: T,
-    yLabel: D,
+    xLabel: j,
+    yLabel: P,
     className: R,
-    ...w
-  }, Z) => {
-    const { tooltip: E, show: q, hide: U } = pe(), O = le(), _ = k && !O, Q = a.map((h, X) => ae(h.color, X));
-    return /* @__PURE__ */ g(
-      re.div,
+    ...X
+  }, E) => {
+    const { tooltip: W, show: U, hide: I } = fe(), T = oe(), B = k && !T, q = o.map((d, w) => re(d.color, w));
+    return /* @__PURE__ */ p(
+      ne.div,
       {
-        ref: Z,
-        className: H("relative", R),
-        ..._ ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ie(w),
+        ref: E,
+        className: Q("relative", R),
+        ...B ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: le.fade } : {},
+        ...se(X),
         children: [
-          /* @__PURE__ */ e(be, { height: M, children: ({ width: h, height: X, margin: b }) => {
-            const c = t.map((r) => r[o]), j = c.every((r) => typeof r == "number");
+          /* @__PURE__ */ e(xe, { height: M, children: ({ width: d, height: w, margin: b }) => {
+            const i = t.map((r) => r[a]), V = i.every((r) => typeof r == "number");
             let $, L;
-            if (j) {
-              const r = c, d = Math.min(...r), G = Math.max(...r), S = oe().domain([d, G]).range([0, h]);
-              $ = S, L = (C) => S(Number(C[o]));
+            if (V) {
+              const r = i, f = Math.min(...r), S = Math.max(...r), G = ae().domain([f, S]).range([0, d]);
+              $ = G, L = (C) => G(Number(C[a]));
             } else {
-              const r = c.map(String), d = Ce().domain(r).range([0, h]).padding(0.5);
-              $ = d, L = (G) => d(String(G[o])) ?? 0;
+              const r = i.map(String), f = Ce().domain(r).range([0, d]).padding(0.5);
+              $ = f, L = (S) => f(String(S[a])) ?? 0;
             }
             const u = t.flatMap(
-              (r) => a.map((d) => Number(r[d.key]) || 0)
-            ), s = Math.max(...u), l = oe().domain([0, s * 1.1]).range([X, 0]).nice(), p = y ? de : Ae, n = he().curve(p).defined((r) => r != null);
-            return /* @__PURE__ */ g(te, { children: [
-              B && /* @__PURE__ */ e(
-                fe,
+              (r) => o.map((f) => Number(r[f.key]) || 0)
+            ), s = Math.max(...u), l = ae().domain([0, s * 1.1]).range([w, 0]).nice(), g = y ? ue : Ae, n = me().curve(g).defined((r) => r != null);
+            return /* @__PURE__ */ p(ee, { children: [
+              z && /* @__PURE__ */ e(
+                he,
                 {
-                  width: h,
-                  height: X,
+                  width: d,
+                  height: w,
                   yScale: l,
                   horizontal: !0
                 }
               ),
-              a.map((r, d) => {
-                const S = n.x((C) => L(C)).y((C) => l(Number(C[r.key]) || 0))(t) ?? "";
-                return /* @__PURE__ */ g("g", { children: [
+              o.map((r, f) => {
+                const G = n.x((C) => L(C)).y((C) => l(Number(C[r.key]) || 0))(t) ?? "";
+                return /* @__PURE__ */ p("g", { children: [
                   /* @__PURE__ */ e(
                     "path",
                     {
-                      d: S,
+                      d: G,
                       fill: "none",
-                      stroke: Q[d],
-                      strokeWidth: i,
+                      stroke: q[f],
+                      strokeWidth: c,
                       strokeLinejoin: "round",
                       strokeLinecap: "round"
                     }
                   ),
-                  f && t.map((C, W) => {
-                    const m = L(C), v = l(Number(C[r.key]) || 0);
+                  m && t.map((C, J) => {
+                    const h = L(C), v = l(Number(C[r.key]) || 0);
                     return /* @__PURE__ */ e(
                       "circle",
                       {
-                        cx: m,
+                        cx: h,
                         cy: v,
                         r: x,
-                        fill: Q[d],
+                        fill: q[f],
                         className: "transition-opacity hover:opacity-80"
                       },
-                      `${r.key}-dot-${W}`
+                      `${r.key}-dot-${J}`
                     );
                   })
                 ] }, r.key);
               }),
-              N && t.map((r, d) => {
-                const G = L(r), S = h / Math.max(t.length - 1, 1);
+              N && t.map((r, f) => {
+                const S = L(r), G = d / Math.max(t.length - 1, 1);
                 return /* @__PURE__ */ e(
                   "rect",
                   {
-                    x: G - S / 2,
+                    x: S - G / 2,
                     y: 0,
-                    width: S,
-                    height: X,
+                    width: G,
+                    height: w,
                     fill: "transparent",
                     onMouseMove: (C) => {
-                      var m;
-                      const W = (m = C.currentTarget.closest("div")) == null ? void 0 : m.getBoundingClientRect();
-                      q(
-                        C.clientX - ((W == null ? void 0 : W.left) ?? 0),
-                        C.clientY - ((W == null ? void 0 : W.top) ?? 0),
-                        /* @__PURE__ */ g("div", { children: [
-                          /* @__PURE__ */ e("div", { className: "font-medium", children: String(r[o]) }),
-                          a.map((v, P) => /* @__PURE__ */ g(
+                      const J = C.currentTarget.closest("div")?.getBoundingClientRect();
+                      U(
+                        C.clientX - (J?.left ?? 0),
+                        C.clientY - (J?.top ?? 0),
+                        /* @__PURE__ */ p("div", { children: [
+                          /* @__PURE__ */ e("div", { className: "font-medium", children: String(r[a]) }),
+                          o.map((h, v) => /* @__PURE__ */ p(
                             "div",
                             {
                               className: "flex items-center gap-ds-02",
@@ -453,46 +451,46 @@ const Ue = ne.forwardRef(
                                   "span",
                                   {
                                     className: "inline-block h-2 w-2 rounded-ds-full",
-                                    style: { backgroundColor: Q[P] }
+                                    style: { backgroundColor: q[v] }
                                   }
                                 ),
-                                /* @__PURE__ */ g("span", { className: "text-surface-fg-muted", children: [
-                                  v.label,
+                                /* @__PURE__ */ p("span", { className: "text-surface-fg-muted", children: [
+                                  h.label,
                                   ":"
                                 ] }),
                                 " ",
-                                Number(r[v.key]).toLocaleString()
+                                Number(r[h.key]).toLocaleString()
                               ]
                             },
-                            v.key
+                            h.key
                           ))
                         ] })
                       );
                     },
-                    onMouseLeave: U
+                    onMouseLeave: I
                   },
-                  `hover-${d}`
+                  `hover-${f}`
                 );
               }),
               /* @__PURE__ */ e(
-                ee,
+                K,
                 {
                   scale: $,
                   orientation: "bottom",
-                  transform: `translate(0,${X})`,
-                  label: T
+                  transform: `translate(0,${w})`,
+                  label: j
                 }
               ),
-              /* @__PURE__ */ e(ee, { scale: l, orientation: "left", label: D })
+              /* @__PURE__ */ e(K, { scale: l, orientation: "left", label: P })
             ] });
           } }),
-          N && /* @__PURE__ */ e(ue, { state: E }),
-          A && a.length > 1 && /* @__PURE__ */ e(
+          N && /* @__PURE__ */ e(ie, { state: W }),
+          A && o.length > 1 && /* @__PURE__ */ e(
             ce,
             {
-              items: a.map((h, X) => ({
-                label: h.label,
-                color: Q[X]
+              items: o.map((d, w) => ({
+                label: d.label,
+                color: q[w]
               })),
               className: "mt-ds-04"
             }
@@ -503,74 +501,73 @@ const Ue = ne.forwardRef(
   }
 );
 Ue.displayName = "LineChart";
-const Ze = ne.forwardRef(
+const Ze = te.forwardRef(
   ({
     data: t,
-    xKey: o,
-    series: a,
+    xKey: a,
+    series: o,
     curved: y = !1,
-    stacked: f = !1,
+    stacked: m = !1,
     fillOpacity: x = 0.3,
-    gradient: i = !1,
+    gradient: c = !1,
     strokeWidth: M = 2,
-    height: B = 300,
+    height: z = 300,
     showGrid: N = !0,
     showTooltip: A = !0,
     showLegend: k = !1,
-    animate: T = !0,
-    xLabel: D,
+    animate: j = !0,
+    xLabel: P,
     yLabel: R,
-    className: w,
-    ...Z
-  }, E) => {
-    const { tooltip: q, show: U, hide: O } = pe(), _ = le(), Q = T && !_, h = a.map((b, c) => ae(b.color, c)), X = ne.useId();
-    return /* @__PURE__ */ g(
-      re.div,
+    className: X,
+    ...E
+  }, W) => {
+    const { tooltip: U, show: I, hide: T } = fe(), B = oe(), q = j && !B, d = o.map((b, i) => re(b.color, i)), w = te.useId();
+    return /* @__PURE__ */ p(
+      ne.div,
       {
-        ref: E,
-        className: H("relative", w),
-        ...Q ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ie(Z),
+        ref: W,
+        className: Q("relative", X),
+        ...q ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: le.fade } : {},
+        ...se(E),
         children: [
-          /* @__PURE__ */ e(be, { height: B, children: ({ width: b, height: c, margin: j }) => {
-            const $ = t.map((m) => m[o]), L = $.every((m) => typeof m == "number");
+          /* @__PURE__ */ e(xe, { height: z, children: ({ width: b, height: i, margin: V }) => {
+            const $ = t.map((h) => h[a]), L = $.every((h) => typeof h == "number");
             let u, s, l;
             if (L) {
-              const m = $, v = Math.min(...m), P = Math.max(...m), I = oe().domain([v, P]).range([0, b]);
-              u = I, s = (V) => I(Number(V[o])), l = (V) => I(Number(t[V][o]));
+              const h = $, v = Math.min(...h), _ = Math.max(...h), Y = ae().domain([v, _]).range([0, b]);
+              u = Y, s = (F) => Y(Number(F[a])), l = (F) => Y(Number(t[F][a]));
             } else {
-              const m = $.map(String), v = Ce().domain(m).range([0, b]).padding(0.5);
-              u = v, s = (P) => v(String(P[o])) ?? 0, l = (P) => v(String(t[P][o])) ?? 0;
+              const h = $.map(String), v = Ce().domain(h).range([0, b]).padding(0.5);
+              u = v, s = (_) => v(String(_[a])) ?? 0, l = (_) => v(String(t[_][a])) ?? 0;
             }
-            let p;
-            f ? p = Math.max(
+            let g;
+            m ? g = Math.max(
               ...t.map(
-                (m) => a.reduce((v, P) => v + (Number(m[P.key]) || 0), 0)
+                (h) => o.reduce((v, _) => v + (Number(h[_.key]) || 0), 0)
               )
-            ) : p = Math.max(
+            ) : g = Math.max(
               ...t.flatMap(
-                (m) => a.map((v) => Number(m[v.key]) || 0)
+                (h) => o.map((v) => Number(h[v.key]) || 0)
               )
             );
-            const n = oe().domain([0, p * 1.1]).range([c, 0]).nice(), r = y ? de : Ae, d = () => t.map((m, v) => {
-              const P = s(m), I = b / Math.max(t.length - 1, 1);
+            const n = ae().domain([0, g * 1.1]).range([i, 0]).nice(), r = y ? ue : Ae, f = () => t.map((h, v) => {
+              const _ = s(h), Y = b / Math.max(t.length - 1, 1);
               return /* @__PURE__ */ e(
                 "rect",
                 {
-                  x: P - I / 2,
+                  x: _ - Y / 2,
                   y: 0,
-                  width: I,
-                  height: c,
+                  width: Y,
+                  height: i,
                   fill: "transparent",
-                  onMouseMove: (V) => {
-                    var z;
-                    const J = (z = V.currentTarget.closest("div")) == null ? void 0 : z.getBoundingClientRect();
-                    U(
-                      V.clientX - ((J == null ? void 0 : J.left) ?? 0),
-                      V.clientY - ((J == null ? void 0 : J.top) ?? 0),
-                      /* @__PURE__ */ g("div", { children: [
-                        /* @__PURE__ */ e("div", { className: "font-medium", children: String(m[o]) }),
-                        a.map((F, Y) => /* @__PURE__ */ g(
+                  onMouseMove: (F) => {
+                    const H = F.currentTarget.closest("div")?.getBoundingClientRect();
+                    I(
+                      F.clientX - (H?.left ?? 0),
+                      F.clientY - (H?.top ?? 0),
+                      /* @__PURE__ */ p("div", { children: [
+                        /* @__PURE__ */ e("div", { className: "font-medium", children: String(h[a]) }),
+                        o.map((D, Z) => /* @__PURE__ */ p(
                           "div",
                           {
                             className: "flex items-center gap-ds-02",
@@ -579,30 +576,30 @@ const Ze = ne.forwardRef(
                                 "span",
                                 {
                                   className: "inline-block h-2 w-2 rounded-ds-full",
-                                  style: { backgroundColor: h[Y] }
+                                  style: { backgroundColor: d[Z] }
                                 }
                               ),
-                              /* @__PURE__ */ g("span", { className: "text-surface-fg-muted", children: [
-                                F.label,
+                              /* @__PURE__ */ p("span", { className: "text-surface-fg-muted", children: [
+                                D.label,
                                 ":"
                               ] }),
                               " ",
-                              Number(m[F.key]).toLocaleString()
+                              Number(h[D.key]).toLocaleString()
                             ]
                           },
-                          F.key
+                          D.key
                         ))
                       ] })
                     );
                   },
-                  onMouseLeave: O
+                  onMouseLeave: T
                 },
                 `hover-${v}`
               );
-            }), G = () => i ? /* @__PURE__ */ e("defs", { children: a.map((m, v) => /* @__PURE__ */ g(
+            }), S = () => c ? /* @__PURE__ */ e("defs", { children: o.map((h, v) => /* @__PURE__ */ p(
               "linearGradient",
               {
-                id: `${X}-gradient-${v}`,
+                id: `${w}-gradient-${v}`,
                 x1: "0",
                 y1: "0",
                 x2: "0",
@@ -612,7 +609,7 @@ const Ze = ne.forwardRef(
                     "stop",
                     {
                       offset: "0%",
-                      stopColor: h[v],
+                      stopColor: d[v],
                       stopOpacity: x
                     }
                   ),
@@ -620,118 +617,118 @@ const Ze = ne.forwardRef(
                     "stop",
                     {
                       offset: "100%",
-                      stopColor: h[v],
+                      stopColor: d[v],
                       stopOpacity: 0.05
                     }
                   )
                 ]
               },
               `grad-${v}`
-            )) }) : null, S = () => /* @__PURE__ */ g(te, { children: [
+            )) }) : null, G = () => /* @__PURE__ */ p(ee, { children: [
               /* @__PURE__ */ e(
-                ee,
+                K,
                 {
                   scale: u,
                   orientation: "bottom",
-                  transform: `translate(0,${c})`,
-                  label: D
+                  transform: `translate(0,${i})`,
+                  label: P
                 }
               ),
-              /* @__PURE__ */ e(ee, { scale: n, orientation: "left", label: R })
+              /* @__PURE__ */ e(K, { scale: n, orientation: "left", label: R })
             ] });
-            if (f) {
-              const m = a.map((z) => z.key), v = _e().keys(m).order(je).offset(Te), P = t.map((z) => {
-                const F = { [o]: String(z[o]) };
-                for (const Y of a)
-                  F[Y.key] = Number(z[Y.key]) || 0;
-                return F;
-              }), I = v(P), V = Ne().curve(r).x((z, F) => l(F)).y0((z) => n(z[0])).y1((z) => n(z[1])), J = he().curve(r).x((z, F) => l(F)).y((z) => n(z[1]));
-              return /* @__PURE__ */ g(te, { children: [
-                G(),
+            if (m) {
+              const h = o.map((D) => D.key), v = _e().keys(h).order(je).offset(Te), _ = t.map((D) => {
+                const Z = { [a]: String(D[a]) };
+                for (const O of o)
+                  Z[O.key] = Number(D[O.key]) || 0;
+                return Z;
+              }), Y = v(_), F = Me().curve(r).x((D, Z) => l(Z)).y0((D) => n(D[0])).y1((D) => n(D[1])), H = me().curve(r).x((D, Z) => l(Z)).y((D) => n(D[1]));
+              return /* @__PURE__ */ p(ee, { children: [
+                S(),
                 N && /* @__PURE__ */ e(
-                  fe,
+                  he,
                   {
                     width: b,
-                    height: c,
+                    height: i,
                     yScale: n,
                     horizontal: !0
                   }
                 ),
-                [...I].reverse().map((z, F) => {
-                  const Y = I.length - 1 - F, K = z, we = V(K) ?? "", Le = J(K) ?? "", Ge = i ? `url(#${X}-gradient-${Y})` : h[Y];
-                  return /* @__PURE__ */ g("g", { children: [
+                [...Y].reverse().map((D, Z) => {
+                  const O = Y.length - 1 - Z, Ne = D, Le = F(Ne) ?? "", Se = H(Ne) ?? "", we = c ? `url(#${w}-gradient-${O})` : d[O];
+                  return /* @__PURE__ */ p("g", { children: [
                     /* @__PURE__ */ e(
                       "path",
                       {
-                        d: we,
-                        fill: Ge,
-                        opacity: i ? 1 : x
+                        d: Le,
+                        fill: we,
+                        opacity: c ? 1 : x
                       }
                     ),
                     /* @__PURE__ */ e(
                       "path",
                       {
-                        d: Le,
+                        d: Se,
                         fill: "none",
-                        stroke: h[Y],
+                        stroke: d[O],
                         strokeWidth: M,
                         strokeLinejoin: "round",
                         strokeLinecap: "round"
                       }
                     )
-                  ] }, a[Y].key);
+                  ] }, o[O].key);
                 }),
-                A && d(),
-                S()
+                A && f(),
+                G()
               ] });
             }
-            const C = Ne().curve(r).defined((m) => m != null), W = he().curve(r).defined((m) => m != null);
-            return /* @__PURE__ */ g(te, { children: [
-              G(),
+            const C = Me().curve(r).defined((h) => h != null), J = me().curve(r).defined((h) => h != null);
+            return /* @__PURE__ */ p(ee, { children: [
+              S(),
               N && /* @__PURE__ */ e(
-                fe,
+                he,
                 {
                   width: b,
-                  height: c,
+                  height: i,
                   yScale: n,
                   horizontal: !0
                 }
               ),
-              [...a].reverse().map((m, v) => {
-                const P = a.length - 1 - v, I = C.x((Y) => s(Y)).y0(c).y1((Y) => n(Number(Y[m.key]) || 0)), V = W.x((Y) => s(Y)).y((Y) => n(Number(Y[m.key]) || 0)), J = I(t) ?? "", z = V(t) ?? "", F = i ? `url(#${X}-gradient-${P})` : h[P];
-                return /* @__PURE__ */ g("g", { children: [
+              [...o].reverse().map((h, v) => {
+                const _ = o.length - 1 - v, Y = C.x((O) => s(O)).y0(i).y1((O) => n(Number(O[h.key]) || 0)), F = J.x((O) => s(O)).y((O) => n(Number(O[h.key]) || 0)), H = Y(t) ?? "", D = F(t) ?? "", Z = c ? `url(#${w}-gradient-${_})` : d[_];
+                return /* @__PURE__ */ p("g", { children: [
                   /* @__PURE__ */ e(
                     "path",
                     {
-                      d: J,
-                      fill: F,
-                      opacity: i ? 1 : x
+                      d: H,
+                      fill: Z,
+                      opacity: c ? 1 : x
                     }
                   ),
                   /* @__PURE__ */ e(
                     "path",
                     {
-                      d: z,
+                      d: D,
                       fill: "none",
-                      stroke: h[P],
+                      stroke: d[_],
                       strokeWidth: M,
                       strokeLinejoin: "round",
                       strokeLinecap: "round"
                     }
                   )
-                ] }, m.key);
+                ] }, h.key);
               }),
-              A && d(),
-              S()
+              A && f(),
+              G()
             ] });
           } }),
-          A && /* @__PURE__ */ e(ue, { state: q }),
-          k && a.length > 1 && /* @__PURE__ */ e(
+          A && /* @__PURE__ */ e(ie, { state: U }),
+          k && o.length > 1 && /* @__PURE__ */ e(
             ce,
             {
-              items: a.map((b, c) => ({
+              items: o.map((b, i) => ({
                 label: b.label,
-                color: h[c]
+                color: d[i]
               })),
               className: "mt-ds-04"
             }
@@ -742,78 +739,77 @@ const Ze = ne.forwardRef(
   }
 );
 Ze.displayName = "AreaChart";
-const qe = ne.forwardRef(
+const qe = te.forwardRef(
   ({
     data: t,
-    variant: o = "pie",
-    innerRadius: a = 0.6,
+    variant: a = "pie",
+    innerRadius: o = 0.6,
     padAngle: y = 0,
-    cornerRadius: f = 0,
+    cornerRadius: m = 0,
     height: x = 300,
-    showTooltip: i = !0,
+    showTooltip: c = !0,
     showLegend: M = !1,
-    showLabels: B = !1,
+    showLabels: z = !1,
     animate: N = !0,
     className: A,
     centerLabel: k,
-    ...T
-  }, D) => {
-    const R = ye(null), [w, Z] = me(0), [E, q] = me(null), { tooltip: U, show: O, hide: _ } = pe(), Q = le(), h = N && !Q;
-    xe(() => {
+    ...j
+  }, P) => {
+    const R = ve(null), [X, E] = de(0), [W, U] = de(null), { tooltip: I, show: T, hide: B } = fe(), q = oe(), d = N && !q;
+    ye(() => {
       if (!R.current) return;
       const n = new ResizeObserver((r) => {
-        const d = r[0];
-        d && Z(d.contentRect.width);
+        const f = r[0];
+        f && E(f.contentRect.width);
       });
       return n.observe(R.current), () => n.disconnect();
     }, []);
-    const b = (w > 0 ? Math.min(w, x) : x) / 2, c = o === "donut" ? b * a : 0, j = t.map((n, r) => ae(n.color, r)), $ = t.reduce((n, r) => n + r.value, 0), u = Ye().value((n) => n.value).padAngle(y).sort(null)(t), s = ve().innerRadius(c).outerRadius(b - 2).cornerRadius(f), l = c + (b - 2 - c) * 0.7, p = ve().innerRadius(l).outerRadius(l);
-    return /* @__PURE__ */ g(
-      re.div,
+    const b = (X > 0 ? Math.min(X, x) : x) / 2, i = a === "donut" ? b * o : 0, V = t.map((n, r) => re(n.color, r)), $ = t.reduce((n, r) => n + r.value, 0), u = Ye().value((n) => n.value).padAngle(y).sort(null)(t), s = ge().innerRadius(i).outerRadius(b - 2).cornerRadius(m), l = i + (b - 2 - i) * 0.7, g = ge().innerRadius(l).outerRadius(l);
+    return /* @__PURE__ */ p(
+      ne.div,
       {
         ref: (n) => {
-          R.current = n, typeof D == "function" ? D(n) : D && (D.current = n);
+          R.current = n, typeof P == "function" ? P(n) : P && (P.current = n);
         },
-        className: H("relative w-full", A),
-        ...h ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ie(T),
+        className: Q("relative w-full", A),
+        ...d ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: le.fade } : {},
+        ...se(j),
         children: [
-          w > 0 && /* @__PURE__ */ g(te, { children: [
+          X > 0 && /* @__PURE__ */ p(ee, { children: [
             /* @__PURE__ */ e(
               "svg",
               {
-                width: w,
+                width: X,
                 height: x,
                 role: "img",
                 "aria-label": "Pie chart",
-                children: /* @__PURE__ */ g("g", { transform: `translate(${w / 2},${x / 2})`, children: [
+                children: /* @__PURE__ */ p("g", { transform: `translate(${X / 2},${x / 2})`, children: [
                   u.map((n, r) => {
-                    const d = s(n);
-                    if (!d) return null;
-                    const [G, S] = s.centroid(n), C = Math.atan2(S, G), W = Math.cos(C) * 4, m = Math.sin(C) * 4, v = E === r;
+                    const f = s(n);
+                    if (!f) return null;
+                    const [S, G] = s.centroid(n), C = Math.atan2(G, S), J = Math.cos(C) * 4, h = Math.sin(C) * 4, v = W === r;
                     return /* @__PURE__ */ e(
                       "path",
                       {
-                        d,
-                        fill: j[r],
+                        d: f,
+                        fill: V[r],
                         className: "cursor-pointer transition-transform",
                         style: {
-                          transform: v ? `translate(${W}px, ${m}px)` : void 0
+                          transform: v ? `translate(${J}px, ${h}px)` : void 0
                         },
-                        onMouseEnter: () => q(r),
-                        onMouseMove: (P) => {
-                          var I;
-                          if (i) {
-                            const V = (I = P.currentTarget.closest("div")) == null ? void 0 : I.getBoundingClientRect(), J = $ > 0 ? (n.data.value / $ * 100).toFixed(1) : "0";
-                            O(
-                              P.clientX - ((V == null ? void 0 : V.left) ?? 0),
-                              P.clientY - ((V == null ? void 0 : V.top) ?? 0),
-                              /* @__PURE__ */ g("div", { children: [
+                        onMouseEnter: () => U(r),
+                        onMouseMove: (_) => {
+                          if (c) {
+                            const Y = _.currentTarget.closest("div")?.getBoundingClientRect(), F = $ > 0 ? (n.data.value / $ * 100).toFixed(1) : "0";
+                            T(
+                              _.clientX - (Y?.left ?? 0),
+                              _.clientY - (Y?.top ?? 0),
+                              /* @__PURE__ */ p("div", { children: [
                                 /* @__PURE__ */ e("div", { className: "font-medium", children: n.data.label }),
-                                /* @__PURE__ */ g("div", { children: [
+                                /* @__PURE__ */ p("div", { children: [
                                   n.data.value.toLocaleString(),
                                   " (",
-                                  J,
+                                  F,
                                   "%)"
                                 ] })
                               ] })
@@ -821,51 +817,51 @@ const qe = ne.forwardRef(
                           }
                         },
                         onMouseLeave: () => {
-                          q(null), _();
+                          U(null), B();
                         }
                       },
                       `slice-${n.data.label}-${r}`
                     );
                   }),
-                  B && u.map((n, r) => {
-                    const [d, G] = p.centroid(n), S = $ > 0 ? (n.data.value / $ * 100).toFixed(0) : "0";
-                    return $ > 0 && n.data.value / $ < 0.03 ? null : /* @__PURE__ */ g(
+                  z && u.map((n, r) => {
+                    const [f, S] = g.centroid(n), G = $ > 0 ? (n.data.value / $ * 100).toFixed(0) : "0";
+                    return $ > 0 && n.data.value / $ < 0.03 ? null : /* @__PURE__ */ p(
                       "text",
                       {
-                        x: d,
-                        y: G,
+                        x: f,
+                        y: S,
                         textAnchor: "middle",
                         dominantBaseline: "central",
                         className: "pointer-events-none fill-accent-fg text-ds-xs font-medium",
                         children: [
-                          S,
+                          G,
                           "%"
                         ]
                       },
                       `label-${n.data.label}-${r}`
                     );
                   }),
-                  o === "donut" && k && c > 0 && /* @__PURE__ */ e(
+                  a === "donut" && k && i > 0 && /* @__PURE__ */ e(
                     "foreignObject",
                     {
-                      x: -c * 0.7,
-                      y: -c * 0.7,
-                      width: c * 1.4,
-                      height: c * 1.4,
+                      x: -i * 0.7,
+                      y: -i * 0.7,
+                      width: i * 1.4,
+                      height: i * 1.4,
                       children: /* @__PURE__ */ e("div", { className: "flex h-full w-full items-center justify-center text-center text-surface-fg", children: k })
                     }
                   )
                 ] })
               }
             ),
-            i && /* @__PURE__ */ e(ue, { state: U })
+            c && /* @__PURE__ */ e(ie, { state: I })
           ] }),
           M && /* @__PURE__ */ e(
             ce,
             {
               items: t.map((n, r) => ({
                 label: n.label,
-                color: j[r]
+                color: V[r]
               })),
               className: "mt-ds-04"
             }
@@ -876,47 +872,47 @@ const qe = ne.forwardRef(
   }
 );
 qe.displayName = "PieChart";
-const $e = { duration: 1, ease: "easeOut" }, Je = ne.forwardRef(
+const $e = { duration: 1, ease: "easeOut" }, Je = te.forwardRef(
   ({
     data: t,
-    variant: o = "line",
-    width: a = 120,
+    variant: a = "line",
+    width: o = 120,
     height: y = 32,
-    color: f,
+    color: m,
     showLastDot: x = !1,
-    strokeWidth: i = 1.5,
+    strokeWidth: c = 1.5,
     animate: M = !0,
-    className: B,
+    className: z,
     ...N
   }, A) => {
-    const k = ae(f, 0), T = le(), D = M && !T;
+    const k = re(m, 0), j = oe(), P = M && !j;
     if (!t.length) return null;
-    const R = o === "bar" ? 1 : i, w = a - R * 2, Z = y - R * 2, E = oe().domain([0, Math.max(t.length - 1, 1)]).range([R, R + w]), q = Math.min(...t), U = Math.max(...t), O = q === U ? [q - 1, U + 1] : [q, U], _ = oe().domain(O).range([R + Z, R]);
-    if (o === "bar") {
-      const j = Math.max(
+    const R = a === "bar" ? 1 : c, X = o - R * 2, E = y - R * 2, W = ae().domain([0, Math.max(t.length - 1, 1)]).range([R, R + X]), U = Math.min(...t), I = Math.max(...t), T = U === I ? [U - 1, I + 1] : [U, I], B = ae().domain(T).range([R + E, R]);
+    if (a === "bar") {
+      const V = Math.max(
         1,
-        (w - 1 * (t.length - 1)) / t.length
-      ), $ = R + Z;
+        (X - 1 * (t.length - 1)) / t.length
+      ), $ = R + E;
       return /* @__PURE__ */ e(
         "svg",
         {
           ref: A,
-          width: a,
+          width: o,
           height: y,
           role: "img",
           "aria-label": "Sparkline bar chart",
-          className: H("inline-block align-middle", B),
+          className: Q("inline-block align-middle", z),
           ...N,
           children: t.map((L, u) => {
-            const s = R + u * (j + 1), l = _(L), p = Math.max(1, $ - l);
+            const s = R + u * (V + 1), l = B(L), g = Math.max(1, $ - l);
             return /* @__PURE__ */ e(
               "rect",
               {
                 x: s,
                 y: l,
-                width: j,
-                height: p,
-                rx: Math.min(1, j / 2),
+                width: V,
+                height: g,
+                rx: Math.min(1, V / 2),
                 fill: k
               },
               u
@@ -925,27 +921,27 @@ const $e = { duration: 1, ease: "easeOut" }, Je = ne.forwardRef(
         }
       );
     }
-    if (o === "area") {
-      const c = Ne().curve(de).x((l, p) => E(p)).y0(R + Z).y1((l) => _(l)), j = he().curve(de).x((l, p) => E(p)).y((l) => _(l)), $ = c(t) ?? "", L = j(t) ?? "", u = E(t.length - 1), s = _(t[t.length - 1]);
-      return /* @__PURE__ */ g(
+    if (a === "area") {
+      const i = Me().curve(ue).x((l, g) => W(g)).y0(R + E).y1((l) => B(l)), V = me().curve(ue).x((l, g) => W(g)).y((l) => B(l)), $ = i(t) ?? "", L = V(t) ?? "", u = W(t.length - 1), s = B(t[t.length - 1]);
+      return /* @__PURE__ */ p(
         "svg",
         {
           ref: A,
-          width: a,
+          width: o,
           height: y,
           role: "img",
           "aria-label": "Sparkline area chart",
-          className: H("inline-block align-middle", B),
+          className: Q("inline-block align-middle", z),
           ...N,
           children: [
             /* @__PURE__ */ e("path", { d: $, fill: k, opacity: 0.2 }),
-            D ? /* @__PURE__ */ e(
-              re.path,
+            P ? /* @__PURE__ */ e(
+              ne.path,
               {
                 d: L,
                 fill: "none",
                 stroke: k,
-                strokeWidth: i,
+                strokeWidth: c,
                 strokeLinejoin: "round",
                 strokeLinecap: "round",
                 initial: { pathLength: 0 },
@@ -958,7 +954,7 @@ const $e = { duration: 1, ease: "easeOut" }, Je = ne.forwardRef(
                 d: L,
                 fill: "none",
                 stroke: k,
-                strokeWidth: i,
+                strokeWidth: c,
                 strokeLinejoin: "round",
                 strokeLinecap: "round"
               }
@@ -968,7 +964,7 @@ const $e = { duration: 1, ease: "easeOut" }, Je = ne.forwardRef(
               {
                 cx: u,
                 cy: s,
-                r: i + 1,
+                r: c + 1,
                 fill: k
               }
             )
@@ -976,25 +972,25 @@ const $e = { duration: 1, ease: "easeOut" }, Je = ne.forwardRef(
         }
       );
     }
-    const h = he().curve(de).x((c, j) => E(j)).y((c) => _(c))(t) ?? "", X = E(t.length - 1), b = _(t[t.length - 1]);
-    return /* @__PURE__ */ g(
+    const d = me().curve(ue).x((i, V) => W(V)).y((i) => B(i))(t) ?? "", w = W(t.length - 1), b = B(t[t.length - 1]);
+    return /* @__PURE__ */ p(
       "svg",
       {
         ref: A,
-        width: a,
+        width: o,
         height: y,
         role: "img",
         "aria-label": "Sparkline chart",
-        className: H("inline-block align-middle", B),
+        className: Q("inline-block align-middle", z),
         ...N,
         children: [
-          D ? /* @__PURE__ */ e(
-            re.path,
+          P ? /* @__PURE__ */ e(
+            ne.path,
             {
-              d: h,
+              d,
               fill: "none",
               stroke: k,
-              strokeWidth: i,
+              strokeWidth: c,
               strokeLinejoin: "round",
               strokeLinecap: "round",
               initial: { pathLength: 0 },
@@ -1004,10 +1000,10 @@ const $e = { duration: 1, ease: "easeOut" }, Je = ne.forwardRef(
           ) : /* @__PURE__ */ e(
             "path",
             {
-              d: h,
+              d,
               fill: "none",
               stroke: k,
-              strokeWidth: i,
+              strokeWidth: c,
               strokeLinejoin: "round",
               strokeLinecap: "round"
             }
@@ -1015,9 +1011,9 @@ const $e = { duration: 1, ease: "easeOut" }, Je = ne.forwardRef(
           x && /* @__PURE__ */ e(
             "circle",
             {
-              cx: X,
+              cx: w,
               cy: b,
-              r: i + 1,
+              r: c + 1,
               fill: k
             }
           )
@@ -1027,44 +1023,44 @@ const $e = { duration: 1, ease: "easeOut" }, Je = ne.forwardRef(
   }
 );
 Je.displayName = "Sparkline";
-const ge = (t) => t * Math.PI / 180, Qe = ne.forwardRef(
+const pe = (t) => t * Math.PI / 180, Qe = te.forwardRef(
   ({
     value: t,
-    max: o = 100,
-    min: a = 0,
+    max: a = 100,
+    min: o = 0,
     label: y,
-    valueLabel: f,
+    valueLabel: m,
     color: x,
-    trackColor: i = "var(--color-surface-border)",
+    trackColor: c = "var(--color-surface-border)",
     height: M = 200,
-    startAngle: B = -120,
+    startAngle: z = -120,
     endAngle: N = 120,
     thickness: A = 16,
     animate: k = !0,
-    className: T,
-    ...D
+    className: j,
+    ...P
   }, R) => {
-    const w = le(), Z = Fe(w, k ? 600 : 0), E = k && !w, q = ae(x, 0), U = M, O = U / 2, _ = Math.min(Math.max(t, a), o), Q = o === a ? 0 : (_ - a) / (o - a), h = B + (N - B) * Q, X = typeof f == "function" ? f(_) : typeof f == "string" ? f : String(_), b = ve().innerRadius(O - A).outerRadius(O).startAngle(ge(B)).endAngle(ge(N)).cornerRadius(A / 2), c = ve().innerRadius(O - A).outerRadius(O).startAngle(ge(B)).endAngle(ge(h)).cornerRadius(A / 2), j = b(null) ?? "", $ = c(null) ?? "";
+    const X = oe(), E = Fe(X, k ? 600 : 0), W = k && !X, U = re(x, 0), I = M, T = I / 2, B = Math.min(Math.max(t, o), a), q = a === o ? 0 : (B - o) / (a - o), d = z + (N - z) * q, w = typeof m == "function" ? m(B) : typeof m == "string" ? m : String(B), b = ge().innerRadius(T - A).outerRadius(T).startAngle(pe(z)).endAngle(pe(N)).cornerRadius(A / 2), i = ge().innerRadius(T - A).outerRadius(T).startAngle(pe(z)).endAngle(pe(d)).cornerRadius(A / 2), V = b(null) ?? "", $ = i(null) ?? "";
     return /* @__PURE__ */ e(
-      re.div,
+      ne.div,
       {
         ref: R,
-        className: H("inline-flex flex-col items-center", T),
-        ...E ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ie(D),
+        className: Q("inline-flex flex-col items-center", j),
+        ...W ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: le.fade } : {},
+        ...se(P),
         role: "meter",
-        "aria-valuenow": _,
-        "aria-valuemin": a,
-        "aria-valuemax": o,
+        "aria-valuenow": B,
+        "aria-valuemin": o,
+        "aria-valuemax": a,
         "aria-label": y ?? "Gauge chart",
-        children: /* @__PURE__ */ e("svg", { width: U, height: U, role: "img", "aria-hidden": "true", children: /* @__PURE__ */ g("g", { transform: `translate(${O},${O})`, children: [
-          /* @__PURE__ */ e("path", { d: j, fill: i }),
+        children: /* @__PURE__ */ e("svg", { width: I, height: I, role: "img", "aria-hidden": "true", children: /* @__PURE__ */ p("g", { transform: `translate(${T},${T})`, children: [
+          /* @__PURE__ */ e("path", { d: V, fill: c }),
           /* @__PURE__ */ e(
             "path",
             {
               d: $,
-              fill: q,
-              style: Z > 0 ? { transition: `d ${Z}ms ease-out` } : void 0
+              fill: U,
+              style: E > 0 ? { transition: `d ${E}ms ease-out` } : void 0
             }
           ),
           /* @__PURE__ */ e(
@@ -1075,7 +1071,7 @@ const ge = (t) => t * Math.PI / 180, Qe = ne.forwardRef(
               textAnchor: "middle",
               dominantBaseline: "central",
               className: "fill-surface-fg text-ds-2xl font-semibold",
-              children: X
+              children: w
             }
           ),
           y && /* @__PURE__ */ e(
@@ -1095,72 +1091,69 @@ const ge = (t) => t * Math.PI / 180, Qe = ne.forwardRef(
   }
 );
 Qe.displayName = "GaugeChart";
-const He = ne.forwardRef(
+const He = te.forwardRef(
   ({
     data: t,
-    axes: o,
-    series: a,
+    axes: a,
+    series: o,
     maxValue: y,
-    levels: f = 5,
+    levels: m = 5,
     fillOpacity: x = 0.25,
-    showDots: i = !1,
+    showDots: c = !1,
     height: M = 300,
-    showTooltip: B = !0,
+    showTooltip: z = !0,
     showLegend: N = !1,
     animate: A = !0,
     className: k,
-    ...T
-  }, D) => {
-    const R = ye(null), [w, Z] = me(0), { tooltip: E, show: q, hide: U } = pe(), O = le(), _ = A && !O;
-    xe(() => {
+    ...j
+  }, P) => {
+    const R = ve(null), [X, E] = de(0), { tooltip: W, show: U, hide: I } = fe(), T = oe(), B = A && !T;
+    ye(() => {
       if (!R.current) return;
       const u = new ResizeObserver((s) => {
         const l = s[0];
-        l && Z(l.contentRect.width);
+        l && E(l.contentRect.width);
       });
       return u.observe(R.current), () => u.disconnect();
     }, []);
-    const h = (w > 0 ? Math.min(w, M) : M) / 2 - 40, X = a.map((u, s) => ae(u.color, s)), b = y ?? Math.max(
-      ...t.flatMap((u) => a.map((s) => Number(u[s.key]) || 0)),
+    const d = (X > 0 ? Math.min(X, M) : M) / 2 - 40, w = o.map((u, s) => re(u.color, s)), b = y ?? Math.max(
+      ...t.flatMap((u) => o.map((s) => Number(u[s.key]) || 0)),
       1
-    ), c = 2 * Math.PI / o.length, j = Oe().radius((u) => h * u / b).angle((u, s) => s * c).curve(We), $ = (u) => o.map((s, l) => {
-      var p;
-      return Number((p = t[l]) == null ? void 0 : p[u]) || 0;
-    }), L = (u, s) => {
-      const l = c * u - Math.PI / 2, p = h * s / b;
+    ), i = 2 * Math.PI / a.length, V = Oe().radius((u) => d * u / b).angle((u, s) => s * i).curve(We), $ = (u) => a.map((s, l) => Number(t[l]?.[u]) || 0), L = (u, s) => {
+      const l = i * u - Math.PI / 2, g = d * s / b;
       return {
-        x: p * Math.cos(l),
-        y: p * Math.sin(l)
+        x: g * Math.cos(l),
+        y: g * Math.sin(l)
       };
     };
-    return /* @__PURE__ */ g(
-      re.div,
+    return /* @__PURE__ */ p(
+      ne.div,
       {
         ref: (u) => {
-          R.current = u, typeof D == "function" ? D(u) : D && (D.current = u);
+          R.current = u, typeof P == "function" ? P(u) : P && (P.current = u);
         },
-        className: H("relative w-full", k),
-        ..._ ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: se.fade } : {},
-        ...ie(T),
+        className: Q("relative w-full", k),
+        ...B ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: le.fade } : {},
+        ...se(j),
         children: [
-          w > 0 && /* @__PURE__ */ g(te, { children: [
+          X > 0 && /* @__PURE__ */ p(ee, { children: [
             /* @__PURE__ */ e(
               "svg",
               {
-                width: w,
+                width: X,
                 height: M,
                 role: "img",
                 "aria-label": "Radar chart",
-                children: /* @__PURE__ */ g("g", { transform: `translate(${w / 2},${M / 2})`, children: [
-                  Array.from({ length: f }, (u, s) => {
-                    const l = h / f * (s + 1), p = o.map((n, r) => {
-                      const d = c * r - Math.PI / 2;
-                      return `${l * Math.cos(d)},${l * Math.sin(d)}`;
+                children: /* @__PURE__ */ p("g", { transform: `translate(${X / 2},${M / 2})`, children: [
+                  Array.from({ length: m }, (u, s) => {
+                    const l = d / m * (s + 1), g = a.map((n, r) => {
+                      const f = i * r - Math.PI / 2;
+                      return `${l * Math.cos(f)},${l * Math.sin(f)}`;
                     }).join(" ");
                     return /* @__PURE__ */ e(
                       "polygon",
                       {
-                        points: p,
+                        points: g,
                         fill: "none",
                         stroke: "var(--color-surface-border)",
                         strokeDasharray: "3,3",
@@ -1169,14 +1162,14 @@ const He = ne.forwardRef(
                       `grid-${s}`
                     );
                   }),
-                  o.map((u, s) => {
-                    const l = c * s - Math.PI / 2, p = h * Math.cos(l), n = h * Math.sin(l);
+                  a.map((u, s) => {
+                    const l = i * s - Math.PI / 2, g = d * Math.cos(l), n = d * Math.sin(l);
                     return /* @__PURE__ */ e(
                       "line",
                       {
                         x1: 0,
                         y1: 0,
-                        x2: p,
+                        x2: g,
                         y2: n,
                         stroke: "var(--color-surface-border)",
                         strokeWidth: 1
@@ -1184,15 +1177,15 @@ const He = ne.forwardRef(
                       `axis-${s}`
                     );
                   }),
-                  o.map((u, s) => {
-                    const l = c * s - Math.PI / 2, p = h + 18, n = p * Math.cos(l), r = p * Math.sin(l);
-                    let d = "middle";
-                    return Math.abs(Math.cos(l)) > 0.1 && (d = Math.cos(l) > 0 ? "start" : "end"), /* @__PURE__ */ e(
+                  a.map((u, s) => {
+                    const l = i * s - Math.PI / 2, g = d + 18, n = g * Math.cos(l), r = g * Math.sin(l);
+                    let f = "middle";
+                    return Math.abs(Math.cos(l)) > 0.1 && (f = Math.cos(l) > 0 ? "start" : "end"), /* @__PURE__ */ e(
                       "text",
                       {
                         x: n,
                         y: r,
-                        textAnchor: d,
+                        textAnchor: f,
                         dominantBaseline: "central",
                         className: "fill-surface-fg-muted text-ds-xs",
                         children: u
@@ -1200,13 +1193,13 @@ const He = ne.forwardRef(
                       `label-${s}`
                     );
                   }),
-                  Array.from({ length: f }, (u, s) => {
-                    const l = Math.round(b / f * (s + 1)), p = h / f * (s + 1), n = -Math.PI / 2, r = p * Math.cos(n) + 4, d = p * Math.sin(n);
+                  Array.from({ length: m }, (u, s) => {
+                    const l = Math.round(b / m * (s + 1)), g = d / m * (s + 1), n = -Math.PI / 2, r = g * Math.cos(n) + 4, f = g * Math.sin(n);
                     return /* @__PURE__ */ e(
                       "text",
                       {
                         x: r,
-                        y: d,
+                        y: f,
                         textAnchor: "start",
                         dominantBaseline: "auto",
                         className: "fill-surface-fg-subtle text-ds-xs",
@@ -1215,29 +1208,29 @@ const He = ne.forwardRef(
                       `level-label-${s}`
                     );
                   }),
-                  a.map((u, s) => {
-                    const l = $(u.key), p = j(l);
-                    return p ? /* @__PURE__ */ g("g", { children: [
+                  o.map((u, s) => {
+                    const l = $(u.key), g = V(l);
+                    return g ? /* @__PURE__ */ p("g", { children: [
                       /* @__PURE__ */ e(
                         "path",
                         {
-                          d: p,
-                          fill: X[s],
+                          d: g,
+                          fill: w[s],
                           fillOpacity: x,
-                          stroke: X[s],
+                          stroke: w[s],
                           strokeWidth: 2,
                           strokeLinejoin: "round"
                         }
                       ),
-                      i && l.map((n, r) => {
-                        const { x: d, y: G } = L(r, n);
+                      c && l.map((n, r) => {
+                        const { x: f, y: S } = L(r, n);
                         return /* @__PURE__ */ e(
                           "circle",
                           {
-                            cx: d,
-                            cy: G,
+                            cx: f,
+                            cy: S,
                             r: 4,
-                            fill: X[s],
+                            fill: w[s],
                             stroke: "var(--color-surface-base)",
                             strokeWidth: 2,
                             className: "transition-opacity"
@@ -1247,28 +1240,26 @@ const He = ne.forwardRef(
                       })
                     ] }, u.key) : null;
                   }),
-                  B && o.map((u, s) => {
-                    const l = c * s - Math.PI / 2, p = h * Math.cos(l), n = h * Math.sin(l);
+                  z && a.map((u, s) => {
+                    const l = i * s - Math.PI / 2, g = d * Math.cos(l), n = d * Math.sin(l);
                     return /* @__PURE__ */ e(
                       "circle",
                       {
-                        cx: p,
+                        cx: g,
                         cy: n,
                         r: 16,
                         fill: "transparent",
                         className: "cursor-pointer",
                         onMouseMove: (r) => {
-                          var G;
-                          const d = (G = r.currentTarget.closest("div")) == null ? void 0 : G.getBoundingClientRect();
-                          q(
-                            r.clientX - ((d == null ? void 0 : d.left) ?? 0),
-                            r.clientY - ((d == null ? void 0 : d.top) ?? 0),
-                            /* @__PURE__ */ g("div", { children: [
+                          const f = r.currentTarget.closest("div")?.getBoundingClientRect();
+                          U(
+                            r.clientX - (f?.left ?? 0),
+                            r.clientY - (f?.top ?? 0),
+                            /* @__PURE__ */ p("div", { children: [
                               /* @__PURE__ */ e("div", { className: "font-medium", children: u }),
-                              a.map((S, C) => {
-                                var m;
-                                const W = Number((m = t[s]) == null ? void 0 : m[S.key]) || 0;
-                                return /* @__PURE__ */ g(
+                              o.map((S, G) => {
+                                const C = Number(t[s]?.[S.key]) || 0;
+                                return /* @__PURE__ */ p(
                                   "div",
                                   {
                                     className: "flex items-center gap-ds-02",
@@ -1277,15 +1268,15 @@ const He = ne.forwardRef(
                                         "span",
                                         {
                                           className: "inline-block h-2 w-2 rounded-ds-full",
-                                          style: { backgroundColor: X[C] }
+                                          style: { backgroundColor: w[G] }
                                         }
                                       ),
-                                      /* @__PURE__ */ g("span", { className: "text-surface-fg-muted", children: [
+                                      /* @__PURE__ */ p("span", { className: "text-surface-fg-muted", children: [
                                         S.label,
                                         ":"
                                       ] }),
                                       " ",
-                                      W.toLocaleString()
+                                      C.toLocaleString()
                                     ]
                                   },
                                   S.key
@@ -1294,7 +1285,7 @@ const He = ne.forwardRef(
                             ] })
                           );
                         },
-                        onMouseLeave: U
+                        onMouseLeave: I
                       },
                       `hover-${s}`
                     );
@@ -1302,14 +1293,14 @@ const He = ne.forwardRef(
                 ] })
               }
             ),
-            B && /* @__PURE__ */ e(ue, { state: E })
+            z && /* @__PURE__ */ e(ie, { state: W })
           ] }),
           N && /* @__PURE__ */ e(
             ce,
             {
-              items: a.map((u, s) => ({
+              items: o.map((u, s) => ({
                 label: u.label,
-                color: X[s]
+                color: w[s]
               })),
               className: "mt-ds-04"
             }
@@ -1323,7 +1314,7 @@ He.displayName = "RadarChart";
 export {
   Ze as AreaChart,
   Ee as BarChart,
-  be as ChartContainer,
+  xe as ChartContainer,
   Qe as GaugeChart,
   ce as Legend,
   Ue as LineChart,