@flood-md/react 0.2.12 → 0.2.13

package/dist/range-chart.js

@@ -0,0 +1,97 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Surface, Text, VisuallyHidden } from "./index.js";
+const number = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+export const RangePlot = /* @__PURE__ */ forwardRef(function RangePlot({ label, items, domain, formatValue = value => number.format(value), lowLabel = "Low", highLabel = "High", midpointLabel = "Midpoint", emptyLabel = "No observations", missingLabel = "No data", navigationLabel = "Use the arrow keys to explore categories, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const [cursor, setCursor] = useState(0);
+    const [hovered, setHovered] = useState();
+    const [tapped, setTapped] = useState();
+    const [focused, setFocused] = useState(false);
+    let min = Infinity;
+    let max = -Infinity;
+    const ids = new Set();
+    const intervals = items.map(item => {
+        const { id, label: name, low, high, midpoint } = item;
+        if (!id.trim() || ids.has(id) || !name.trim()) {
+            throw new Error("Flood RangeChart needs unique item IDs and nonempty labels");
+        }
+        ids.add(id);
+        if ((low !== null && !Number.isFinite(low)) || (high !== null && !Number.isFinite(high)) ||
+            (midpoint !== undefined && !Number.isFinite(midpoint))) {
+            throw new RangeError("Flood RangeChart bounds and midpoints must be finite");
+        }
+        if (low === null || high === null)
+            return undefined;
+        if (low > high || (midpoint !== undefined && (midpoint < low || midpoint > high))) {
+            throw new RangeError("Flood RangeChart midpoint must lie within its ordered bounds");
+        }
+        min = Math.min(min, low);
+        max = Math.max(max, high);
+        return { low, high, midpoint };
+    });
+    const hasData = min <= max;
+    if (domain && (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) ||
+        domain[0] >= domain[1] || (hasData && (domain[0] > min || domain[1] < max)))) {
+        throw new RangeError("Flood RangeChart domain must contain all complete intervals and have finite increasing bounds");
+    }
+    const [floor, ceiling] = domain ?? [min, max];
+    const span = ceiling - floor;
+    const scale = (value) => span === 0 ? .5 : Number.isFinite(span)
+        ? (value - floor) / span
+        : (value / 2 - floor / 2) / (ceiling / 2 - floor / 2);
+    const last = items.length - 1;
+    const active = Math.min(hovered ?? tapped ?? cursor, last);
+    const inspecting = hovered !== undefined || tapped !== undefined || focused;
+    const current = intervals[active];
+    const readings = current ? [
+        { name: highLabel, value: formatValue(current.high) },
+        ...(current.midpoint === undefined ? [] : [{ name: midpointLabel, value: formatValue(current.midpoint) }]),
+        { name: lowLabel, value: formatValue(current.low) },
+    ] : [];
+    const accessibleValue = [items[active]?.label, ...(current
+            ? readings.map(reading => `${reading.name}: ${reading.value}`)
+            : [missingLabel])].filter(Boolean).join(", ");
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = active + 1;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = active - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                setHovered(undefined);
+                setTapped(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHovered(undefined);
+        setTapped(undefined);
+        setFocused(true);
+        setCursor(Math.max(0, Math.min(last, next)));
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-range-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: hasData ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { className: "flood-range-chart__plot", dir: "ltr", style: { "--flood-range-columns": items.length }, role: last > 0 ? "slider" : "img", tabIndex: last > 0 ? 0 : undefined, "aria-label": last > 0 ? label : accessibleValue, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? items.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? accessibleValue : undefined, onKeyDown: navigate, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onPointerLeave: () => setHovered(undefined), children: [_jsx("div", { className: "flood-range-chart__columns", "aria-hidden": "true", children: items.map((item, index) => {
+                                const interval = intervals[index];
+                                return _jsxs("div", { className: "flood-range-chart__column", "data-active": inspecting && index === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                        setHovered(index); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                        setTapped(previous => previous === index ? undefined : index); }, children: [_jsx("div", { className: "flood-range-chart__track", children: interval && _jsxs(_Fragment, { children: [_jsx("span", { className: "flood-range-chart__band", style: {
+                                                            insetBlockStart: `${(1 - scale(interval.high)) * 100}%`,
+                                                            insetBlockEnd: interval.low === interval.high ? undefined : `${scale(interval.low) * 100}%`,
+                                                        }, "data-flat": interval.low === interval.high || undefined }), interval.midpoint !== undefined && _jsx("span", { className: "flood-range-chart__midpoint", style: { insetBlockStart: `${(1 - scale(interval.midpoint)) * 100}%` } })] }) }), _jsx(Text, { className: "flood-range-chart__category", size: "helper", tone: "subtle", dir: "auto", title: item.label, children: item.label })] }, item.id);
+                            }) }), inspecting && _jsxs(Surface, { className: "flood-chart__tooltip flood-range-chart__tooltip", padding: "2", elevation: "raised", "aria-hidden": "true", style: {
+                                "--flood-range-position": `${(active + .5) / items.length * 100}%`,
+                                "--flood-range-tip-side": active >= items.length / 2 ? -1 : 0,
+                            }, children: [_jsx(Text, { size: "helper", children: items[active].label }), current ? readings.map((reading, index) => _jsxs("div", { className: "flood-range-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: reading.name }), _jsx(Text, { size: "helper", children: reading.value })] }, index)) : _jsx(Text, { size: "helper", tone: "subtle", children: missingLabel })] })] })] }) : _jsx(Text, { className: "flood-range-chart__empty", size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/dist/scatter-chart.d.ts

@@ -0,0 +1,2 @@
+import { type ScatterChartProps } from "./index.js";
+export declare const ScatterPlot: import("react").ForwardRefExoticComponent<ScatterChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/scatter-chart.js

@@ -0,0 +1,170 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Surface, Text, VisuallyHidden } from "./index.js";
+import { placeOverlay } from "./overlay-runtime.js";
+const numberFormat = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+const formatNumber = (value) => numberFormat.format(value);
+const useChartLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function scaleFor(points, axis, domain) {
+    let low = Infinity;
+    let high = -Infinity;
+    for (const point of points) {
+        low = Math.min(low, point[axis]);
+        high = Math.max(high, point[axis]);
+    }
+    if (domain) {
+        const [min, max] = domain;
+        if (!Number.isFinite(min) || !Number.isFinite(max) || min >= max || low < min || high > max) {
+            throw new RangeError(`Flood ScatterChart ${axis} domain must have finite increasing bounds containing all observations`);
+        }
+        return domain;
+    }
+    return points.length ? [low, high] : [0, 1];
+}
+function normalize(value, [min, max]) {
+    if (min === max)
+        return .5;
+    const span = max - min;
+    return Number.isFinite(span) ? (value - min) / span : (value / 2 - min / 2) / (max / 2 - min / 2);
+}
+function ticks([min, max]) {
+    const midpoint = min / 2 + max / 2;
+    return min === max ? [min] : midpoint === min || midpoint === max ? [min, max] : [min, midpoint, max];
+}
+export const ScatterPlot = /* @__PURE__ */ forwardRef(function ScatterPlot({ label, xLabel, yLabel, points, xDomain, yDomain, formatX = formatNumber, formatY = formatNumber, emptyLabel = "No data", navigationLabel = "Use arrow keys to inspect points, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const plot = useRef(null);
+    const area = useRef(null);
+    const tooltip = useRef(null);
+    const [cursor, setCursor] = useState();
+    const [hover, setHover] = useState();
+    const [touch, setTouch] = useState();
+    const [focused, setFocused] = useState(false);
+    const data = useMemo(() => {
+        const ids = new Set();
+        for (const point of points) {
+            if (!point.id.trim() || ids.has(point.id) || !Number.isFinite(point.x) || !Number.isFinite(point.y)) {
+                throw new Error("Flood ScatterChart needs unique nonempty point IDs and finite coordinates");
+            }
+            ids.add(point.id);
+        }
+        const xScale = scaleFor(points, "x", xDomain);
+        const yScale = scaleFor(points, "y", yDomain);
+        return {
+            xScale,
+            yScale,
+            positions: points.map(point => ({
+                point,
+                x: normalize(point.x, xScale),
+                y: 1 - normalize(point.y, yScale),
+            })),
+        };
+    }, [points, xDomain, yDomain]);
+    const activeId = hover ?? touch ?? cursor;
+    const index = activeId === undefined ? 0 : Math.max(0, points.findIndex(point => point.id === activeId));
+    const active = data.positions[index];
+    const inspecting = Boolean(active && (hover !== undefined || touch !== undefined || focused));
+    const xText = active ? formatX(active.point.x) : "";
+    const yText = active ? formatY(active.point.y) : "";
+    const valueText = [active?.point.label, `${xLabel}: ${xText}`, `${yLabel}: ${yText}`].filter(Boolean).join(", ");
+    const canNavigate = points.length > 1;
+    useChartLayoutEffect(() => {
+        const panel = tooltip.current;
+        const frame = plot.current;
+        const content = area.current;
+        if (!panel || !frame || !content || !active || !inspecting)
+            return;
+        const position = () => {
+            const bounds = frame.getBoundingClientRect();
+            if (!bounds.width || !frame.offsetWidth)
+                return;
+            const region = content.getBoundingClientRect();
+            const scale = bounds.width / frame.offsetWidth;
+            const pointX = region.left + active.x * region.width;
+            const pointY = region.top + active.y * region.height;
+            // The panel's column gap is the anchor clearance. The inner grid owns text spacing.
+            const gap = parseFloat(getComputedStyle(panel).columnGap) * scale;
+            const anchor = { left: pointX, right: pointX, top: pointY, bottom: pointY, width: 0, height: 0 };
+            const size = panel.getBoundingClientRect();
+            const edge = gap / 4;
+            const insetAdjustment = gap - edge;
+            const placementBounds = {
+                left: bounds.left - insetAdjustment,
+                top: bounds.top - insetAdjustment,
+                width: bounds.width + 2 * insetAdjustment,
+                height: bounds.height + 2 * insetAdjustment,
+            };
+            const hasSideRoom = Math.max(pointX - bounds.left, bounds.right - pointX) >= size.width + gap + edge;
+            const side = hasSideRoom ? (active.x < .5 ? "right" : "left") : "top";
+            const { left, top } = placeOverlay(anchor, size, placementBounds, side, "center", gap);
+            panel.style.left = `${(left - bounds.left) / scale}px`;
+            panel.style.top = `${(top - bounds.top) / scale}px`;
+            panel.dataset.positioned = "";
+        };
+        position();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(position);
+        observer.observe(frame);
+        observer.observe(panel);
+        return () => observer.disconnect();
+    }, [active, inspecting, xText, yText]);
+    const nearest = (event) => {
+        const bounds = area.current?.getBoundingClientRect();
+        if (!bounds)
+            return undefined;
+        let distance = Infinity;
+        let id;
+        for (const { point, x, y } of data.positions) {
+            const next = (bounds.left + x * bounds.width - event.clientX) ** 2 + (bounds.top + y * bounds.height - event.clientY) ** 2;
+            if (next < distance) {
+                distance = next;
+                id = point.id;
+            }
+        }
+        return id;
+    };
+    const trackPointer = (event) => {
+        if (event.pointerType !== "touch")
+            setHover(nearest(event));
+    };
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = index + 1;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = index - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = points.length - 1;
+                break;
+            case "Escape":
+                if (inspecting)
+                    event.preventDefault();
+                setHover(undefined);
+                setTouch(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHover(undefined);
+        setTouch(undefined);
+        setFocused(true);
+        setCursor(points[Math.max(0, Math.min(next, points.length - 1))].id);
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-scatter-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: !active ? _jsx(Text, { className: "flood-scatter-chart__empty", size: "compact", tone: "subtle", children: emptyLabel }) : _jsxs(_Fragment, { children: [canNavigate && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsx(Text, { className: "flood-scatter-chart__vertical-label", size: "helper", tone: "subtle", "aria-hidden": "true", dir: "auto", children: yLabel }), _jsxs("div", { className: "flood-scatter-chart__layout", dir: "ltr", children: [_jsx("div", { className: "flood-scatter-chart__ticks flood-scatter-chart__ticks--y", "aria-hidden": "true", children: ticks(data.yScale).slice().reverse().map(tick => _jsx(Text, { size: "helper", tone: "subtle", children: formatY(tick) }, tick)) }), _jsxs("div", { ref: plot, className: "flood-scatter-chart__plot", role: canNavigate ? "slider" : "img", tabIndex: 0, "aria-label": canNavigate ? label : `${label}. ${valueText}`, "aria-describedby": canNavigate ? instructions : undefined, "aria-valuemin": canNavigate ? 1 : undefined, "aria-valuemax": canNavigate ? points.length : undefined, "aria-valuenow": canNavigate ? index + 1 : undefined, "aria-valuetext": canNavigate ? valueText : undefined, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerEnter: trackPointer, onPointerMove: trackPointer, onPointerLeave: () => setHover(undefined), onPointerUp: event => {
+                                if (event.pointerType !== "touch")
+                                    return;
+                                const next = nearest(event);
+                                setHover(undefined);
+                                setTouch(current => current === next ? undefined : next);
+                            }, children: [_jsxs("div", { ref: area, className: "flood-scatter-chart__area", "aria-hidden": "true", children: [inspecting && _jsx("span", { className: "flood-scatter-chart__guides", style: { "--flood-scatter-x": `${active.x * 100}%`, "--flood-scatter-y": `${active.y * 100}%` } }), data.positions.map(({ point, x, y }, i) => _jsx("span", { className: "flood-scatter-chart__point", "data-active": inspecting && i === index || undefined, style: { left: `${x * 100}%`, top: `${y * 100}%` } }, point.id))] }), inspecting && _jsx(Surface, { ref: tooltip, className: "flood-chart__tooltip flood-scatter-chart__tooltip", elevation: "raised", padding: "2", "aria-hidden": "true", children: _jsxs("div", { className: "flood-scatter-chart__tooltip-content", children: [active.point.label && _jsx(Text, { size: "helper", dir: "auto", "data-point-label": "", children: active.point.label }), _jsx(Text, { size: "helper", tone: "subtle", dir: "auto", children: xLabel }), _jsx(Text, { size: "helper", "data-coordinate": "", children: xText }), _jsx(Text, { size: "helper", tone: "subtle", dir: "auto", children: yLabel }), _jsx(Text, { size: "helper", "data-coordinate": "", children: yText })] }) })] }), _jsx("div", { className: "flood-scatter-chart__ticks flood-scatter-chart__ticks--x", "aria-hidden": "true", children: ticks(data.xScale).map(tick => _jsx(Text, { size: "helper", tone: "subtle", children: formatX(tick) }, tick)) }), _jsx(Text, { className: "flood-scatter-chart__horizontal-label", size: "helper", tone: "subtle", "aria-hidden": "true", dir: "auto", children: xLabel })] })] }) });
+});

package/dist/waterfall-chart.d.ts

@@ -0,0 +1,2 @@
+import { type WaterfallChartProps } from "./index.js";
+export declare const WaterfallPlot: import("react").ForwardRefExoticComponent<WaterfallChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/waterfall-chart.js

@@ -0,0 +1,89 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Surface, Text, VisuallyHidden } from "./index.js";
+const number = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+export const WaterfallPlot = /* @__PURE__ */ forwardRef(function WaterfallPlot({ label, steps, domain, formatValue = number.format, changeLabel = "Change", totalLabel = "Total", emptyLabel = "No steps", navigationLabel = "Use arrow keys to explore steps, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const [cursor, setCursor] = useState(0);
+    const [hovered, setHovered] = useState();
+    const [tapped, setTapped] = useState();
+    const [focused, setFocused] = useState(false);
+    const ids = new Set();
+    let running = 0;
+    let low = 0;
+    let high = 0;
+    const bars = steps.map(step => {
+        if (!step.id.trim() || ids.has(step.id) || !step.label.trim() || !Number.isFinite(step.value)) {
+            throw new Error("Flood WaterfallChart needs unique step IDs, labels and finite values");
+        }
+        ids.add(step.id);
+        const total = step.kind === "total";
+        const start = total ? 0 : running;
+        const end = start + step.value;
+        if (!Number.isFinite(end))
+            throw new RangeError("Flood WaterfallChart running totals must be finite");
+        low = Math.min(low, start, end);
+        high = Math.max(high, start, end);
+        running = end;
+        return { ...step, start, end, total };
+    });
+    if (domain && (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) ||
+        domain[0] >= domain[1] || domain[0] > low || domain[1] < high)) {
+        throw new RangeError("Flood WaterfallChart domain must contain zero and all running totals");
+    }
+    const [min, max] = domain ?? [low, low === high ? 1 : high];
+    const span = max - min;
+    const percent = (value) => 100 * (Number.isFinite(span)
+        ? (value - min) / span
+        : (value / 2 - min / 2) / (max / 2 - min / 2));
+    const last = bars.length - 1;
+    const active = Math.min(last, hovered ?? tapped ?? cursor);
+    const current = bars[active];
+    const inspecting = hovered !== undefined || tapped !== undefined || focused;
+    const change = current && !current.total ? `${current.value > 0 ? "+" : ""}${formatValue(current.value)}` : undefined;
+    const total = current ? formatValue(current.end) : undefined;
+    const accessible = current && [current.label, ...(change === undefined ? [] : [`${changeLabel}: ${change}`]), `${totalLabel}: ${total}`].join(", ");
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = active + 1;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = active - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                setHovered(undefined);
+                setTapped(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHovered(undefined);
+        setTapped(undefined);
+        setFocused(true);
+        setCursor(Math.max(0, Math.min(next, last)));
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-waterfall-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: current ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { className: "flood-waterfall-chart__plot", dir: "ltr", role: last > 0 ? "slider" : "img", tabIndex: last > 0 ? 0 : undefined, "aria-label": last > 0 ? label : accessible, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? bars.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? accessible : undefined, style: { "--flood-waterfall-columns": bars.length, "--flood-waterfall-zero": 1 - percent(0) / 100 }, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerLeave: () => setHovered(undefined), children: [_jsx("div", { className: "flood-waterfall-chart__columns", "aria-hidden": "true", children: bars.map((bar, index) => {
+                                const start = percent(bar.start);
+                                const end = percent(bar.end);
+                                const next = bars[index + 1];
+                                const connectBefore = index > 0 && (!bar.total || bars[index - 1].end === bar.end);
+                                const connectAfter = next && (!next.total || bar.end === next.end);
+                                return _jsxs("div", { className: "flood-waterfall-chart__column", "data-active": inspecting && index === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                        setHovered(index); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                        setTapped(previous => previous === index ? undefined : index); }, children: [_jsxs("div", { className: "flood-waterfall-chart__track", children: [connectBefore && _jsx("span", { className: "flood-waterfall-chart__connector", "data-side": "before", style: { insetBlockEnd: `${bar.total ? end : start}%` } }), connectAfter && _jsx("span", { className: "flood-waterfall-chart__connector", "data-side": "after", style: { insetBlockEnd: `${end}%` } }), _jsx("span", { className: "flood-waterfall-chart__bar", "data-kind": bar.total ? "total" : bar.value < 0 ? "decrease" : "increase", "data-flat": start === end || undefined, style: { insetBlockEnd: `${Math.min(start, end)}%`, blockSize: `${Math.abs(start - end)}%` } })] }), _jsx(Text, { className: "flood-waterfall-chart__category", size: "helper", tone: "subtle", dir: "auto", title: bar.label, children: bar.label })] }, bar.id);
+                            }) }), inspecting && _jsxs(Surface, { className: "flood-chart__tooltip flood-waterfall-chart__tooltip", elevation: "raised", padding: "2", "aria-hidden": "true", style: {
+                                "--flood-waterfall-position": `${(active + .5) / bars.length * 100}%`,
+                                "--flood-waterfall-tip-side": active >= bars.length / 2 ? -1 : 0,
+                            }, children: [_jsx(Text, { size: "helper", children: current.label }), change !== undefined && _jsxs("div", { className: "flood-waterfall-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: changeLabel }), _jsx(Text, { size: "helper", children: change })] }), _jsxs("div", { className: "flood-waterfall-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: totalLabel }), _jsx(Text, { size: "helper", children: total })] })] })] })] }) : _jsx(Text, { className: "flood-waterfall-chart__empty", size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flood-md/react",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "type": "module",
   "description": "Original Flood components for React and Next.js.",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@flood-md/tokens": "0.2.12"
+    "@flood-md/tokens": "0.2.13"
   },
   "publishConfig": {
     "access": "public"