@astryxdesign/lab 0.1.4-canary.f767ee2 → 0.1.4-canary.fd7ab46

package/README.md

@@ -12,6 +12,8 @@ Components in lab:
 - Compose with `@astryxdesign/core` components (use the theme, follow naming conventions)
 - Graduate to `@astryxdesign/core` after thorough engineering review
 
+See the **[Component Lifecycle](https://github.com/facebook/astryx/wiki/Component-Lifecycle)** wiki for how a component moves from lab → core (and the promotion gates), and the **[Component Hardening Protocol](https://github.com/facebook/astryx/wiki/Component-Hardening-Protocol)** for the bar a component must clear to graduate.
+
 ## What's here vs what's in core
 
 **Lab:** Works, has basic props, maybe has stories. API might change. Not accessibility-hardened, not vibe-tested, not fully themed. **Canary-only — no stability promise.**

package/dist/Chart/Chart.js

@@ -20,7 +20,7 @@ import { ChartProvider } from "./ChartContext.js";
  * - `'zero'` — symmetric range centered on 0 (good for +/- data)
  * - `'data'` — tight fit to data extent only (no forced zero)
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const DEFAULT_MARGIN = {
   top: 16,
   right: 16,
@@ -215,33 +215,33 @@ export function Chart({
     touchAction: interactive ? 'none' : undefined,
     userSelect: interactive ? 'none' : undefined
   };
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: containerRef,
     style: containerStyle,
-    children: containerWidth > 0 && /*#__PURE__*/_jsxs("svg", {
+    children: containerWidth > 0 && /*#__PURE__*/_jsxDEV("svg", {
       ref: svgRef,
       width: containerWidth,
       height: height,
       style: interactive ? {
         touchAction: 'none'
       } : undefined,
-      children: [/*#__PURE__*/_jsx("defs", {
-        children: /*#__PURE__*/_jsx("clipPath", {
+      children: [/*#__PURE__*/_jsxDEV("defs", {
+        children: /*#__PURE__*/_jsxDEV("clipPath", {
           id: "astryx-chart-plot",
-          children: /*#__PURE__*/_jsx("rect", {
+          children: /*#__PURE__*/_jsxDEV("rect", {
             x: 0,
             y: 0,
             width: innerWidth,
             height: innerHeight
-          })
-        })
-      }), /*#__PURE__*/_jsx("g", {
+          }, void 0, false)
+        }, void 0, false)
+      }, void 0, false), /*#__PURE__*/_jsxDEV("g", {
         transform: `translate(${margin.left},${margin.top})`,
-        children: /*#__PURE__*/_jsx(ChartProvider, {
+        children: /*#__PURE__*/_jsxDEV(ChartProvider, {
           value: ctx,
           children: children
-        })
-      })]
-    })
-  });
+        }, void 0, false)
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
 }

package/dist/Chart/ChartArea.js

@@ -10,7 +10,7 @@ import { useMemo } from 'react';
 import { area, curveMonotoneX } from 'd3-shape';
 import { useChart } from "./ChartContext.js";
 import { xPixel } from "./utils.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Area band between two y-values. Use for confidence intervals, error ranges,
  * or any min/max band around a line.
@@ -54,18 +54,18 @@ export function ChartArea({
   if (!pathD) {
     return null;
   }
-  return /*#__PURE__*/_jsxs("g", {
-    children: [/*#__PURE__*/_jsx("path", {
+  return /*#__PURE__*/_jsxDEV("g", {
+    children: [/*#__PURE__*/_jsxDEV("path", {
       d: pathD,
       fill: color,
       fillOpacity: opacity,
       stroke: "none"
-    }), stroke && /*#__PURE__*/_jsx("path", {
+    }, void 0, false), stroke && /*#__PURE__*/_jsxDEV("path", {
       d: pathD,
       fill: "none",
       stroke: color,
       strokeWidth: strokeWidth,
       strokeOpacity: opacity * 2
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }

package/dist/Chart/ChartAxis.js

@@ -11,7 +11,7 @@
 import { useMemo } from 'react';
 import { useChart } from "./ChartContext.js";
 import { isBandScale } from "./utils.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Chart axis. Renders tick marks and labels for the x or y dimension.
  * Ticks transition smoothly when the scale domain shifts (e.g. streaming).
@@ -84,16 +84,16 @@ export function ChartAxis({
 
   // Transition style for smooth tick movement during streaming
   const tickTransition = animated ? 'transform 150ms linear, opacity 150ms ease' : undefined;
-  return /*#__PURE__*/_jsxs("g", {
+  return /*#__PURE__*/_jsxDEV("g", {
     transform: transform,
-    children: [/*#__PURE__*/_jsx("line", {
+    children: [/*#__PURE__*/_jsxDEV("line", {
       x1: isHorizontal ? 0 : 0,
       x2: isHorizontal ? width : 0,
       y1: isHorizontal ? axisLineY : 0,
       y2: isHorizontal ? axisLineY : height,
       stroke: "var(--color-border-emphasized)",
       strokeWidth: 1
-    }), ticks.map(({
+    }, void 0, false), ticks.map(({
       value,
       offset
     }) => {
@@ -102,46 +102,46 @@ export function ChartAxis({
       const isVisible = isHorizontal ? offset >= -10 && offset <= width + 10 : offset >= -10 && offset <= height + 10;
       if (isHorizontal) {
         const y = position === 'bottom' ? tickSize : -tickSize;
-        return /*#__PURE__*/_jsxs("g", {
+        return /*#__PURE__*/_jsxDEV("g", {
           style: {
             transform: `translateX(${offset}px)`,
             transition: tickTransition,
             opacity: isVisible ? 1 : 0
           },
-          children: [/*#__PURE__*/_jsx("line", {
+          children: [/*#__PURE__*/_jsxDEV("line", {
             y2: y,
             stroke: "var(--color-border-emphasized)",
             strokeWidth: 1
-          }), /*#__PURE__*/_jsx("text", {
+          }, void 0, false), /*#__PURE__*/_jsxDEV("text", {
             y: position === 'bottom' ? tickSize + 12 : -(tickSize + 4),
             textAnchor: "middle",
             fill: "var(--color-text-secondary)",
             fontSize: 12,
             children: label
-          })]
-        }, label);
+          }, void 0, false)]
+        }, label, true);
       }
       // Vertical axis
       const x = position === 'left' ? -tickSize : tickSize;
-      return /*#__PURE__*/_jsxs("g", {
+      return /*#__PURE__*/_jsxDEV("g", {
         style: {
           transform: `translateY(${offset}px)`,
           transition: tickTransition,
           opacity: isVisible ? 1 : 0
         },
-        children: [/*#__PURE__*/_jsx("line", {
+        children: [/*#__PURE__*/_jsxDEV("line", {
           x2: x,
           stroke: "var(--color-border-emphasized)",
           strokeWidth: 1
-        }), /*#__PURE__*/_jsx("text", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("text", {
           x: position === 'left' ? -(tickSize + 4) : tickSize + 4,
           dy: "0.32em",
           textAnchor: position === 'left' ? 'end' : 'start',
           fill: "var(--color-text-secondary)",
           fontSize: 12,
           children: label
-        })]
-      }, label);
+        }, void 0, false)]
+      }, label, true);
     })]
-  });
+  }, void 0, true);
 }

package/dist/Chart/ChartBar.js

@@ -8,7 +8,7 @@
 
 import { useChart } from "./ChartContext.js";
 import { isBandScale } from "./utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Bar marks. Requires a band xScale (categorical x-axis).
  * Bars grow from the zero line — handles both positive and negative values.
@@ -35,7 +35,7 @@ export function ChartBar({
 
   // Zero line position — bars grow from here
   const zeroY = yScale(0);
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsxDEV("g", {
     children: data.map((d, i) => {
       const xVal = xScale(String(d[xKey]));
       if (xVal == null) {
@@ -47,7 +47,7 @@ export function ChartBar({
       // Bar grows from zero line toward the value
       const barY = Math.min(yPos, zeroY);
       const barHeight = Math.abs(yPos - zeroY);
-      return /*#__PURE__*/_jsx("rect", {
+      return /*#__PURE__*/_jsxDEV("rect", {
         x: xVal,
         y: barY,
         width: xScale.bandwidth(),
@@ -55,7 +55,7 @@ export function ChartBar({
         fill: color,
         rx: radius,
         ry: radius
-      }, i);
+      }, i, false);
     })
-  });
+  }, void 0, false);
 }

package/dist/Chart/ChartBrush.js

@@ -15,7 +15,7 @@ import { isBandScale } from "./utils.js";
  * - `'x'` — horizontal range selection (default)
  * - `'xy'` — 2D rectangular selection
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 function localCoords(e) {
   const svg = e.currentTarget.ownerSVGElement;
   if (!svg) {
@@ -168,8 +168,8 @@ export function ChartBrush({
     touchAction: 'none',
     userSelect: 'none'
   };
-  return /*#__PURE__*/_jsxs("g", {
-    children: [/*#__PURE__*/_jsx("rect", {
+  return /*#__PURE__*/_jsxDEV("g", {
+    children: [/*#__PURE__*/_jsxDEV("rect", {
       x: 0,
       y: 0,
       width: width,
@@ -180,7 +180,7 @@ export function ChartBrush({
       onPointerMove: onPointerMove,
       onPointerUp: onPointerUp,
       onPointerCancel: onPointerUp
-    }), brush && (rectW > 1 || rectH > 1) && /*#__PURE__*/_jsx("rect", {
+    }, void 0, false), brush && (rectW > 1 || rectH > 1) && /*#__PURE__*/_jsxDEV("rect", {
       x: rectX,
       y: rectY,
       width: rectW,
@@ -192,6 +192,6 @@ export function ChartBrush({
       strokeOpacity: 0.4,
       rx: mode === 'xy' ? 2 : 0,
       pointerEvents: "none"
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }

package/dist/Chart/ChartCandlestick.js

@@ -12,7 +12,7 @@
 
 import { useChart } from "./ChartContext.js";
 import { isBandScale } from "./utils.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Candlestick / box-whisker marks.
  *
@@ -56,7 +56,7 @@ export function ChartCandlestick({
     return null;
   }
   const bw = xScale.bandwidth();
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsxDEV("g", {
     children: data.map((d, i) => {
       const xVal = xScale(String(d[xKey]));
       if (xVal == null) {
@@ -78,52 +78,52 @@ export function ChartCandlestick({
       if (variant === 'bar') {
         // OHLC bar: vertical line (high→low), left tick at open, right tick at close
         const tickLen = bw * bodyWidth * 0.4;
-        return /*#__PURE__*/_jsxs("g", {
-          children: [/*#__PURE__*/_jsx("line", {
+        return /*#__PURE__*/_jsxDEV("g", {
+          children: [/*#__PURE__*/_jsxDEV("line", {
             x1: centerX,
             x2: centerX,
             y1: yHigh,
             y2: yLow,
             stroke: fill,
             strokeWidth: strokeWidth
-          }), /*#__PURE__*/_jsx("line", {
+          }, void 0, false), /*#__PURE__*/_jsxDEV("line", {
             x1: centerX - tickLen,
             x2: centerX,
             y1: yOpen,
             y2: yOpen,
             stroke: fill,
             strokeWidth: strokeWidth
-          }), /*#__PURE__*/_jsx("line", {
+          }, void 0, false), /*#__PURE__*/_jsxDEV("line", {
             x1: centerX,
             x2: centerX + tickLen,
             y1: yClose,
             y2: yClose,
             stroke: fill,
             strokeWidth: strokeWidth
-          })]
-        }, i);
+          }, void 0, false)]
+        }, i, true);
       }
 
       // Default variant: filled body with whiskers
       const bodyW = bw * bodyWidth;
       const bodyX = centerX - bodyW / 2;
       const bodyH = Math.max(1, bodyBot - bodyTop);
-      return /*#__PURE__*/_jsxs("g", {
-        children: [/*#__PURE__*/_jsx("line", {
+      return /*#__PURE__*/_jsxDEV("g", {
+        children: [/*#__PURE__*/_jsxDEV("line", {
           x1: centerX,
           x2: centerX,
           y1: yHigh,
           y2: bodyTop,
           stroke: fill,
           strokeWidth: strokeWidth
-        }), /*#__PURE__*/_jsx("line", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("line", {
           x1: centerX,
           x2: centerX,
           y1: bodyBot,
           y2: yLow,
           stroke: fill,
           strokeWidth: strokeWidth
-        }), /*#__PURE__*/_jsx("rect", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("rect", {
           x: bodyX,
           y: bodyTop,
           width: bodyW,
@@ -131,8 +131,8 @@ export function ChartCandlestick({
           fill: fill,
           rx: radius,
           ry: radius
-        })]
-      }, i);
+        }, void 0, false)]
+      }, i, true);
     })
-  });
+  }, void 0, false);
 }

package/dist/Chart/ChartDot.js

@@ -8,7 +8,7 @@
 
 import { useChart } from "./ChartContext.js";
 import { xPixel } from "./utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Scatter dot marks.
  *
@@ -28,16 +28,16 @@ export function ChartDot({
     xScale,
     yScale
   } = useChart();
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsxDEV("g", {
     children: data.map((d, i) => {
       const x = xPixel(d, xKey, xScale);
       const yVal = typeof d[dataKey] === 'number' ? d[dataKey] : 0;
-      return /*#__PURE__*/_jsx("circle", {
+      return /*#__PURE__*/_jsxDEV("circle", {
         cx: x,
         cy: yScale(yVal),
         r: radius,
         fill: color
-      }, i);
+      }, i, false);
     })
-  });
+  }, void 0, false);
 }

package/dist/Chart/ChartDotGL.js

@@ -10,7 +10,7 @@ import { useRef, useEffect, useCallback } from 'react';
 import { useChart } from "./ChartContext.js";
 import { xPixel } from "./utils.js";
 import { hexToGL, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, createProgram, POINT_SIZE_COMPENSATION } from "./webgl.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const VERT = `
   attribute vec2 a_position;
   uniform vec2 u_resolution;
@@ -129,7 +129,7 @@ export function ChartDotGL({
   if (width <= 0 || height <= 0) {
     return null;
   }
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsxDEV("g", {
     ref: markerRef
-  });
+  }, void 0, false);
 }

package/dist/Chart/ChartDotGLInteractive.js

@@ -13,7 +13,7 @@
 import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { useChart } from "./ChartContext.js";
 import { xPixel } from "./utils.js";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 function hexToGL(hex) {
   const n = parseInt(hex.replace('#', ''), 16);
   return [(n >> 16) / 255, (n >> 8 & 0xff) / 255, (n & 0xff) / 255];
@@ -342,38 +342,38 @@ export function ChartDotGLInteractive({
     setMousePos(null);
   }, []);
   const datum = hoverIndex >= 0 && hoverIndex < data.length ? data[hoverIndex] : null;
-  const defaultTooltip = (d, i) => /*#__PURE__*/_jsxs("div", {
+  const defaultTooltip = (d, i) => /*#__PURE__*/_jsxDEV("div", {
     style: {
       display: 'flex',
       flexDirection: 'column',
       gap: 2,
       fontSize: 12
     },
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       style: {
         fontWeight: 600,
         color: 'var(--color-text-primary)'
       },
       children: ["Point ", i]
-    }), Object.entries(d).map(([k, v]) => /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsxs("span", {
+    }, void 0, true), Object.entries(d).map(([k, v]) => /*#__PURE__*/_jsxDEV("div", {
+      children: [/*#__PURE__*/_jsxDEV("span", {
         style: {
           color: 'var(--color-text-secondary)'
         },
         children: [k, ":"]
-      }), ' ', /*#__PURE__*/_jsx("span", {
+      }, void 0, true), ' ', /*#__PURE__*/_jsxDEV("span", {
         style: {
           fontWeight: 500
         },
         children: String(v)
-      })]
-    }, k))]
-  });
+      }, void 0, false)]
+    }, k, true))]
+  }, void 0, true);
   if (width <= 0 || height <= 0) {
     return null;
   }
-  return /*#__PURE__*/_jsxs("g", {
-    children: [/*#__PURE__*/_jsx("foreignObject", {
+  return /*#__PURE__*/_jsxDEV("g", {
+    children: [/*#__PURE__*/_jsxDEV("foreignObject", {
       x: 0,
       y: 0,
       width: width,
@@ -381,15 +381,15 @@ export function ChartDotGLInteractive({
       style: {
         overflow: 'hidden'
       },
-      children: /*#__PURE__*/_jsx("canvas", {
+      children: /*#__PURE__*/_jsxDEV("canvas", {
         ref: visCanvasRef,
         style: {
           width,
           height,
           pointerEvents: 'none'
         }
-      })
-    }), /*#__PURE__*/_jsx("foreignObject", {
+      }, void 0, false)
+    }, void 0, false), /*#__PURE__*/_jsxDEV("foreignObject", {
       x: 0,
       y: 0,
       width: 0,
@@ -397,13 +397,13 @@ export function ChartDotGLInteractive({
       style: {
         overflow: 'hidden'
       },
-      children: /*#__PURE__*/_jsx("canvas", {
+      children: /*#__PURE__*/_jsxDEV("canvas", {
         ref: pickCanvasRef,
         style: {
           display: 'none'
         }
-      })
-    }), /*#__PURE__*/_jsx("rect", {
+      }, void 0, false)
+    }, void 0, false), /*#__PURE__*/_jsxDEV("rect", {
       x: 0,
       y: 0,
       width: width,
@@ -411,7 +411,7 @@ export function ChartDotGLInteractive({
       fill: "transparent",
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave
-    }), datum && hoverIndex >= 0 && /*#__PURE__*/_jsx("circle", {
+    }, void 0, false), datum && hoverIndex >= 0 && /*#__PURE__*/_jsxDEV("circle", {
       cx: positions[hoverIndex * 2],
       cy: positions[hoverIndex * 2 + 1],
       r: size / 2 + 3,
@@ -420,7 +420,7 @@ export function ChartDotGLInteractive({
       strokeWidth: 2,
       strokeOpacity: 0.8,
       pointerEvents: "none"
-    }), datum && mousePos && /*#__PURE__*/_jsx("foreignObject", {
+    }, void 0, false), datum && mousePos && /*#__PURE__*/_jsxDEV("foreignObject", {
       x: mousePos.x + 12,
       y: Math.max(0, mousePos.y - 40),
       width: 200,
@@ -429,7 +429,7 @@ export function ChartDotGLInteractive({
       style: {
         overflow: 'visible'
       },
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         style: {
           background: 'var(--color-background-popover)',
           border: '1px solid var(--color-border)',
@@ -440,7 +440,7 @@ export function ChartDotGLInteractive({
           width: 'fit-content'
         },
         children: renderTooltip ? renderTooltip(datum, hoverIndex) : defaultTooltip(datum, hoverIndex)
-      })
-    })]
-  });
+      }, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
 }

package/dist/Chart/ChartErrorBar.js

@@ -8,7 +8,7 @@
 
 import { useChart } from "./ChartContext.js";
 import { xPixel } from "./utils.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Error bars with whisker caps. Pair with ChartBar or ChartDot.
  *
@@ -31,7 +31,7 @@ export function ChartErrorBar({
     xScale,
     yScale
   } = useChart();
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsxDEV("g", {
     children: data.map((d, i) => {
       const x = xPixel(d, xKey, xScale);
       const upper = typeof d[yUpper] === 'number' ? d[yUpper] : 0;
@@ -39,30 +39,30 @@ export function ChartErrorBar({
       const yTop = yScale(upper);
       const yBot = yScale(lower);
       const half = capWidth / 2;
-      return /*#__PURE__*/_jsxs("g", {
-        children: [/*#__PURE__*/_jsx("line", {
+      return /*#__PURE__*/_jsxDEV("g", {
+        children: [/*#__PURE__*/_jsxDEV("line", {
           x1: x,
           x2: x,
           y1: yTop,
           y2: yBot,
           stroke: color,
           strokeWidth: strokeWidth
-        }), /*#__PURE__*/_jsx("line", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("line", {
           x1: x - half,
           x2: x + half,
           y1: yTop,
           y2: yTop,
           stroke: color,
           strokeWidth: strokeWidth
-        }), /*#__PURE__*/_jsx("line", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("line", {
           x1: x - half,
           x2: x + half,
           y1: yBot,
           y2: yBot,
           stroke: color,
           strokeWidth: strokeWidth
-        })]
-      }, i);
+        }, void 0, false)]
+      }, i, true);
     })
-  });
+  }, void 0, false);
 }

package/dist/Chart/ChartGrid.js

@@ -9,7 +9,7 @@
 import { useMemo } from 'react';
 import { useChart } from "./ChartContext.js";
 import { isBandScale } from "./utils.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Grid lines behind chart marks.
  *
@@ -45,8 +45,8 @@ export function ChartGrid({
     const linear = xScale;
     return linear.ticks(5).map(d => linear(d));
   }, [vertical, xScale]);
-  return /*#__PURE__*/_jsxs("g", {
-    children: [hLines.map(y => /*#__PURE__*/_jsx("line", {
+  return /*#__PURE__*/_jsxDEV("g", {
+    children: [hLines.map(y => /*#__PURE__*/_jsxDEV("line", {
       x1: 0,
       x2: width,
       y1: y,
@@ -54,7 +54,7 @@ export function ChartGrid({
       stroke: "var(--color-border)",
       strokeOpacity: 0.5,
       strokeDasharray: "4 4"
-    }, `h-${y}`)), vLines.map(x => /*#__PURE__*/_jsx("line", {
+    }, `h-${y}`, false)), vLines.map(x => /*#__PURE__*/_jsxDEV("line", {
       x1: x,
       x2: x,
       y1: 0,
@@ -62,6 +62,6 @@ export function ChartGrid({
       stroke: "var(--color-border)",
       strokeOpacity: 0.5,
       strokeDasharray: "4 4"
-    }, `v-${x}`))]
-  });
+    }, `v-${x}`, false))]
+  }, void 0, true);
 }

package/dist/Chart/ChartHeatmapGL.js

@@ -11,7 +11,7 @@ import { scaleBand } from 'd3-scale';
 import { useChart } from "./ChartContext.js";
 import { isBandScale } from "./utils.js";
 import { hexToGL, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, createProgram } from "./webgl.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const VERT = `
   attribute vec2 a_position;
   attribute vec3 a_color;
@@ -165,7 +165,7 @@ export function ChartHeatmapGL({
   if (width <= 0 || height <= 0) {
     return null;
   }
-  return /*#__PURE__*/_jsx("g", {
+  return /*#__PURE__*/_jsxDEV("g", {
     ref: markerRef
-  });
+  }, void 0, false);
 }