@rafal.lemieszewski/tide-ui 0.88.0 → 0.88.2

package/dist/es/components/fundamental/chart.js

@@ -1,22 +1,22 @@
-import { jsxs as d, jsx as r, Fragment as He } from "react/jsx-runtime";
+import { jsxs as u, jsx as r, Fragment as He } from "react/jsx-runtime";
 import S, { useState as Ye, useMemo as $, useCallback as Se } from "react";
 import { ResponsiveContainer as Ne, ComposedChart as er, CartesianGrid as se, XAxis as oe, YAxis as T, Tooltip as ne, Legend as ie, Bar as Le, Area as Te, Line as Oe, ScatterChart as rr, Scatter as tr, LineChart as ar, ReferenceLine as lr, ReferenceDot as sr, BarChart as Re } from "recharts";
 import { cn as or } from "../../lib/utils.js";
 const ce = (n, f = 0) => {
-  const p = n.toFixed(f).split("."), u = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
-  return f > 0 && p[1] ? `${u}.${p[1]}` : u;
+  const p = n.toFixed(f).split("."), c = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+  return f > 0 && p[1] ? `${c}.${p[1]}` : c;
 }, Ve = (n, f, a, p = 20) => {
   if (!n.length) return p;
-  let u = 0;
+  let c = 0;
   n.forEach((N) => {
     f.forEach((o) => {
       const v = N[o];
-      typeof v == "number" ? u = Math.max(u, Math.abs(v)) : Array.isArray(v) && v.forEach((i) => {
-        typeof i == "number" && (u = Math.max(u, Math.abs(i)));
+      typeof v == "number" ? c = Math.max(c, Math.abs(v)) : Array.isArray(v) && v.forEach((i) => {
+        typeof i == "number" && (c = Math.max(c, Math.abs(i)));
       });
     });
   });
-  const w = (a ? a(u, 0) : u.toString()).length;
+  const w = (a ? a(c, 0) : c.toString()).length;
   return Math.max(p, w * 6 + 12);
 }, O = {
   bar: [
@@ -106,7 +106,7 @@ const ce = (n, f = 0) => {
       return;
   }
 }, nr = (n = "circle") => (f) => {
-  const { cx: a, cy: p, r: u, fill: g, stroke: w, strokeWidth: N } = f, o = u || 4;
+  const { cx: a, cy: p, r: c, fill: g, stroke: w, strokeWidth: N } = f, o = c || 4;
   switch (n) {
     case "triangle":
       const v = o * 1.5, i = o * 1.3, m = `M ${a},${p - v} L ${a + i},${p + v / 2} L ${a - i},${p + v / 2} Z`;
@@ -147,14 +147,14 @@ const ce = (n, f = 0) => {
         }
       );
   }
-}, Be = (n) => ({ verticalAlign: "bottom", align: "center" }), de = ({ active: n, payload: f, label: a, config: p, tooltipMaxWidth: u = "max-w-xs", chartType: g, referenceMarkers: w }) => {
+}, Be = (n) => ({ verticalAlign: "bottom", align: "center" }), de = ({ active: n, payload: f, label: a, config: p, tooltipMaxWidth: c = "max-w-xs", chartType: g, referenceMarkers: w }) => {
   if (!n || !f || !f.length)
     return null;
   const N = w?.filter((o) => o.xValue === a) || [];
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: `rounded-[var(--border-radius-s)] border border-[var(--color-border-primary-medium)] bg-[var(--color-surface-primary)] p-[var(--space-m)] shadow-[var(--shadow-300)] min-w-[120px] ${u} z-[9999]`,
+      className: `rounded-[var(--border-radius-s)] border border-[var(--color-border-primary-medium)] bg-[var(--color-surface-primary)] p-[var(--space-m)] shadow-[var(--shadow-300)] min-w-[120px] ${c} z-[9999]`,
       role: "tooltip",
       "aria-label": "Chart data tooltip",
       children: [
@@ -167,11 +167,11 @@ const ce = (n, f = 0) => {
             Array.isArray(L) && L.length === 2 ? m = `${ce(L[0])} – ${ce(L[1])}` : m = typeof o.value == "number" ? ce(o.value) : o.value;
           } else
             m = typeof o.value == "number" ? ce(o.value) : o.value;
-          return /* @__PURE__ */ d("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
+          return /* @__PURE__ */ u("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
             (() => {
               switch (g) {
                 case "line":
-                  const L = p[o.dataKey]?.strokeStyle, _ = R(L);
+                  const L = p[o.dataKey]?.strokeStyle, V = R(L);
                   return /* @__PURE__ */ r(
                     "div",
                     {
@@ -182,8 +182,8 @@ const ce = (n, f = 0) => {
                         {
                           className: "w-full h-full",
                           style: {
-                            background: _ ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
-                            backgroundSize: _ === "5 5" ? "6px 100%" : _ === "2 2" ? "2px 100%" : "100% 100%"
+                            background: V ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
+                            backgroundSize: V === "5 5" ? "6px 100%" : V === "2 2" ? "2px 100%" : "100% 100%"
                           }
                         }
                       )
@@ -201,7 +201,7 @@ const ce = (n, f = 0) => {
                 case "composed":
                   switch (p[o.dataKey]?.type) {
                     case "line":
-                      const A = p[o.dataKey]?.strokeStyle, K = R(A);
+                      const A = p[o.dataKey]?.strokeStyle, W = R(A);
                       return /* @__PURE__ */ r(
                         "div",
                         {
@@ -212,8 +212,8 @@ const ce = (n, f = 0) => {
                             {
                               className: "w-full h-full",
                               style: {
-                                background: K ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
-                                backgroundSize: K === "5 5" ? "6px 100%" : K === "2 2" ? "2px 100%" : "100% 100%"
+                                background: W ? `linear-gradient(to right, ${o.color} 50%, transparent 50%)` : o.color,
+                                backgroundSize: W === "5 5" ? "6px 100%" : W === "2 2" ? "2px 100%" : "100% 100%"
                               }
                             }
                           )
@@ -254,19 +254,19 @@ const ce = (n, f = 0) => {
                   );
               }
             })(),
-            /* @__PURE__ */ d("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
+            /* @__PURE__ */ u("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
               i?.label || o.dataKey,
               ":"
             ] }),
             /* @__PURE__ */ r("span", { className: "text-body-medium-sm text-[var(--color-text-primary)] ml-auto pl-[16px]", children: m })
           ] }, v);
         }),
-        N.length > 0 && /* @__PURE__ */ d(He, { children: [
+        N.length > 0 && /* @__PURE__ */ u(He, { children: [
           /* @__PURE__ */ r("div", { className: "my-[var(--space-m)]" }),
-          N.map((o, v) => /* @__PURE__ */ d(S.Fragment, { children: [
+          N.map((o, v) => /* @__PURE__ */ u(S.Fragment, { children: [
             o.tooltipLabel && /* @__PURE__ */ r("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: o.tooltipLabel }),
             !o.tooltipLabel && v === 0 && /* @__PURE__ */ r("p", { className: "text-label-sm mb-[var(--space-xs)] text-[var(--color-text-primary)]", children: "Reference Markers:" }),
-            o.dataPoints.map((i, m) => /* @__PURE__ */ d("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
+            o.dataPoints.map((i, m) => /* @__PURE__ */ u("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
               (() => {
                 switch (i.shape || "circle") {
                   case "triangle":
@@ -306,7 +306,7 @@ const ce = (n, f = 0) => {
                     );
                 }
               })(),
-              /* @__PURE__ */ d("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
+              /* @__PURE__ */ u("span", { className: "text-body-sm text-[var(--color-text-primary)] min-w-0 break-words", children: [
                 i.label || `Marker ${m + 1}`,
                 ":"
               ] }),
@@ -323,9 +323,9 @@ function pr({
   data: f,
   config: a,
   className: p,
-  height: u = 300,
+  height: c = 300,
   width: g,
-  minWidth: w = 300,
+  minWidth: w = 240,
   onDataPointClick: N,
   onDataPointHover: o,
   highlightedIndex: v,
@@ -333,10 +333,10 @@ function pr({
   showLegend: m = !0,
   showTooltip: C = !0,
   colorScheme: L,
-  responsive: _ = !0,
+  responsive: V = !0,
   maintainAspectRatio: je = !1,
   legendHeight: A,
-  margin: K,
+  margin: W,
   yAxisWidth: ve,
   yAxisTickCount: Ie,
   xAxisTickFormatter: qe,
@@ -351,23 +351,23 @@ function pr({
   showDataTable: _e = !1,
   tooltipMaxWidth: X = "max-w-xs",
   tooltipAllowEscapeViewBox: U,
-  legendOrder: V,
+  legendOrder: B,
   legendPosition: ir = "bottom",
   referenceMarkers: Me,
-  todayMarker: W,
-  yAxisDomain: B,
+  todayMarker: K,
+  yAxisDomain: j,
   scrollable: E = !1,
   scrollableWidth: $e,
   ...Fe
 }) {
-  const [ze, Xe] = Ye(0), b = S.useRef(null), ke = S.useRef(!1), Ae = S.useRef(0), Ke = S.useRef(0), Ue = S.useCallback((t) => {
-    b.current && (ke.current = !0, Ae.current = t.pageX - b.current.offsetLeft, Ke.current = b.current.scrollLeft, b.current.style.cursor = "grabbing");
+  const [ze, Xe] = Ye(0), b = S.useRef(null), ke = S.useRef(!1), Ae = S.useRef(0), We = S.useRef(0), Ue = S.useCallback((t) => {
+    b.current && (ke.current = !0, Ae.current = t.pageX - b.current.offsetLeft, We.current = b.current.scrollLeft, b.current.style.cursor = "grabbing");
   }, []), Ze = S.useCallback((t) => {
     if (!ke.current || !b.current) return;
     t.preventDefault();
     const e = t.pageX - b.current.offsetLeft;
-    b.current.scrollLeft = Ke.current - (e - Ae.current);
-  }, []), We = S.useCallback(() => {
+    b.current.scrollLeft = We.current - (e - Ae.current);
+  }, []), Ke = S.useCallback(() => {
     ke.current = !1, b.current && (b.current.style.cursor = "grab");
   }, []), k = $(() => {
     if (L)
@@ -395,12 +395,12 @@ function pr({
       }
     }), e;
   }), [f, a, h]), ge = $(() => {
-    if (!W) return null;
-    const t = y.find((e) => e.name === W.xValue);
+    if (!K) return null;
+    const t = y.find((e) => e.name === K.xValue);
     return {
-      xValue: W.xValue,
+      xValue: K.xValue,
       showLine: !0,
-      lineLabel: W.label ?? "Today",
+      lineLabel: K.label ?? "Today",
       lineStyle: {
         stroke: "var(--color-border-error-bold)",
         strokeWidth: 2
@@ -413,7 +413,7 @@ function pr({
         pulsing: !0
       }))
     };
-  }, [W, y, h, a]), we = $(() => [
+  }, [K, y, h, a]), we = $(() => [
     ...Me ?? [],
     ...ge ? [ge] : []
   ], [Me, ge]), Z = Se((t) => {
@@ -427,14 +427,14 @@ function pr({
   }, [N]), G = $(() => ze >= Math.floor(y.length / 2), [ze, y.length]), me = () => {
     const t = { top: 8, right: 0, left: 0, bottom: 0 };
     return {
-      top: K?.top ?? t.top,
-      right: K?.right ?? t.right,
+      top: W?.top ?? t.top,
+      right: W?.right ?? t.right,
       // Don't add rightYAxisWidth - Recharts handles it via YAxis width prop
-      left: K?.left ?? t.left,
-      bottom: K?.bottom ?? t.bottom
+      left: W?.left ?? t.left,
+      bottom: W?.bottom ?? t.bottom
     };
-  }, Pe = $(() => ve || Ve(y, h, F, 20), [ve, y, h, F]), j = $(() => {
-    if (!E || B) return B;
+  }, Pe = $(() => ve || Ve(y, h, F, 20), [ve, y, h, F]), q = $(() => {
+    if (!E || j) return j;
     const t = y.flatMap(
       (e) => h.map((s) => {
         const l = e[s];
@@ -442,7 +442,7 @@ function pr({
       }).flat()
     );
     return [Math.min(0, ...t), Math.max(...t)];
-  }, [E, B, y, h]), H = $(
+  }, [E, j, y, h]), H = $(
     () => E ? $e ?? Math.max(y.length * 60, 600) : void 0,
     [E, $e, y.length]
   ), De = $(() => {
@@ -486,7 +486,7 @@ function pr({
     tickFormatter: F,
     ...Ie && { tickCount: Ie },
     // Force specific number of ticks when provided
-    ...B && { domain: B }
+    ...j && { domain: j }
     // Custom Y-axis domain when provided
   }, te = {
     stroke: "var(--color-border-primary-subtle)",
@@ -494,8 +494,8 @@ function pr({
     vertical: !1
   }, ae = ({ payload: t }) => {
     if (!t || !t.length) return null;
-    const e = t.filter((c) => a[c.dataKey]), s = V ? [...e].sort((c, z) => {
-      const M = V.indexOf(c.dataKey), I = V.indexOf(z.dataKey);
+    const e = t.filter((d) => a[d.dataKey]), s = B ? [...e].sort((d, z) => {
+      const M = B.indexOf(d.dataKey), I = B.indexOf(z.dataKey);
       return M === -1 ? 1 : I === -1 ? -1 : M - I;
     }) : e, x = me().left + 5;
     return /* @__PURE__ */ r(
@@ -505,11 +505,11 @@ function pr({
           paddingLeft: `${x}px`,
           paddingRight: "16px"
         },
-        children: /* @__PURE__ */ r("div", { className: "flex flex-wrap justify-start items-start gap-x-[var(--space-m)] gap-y-[var(--space-s)]", children: s.map((c, z) => /* @__PURE__ */ d("div", { className: "flex items-center justify-center gap-[var(--space-xs)]", children: [
+        children: /* @__PURE__ */ r("div", { className: "flex flex-wrap justify-start items-start gap-x-[var(--space-m)] gap-y-[var(--space-s)]", children: s.map((d, z) => /* @__PURE__ */ u("div", { className: "flex items-center justify-center gap-[var(--space-xs)]", children: [
           (() => {
             switch (n) {
               case "line":
-                const I = a[c.dataKey]?.strokeStyle, q = R(I);
+                const I = a[d.dataKey]?.strokeStyle, _ = R(I);
                 return /* @__PURE__ */ r(
                   "div",
                   {
@@ -520,8 +520,8 @@ function pr({
                       {
                         className: "w-full h-full",
                         style: {
-                          background: q ? `linear-gradient(to right, ${c.color} 50%, transparent 50%)` : c.color,
-                          backgroundSize: q === "5 5" ? "8px 100%" : q === "2 2" ? "3px 100%" : "100% 100%"
+                          background: _ ? `linear-gradient(to right, ${d.color} 50%, transparent 50%)` : d.color,
+                          backgroundSize: _ === "5 5" ? "8px 100%" : _ === "2 2" ? "3px 100%" : "100% 100%"
                         }
                       }
                     )
@@ -532,14 +532,14 @@ function pr({
                   "div",
                   {
                     className: "w-[6px] h-[6px] rounded-full flex-shrink-0",
-                    style: { backgroundColor: c.color },
+                    style: { backgroundColor: d.color },
                     "aria-hidden": "true"
                   }
                 );
               case "composed":
-                switch (a[c.dataKey]?.type) {
+                switch (a[d.dataKey]?.type) {
                   case "line":
-                    const Ge = a[c.dataKey]?.strokeStyle, Ce = R(Ge);
+                    const Ge = a[d.dataKey]?.strokeStyle, Ce = R(Ge);
                     return /* @__PURE__ */ r(
                       "div",
                       {
@@ -550,7 +550,7 @@ function pr({
                           {
                             className: "w-full h-full",
                             style: {
-                              background: Ce ? `linear-gradient(to right, ${c.color} 50%, transparent 50%)` : c.color,
+                              background: Ce ? `linear-gradient(to right, ${d.color} 50%, transparent 50%)` : d.color,
                               backgroundSize: Ce === "5 5" ? "8px 100%" : Ce === "2 2" ? "3px 100%" : "100% 100%"
                             }
                           }
@@ -563,7 +563,7 @@ function pr({
                       "div",
                       {
                         className: "w-[8px] h-[8px] flex-shrink-0",
-                        style: { backgroundColor: c.color },
+                        style: { backgroundColor: d.color },
                         "aria-hidden": "true"
                       }
                     );
@@ -573,7 +573,7 @@ function pr({
                       "div",
                       {
                         className: "w-[6px] h-[6px] flex-shrink-0",
-                        style: { backgroundColor: c.color },
+                        style: { backgroundColor: d.color },
                         "aria-hidden": "true"
                       }
                     );
@@ -585,22 +585,22 @@ function pr({
                   "div",
                   {
                     className: "w-[6px] h-[6px] flex-shrink-0",
-                    style: { backgroundColor: c.color },
+                    style: { backgroundColor: d.color },
                     "aria-hidden": "true"
                   }
                 );
             }
           })(),
-          /* @__PURE__ */ r("span", { className: "[&]:text-body-medium-xsm [&]:text-[var(--color-text-secondary)] leading-none whitespace-nowrap", children: c.value })
+          /* @__PURE__ */ r("span", { className: "[&]:text-body-medium-xsm [&]:text-[var(--color-text-secondary)] leading-none whitespace-nowrap", children: d.value })
         ] }, z)) })
       }
     );
   }, Je = () => {
-    const t = V ? [...V, ...Object.keys(a).filter((l) => !V.includes(l))] : Object.keys(a), s = me().left + 5;
+    const t = B ? [...B, ...Object.keys(a).filter((l) => !B.includes(l))] : Object.keys(a), s = me().left + 5;
     return /* @__PURE__ */ r("div", { style: { paddingLeft: `${s}px`, paddingRight: "16px" }, children: /* @__PURE__ */ r("div", { className: "flex flex-wrap justify-start items-start gap-x-[var(--space-m)] gap-y-[var(--space-s)]", children: t.map((l, x) => {
-      const c = a[l];
-      if (!c) return null;
-      const z = c.color ?? "currentColor", M = R(c.strokeStyle), I = /* @__PURE__ */ r("div", { className: "w-[12px] h-[2px] flex-shrink-0 relative", "aria-hidden": "true", children: /* @__PURE__ */ r(
+      const d = a[l];
+      if (!d) return null;
+      const z = d.color ?? "currentColor", M = R(d.strokeStyle), I = /* @__PURE__ */ r("div", { className: "w-[12px] h-[2px] flex-shrink-0 relative", "aria-hidden": "true", children: /* @__PURE__ */ r(
         "div",
         {
           className: "w-full h-full",
@@ -610,15 +610,15 @@ function pr({
           }
         }
       ) });
-      return /* @__PURE__ */ d("div", { className: "flex items-center justify-center gap-[var(--space-xs)]", children: [
+      return /* @__PURE__ */ u("div", { className: "flex items-center justify-center gap-[var(--space-xs)]", children: [
         I,
-        /* @__PURE__ */ r("span", { className: "[&]:text-body-medium-xsm [&]:text-[var(--color-text-secondary)] leading-none whitespace-nowrap", children: c.label })
+        /* @__PURE__ */ r("span", { className: "[&]:text-body-medium-xsm [&]:text-[var(--color-text-secondary)] leading-none whitespace-nowrap", children: d.label })
       ] }, x);
     }) }) });
   }, ye = (t = "full") => {
     switch (n) {
       case "bar":
-        return /* @__PURE__ */ d(
+        return /* @__PURE__ */ u(
           Re,
           {
             ...ee,
@@ -634,7 +634,7 @@ function pr({
                   ...P,
                   hide: t === "data-only",
                   width: t === "data-only" ? 0 : P.width,
-                  ...t !== "full" && j ? { domain: j } : {}
+                  ...t !== "full" && q ? { domain: q } : {}
                 }
               ),
               t !== "yaxis-only" && C && /* @__PURE__ */ r(
@@ -677,7 +677,7 @@ function pr({
           }
         );
       case "horizontal-bar":
-        return /* @__PURE__ */ d(
+        return /* @__PURE__ */ u(
           Re,
           {
             ...ee,
@@ -728,7 +728,7 @@ function pr({
           }
         );
       case "line":
-        return /* @__PURE__ */ d(
+        return /* @__PURE__ */ u(
           ar,
           {
             ...ee,
@@ -745,7 +745,7 @@ function pr({
                   ...P,
                   hide: t === "data-only",
                   width: t === "data-only" ? 0 : P.width,
-                  ...t !== "full" && j ? { domain: j } : {}
+                  ...t !== "full" && q ? { domain: q } : {}
                 }
               ),
               t !== "yaxis-only" && ue && /* @__PURE__ */ r(
@@ -852,14 +852,14 @@ function pr({
                   fill: l.fill || "var(--color-chart-line-1)",
                   stroke: l.stroke || "transparent",
                   strokeWidth: l.strokeWidth || 0,
-                  shape: l.pulsing ? (c) => {
-                    const { cx: z, cy: M } = c, I = l.size || 4, q = l.fill || "var(--color-background-error-bold)";
-                    return /* @__PURE__ */ d("g", { children: [
-                      /* @__PURE__ */ d("circle", { cx: z, cy: M, r: I + 1, fill: q, opacity: 0.3, children: [
+                  shape: l.pulsing ? (d) => {
+                    const { cx: z, cy: M } = d, I = l.size || 4, _ = l.fill || "var(--color-background-error-bold)";
+                    return /* @__PURE__ */ u("g", { children: [
+                      /* @__PURE__ */ u("circle", { cx: z, cy: M, r: I + 1, fill: _, opacity: 0.3, children: [
                         /* @__PURE__ */ r("animate", { attributeName: "r", from: String(I + 1), to: String(I + 8), dur: "1.5s", repeatCount: "indefinite" }),
                         /* @__PURE__ */ r("animate", { attributeName: "opacity", from: "0.35", to: "0", dur: "1.5s", repeatCount: "indefinite" })
                       ] }),
-                      /* @__PURE__ */ r("circle", { cx: z, cy: M, r: I, fill: q })
+                      /* @__PURE__ */ r("circle", { cx: z, cy: M, r: I, fill: _ })
                     ] });
                   } : nr(l.shape || "circle")
                 },
@@ -869,7 +869,7 @@ function pr({
           }
         );
       case "scatter":
-        return /* @__PURE__ */ d(
+        return /* @__PURE__ */ u(
           rr,
           {
             ...ee,
@@ -917,7 +917,7 @@ function pr({
           }
         );
       case "composed":
-        return /* @__PURE__ */ d(
+        return /* @__PURE__ */ u(
           er,
           {
             ...ee,
@@ -934,7 +934,7 @@ function pr({
                   ...P,
                   hide: t === "data-only",
                   width: t === "data-only" ? 0 : P.width,
-                  ...t !== "full" && j ? { domain: j } : {}
+                  ...t !== "full" && q ? { domain: q } : {}
                 }
               ),
               t !== "yaxis-only" && ue && /* @__PURE__ */ r(
@@ -1060,16 +1060,16 @@ function pr({
       default:
         return /* @__PURE__ */ r("div", { children: "Unsupported chart type" });
     }
-  }, Qe = () => _e ? /* @__PURE__ */ r("div", { className: "sr-only", children: /* @__PURE__ */ d("table", { role: "table", "aria-label": D ? `Data for ${D}` : "Chart data", children: [
-    /* @__PURE__ */ d("caption", { className: "sr-only", children: [
+  }, Qe = () => _e ? /* @__PURE__ */ r("div", { className: "sr-only", children: /* @__PURE__ */ u("table", { role: "table", "aria-label": D ? `Data for ${D}` : "Chart data", children: [
+    /* @__PURE__ */ u("caption", { className: "sr-only", children: [
       D && `${D}. `,
       xe || `${n} chart showing ${h.length} data series across ${f.length} categories.`
     ] }),
-    /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ d("tr", { children: [
+    /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ u("tr", { children: [
       /* @__PURE__ */ r("th", { scope: "col", children: "Category" }),
       h.map((t) => /* @__PURE__ */ r("th", { scope: "col", children: a[t]?.label || t }, t))
     ] }) }),
-    /* @__PURE__ */ r("tbody", { children: f.map((t, e) => /* @__PURE__ */ d("tr", { children: [
+    /* @__PURE__ */ r("tbody", { children: f.map((t, e) => /* @__PURE__ */ u("tr", { children: [
       /* @__PURE__ */ r("th", { scope: "row", children: t.name || `Item ${e + 1}` }),
       h.map((s) => /* @__PURE__ */ r("td", { children: F ? F(t[s], e) : t[s] }, s))
     ] }, e)) })
@@ -1079,14 +1079,14 @@ function pr({
     if (!t) return;
     const e = setTimeout(() => {
       t.querySelectorAll(".recharts-cartesian-axis-tick").forEach((l) => {
-        const x = l.querySelector("text"), c = l.querySelector(".recharts-cartesian-axis-tick-line");
-        x?.textContent?.trim() === "0" && c && c.setAttribute("stroke-width", "2");
+        const x = l.querySelector("text"), d = l.querySelector(".recharts-cartesian-axis-tick-line");
+        x?.textContent?.trim() === "0" && d && d.setAttribute("stroke-width", "2");
       });
     }, 100);
     return () => clearTimeout(e);
   }, [f, n]), S.useEffect(() => {
-    if (!E || !W || !b.current || !H) return;
-    const t = y.findIndex((s) => s.name === W.xValue);
+    if (!E || !K || !b.current || !H) return;
+    const t = y.findIndex((s) => s.name === K.xValue);
     if (t < 0) return;
     const e = setTimeout(() => {
       if (!b.current) return;
@@ -1094,12 +1094,12 @@ function pr({
       b.current.scrollLeft = Math.max(0, l - s / 2);
     }, 50);
     return () => clearTimeout(e);
-  }, [E, W, H, y]), /* @__PURE__ */ d(
+  }, [E, K, H, y]), /* @__PURE__ */ u(
     "div",
     {
       ref: le,
       className: or("w-full", p),
-      style: { minWidth: w },
+      style: { minWidth: V ? 0 : w, ...typeof c == "string" ? { height: c } : {} },
       role: "img",
       "aria-label": D || `${n} chart`,
       "aria-describedby": xe ? `${le.current?.id || "chart"}-desc` : void 0,
@@ -1108,11 +1108,11 @@ function pr({
         D && /* @__PURE__ */ r("h3", { className: "sr-only", id: `${le.current?.id || "chart"}-title`, children: D }),
         xe && /* @__PURE__ */ r("p", { className: "sr-only", id: `${le.current?.id || "chart"}-desc`, children: xe }),
         (() => {
-          const t = A ? u - A : u;
+          const t = typeof c == "string" ? c : A ? c - A : c;
           if (E && n !== "horizontal-bar" && n !== "scatter") {
             const s = Pe + (me().left ?? 0);
-            return /* @__PURE__ */ d("div", { style: { height: m && A ? u : t }, children: [
-              /* @__PURE__ */ d("div", { className: "flex w-full", style: { height: t }, children: [
+            return /* @__PURE__ */ u("div", { style: { height: m && A ? c : t }, children: [
+              /* @__PURE__ */ u("div", { className: "flex w-full", style: { height: t }, children: [
                 /* @__PURE__ */ r("div", { style: { width: s, flexShrink: 0, overflow: "hidden" }, children: /* @__PURE__ */ r(Ne, { width: s, height: t, children: ye("yaxis-only") || /* @__PURE__ */ r("div", { children: "Chart error" }) }) }),
                 /* @__PURE__ */ r(
                   "div",
@@ -1122,8 +1122,8 @@ function pr({
                     style: { cursor: "grab" },
                     onMouseDown: Ue,
                     onMouseMove: Ze,
-                    onMouseUp: We,
-                    onMouseLeave: We,
+                    onMouseUp: Ke,
+                    onMouseLeave: Ke,
                     children: /* @__PURE__ */ r("div", { style: { width: H, height: t }, children: /* @__PURE__ */ r(Ne, { width: H, height: t, children: ye("data-only") || /* @__PURE__ */ r("div", { children: "Chart error" }) }) })
                   }
                 )
@@ -1131,7 +1131,7 @@ function pr({
               m && Je()
             ] });
           }
-          const e = _ ? /* @__PURE__ */ r(
+          const e = V ? /* @__PURE__ */ r(
             Ne,
             {
               width: g || "100%",
@@ -1148,11 +1148,11 @@ function pr({
 }
 const xr = (n, f = "bar") => {
   const a = O[f];
-  return Array.from({ length: n }, (p, u) => a[u % a.length]);
-}, mr = (n, f, a) => Array.isArray(n) ? n.reduce((u, g, w) => (u[g] = {
+  return Array.from({ length: n }, (p, c) => a[c % a.length]);
+}, mr = (n, f, a) => Array.isArray(n) ? n.reduce((c, g, w) => (c[g] = {
   label: f?.[w] || g,
   color: a?.[w]
-}, u), {}) : n;
+}, c), {}) : n;
 export {
   pr as Chart,
   O as chartColorSchemes,

package/dist/es/components/product/app-frame.js

@@ -259,7 +259,7 @@ function Ie({ navigationData: a, user: o, teams: u, onNavigate: n, navigationMod
               ) }),
               /* @__PURE__ */ e(N, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: H(r) })
             ] }) }, r.title)) }) }) }),
-            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e(Q, { layout: "vertical" }) }),
+            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e(Q, { type: "horizontal-line" }) }),
             /* @__PURE__ */ l(F, { className: "mt-1 p-[var(--space-s)]", children: [
               /* @__PURE__ */ e(_, { className: "py-1 pb-1.5 group-data-[collapsible=icon]:hidden", children: "Operations" }),
               /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(I, { children: a.operations.map((r) => /* @__PURE__ */ e(P, { children: r.items && r.items.length > 0 ? /* @__PURE__ */ l(G, { children: [
@@ -337,7 +337,7 @@ function Ie({ navigationData: a, user: o, teams: u, onNavigate: n, navigationMod
                 /* @__PURE__ */ e(N, { side: "right", className: "hidden group-data-[collapsible=icon]:block", children: H(r) })
               ] }) }, r.title)) }) })
             ] }),
-            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e(Q, { layout: "vertical" }) }),
+            /* @__PURE__ */ e("div", { className: "my-2 hidden justify-center px-2 group-data-[collapsible=icon]:flex", children: /* @__PURE__ */ e(Q, { type: "horizontal-line" }) }),
             /* @__PURE__ */ l(F, { className: "mt-1 p-[var(--space-s)]", children: [
               /* @__PURE__ */ e(_, { className: "py-1 pb-1.5 group-data-[collapsible=icon]:hidden", children: "Intelligence" }),
               /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(I, { children: a.intelligence.map((r) => /* @__PURE__ */ e(P, { children: r.items && r.items.length > 0 ? /* @__PURE__ */ l(G, { children: [
@@ -1042,7 +1042,7 @@ function rr({
     /* @__PURE__ */ l(se, { children: [
       (d || b || f) && /* @__PURE__ */ l("header", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-[var(--color-border-primary-subtle)] transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 box-border px-[var(--space-m)]", children: [
         /* @__PURE__ */ e(Ze, {}),
-        /* @__PURE__ */ e(Q, { layout: "horizontal", className: "mr-2 h-4" }),
+        /* @__PURE__ */ e(Q, { type: "vertical-line", className: "mr-2 h-4" }),
         /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: d }),
         /* @__PURE__ */ l("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: [
           f && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: f }),