@sckyzo/cosmos-charts 0.3.0 → 0.4.0

package/dist/RealtimeChart.cjs

@@ -1,9 +1,9 @@
 "use client";
 'use strict';
 
-var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
 var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
-var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
 var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
 var react = require('react');
 var recharts = require('recharts');
@@ -29,7 +29,7 @@ var Threshold = ({ y, label, color }) => /* @__PURE__ */ jsxRuntime.jsx(
       offset: 4,
       // Text on the card, whatever the status color: it reads on every theme.
       fill: chunkLT3UC65O_cjs.TEXT,
-      style: { fill: chunkLT3UC65O_cjs.TEXT, fontSize: chunkRLHGPHC7_cjs.TEXT_SIZE, fontWeight: 600 }
+      style: { fill: chunkLT3UC65O_cjs.TEXT, fontSize: chunkG4WOPX4D_cjs.TEXT_SIZE, fontWeight: 600 }
     }
   }
 );
@@ -60,7 +60,7 @@ var RealtimeChart = ({
   height = 240,
   width
 }) => {
-  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const axis = chunkG4WOPX4D_cjs.useAxis();
   const [defaultGenerator] = react.useState(createDefaultGenerator);
   const generate = generator ?? defaultGenerator;
   const [mountedAt] = react.useState(Date.now);
@@ -106,7 +106,7 @@ var RealtimeChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     recharts.LineChart,
     {
-      ...chunk6NRRABPF_cjs.frameProps({
+      ...chunkSR2ESX3R_cjs.frameProps({
         height,
         width,
         ariaLabel: ariaLabel ?? "Live values, newest on the right"
@@ -114,7 +114,7 @@ var RealtimeChart = ({
       data: samples,
       margin: { top: 4, right: 12, bottom: 0, left: 0 },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...chunkRLHGPHC7_cjs.GRID_PROPS }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...chunkG4WOPX4D_cjs.GRID_PROPS }),
         /* @__PURE__ */ jsxRuntime.jsx(
           recharts.XAxis,
           {
@@ -124,7 +124,7 @@ var RealtimeChart = ({
             hide: !showTimeAxis,
             tickFormatter: clock,
             ...axis,
-            ...showTimeAxis ? chunkRLHGPHC7_cjs.xAxisTitle(xTitle) : {}
+            ...showTimeAxis ? chunkG4WOPX4D_cjs.xAxisTitle(xTitle) : {}
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -136,7 +136,7 @@ var RealtimeChart = ({
             width: "auto",
             tickFormatter: formatValue,
             ...axis,
-            ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle)
+            ...chunkG4WOPX4D_cjs.yAxisTitle(yTitle)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(Threshold, { y: warnThreshold, label: warnLabel, color: chunkLT3UC65O_cjs.STATUS_WARN }),

package/dist/RealtimeChart.js

@@ -1,7 +1,7 @@
 "use client";
-import { useAxis, GRID_PROPS, xAxisTitle, yAxisTitle, TEXT_SIZE } from './chunk-RILUG7JB.js';
+import { useAxis, GRID_PROPS, xAxisTitle, yAxisTitle, TEXT_SIZE } from './chunk-DI2FBGKM.js';
 import { TooltipCard } from './chunk-VIOSQN4Z.js';
-import { frameProps } from './chunk-3N43QT36.js';
+import { frameProps } from './chunk-56WD3OHA.js';
 import { STATUS_WARN, STATUS_CRIT, BORDER, SERIES, PANEL, TEXT } from './chunk-UATB2IRY.js';
 import { useState, useEffect } from 'react';
 import { LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line, ReferenceLine } from 'recharts';

package/dist/ScatterChart.cjs

@@ -1,13 +1,13 @@
 "use client";
 'use strict';
 
-var chunkZ4LZFMDH_cjs = require('./chunk-Z4LZFMDH.cjs');
-var chunkGZRMVE4X_cjs = require('./chunk-GZRMVE4X.cjs');
+var chunkXUGQ6VXO_cjs = require('./chunk-XUGQ6VXO.cjs');
+var chunkRCDTBZC2_cjs = require('./chunk-RCDTBZC2.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
-var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
 var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
 var chunkK3R7JGOW_cjs = require('./chunk-K3R7JGOW.cjs');
-var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
 var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
 var recharts = require('recharts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -33,11 +33,11 @@ var XYChart = ({
   height = 320,
   width
 }) => {
-  const hidden = chunkGZRMVE4X_cjs.useHiddenSeries();
-  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const hidden = chunkRCDTBZC2_cjs.useHiddenSeries();
+  const axis = chunkG4WOPX4D_cjs.useAxis();
   const name = ariaLabel ?? `${bubbles ? "Bubble" : "Scatter"} chart: ${series.map((s) => s.name).join(", ")}`;
   if (chunkK3R7JGOW_cjs.hasNoData(series)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkSR2ESX3R_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
   }
   const tooltip = ({ active, payload }) => {
     const point = payload?.[0]?.payload;
@@ -60,7 +60,7 @@ var XYChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     recharts.ScatterChart,
     {
-      ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name }),
+      ...chunkSR2ESX3R_cjs.frameProps({ height, width, ariaLabel: name }),
       margin: { top: 4, right: bubbles ? 24 : 12, bottom: 0, left: 0 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { stroke: chunkLT3UC65O_cjs.GRID, strokeDasharray: "4 4" }),
@@ -73,7 +73,7 @@ var XYChart = ({
             domain: ["auto", "auto"],
             tickFormatter: formatX,
             ...axis,
-            ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle)
+            ...chunkG4WOPX4D_cjs.xAxisTitle(xTitle)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -86,11 +86,11 @@ var XYChart = ({
             width: "auto",
             tickFormatter: formatY,
             ...axis,
-            ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle)
+            ...chunkG4WOPX4D_cjs.yAxisTitle(yTitle)
           }
         ),
         bubbles ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ZAxis, { type: "number", dataKey: "z", name: bubbles.sizeTitle, range: BUBBLE_AREAS }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ZAxis, { type: "number", range: [POINT_AREA, POINT_AREA] }),
-        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { ...chunkGZRMVE4X_cjs.legendProps(legendPosition, hidden) }),
+        (showLegend ?? series.length > 1) && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { ...chunkRCDTBZC2_cjs.legendProps(legendPosition, hidden) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           recharts.Tooltip,
           {
@@ -115,7 +115,7 @@ var XYChart = ({
             chunkK3R7JGOW_cjs.seriesKey(index)
           );
         }),
-        chunkZ4LZFMDH_cjs.referenceMarks({ referenceLines, referenceBands }),
+        chunkXUGQ6VXO_cjs.referenceMarks({ referenceLines, referenceBands }),
         children
       ]
     }

package/dist/ScatterChart.js

@@ -1,11 +1,11 @@
 "use client";
-import { referenceMarks } from './chunk-SGG7XKOY.js';
-import { useHiddenSeries, legendProps } from './chunk-6ALKZLN2.js';
+import { referenceMarks } from './chunk-ESVGCUJN.js';
+import { useHiddenSeries, legendProps } from './chunk-4AKHZNWP.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';
-import { useAxis, xAxisTitle, yAxisTitle } from './chunk-RILUG7JB.js';
+import { useAxis, xAxisTitle, yAxisTitle } from './chunk-DI2FBGKM.js';
 import { TooltipCard } from './chunk-VIOSQN4Z.js';
 import { hasNoData, seriesKey } from './chunk-UJIV5PVI.js';
-import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { ChartEmpty, frameProps } from './chunk-56WD3OHA.js';
 import { GRID, BORDER, seriesColor } from './chunk-UATB2IRY.js';
 import { ScatterChart as ScatterChart$1, CartesianGrid, XAxis, YAxis, ZAxis, Legend, Tooltip, Scatter } from 'recharts';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/SemiCircleGauge.cjs

@@ -4,7 +4,7 @@
 var chunkIW6EWB26_cjs = require('./chunk-IW6EWB26.cjs');
 var chunkAAYHG7YK_cjs = require('./chunk-AAYHG7YK.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
-var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
 var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
 var recharts = require('recharts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -91,7 +91,7 @@ var SemiCircleGauge = ({
       children: radius > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
         recharts.RadialBarChart,
         {
-          ...chunk6NRRABPF_cjs.frameProps({
+          ...chunkSR2ESX3R_cjs.frameProps({
             height: radius + row,
             width: "100%",
             ariaLabel: chunkAAYHG7YK_cjs.gaugeName(ariaLabel ?? (label || "Gauge"), text) + (target === void 0 ? "" : `, target ${formatValue(target)}`),

package/dist/SemiCircleGauge.js

@@ -2,7 +2,7 @@
 import { useElementWidth } from './chunk-AOSO5QHL.js';
 import { percent, statusColor, rangeShare, clampTo, gaugeName, arcMark } from './chunk-OCD6JIIX.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';
-import { frameProps } from './chunk-3N43QT36.js';
+import { frameProps } from './chunk-56WD3OHA.js';
 import { SERIES, TRACK, TEXT, MUTED, PANEL } from './chunk-UATB2IRY.js';
 import { RadialBarChart, PolarAngleAxis, RadialBar, usePlotArea } from 'recharts';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/Sparkline.cjs

@@ -5,7 +5,7 @@ var chunkGVTMZYOM_cjs = require('./chunk-GVTMZYOM.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
 var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
 var chunkK3R7JGOW_cjs = require('./chunk-K3R7JGOW.cjs');
-var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
 var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
 var react = require('react');
 var recharts = require('recharts');
@@ -28,7 +28,7 @@ var Sparkline = ({
   const uid = chunkK3R7JGOW_cjs.safeId(react.useId());
   const name = ariaLabel ?? `Trend of ${label}`;
   if (chunkK3R7JGOW_cjs.hasNoData([{ data }])) {
-    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkSR2ESX3R_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
   }
   if (variant === "bar") {
     const fillFor = (value) => value < 0 ? chunkLT3UC65O_cjs.ERROR : void 0;
@@ -36,7 +36,7 @@ var Sparkline = ({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       recharts.BarChart,
       {
-        ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name, keyboard: false }),
+        ...chunkSR2ESX3R_cjs.frameProps({ height, width, ariaLabel: name, keyboard: false }),
         data: data.map((value, i) => ({ i, value })),
         margin: { top: 6, right: 4, bottom: 4, left: 4 },
         barCategoryGap: "20%",
@@ -73,7 +73,7 @@ var Sparkline = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     recharts.AreaChart,
     {
-      ...chunk6NRRABPF_cjs.frameProps({ height, width, ariaLabel: name, keyboard: false }),
+      ...chunkSR2ESX3R_cjs.frameProps({ height, width, ariaLabel: name, keyboard: false }),
       data: data.map((value, i) => ({ i, value })),
       margin: { top: 6, right: 4, bottom: 4, left: 4 },
       children: [

package/dist/Sparkline.js

@@ -3,7 +3,7 @@ import { roundedBarShape } from './chunk-GDZLYYL2.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';
 import { ChartTooltip } from './chunk-VIOSQN4Z.js';
 import { safeId, hasNoData } from './chunk-UJIV5PVI.js';
-import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { ChartEmpty, frameProps } from './chunk-56WD3OHA.js';
 import { BORDER, ERROR, SERIES, PANEL } from './chunk-UATB2IRY.js';
 import { useId } from 'react';
 import { BarChart, XAxis, YAxis, Tooltip, Bar, ReferenceLine, AreaChart, Area } from 'recharts';

package/dist/StrokedGauge.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
-var chunkMN4CDVOS_cjs = require('./chunk-MN4CDVOS.cjs');
+var chunkCMBNNLIV_cjs = require('./chunk-CMBNNLIV.cjs');
 var chunkAAYHG7YK_cjs = require('./chunk-AAYHG7YK.cjs');
 require('./chunk-X3YZP5WF.cjs');
 require('./chunk-TYQWZR3S.cjs');
-require('./chunk-6NRRABPF.cjs');
+require('./chunk-SR2ESX3R.cjs');
 var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -73,7 +73,7 @@ var StrokedGauge = ({
   height = 280,
   width
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  chunkMN4CDVOS_cjs.RadialGauge,
+  chunkCMBNNLIV_cjs.RadialGauge,
   {
     value,
     label,

package/dist/StrokedGauge.js

@@ -1,9 +1,9 @@
 "use client";
-import { RadialGauge } from './chunk-YWYF5CCJ.js';
+import { RadialGauge } from './chunk-6FGJZBTC.js';
 import { percent } from './chunk-OCD6JIIX.js';
 import './chunk-URNXLVSK.js';
 import './chunk-5C2RLJYZ.js';
-import './chunk-3N43QT36.js';
+import './chunk-56WD3OHA.js';
 import { SERIES, TRACK } from './chunk-UATB2IRY.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/TreemapChart.cjs

@@ -5,7 +5,7 @@ var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
 var chunkDBZQI4HM_cjs = require('./chunk-DBZQI4HM.cjs');
 var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
 var chunkK3R7JGOW_cjs = require('./chunk-K3R7JGOW.cjs');
-var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
 var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
 var react = require('react');
 var recharts = require('recharts');
@@ -165,7 +165,7 @@ var TreemapChart = ({
   const name = ariaLabel ?? `Treemap: ${series.flatMap((s) => s.data.map((d) => d.x)).join(", ")}`;
   const drawn = series.map((s) => ({ ...s, data: s.data.filter((d) => d.y > 0) }));
   if (chunkK3R7JGOW_cjs.hasNoData(drawn)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkSR2ESX3R_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
   }
   const colorByName = /* @__PURE__ */ new Map();
   for (const { data: data2 } of drawn) {

package/dist/TreemapChart.js

@@ -3,7 +3,7 @@ import { ANIMATION } from './chunk-5C2RLJYZ.js';
 import { textOn } from './chunk-BFEDLXVW.js';
 import { TooltipCard } from './chunk-VIOSQN4Z.js';
 import { hasNoData } from './chunk-UJIV5PVI.js';
-import { ChartEmpty } from './chunk-3N43QT36.js';
+import { ChartEmpty } from './chunk-56WD3OHA.js';
 import { seriesColor, MUTED, PANEL, TEXT, TRACK } from './chunk-UATB2IRY.js';
 import { useRef, useState } from 'react';
 import { Treemap, Tooltip } from 'recharts';

package/dist/WaterfallChart.cjs

@@ -1,12 +1,12 @@
 "use client";
 'use strict';
 
-var chunk6BKLL7LZ_cjs = require('./chunk-6BKLL7LZ.cjs');
+var chunkXMFBVMW7_cjs = require('./chunk-XMFBVMW7.cjs');
 var chunkIW6EWB26_cjs = require('./chunk-IW6EWB26.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
-var chunkRLHGPHC7_cjs = require('./chunk-RLHGPHC7.cjs');
+var chunkG4WOPX4D_cjs = require('./chunk-G4WOPX4D.cjs');
 var chunkT3K6Q34U_cjs = require('./chunk-T3K6Q34U.cjs');
-var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
 var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
 var react = require('react');
 var recharts = require('recharts');
@@ -86,7 +86,7 @@ var waterfallShape = (palette, labels, format) => (props) => {
         textAnchor: "middle",
         fill: chunkLT3UC65O_cjs.TEXT,
         style: {
-          fontSize: chunkRLHGPHC7_cjs.TEXT_SIZE,
+          fontSize: chunkG4WOPX4D_cjs.TEXT_SIZE,
           fontWeight: 600,
           fontVariantNumeric: "tabular-nums"
         },
@@ -144,7 +144,7 @@ var WaterfallChart = ({
   height = 320,
   width
 }) => {
-  const axis = chunkRLHGPHC7_cjs.useAxis();
+  const axis = chunkG4WOPX4D_cjs.useAxis();
   const { ref, width: measured } = chunkIW6EWB26_cjs.useElementWidth();
   const bars = react.useMemo(() => waterfallBars(data), [data]);
   const rows = react.useMemo(
@@ -153,7 +153,7 @@ var WaterfallChart = ({
   );
   const name = ariaLabel ?? `Waterfall chart: ${data.map((d) => d.label).join(", ")}`;
   if (data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NRRABPF_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkSR2ESX3R_cjs.ChartEmpty, { message: emptyMessage, ariaLabel: name, height, width });
   }
   const palette = {
     positive: colors?.positive ?? chunkLT3UC65O_cjs.SUCCESS,
@@ -167,10 +167,10 @@ var WaterfallChart = ({
   const tilted = narrow || longest * CHAR_WIDTH > band;
   const labelAxis = {
     interval: 0,
-    tickFormatter: (_, index) => chunk6BKLL7LZ_cjs.trimLabel(rows[index]?.label ?? ""),
+    tickFormatter: (_, index) => chunkXMFBVMW7_cjs.trimLabel(rows[index]?.label ?? ""),
     ...tilted ? {
       angle: -40,
-      tick: { ...chunkRLHGPHC7_cjs.AXIS.tick, textAnchor: "end" },
+      tick: { ...chunkG4WOPX4D_cjs.AXIS.tick, textAnchor: "end" },
       height: (xTitle ? 52 : 30) + Math.round(longest * TILT_HEIGHT)
     } : {}
   };
@@ -197,14 +197,14 @@ var WaterfallChart = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: { width: width ?? "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     recharts.BarChart,
     {
-      ...chunk6NRRABPF_cjs.frameProps({ height, width: "100%", ariaLabel: name }),
+      ...chunkSR2ESX3R_cjs.frameProps({ height, width: "100%", ariaLabel: name }),
       data: rows,
       margin: { top: labels ? 24 : 4, right: 8, bottom: 0, left: 0 },
       barCategoryGap: `${GAP * 100}%`,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...chunkRLHGPHC7_cjs.GRID_PROPS }),
-        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "key", ...axis, ...chunkRLHGPHC7_cjs.xAxisTitle(xTitle), ...labelAxis }),
-        /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { width: "auto", tickFormatter: formatValue, ...axis, ...chunkRLHGPHC7_cjs.yAxisTitle(yTitle) }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...chunkG4WOPX4D_cjs.GRID_PROPS }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "key", ...axis, ...chunkG4WOPX4D_cjs.xAxisTitle(xTitle), ...labelAxis }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { width: "auto", tickFormatter: formatValue, ...axis, ...chunkG4WOPX4D_cjs.yAxisTitle(yTitle) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           recharts.Tooltip,
           {

package/dist/WaterfallChart.js

@@ -1,10 +1,10 @@
 "use client";
-import { trimLabel } from './chunk-HMH6DI7U.js';
+import { trimLabel } from './chunk-YMRNTIOK.js';
 import { useElementWidth } from './chunk-AOSO5QHL.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';
-import { useAxis, AXIS, GRID_PROPS, xAxisTitle, yAxisTitle, TEXT_SIZE } from './chunk-RILUG7JB.js';
+import { useAxis, AXIS, GRID_PROPS, xAxisTitle, yAxisTitle, TEXT_SIZE } from './chunk-DI2FBGKM.js';
 import { TooltipCard } from './chunk-VIOSQN4Z.js';
-import { ChartEmpty, frameProps } from './chunk-3N43QT36.js';
+import { ChartEmpty, frameProps } from './chunk-56WD3OHA.js';
 import { SERIES, ERROR, SUCCESS, BORDER, TEXT, MUTED } from './chunk-UATB2IRY.js';
 import { useMemo } from 'react';
 import { BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, useXAxisScale, useYAxisScale } from 'recharts';

package/dist/{chunk-6ALKZLN2.js → chunk-4AKHZNWP.js}

@@ -1,5 +1,5 @@
 "use client";
-import { TEXT_SIZE } from './chunk-RILUG7JB.js';
+import { TEXT_SIZE } from './chunk-DI2FBGKM.js';
 import { MUTED, TEXT } from './chunk-UATB2IRY.js';
 import { useState, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -123,5 +123,5 @@ var legendProps = (position, { hidden, toggle }) => ({
 });
 
 export { ChartLegend, legendProps, useHiddenSeries };
-//# sourceMappingURL=chunk-6ALKZLN2.js.map
-//# sourceMappingURL=chunk-6ALKZLN2.js.map
+//# sourceMappingURL=chunk-4AKHZNWP.js.map
+//# sourceMappingURL=chunk-4AKHZNWP.js.map

package/dist/{chunk-6ALKZLN2.js.map → chunk-4AKHZNWP.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/ChartLegend.tsx"],"names":[],"mappings":"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","file":"chunk-6ALKZLN2.js","sourcesContent":["import { useCallback, useState, type ReactNode } from 'react';\nimport type { LegendPayload, LegendProps } from 'recharts';\nimport type { ChartLegendPosition } from '../types';\nimport { MUTED, TEXT } from './colors';\nimport { TEXT_SIZE } from './axes';\n\n/**\n * The series a click on the legend hid, and the toggle. A hidden series is\n * passed to its graphical item as `hide`, so the axes fit what is left.\n */\nexport const useHiddenSeries = () => {\n  const [hidden, setHidden] = useState<ReadonlySet<string>>(new Set());\n  const toggle = useCallback((key: string) => {\n    setHidden((current) => {\n      const next = new Set(current);\n      if (!next.delete(key)) next.add(key);\n      return next;\n    });\n  }, []);\n  return { hidden, toggle };\n};\n\ntype ChartLegendProps = {\n  /** Given by Recharts: one entry per series, in the order the series are drawn. */\n  payload?: readonly LegendPayload[];\n  /** The keys of the hidden series. */\n  hidden: ReadonlySet<string>;\n  onToggle: (key: string) => void;\n  /** Items in a column (`left`, `right`) or a row (`top`, `bottom`). */\n  column?: boolean;\n  /**\n   * A figure written after the name of the entry at `index`: a value and its\n   * share. In a column the figures sit at the right edge, aligned on their\n   * last digit; in a row they follow the name.\n   */\n  detail?: (index: number) => { value: string; share: string };\n};\n\n/**\n * The legend of every chart: a round chip and the series name in the muted\n * text color, one button per series. A click (or Enter, Space) hides the series\n * and shows it again; the button says which in `aria-pressed`. Pass it as\n * `<Legend content={…} itemSorter={null} />`: Recharts sorts the items by name\n * unless told not to, and the series keep their order.\n */\nexport const ChartLegend = ({ payload, hidden, onToggle, column, detail }: ChartLegendProps) => (\n  <ul\n    style={{\n      display: 'flex',\n      flexDirection: column ? 'column' : 'row',\n      flexWrap: 'wrap',\n      gap: column ? '0.375rem' : '0.25rem 1rem',\n      margin: 0,\n      padding: 0,\n      listStyle: 'none',\n      fontSize: TEXT_SIZE,\n      color: MUTED,\n    }}\n  >\n    {payload?.map((entry, index) => {\n      const key = String(entry.dataKey);\n      const figures = detail?.(index);\n      const off = hidden.has(key);\n      return (\n        <li key={key}>\n          <button\n            type=\"button\"\n            aria-pressed={!off}\n            onClick={() => onToggle(key)}\n            className=\"focus-visible:focus-indicator\"\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '0.375rem',\n              padding: '0.125rem 0.25rem',\n              font: 'inherit',\n              color: 'inherit',\n              background: 'none',\n              border: 0,\n              borderRadius: '0.25rem',\n              cursor: 'pointer',\n              textDecoration: off ? 'line-through' : undefined,\n              // The figures of a column reach its right edge, which aligns them.\n              ...(figures && column ? { display: 'flex', width: '100%', gap: '0.75rem' } : {}),\n            }}\n          >\n            <span\n              aria-hidden\n              style={{\n                width: '0.625rem',\n                height: '0.625rem',\n                borderRadius: '50%',\n                background: entry.color,\n                // Text keeps its color: dimming it would fail the contrast check.\n                opacity: off ? 0.35 : 1,\n              }}\n            />\n            {figures ? (\n              <>\n                <span style={column ? { flex: 1, textAlign: 'start' } : undefined}>\n                  {entry.value as ReactNode}\n                </span>\n                <span\n                  style={{\n                    color: TEXT,\n                    fontWeight: 600,\n                    fontVariantNumeric: 'tabular-nums',\n                    textAlign: 'end',\n                  }}\n                >\n                  {figures.value}\n                </span>\n                <span\n                  style={{\n                    minWidth: column ? '3.5ch' : undefined,\n                    fontVariantNumeric: 'tabular-nums',\n                    textAlign: 'end',\n                  }}\n                >\n                  {figures.share}\n                </span>\n              </>\n            ) : (\n              (entry.value as ReactNode)\n            )}\n          </button>\n        </li>\n      );\n    })}\n  </ul>\n);\n\nconst GAP = '1rem';\n\n/**\n * The props of the `<Legend>` of a chart: on `position`, the chips and names\n * of `ChartLegend`, in series order, a `GAP` away from the plot.\n */\nexport const legendProps = (\n  position: ChartLegendPosition,\n  { hidden, toggle }: ReturnType<typeof useHiddenSeries>\n): LegendProps => ({\n  position,\n  itemSorter: null,\n  wrapperStyle: {\n    top: { width: '100%', paddingBottom: GAP },\n    bottom: { width: '100%', paddingTop: GAP },\n    left: { paddingRight: GAP },\n    right: { paddingLeft: GAP },\n  }[position],\n  content: (\n    <ChartLegend\n      hidden={hidden}\n      onToggle={toggle}\n      column={position === 'left' || position === 'right'}\n    />\n  ),\n});\n"]}
+{"version":3,"sources":["../src/core/ChartLegend.tsx"],"names":[],"mappings":"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","file":"chunk-4AKHZNWP.js","sourcesContent":["import { useCallback, useState, type ReactNode } from 'react';\nimport type { LegendPayload, LegendProps } from 'recharts';\nimport type { ChartLegendPosition } from '../types';\nimport { MUTED, TEXT } from './colors';\nimport { TEXT_SIZE } from './axes';\n\n/**\n * The series a click on the legend hid, and the toggle. A hidden series is\n * passed to its graphical item as `hide`, so the axes fit what is left.\n */\nexport const useHiddenSeries = () => {\n  const [hidden, setHidden] = useState<ReadonlySet<string>>(new Set());\n  const toggle = useCallback((key: string) => {\n    setHidden((current) => {\n      const next = new Set(current);\n      if (!next.delete(key)) next.add(key);\n      return next;\n    });\n  }, []);\n  return { hidden, toggle };\n};\n\ntype ChartLegendProps = {\n  /** Given by Recharts: one entry per series, in the order the series are drawn. */\n  payload?: readonly LegendPayload[];\n  /** The keys of the hidden series. */\n  hidden: ReadonlySet<string>;\n  onToggle: (key: string) => void;\n  /** Items in a column (`left`, `right`) or a row (`top`, `bottom`). */\n  column?: boolean;\n  /**\n   * A figure written after the name of the entry at `index`: a value and its\n   * share. In a column the figures sit at the right edge, aligned on their\n   * last digit; in a row they follow the name.\n   */\n  detail?: (index: number) => { value: string; share: string };\n};\n\n/**\n * The legend of every chart: a round chip and the series name in the muted\n * text color, one button per series. A click (or Enter, Space) hides the series\n * and shows it again; the button says which in `aria-pressed`. Pass it as\n * `<Legend content={…} itemSorter={null} />`: Recharts sorts the items by name\n * unless told not to, and the series keep their order.\n */\nexport const ChartLegend = ({ payload, hidden, onToggle, column, detail }: ChartLegendProps) => (\n  <ul\n    style={{\n      display: 'flex',\n      flexDirection: column ? 'column' : 'row',\n      flexWrap: 'wrap',\n      gap: column ? '0.375rem' : '0.25rem 1rem',\n      margin: 0,\n      padding: 0,\n      listStyle: 'none',\n      fontSize: TEXT_SIZE,\n      color: MUTED,\n    }}\n  >\n    {payload?.map((entry, index) => {\n      const key = String(entry.dataKey);\n      const figures = detail?.(index);\n      const off = hidden.has(key);\n      return (\n        <li key={key}>\n          <button\n            type=\"button\"\n            aria-pressed={!off}\n            onClick={() => onToggle(key)}\n            className=\"focus-visible:focus-indicator\"\n            style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: '0.375rem',\n              padding: '0.125rem 0.25rem',\n              font: 'inherit',\n              color: 'inherit',\n              background: 'none',\n              border: 0,\n              borderRadius: '0.25rem',\n              cursor: 'pointer',\n              textDecoration: off ? 'line-through' : undefined,\n              // The figures of a column reach its right edge, which aligns them.\n              ...(figures && column ? { display: 'flex', width: '100%', gap: '0.75rem' } : {}),\n            }}\n          >\n            <span\n              aria-hidden\n              style={{\n                width: '0.625rem',\n                height: '0.625rem',\n                borderRadius: '50%',\n                background: entry.color,\n                // Text keeps its color: dimming it would fail the contrast check.\n                opacity: off ? 0.35 : 1,\n              }}\n            />\n            {figures ? (\n              <>\n                <span style={column ? { flex: 1, textAlign: 'start' } : undefined}>\n                  {entry.value as ReactNode}\n                </span>\n                <span\n                  style={{\n                    color: TEXT,\n                    fontWeight: 600,\n                    fontVariantNumeric: 'tabular-nums',\n                    textAlign: 'end',\n                  }}\n                >\n                  {figures.value}\n                </span>\n                <span\n                  style={{\n                    minWidth: column ? '3.5ch' : undefined,\n                    fontVariantNumeric: 'tabular-nums',\n                    textAlign: 'end',\n                  }}\n                >\n                  {figures.share}\n                </span>\n              </>\n            ) : (\n              (entry.value as ReactNode)\n            )}\n          </button>\n        </li>\n      );\n    })}\n  </ul>\n);\n\nconst GAP = '1rem';\n\n/**\n * The props of the `<Legend>` of a chart: on `position`, the chips and names\n * of `ChartLegend`, in series order, a `GAP` away from the plot.\n */\nexport const legendProps = (\n  position: ChartLegendPosition,\n  { hidden, toggle }: ReturnType<typeof useHiddenSeries>\n): LegendProps => ({\n  position,\n  itemSorter: null,\n  wrapperStyle: {\n    top: { width: '100%', paddingBottom: GAP },\n    bottom: { width: '100%', paddingTop: GAP },\n    left: { paddingRight: GAP },\n    right: { paddingLeft: GAP },\n  }[position],\n  content: (\n    <ChartLegend\n      hidden={hidden}\n      onToggle={toggle}\n      column={position === 'left' || position === 'right'}\n    />\n  ),\n});\n"]}

package/dist/{chunk-3N43QT36.js → chunk-56WD3OHA.js}

@@ -13,8 +13,10 @@ var frameProps = ({
   accessibilityLayer: keyboard,
   ...keyboard ? {} : { role: "img" },
   "aria-label": ariaLabel,
-  // `maxWidth`: a chart wider than its parent would widen the page.
-  style: { width, height, maxWidth: "100%" }
+  // `maxWidth`: a chart wider than its parent would widen the page. `direction`: a chart keeps
+  // its left-to-right axes under `dir="rtl"`; left alone, the SVG's `text-anchor` would read
+  // `start` and `end` from the page and put the labels on the wrong side of their marks.
+  style: { width, height, maxWidth: "100%", direction: "ltr" }
 });
 var useFontsLoaded = () => {
   const [loaded, setLoaded] = useState(0);
@@ -56,5 +58,5 @@ var ChartEmpty = ({ message, ariaLabel, height, width = "100%" }) => /* @__PURE_
 );
 
 export { ChartEmpty, frameProps, useFontsLoaded };
-//# sourceMappingURL=chunk-3N43QT36.js.map
-//# sourceMappingURL=chunk-3N43QT36.js.map
+//# sourceMappingURL=chunk-56WD3OHA.js.map
+//# sourceMappingURL=chunk-56WD3OHA.js.map

package/dist/chunk-56WD3OHA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/frame.tsx"],"names":[],"mappings":";;;;;AAoBO,IAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA,GAAW;AACb,CAAA,MAAqB;AAAA,EACnB,UAAA,EAAY,IAAA;AAAA,EACZ,kBAAA,EAAoB,QAAA;AAAA,EACpB,GAAI,QAAA,GAAW,EAAC,GAAI,EAAE,MAAM,KAAA,EAAM;AAAA,EAClC,YAAA,EAAc,SAAA;AAAA;AAAA;AAAA;AAAA,EAId,OAAO,EAAE,KAAA,EAAO,QAAQ,QAAA,EAAU,MAAA,EAAQ,WAAW,KAAA;AACvD,CAAA;AAWO,IAAM,iBAAiB,MAAa;AACzC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAgB,CAAC,CAAA;AAC7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAA,GAAQ,OAAO,QAAA,KAAa,WAAA,GAAc,SAAY,QAAA,CAAS,KAAA;AACrE,IAAA,IAAI,CAAC,OAAO,gBAAA,EAAkB;AAC9B,IAAA,IAAI,MAAA,GAAS,IAAA;AACb,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,IAAI,MAAA,YAAkB,CAAC,CAAA;AAAA,IACzB,CAAA;AACA,IAAA,KAAA,CAAM,gBAAA,CAAiB,eAAe,IAAI,CAAA;AAG1C,IAAA,IAAI,MAAM,MAAA,KAAW,SAAA,OAAgB,KAAA,CAAM,KAAA,CAAM,KAAK,IAAI,CAAA;AAC1D,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,GAAS,KAAA;AACT,MAAA,KAAA,CAAM,mBAAA,CAAoB,eAAe,IAAI,CAAA;AAAA,IAC/C,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,OAAO,MAAA;AACT;AASO,IAAM,UAAA,GAAa,CAAC,EAAE,OAAA,EAAS,WAAW,MAAA,EAAQ,KAAA,GAAQ,QAAO,qBACtE,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,IAAA,EAAK,OAAA;AAAA,IACL,YAAA,EAAY,SAAA;AAAA,IACZ,kBAAA,EAAiB,EAAA;AAAA,IACjB,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,cAAA,EAAgB,QAAA;AAAA,MAChB,KAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA,EAAU,MAAA;AAAA,MACV,KAAA,EAAO,KAAA;AAAA,MACP,QAAA,EAAU,0BAAA;AAAA,MACV,SAAA,EAAW;AAAA,KACb;AAAA,IAEC,QAAA,EAAA;AAAA;AACH","file":"chunk-56WD3OHA.js","sourcesContent":["import { useEffect, useState, type CSSProperties } from 'react';\nimport { MUTED } from './colors';\nimport type { ChartSize } from '../types';\n\ntype FrameOptions = ChartSize & {\n  ariaLabel: string;\n  /**\n   * Tab reaches the chart and the arrow keys walk its points (default). Off,\n   * the chart is an image out of the tab order: right for a single value.\n   */\n  keyboard?: boolean;\n};\n\n/**\n * What every Recharts chart takes on its root, spread onto it: it fills the\n * width it is given (`width` default `100%`) at `height`, and is named by\n * `ariaLabel`. With `accessibilityLayer`, Recharts makes the chart an\n * `application` in the tab order, and the arrow keys move the tooltip from\n * point to point.\n */\nexport const frameProps = ({\n  height,\n  width = '100%',\n  ariaLabel,\n  keyboard = true,\n}: FrameOptions) => ({\n  responsive: true,\n  accessibilityLayer: keyboard,\n  ...(keyboard ? {} : { role: 'img' }),\n  'aria-label': ariaLabel,\n  // `maxWidth`: a chart wider than its parent would widen the page. `direction`: a chart keeps\n  // its left-to-right axes under `dir=\"rtl\"`; left alone, the SVG's `text-anchor` would read\n  // `start` and `end` from the page and put the labels on the wrong side of their marks.\n  style: { width, height, maxWidth: '100%', direction: 'ltr' } satisfies CSSProperties,\n});\n\n/**\n * `0` until a web font finishes loading after the chart mounted, then `1`\n * (one more render of the chart, no more). `YAxis width=\"auto\"` measures its\n * labels once, in the fallback font if the web font is not there yet, and a\n * label set in the real font can overrun the axis: `useAxis` (axes.ts) hands\n * the axes a new object when this turns `1`, and they measure again. A chart\n * that mounts with the font ready never changes, and nothing runs where\n * `document.fonts` is missing (SSR, old browsers).\n */\nexport const useFontsLoaded = (): 0 | 1 => {\n  const [loaded, setLoaded] = useState<0 | 1>(0);\n  useEffect(() => {\n    const fonts = typeof document === 'undefined' ? undefined : document.fonts;\n    if (!fonts?.addEventListener) return;\n    let active = true;\n    const done = () => {\n      if (active) setLoaded(1);\n    };\n    fonts.addEventListener('loadingdone', done);\n    // A font already loading when the chart mounts: its event may be on its way\n    // or already gone, `ready` settles once it has loaded.\n    if (fonts.status === 'loading') void fonts.ready.then(done);\n    return () => {\n      active = false;\n      fonts.removeEventListener('loadingdone', done);\n    };\n  }, []);\n  return loaded;\n};\n\ntype EmptyProps = ChartSize & {\n  /** Plain text. An empty string draws nothing. */\n  message: string;\n  ariaLabel: string;\n};\n\n/** What a chart with no data draws in place of its plot: the message, centered, and nothing around it. */\nexport const ChartEmpty = ({ message, ariaLabel, height, width = '100%' }: EmptyProps) => (\n  <div\n    role=\"group\"\n    aria-label={ariaLabel}\n    data-chart-empty=\"\"\n    style={{\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width,\n      height,\n      maxWidth: '100%',\n      color: MUTED,\n      fontSize: 'var(--text-sm, 0.875rem)',\n      textAlign: 'center',\n    }}\n  >\n    {message}\n  </div>\n);\n"]}

package/dist/{chunk-YWYF5CCJ.js → chunk-6FGJZBTC.js}

@@ -2,7 +2,7 @@
 import { clampTo, gaugeName } from './chunk-OCD6JIIX.js';
 import { CenterText } from './chunk-URNXLVSK.js';
 import { ANIMATION } from './chunk-5C2RLJYZ.js';
-import { frameProps } from './chunk-3N43QT36.js';
+import { frameProps } from './chunk-56WD3OHA.js';
 import { TRACK } from './chunk-UATB2IRY.js';
 import { RadialBarChart, PolarAngleAxis, RadialBar } from 'recharts';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -57,5 +57,5 @@ var RadialGauge = ({
 );
 
 export { RadialGauge };
-//# sourceMappingURL=chunk-YWYF5CCJ.js.map
-//# sourceMappingURL=chunk-YWYF5CCJ.js.map
+//# sourceMappingURL=chunk-6FGJZBTC.js.map
+//# sourceMappingURL=chunk-6FGJZBTC.js.map

package/dist/{chunk-YWYF5CCJ.js.map → chunk-6FGJZBTC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/RadialGauge.tsx"],"names":[],"mappings":";;;;;;;;;AAkCO,IAAM,cAAc,CAAC;AAAA,EAC1B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,qBACE,IAAA;AAAA,EAAC,cAAA;AAAA,EAAA;AAAA,IACE,GAAG,UAAA,CAAW;AAAA,MACb,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,SAAA,CAAU,SAAA,KAAc,KAAA,IAAS,UAAU,IAAI,CAAA;AAAA,MAC1D,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,IAAA,EAAM,CAAC,EAAE,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,OAAA,CAAQ,KAAA,EAAO,GAAA,EAAK,GAAG,CAAA,EAAG,CAAA;AAAA,IACvD,UAAA,EAAY,EAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,WAAA,EAAa,MAAA;AAAA,IACb,WAAA,EAAY,MAAA;AAAA,IAEZ,cAAA,EAAgB,CAAA;AAAA,IAChB,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA,EAAE;AAAA,IAE9C,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQ,GAAA,CAAC,UAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACrB,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAK,QAAA,EAAS,MAAA,EAAQ,CAAC,GAAA,EAAK,GAAG,CAAA,EAAG,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,CAAA;AAAA,sBAChF,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,IAAA;AAAA,UACA,KAAA;AAAA,UAGA,UAAA,EAAY,KAAA,GAAQ,KAAA,GAAQ,EAAE,MAAM,KAAA,EAAM;AAAA,UACzC,GAAG;AAAA;AAAA,OACN;AAAA,0BACC,UAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAc,WAAU,2BAAA,EAA4B,CAAA;AAAA,MAC5E;AAAA;AAAA;AACH","file":"chunk-YWYF5CCJ.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { SectorProps } from 'recharts';\nimport { ANIMATION } from './animation';\nimport { TRACK } from './colors';\nimport { frameProps } from './frame';\nimport { clampTo, gaugeName } from './gauge';\nimport { CenterText } from './radial';\nimport type { ChartSize } from '../types';\n\ntype RadialGaugeProps = ChartSize & {\n  value: number;\n  label: string;\n  min: number;\n  max: number;\n  /** The value, formatted: the text in the middle and the end of the name. */\n  text: string;\n  ariaLabel?: string;\n  /** The share of the radius the ring leaves empty in the middle. */\n  hollow: string;\n  /** The fill of the arc: a color, or a `url(#…)` to what `defs` defines. */\n  fill?: string;\n  /** Draws the arc, and the track under it, in place of the filled sectors. */\n  shape?: (props: SectorProps) => ReactElement;\n  /** What the chart defines for `fill`, such as a gradient. */\n  defs?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * A full circle with one arc from the top, clockwise, on a neutral track, the\n * value in the middle over its label: the frame of `GradientRadial` and\n * `StrokedGauge`, which draw the arc and the track their own way. It is an image (out of the tab order) named by its value.\n */\nexport const RadialGauge = ({\n  value,\n  label,\n  min,\n  max,\n  text,\n  ariaLabel,\n  hollow,\n  fill,\n  shape,\n  defs,\n  children,\n  height,\n  width,\n}: RadialGaugeProps) => (\n  <RadialBarChart\n    {...frameProps({\n      height,\n      width,\n      ariaLabel: gaugeName(ariaLabel ?? (label || 'Gauge'), text),\n      keyboard: false,\n    })}\n    data={[{ name: label, value: clampTo(value, min, max) }]}\n    startAngle={90}\n    endAngle={-270}\n    innerRadius={hollow}\n    outerRadius=\"100%\"\n    // The arc is as thick as the ring: no gap between the bar and its band.\n    barCategoryGap={0}\n    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n  >\n    {defs && <defs>{defs}</defs>}\n    <PolarAngleAxis type=\"number\" domain={[min, max]} tick={false} axisLine={false} />\n    <RadialBar\n      dataKey=\"value\"\n      fill={fill}\n      shape={shape}\n      // Recharts draws a background sector of its own and cannot restyle it: a\n      // `shape` that draws the track too hides it.\n      background={shape ? false : { fill: TRACK }}\n      {...ANIMATION}\n    />\n    <CenterText value={text} label={label} valueSize=\"var(--text-3xl, 1.875rem)\" />\n    {children}\n  </RadialBarChart>\n);\n"]}
+{"version":3,"sources":["../src/core/RadialGauge.tsx"],"names":[],"mappings":";;;;;;;;;AAkCO,IAAM,cAAc,CAAC;AAAA,EAC1B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,qBACE,IAAA;AAAA,EAAC,cAAA;AAAA,EAAA;AAAA,IACE,GAAG,UAAA,CAAW;AAAA,MACb,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,SAAA,CAAU,SAAA,KAAc,KAAA,IAAS,UAAU,IAAI,CAAA;AAAA,MAC1D,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,IAAA,EAAM,CAAC,EAAE,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,OAAA,CAAQ,KAAA,EAAO,GAAA,EAAK,GAAG,CAAA,EAAG,CAAA;AAAA,IACvD,UAAA,EAAY,EAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,WAAA,EAAa,MAAA;AAAA,IACb,WAAA,EAAY,MAAA;AAAA,IAEZ,cAAA,EAAgB,CAAA;AAAA,IAChB,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA,EAAE;AAAA,IAE9C,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQ,GAAA,CAAC,UAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACrB,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAK,QAAA,EAAS,MAAA,EAAQ,CAAC,GAAA,EAAK,GAAG,CAAA,EAAG,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,CAAA;AAAA,sBAChF,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,IAAA;AAAA,UACA,KAAA;AAAA,UAGA,UAAA,EAAY,KAAA,GAAQ,KAAA,GAAQ,EAAE,MAAM,KAAA,EAAM;AAAA,UACzC,GAAG;AAAA;AAAA,OACN;AAAA,0BACC,UAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAc,WAAU,2BAAA,EAA4B,CAAA;AAAA,MAC5E;AAAA;AAAA;AACH","file":"chunk-6FGJZBTC.js","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { SectorProps } from 'recharts';\nimport { ANIMATION } from './animation';\nimport { TRACK } from './colors';\nimport { frameProps } from './frame';\nimport { clampTo, gaugeName } from './gauge';\nimport { CenterText } from './radial';\nimport type { ChartSize } from '../types';\n\ntype RadialGaugeProps = ChartSize & {\n  value: number;\n  label: string;\n  min: number;\n  max: number;\n  /** The value, formatted: the text in the middle and the end of the name. */\n  text: string;\n  ariaLabel?: string;\n  /** The share of the radius the ring leaves empty in the middle. */\n  hollow: string;\n  /** The fill of the arc: a color, or a `url(#…)` to what `defs` defines. */\n  fill?: string;\n  /** Draws the arc, and the track under it, in place of the filled sectors. */\n  shape?: (props: SectorProps) => ReactElement;\n  /** What the chart defines for `fill`, such as a gradient. */\n  defs?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * A full circle with one arc from the top, clockwise, on a neutral track, the\n * value in the middle over its label: the frame of `GradientRadial` and\n * `StrokedGauge`, which draw the arc and the track their own way. It is an image (out of the tab order) named by its value.\n */\nexport const RadialGauge = ({\n  value,\n  label,\n  min,\n  max,\n  text,\n  ariaLabel,\n  hollow,\n  fill,\n  shape,\n  defs,\n  children,\n  height,\n  width,\n}: RadialGaugeProps) => (\n  <RadialBarChart\n    {...frameProps({\n      height,\n      width,\n      ariaLabel: gaugeName(ariaLabel ?? (label || 'Gauge'), text),\n      keyboard: false,\n    })}\n    data={[{ name: label, value: clampTo(value, min, max) }]}\n    startAngle={90}\n    endAngle={-270}\n    innerRadius={hollow}\n    outerRadius=\"100%\"\n    // The arc is as thick as the ring: no gap between the bar and its band.\n    barCategoryGap={0}\n    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n  >\n    {defs && <defs>{defs}</defs>}\n    <PolarAngleAxis type=\"number\" domain={[min, max]} tick={false} axisLine={false} />\n    <RadialBar\n      dataKey=\"value\"\n      fill={fill}\n      shape={shape}\n      // Recharts draws a background sector of its own and cannot restyle it: a\n      // `shape` that draws the track too hides it.\n      background={shape ? false : { fill: TRACK }}\n      {...ANIMATION}\n    />\n    <CenterText value={text} label={label} valueSize=\"var(--text-3xl, 1.875rem)\" />\n    {children}\n  </RadialBarChart>\n);\n"]}

package/dist/{chunk-MN4CDVOS.cjs → chunk-CMBNNLIV.cjs}

@@ -4,7 +4,7 @@
 var chunkAAYHG7YK_cjs = require('./chunk-AAYHG7YK.cjs');
 var chunkX3YZP5WF_cjs = require('./chunk-X3YZP5WF.cjs');
 var chunkTYQWZR3S_cjs = require('./chunk-TYQWZR3S.cjs');
-var chunk6NRRABPF_cjs = require('./chunk-6NRRABPF.cjs');
+var chunkSR2ESX3R_cjs = require('./chunk-SR2ESX3R.cjs');
 var chunkLT3UC65O_cjs = require('./chunk-LT3UC65O.cjs');
 var recharts = require('recharts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -26,7 +26,7 @@ var RadialGauge = ({
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   recharts.RadialBarChart,
   {
-    ...chunk6NRRABPF_cjs.frameProps({
+    ...chunkSR2ESX3R_cjs.frameProps({
       height,
       width,
       ariaLabel: chunkAAYHG7YK_cjs.gaugeName(ariaLabel ?? (label || "Gauge"), text),
@@ -59,5 +59,5 @@ var RadialGauge = ({
 );
 
 exports.RadialGauge = RadialGauge;
-//# sourceMappingURL=chunk-MN4CDVOS.cjs.map
-//# sourceMappingURL=chunk-MN4CDVOS.cjs.map
+//# sourceMappingURL=chunk-CMBNNLIV.cjs.map
+//# sourceMappingURL=chunk-CMBNNLIV.cjs.map

package/dist/{chunk-MN4CDVOS.cjs.map → chunk-CMBNNLIV.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/RadialGauge.tsx"],"names":["jsxs","RadialBarChart","frameProps","gaugeName","clampTo","jsx","PolarAngleAxis","RadialBar","TRACK","ANIMATION","CenterText"],"mappings":";;;;;;;;;;;AAkCO,IAAM,cAAc,CAAC;AAAA,EAC1B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,qBACEA,eAAA;AAAA,EAACC,uBAAA;AAAA,EAAA;AAAA,IACE,GAAGC,4BAAA,CAAW;AAAA,MACb,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAWC,2BAAA,CAAU,SAAA,KAAc,KAAA,IAAS,UAAU,IAAI,CAAA;AAAA,MAC1D,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,IAAA,EAAM,CAAC,EAAE,IAAA,EAAM,KAAA,EAAO,KAAA,EAAOC,yBAAA,CAAQ,KAAA,EAAO,GAAA,EAAK,GAAG,CAAA,EAAG,CAAA;AAAA,IACvD,UAAA,EAAY,EAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,WAAA,EAAa,MAAA;AAAA,IACb,WAAA,EAAY,MAAA;AAAA,IAEZ,cAAA,EAAgB,CAAA;AAAA,IAChB,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA,EAAE;AAAA,IAE9C,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQC,cAAA,CAAC,UAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACrBA,cAAA,CAACC,uBAAA,EAAA,EAAe,IAAA,EAAK,QAAA,EAAS,MAAA,EAAQ,CAAC,GAAA,EAAK,GAAG,CAAA,EAAG,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,CAAA;AAAA,sBAChFD,cAAA;AAAA,QAACE,kBAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,IAAA;AAAA,UACA,KAAA;AAAA,UAGA,UAAA,EAAY,KAAA,GAAQ,KAAA,GAAQ,EAAE,MAAMC,uBAAA,EAAM;AAAA,UACzC,GAAGC;AAAA;AAAA,OACN;AAAA,qCACCC,4BAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAc,WAAU,2BAAA,EAA4B,CAAA;AAAA,MAC5E;AAAA;AAAA;AACH","file":"chunk-MN4CDVOS.cjs","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { SectorProps } from 'recharts';\nimport { ANIMATION } from './animation';\nimport { TRACK } from './colors';\nimport { frameProps } from './frame';\nimport { clampTo, gaugeName } from './gauge';\nimport { CenterText } from './radial';\nimport type { ChartSize } from '../types';\n\ntype RadialGaugeProps = ChartSize & {\n  value: number;\n  label: string;\n  min: number;\n  max: number;\n  /** The value, formatted: the text in the middle and the end of the name. */\n  text: string;\n  ariaLabel?: string;\n  /** The share of the radius the ring leaves empty in the middle. */\n  hollow: string;\n  /** The fill of the arc: a color, or a `url(#…)` to what `defs` defines. */\n  fill?: string;\n  /** Draws the arc, and the track under it, in place of the filled sectors. */\n  shape?: (props: SectorProps) => ReactElement;\n  /** What the chart defines for `fill`, such as a gradient. */\n  defs?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * A full circle with one arc from the top, clockwise, on a neutral track, the\n * value in the middle over its label: the frame of `GradientRadial` and\n * `StrokedGauge`, which draw the arc and the track their own way. It is an image (out of the tab order) named by its value.\n */\nexport const RadialGauge = ({\n  value,\n  label,\n  min,\n  max,\n  text,\n  ariaLabel,\n  hollow,\n  fill,\n  shape,\n  defs,\n  children,\n  height,\n  width,\n}: RadialGaugeProps) => (\n  <RadialBarChart\n    {...frameProps({\n      height,\n      width,\n      ariaLabel: gaugeName(ariaLabel ?? (label || 'Gauge'), text),\n      keyboard: false,\n    })}\n    data={[{ name: label, value: clampTo(value, min, max) }]}\n    startAngle={90}\n    endAngle={-270}\n    innerRadius={hollow}\n    outerRadius=\"100%\"\n    // The arc is as thick as the ring: no gap between the bar and its band.\n    barCategoryGap={0}\n    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n  >\n    {defs && <defs>{defs}</defs>}\n    <PolarAngleAxis type=\"number\" domain={[min, max]} tick={false} axisLine={false} />\n    <RadialBar\n      dataKey=\"value\"\n      fill={fill}\n      shape={shape}\n      // Recharts draws a background sector of its own and cannot restyle it: a\n      // `shape` that draws the track too hides it.\n      background={shape ? false : { fill: TRACK }}\n      {...ANIMATION}\n    />\n    <CenterText value={text} label={label} valueSize=\"var(--text-3xl, 1.875rem)\" />\n    {children}\n  </RadialBarChart>\n);\n"]}
+{"version":3,"sources":["../src/core/RadialGauge.tsx"],"names":["jsxs","RadialBarChart","frameProps","gaugeName","clampTo","jsx","PolarAngleAxis","RadialBar","TRACK","ANIMATION","CenterText"],"mappings":";;;;;;;;;;;AAkCO,IAAM,cAAc,CAAC;AAAA,EAC1B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,qBACEA,eAAA;AAAA,EAACC,uBAAA;AAAA,EAAA;AAAA,IACE,GAAGC,4BAAA,CAAW;AAAA,MACb,MAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAWC,2BAAA,CAAU,SAAA,KAAc,KAAA,IAAS,UAAU,IAAI,CAAA;AAAA,MAC1D,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,IACD,IAAA,EAAM,CAAC,EAAE,IAAA,EAAM,KAAA,EAAO,KAAA,EAAOC,yBAAA,CAAQ,KAAA,EAAO,GAAA,EAAK,GAAG,CAAA,EAAG,CAAA;AAAA,IACvD,UAAA,EAAY,EAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,WAAA,EAAa,MAAA;AAAA,IACb,WAAA,EAAY,MAAA;AAAA,IAEZ,cAAA,EAAgB,CAAA;AAAA,IAChB,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA,EAAE;AAAA,IAE9C,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQC,cAAA,CAAC,UAAM,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACrBA,cAAA,CAACC,uBAAA,EAAA,EAAe,IAAA,EAAK,QAAA,EAAS,MAAA,EAAQ,CAAC,GAAA,EAAK,GAAG,CAAA,EAAG,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,CAAA;AAAA,sBAChFD,cAAA;AAAA,QAACE,kBAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,OAAA;AAAA,UACR,IAAA;AAAA,UACA,KAAA;AAAA,UAGA,UAAA,EAAY,KAAA,GAAQ,KAAA,GAAQ,EAAE,MAAMC,uBAAA,EAAM;AAAA,UACzC,GAAGC;AAAA;AAAA,OACN;AAAA,qCACCC,4BAAA,EAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAc,WAAU,2BAAA,EAA4B,CAAA;AAAA,MAC5E;AAAA;AAAA;AACH","file":"chunk-CMBNNLIV.cjs","sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';\nimport type { SectorProps } from 'recharts';\nimport { ANIMATION } from './animation';\nimport { TRACK } from './colors';\nimport { frameProps } from './frame';\nimport { clampTo, gaugeName } from './gauge';\nimport { CenterText } from './radial';\nimport type { ChartSize } from '../types';\n\ntype RadialGaugeProps = ChartSize & {\n  value: number;\n  label: string;\n  min: number;\n  max: number;\n  /** The value, formatted: the text in the middle and the end of the name. */\n  text: string;\n  ariaLabel?: string;\n  /** The share of the radius the ring leaves empty in the middle. */\n  hollow: string;\n  /** The fill of the arc: a color, or a `url(#…)` to what `defs` defines. */\n  fill?: string;\n  /** Draws the arc, and the track under it, in place of the filled sectors. */\n  shape?: (props: SectorProps) => ReactElement;\n  /** What the chart defines for `fill`, such as a gradient. */\n  defs?: ReactNode;\n  children?: ReactNode;\n};\n\n/**\n * A full circle with one arc from the top, clockwise, on a neutral track, the\n * value in the middle over its label: the frame of `GradientRadial` and\n * `StrokedGauge`, which draw the arc and the track their own way. It is an image (out of the tab order) named by its value.\n */\nexport const RadialGauge = ({\n  value,\n  label,\n  min,\n  max,\n  text,\n  ariaLabel,\n  hollow,\n  fill,\n  shape,\n  defs,\n  children,\n  height,\n  width,\n}: RadialGaugeProps) => (\n  <RadialBarChart\n    {...frameProps({\n      height,\n      width,\n      ariaLabel: gaugeName(ariaLabel ?? (label || 'Gauge'), text),\n      keyboard: false,\n    })}\n    data={[{ name: label, value: clampTo(value, min, max) }]}\n    startAngle={90}\n    endAngle={-270}\n    innerRadius={hollow}\n    outerRadius=\"100%\"\n    // The arc is as thick as the ring: no gap between the bar and its band.\n    barCategoryGap={0}\n    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n  >\n    {defs && <defs>{defs}</defs>}\n    <PolarAngleAxis type=\"number\" domain={[min, max]} tick={false} axisLine={false} />\n    <RadialBar\n      dataKey=\"value\"\n      fill={fill}\n      shape={shape}\n      // Recharts draws a background sector of its own and cannot restyle it: a\n      // `shape` that draws the track too hides it.\n      background={shape ? false : { fill: TRACK }}\n      {...ANIMATION}\n    />\n    <CenterText value={text} label={label} valueSize=\"var(--text-3xl, 1.875rem)\" />\n    {children}\n  </RadialBarChart>\n);\n"]}

package/dist/{chunk-RILUG7JB.js → chunk-DI2FBGKM.js}

@@ -1,5 +1,5 @@
 "use client";
-import { useFontsLoaded } from './chunk-3N43QT36.js';
+import { useFontsLoaded } from './chunk-56WD3OHA.js';
 import { MUTED, GRID } from './chunk-UATB2IRY.js';
 
 // src/core/axes.ts
@@ -40,5 +40,5 @@ var yAxisTitle = (title) => title ? {
 } : {};
 
 export { AXIS, GRID_PROPS, TEXT_SIZE, useAxis, xAxisTitle, yAxisTitle };
-//# sourceMappingURL=chunk-RILUG7JB.js.map
-//# sourceMappingURL=chunk-RILUG7JB.js.map
+//# sourceMappingURL=chunk-DI2FBGKM.js.map
+//# sourceMappingURL=chunk-DI2FBGKM.js.map

package/dist/{chunk-RILUG7JB.js.map → chunk-DI2FBGKM.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/axes.ts"],"names":[],"mappings":";;;;;AAMO,IAAM,SAAA,GAAY;AAGlB,IAAM,IAAA,GAAO;AAAA,EAClB,QAAA,EAAU,KAAA;AAAA,EACV,QAAA,EAAU,KAAA;AAAA,EACV,UAAA,EAAY,CAAA;AAAA,EACZ,IAAA,EAAM,EAAE,IAAA,EAAM,KAAA,EAAO,OAAO,EAAE,QAAA,EAAU,WAAU;AACpD;AAMA,IAAM,gBAAA,GAAmB,EAAE,GAAG,IAAA,EAAM,MAAM,EAAE,GAAG,IAAA,CAAK,IAAA,EAAK,EAAE;AAQpD,IAAM,OAAA,GAAU,MAAO,cAAA,EAAe,GAAI,gBAAA,GAAmB;AAG7D,IAAM,UAAA,GAAa;AAAA,EACxB,QAAA,EAAU,KAAA;AAAA,EACV,MAAA,EAAQ,IAAA;AAAA,EACR,eAAA,EAAiB;AACnB;AAGA,IAAM,UAAA,GAAa,EAAE,IAAA,EAAM,KAAA,EAAO,UAAU,SAAA,EAAU;AAG/C,IAAM,UAAA,GAAa,CAAC,KAAA,KACzB,KAAA,GACK;AAAA,EACC,MAAA,EAAQ,EAAA;AAAA,EACR,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,KAAA;AAAA,IACP,QAAA,EAAU,cAAA;AAAA,IACV,MAAA,EAAQ,CAAA;AAAA,IACR,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAA,GACA;AAGC,IAAM,UAAA,GAAa,CAAC,KAAA,KACzB,KAAA,GACK;AAAA,EACC,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,KAAA;AAAA,IACP,KAAA,EAAO,GAAA;AAAA,IACP,QAAA,EAAU,YAAA;AAAA,IACV,MAAA,EAAQ,CAAA;AAAA,IACR,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO,EAAE,GAAG,UAAA,EAAY,YAAY,QAAA;AAAS;AAEjD,CAAA,GACA","file":"chunk-RILUG7JB.js","sourcesContent":["import { GRID, MUTED } from './colors';\nimport { useFontsLoaded } from './frame';\n\n// Axis text is 12px at the normal text size and follows the text size setting:\n// `--text-xs` is rescaled on <html> by `data-text-size`. The fallback is the\n// normal size, for an app that doesn't load the theme.\nexport const TEXT_SIZE = 'var(--text-xs, 0.75rem)';\n\n/** The look of every axis: no line, no tick mark, muted text. */\nexport const AXIS = {\n  axisLine: false,\n  tickLine: false,\n  tickMargin: 8,\n  tick: { fill: MUTED, style: { fontSize: TEXT_SIZE } },\n} as const;\n\n// `AXIS` again, with a `tick` object of its own. Recharts measures a\n// `width=\"auto\"` axis when its settings change, and reads the same `tick`\n// object as no change: handing it a new one after a web font has loaded makes\n// the axis measure its labels again, in the font that is drawn.\nconst AXIS_AFTER_FONTS = { ...AXIS, tick: { ...AXIS.tick } } as const;\n\n/**\n * `AXIS` for the axes of a chart. Once a web font has finished loading after\n * the chart mounted it is another object, once: the labels were measured in\n * the fallback font, and an axis with `width=\"auto\"` makes room for them in\n * the font that is drawn (recharts 3.10.1 measures on a settings change).\n */\nexport const useAxis = () => (useFontsLoaded() ? AXIS_AFTER_FONTS : AXIS);\n\n/** The grid: horizontal dashed lines only. */\nexport const GRID_PROPS = {\n  vertical: false,\n  stroke: GRID,\n  strokeDasharray: '4 4',\n} as const;\n\n// `fill` as an attribute too: the label's own default is gray.\nconst titleStyle = { fill: MUTED, fontSize: TEXT_SIZE } as const;\n\n/** Props for an `XAxis` with an optional title under it. The title is SVG text: markup shows as written. */\nexport const xAxisTitle = (title?: string) =>\n  title\n    ? ({\n        height: 52,\n        label: {\n          value: title,\n          position: 'insideBottom',\n          offset: 0,\n          fill: MUTED,\n          style: titleStyle,\n        },\n      } as const)\n    : {};\n\n/** Props for a `YAxis` with an optional title beside it. */\nexport const yAxisTitle = (title?: string) =>\n  title\n    ? ({\n        label: {\n          value: title,\n          angle: -90,\n          position: 'insideLeft',\n          offset: 4,\n          fill: MUTED,\n          style: { ...titleStyle, textAnchor: 'middle' },\n        },\n      } as const)\n    : {};\n"]}
+{"version":3,"sources":["../src/core/axes.ts"],"names":[],"mappings":";;;;;AAMO,IAAM,SAAA,GAAY;AAGlB,IAAM,IAAA,GAAO;AAAA,EAClB,QAAA,EAAU,KAAA;AAAA,EACV,QAAA,EAAU,KAAA;AAAA,EACV,UAAA,EAAY,CAAA;AAAA,EACZ,IAAA,EAAM,EAAE,IAAA,EAAM,KAAA,EAAO,OAAO,EAAE,QAAA,EAAU,WAAU;AACpD;AAMA,IAAM,gBAAA,GAAmB,EAAE,GAAG,IAAA,EAAM,MAAM,EAAE,GAAG,IAAA,CAAK,IAAA,EAAK,EAAE;AAQpD,IAAM,OAAA,GAAU,MAAO,cAAA,EAAe,GAAI,gBAAA,GAAmB;AAG7D,IAAM,UAAA,GAAa;AAAA,EACxB,QAAA,EAAU,KAAA;AAAA,EACV,MAAA,EAAQ,IAAA;AAAA,EACR,eAAA,EAAiB;AACnB;AAGA,IAAM,UAAA,GAAa,EAAE,IAAA,EAAM,KAAA,EAAO,UAAU,SAAA,EAAU;AAG/C,IAAM,UAAA,GAAa,CAAC,KAAA,KACzB,KAAA,GACK;AAAA,EACC,MAAA,EAAQ,EAAA;AAAA,EACR,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,KAAA;AAAA,IACP,QAAA,EAAU,cAAA;AAAA,IACV,MAAA,EAAQ,CAAA;AAAA,IACR,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAA,GACA;AAGC,IAAM,UAAA,GAAa,CAAC,KAAA,KACzB,KAAA,GACK;AAAA,EACC,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,KAAA;AAAA,IACP,KAAA,EAAO,GAAA;AAAA,IACP,QAAA,EAAU,YAAA;AAAA,IACV,MAAA,EAAQ,CAAA;AAAA,IACR,IAAA,EAAM,KAAA;AAAA,IACN,KAAA,EAAO,EAAE,GAAG,UAAA,EAAY,YAAY,QAAA;AAAS;AAEjD,CAAA,GACA","file":"chunk-DI2FBGKM.js","sourcesContent":["import { GRID, MUTED } from './colors';\nimport { useFontsLoaded } from './frame';\n\n// Axis text is 12px at the normal text size and follows the text size setting:\n// `--text-xs` is rescaled on <html> by `data-text-size`. The fallback is the\n// normal size, for an app that doesn't load the theme.\nexport const TEXT_SIZE = 'var(--text-xs, 0.75rem)';\n\n/** The look of every axis: no line, no tick mark, muted text. */\nexport const AXIS = {\n  axisLine: false,\n  tickLine: false,\n  tickMargin: 8,\n  tick: { fill: MUTED, style: { fontSize: TEXT_SIZE } },\n} as const;\n\n// `AXIS` again, with a `tick` object of its own. Recharts measures a\n// `width=\"auto\"` axis when its settings change, and reads the same `tick`\n// object as no change: handing it a new one after a web font has loaded makes\n// the axis measure its labels again, in the font that is drawn.\nconst AXIS_AFTER_FONTS = { ...AXIS, tick: { ...AXIS.tick } } as const;\n\n/**\n * `AXIS` for the axes of a chart. Once a web font has finished loading after\n * the chart mounted it is another object, once: the labels were measured in\n * the fallback font, and an axis with `width=\"auto\"` makes room for them in\n * the font that is drawn (recharts 3.10.1 measures on a settings change).\n */\nexport const useAxis = () => (useFontsLoaded() ? AXIS_AFTER_FONTS : AXIS);\n\n/** The grid: horizontal dashed lines only. */\nexport const GRID_PROPS = {\n  vertical: false,\n  stroke: GRID,\n  strokeDasharray: '4 4',\n} as const;\n\n// `fill` as an attribute too: the label's own default is gray.\nconst titleStyle = { fill: MUTED, fontSize: TEXT_SIZE } as const;\n\n/** Props for an `XAxis` with an optional title under it. The title is SVG text: markup shows as written. */\nexport const xAxisTitle = (title?: string) =>\n  title\n    ? ({\n        height: 52,\n        label: {\n          value: title,\n          position: 'insideBottom',\n          offset: 0,\n          fill: MUTED,\n          style: titleStyle,\n        },\n      } as const)\n    : {};\n\n/** Props for a `YAxis` with an optional title beside it. */\nexport const yAxisTitle = (title?: string) =>\n  title\n    ? ({\n        label: {\n          value: title,\n          angle: -90,\n          position: 'insideLeft',\n          offset: 4,\n          fill: MUTED,\n          style: { ...titleStyle, textAnchor: 'middle' },\n        },\n      } as const)\n    : {};\n"]}