@galaxy-io/dls 1.3.6 → 1.4.1

package/dist/accordion/Accordion.js

@@ -1,10 +1,10 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
+import Rotate from "../transform/Rotate.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import RotateWithTransition from "../animations/RotateWithTransition.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 /* empty css                    */
 import { styled } from "@linaria/react";
@@ -107,7 +107,7 @@ var Accordion = ({ children, variant = "PRIMARY", size = "MEDIUM", icon, header,
 				}), /* @__PURE__ */ jsxs(FlexWrapper, {
 					alignItems: AlignItems.CENTER,
 					gap: 8,
-					children: [metric && metric, /* @__PURE__ */ jsx(RotateWithTransition, {
+					children: [metric && metric, /* @__PURE__ */ jsx(Rotate, {
 						isRotated: isOpen,
 						deg: -180,
 						children: /* @__PURE__ */ jsx(Icon, {

package/dist/avatar/AvatarShimmer.d.ts

@@ -7,7 +7,7 @@ export declare const StyledAvatarShimmer: import("react").ComponentType<Pick<imp
     theme: import("../theme").Theme;
 } & {
     as?: React.ElementType;
-}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as" | "$size"> & {
+}, "$size" | "as" | keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $size?: number;

package/dist/buttons/Button.js

@@ -83,10 +83,10 @@ var LabelWrapper = /*#__PURE__*/ styled("span")({
 	}
 });
 function getTextVariant(variant, activeTheme) {
-	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => TextVariant.PRIMARY).with("ERROR", () => TextVariant.PRIMARY).exhaustive();
+	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("ERROR", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).exhaustive();
 }
 function getIconVariant(variant, activeTheme) {
-	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => IconVariant.PRIMARY).with("ERROR", () => IconVariant.PRIMARY).exhaustive();
+	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("ERROR", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).exhaustive();
 }
 var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,

package/dist/charts/BarChart.js

@@ -1,15 +1,14 @@
 import { BarChartNormalization, ChartKind, ChartTargetShape } from "./types.js";
-import { SKELETON_BAR_GROUPS } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
 import { getBarLegendItems } from "./barChartLegend.js";
 import { buildBarChartGeometry, getBarValueDomain, roundedRectPath } from "./barChartGeometry.js";
-import { ChartBarPath, ChartSkeletonGroup } from "./ChartPrimitives.js";
+import { ChartBarPath } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/BarChart.tsx
 /**
 * Bar chart with a three-level data model.
@@ -43,29 +42,9 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		valueFormatter,
 		valueUnit
 	]);
-	/**
-	* The data actually rendered: the caller's, or the skeleton's while loading.
-	*
-	* Loading replaces the chart wholesale with ghost bars pushed through the
-	* real geometry pipeline, so the skeleton gets the true radii and spacing.
-	* The cast is safe because nothing derived from skeleton data ever surfaces:
-	* labels are hidden, targets are off, the legend shows stubs, and the
-	* accessible name says "loading" instead of counting.
-	*/
-	const displayGroups = useMemo(() => isLoading ? SKELETON_BAR_GROUPS.map((values, groupIndex) => ({
-		label: `skeleton-${groupIndex}`,
-		bars: values.map((value, barIndex) => ({
-			metric: `skeleton-${barIndex}`,
-			components: [{
-				key: "skeleton",
-				label: "",
-				value
-			}]
-		}))
-	})) : groups, [isLoading, groups]);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel, formatAxisValue } = useCartesianChartLayout({
 		containerRef,
-		rawDomain: useMemo(() => getBarValueDomain(displayGroups, normalization), [displayGroups, normalization]),
+		rawDomain: useMemo(() => getBarValueDomain(groups, normalization), [groups, normalization]),
 		valueDomain,
 		width,
 		height,
@@ -90,10 +69,10 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 	* takes its metric's colour. Applying the metric colour to a stack would
 	* paint every segment identically.
 	*/
-	const isStacked = useMemo(() => displayGroups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [displayGroups]);
-	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => isLoading ? colors.placeholder : barIsStacked ? colors.resolveByIndex(componentIndex, explicit) : colors.resolve(metric, explicit), [colors, isLoading]);
+	const isStacked = useMemo(() => groups.some((group) => group.bars.some((bar) => bar.components.length > 1)), [groups]);
+	const resolveColor = useCallback(({ metric, componentIndex, isStacked: barIsStacked, explicit }) => barIsStacked ? colors.resolveByIndex(componentIndex, explicit) : colors.resolve(metric, explicit), [colors]);
 	const geometry = useMemo(() => buildBarChartGeometry({
-		groups: displayGroups,
+		groups,
 		plotWidth,
 		plotHeight,
 		normalization,
@@ -101,7 +80,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		domain,
 		resolveColor
 	}), [
-		displayGroups,
+		groups,
 		plotWidth,
 		plotHeight,
 		normalization,
@@ -109,7 +88,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		domain,
 		resolveColor
 	]);
-	const isEmpty = displayGroups.length === 0;
+	const isEmpty = groups.length === 0;
 	const legendItems = useMemo(() => getBarLegendItems({
 		isStacked,
 		series,
@@ -125,7 +104,8 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.bands.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty
+		disabled: noTooltip || isLoading || isEmpty,
+		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const band = geometry.bands[index];
@@ -160,14 +140,6 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		width: band.width,
 		height: band.height
 	})), [geometry.bands]);
-	const marks = geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
-		d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
-		fill: rect.color,
-		"data-state": interaction.getMarkState({
-			categoryIndex: rect.groupIndex,
-			seriesKey: isStacked ? rect.componentKey : rect.metric
-		})
-	}, rect.id));
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -178,7 +150,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		categoryCount: groups.length,
 		ariaLabel,
 		ariaDescription,
-		axes: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
+		axes: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChartValueAxis, {
 			ticks: valueTicks,
 			scale: geometry.valueScale,
 			plotWidth,
@@ -186,17 +158,15 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 			marginLeft: dimensions.margin.left,
 			formatter: formatAxisValue,
 			showGrid,
-			showLabels: !isLoading,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
-			labels: displayGroups.map((group) => group.label),
+			labels: groups.map((group) => group.label),
 			positions: categoryPositions,
 			step: categoryStep,
 			plotWidth,
 			plotHeight,
 			formatter: formatLabel,
 			mode: categoryLabelMode,
-			showLabels: !isLoading,
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
@@ -209,7 +179,14 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
+		children: geometry.rects.map((rect) => /* @__PURE__ */ jsx(ChartBarPath, {
+			d: roundedRectPath(rect.x, rect.y, rect.width, rect.height, rect.radius, rect.corners),
+			fill: rect.color,
+			"data-state": interaction.getMarkState({
+				categoryIndex: rect.groupIndex,
+				seriesKey: isStacked ? rect.componentKey : rect.metric
+			})
+		}, rect.id))
 	});
 };
 //#endregion

package/dist/charts/ChartAxis.d.ts

@@ -22,13 +22,6 @@ interface ChartValueAxisProps {
     plotHeight: number;
     formatter: ChartValueFormatter;
     showGrid?: boolean;
-    /**
-     * Render the tick labels and title.
-     *
-     * Off while the chart is loading: the grid keeps the plot's structure, but
-     * numbers derived from placeholder data would read as data.
-     */
-    showLabels?: boolean;
     /**
      * Rotated title in the left gutter.
      *
@@ -37,7 +30,7 @@ interface ChartValueAxisProps {
      */
     title?: string;
 }
-export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, showLabels, title, }: ChartValueAxisProps) => import("react").JSX.Element;
+export declare const ChartValueAxis: ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid, title, }: ChartValueAxisProps) => import("react").JSX.Element;
 interface ChartCategoryAxisProps {
     labels: string[];
     /** Left edge of each category's slot, in plot coordinates. */
@@ -49,8 +42,6 @@ interface ChartCategoryAxisProps {
     plotHeight: number;
     formatter: ChartLabelFormatter;
     mode?: ChartCategoryLabelMode;
-    /** Render the labels and title. Off while loading — see the value axis. */
-    showLabels?: boolean;
     /**
      * Title below the tick labels.
      *
@@ -58,5 +49,5 @@ interface ChartCategoryAxisProps {
      */
     title?: string;
 }
-export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, showLabels, title, }: ChartCategoryAxisProps) => import("react").JSX.Element | null;
+export declare const ChartCategoryAxis: ({ labels, positions, step, plotWidth, plotHeight, formatter, mode, title, }: ChartCategoryAxisProps) => import("react").JSX.Element;
 export {};

package/dist/charts/ChartAxis.js

@@ -6,7 +6,7 @@ import { getCategoryLabelStride } from "./chartScales.js";
 import { ChartAxisLabelBox, ChartGridLine } from "./ChartPrimitives.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartAxis.tsx
-var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, showLabels = true, title }) => {
+var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatter, showGrid = true, title }) => {
 	const titleBand = title ? 26 : 0;
 	const labelWidth = Math.max(0, marginLeft - titleBand - 12);
 	return /* @__PURE__ */ jsxs("g", {
@@ -18,7 +18,7 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 				x2: plotWidth + 12,
 				y1: 0,
 				y2: 0
-			}), showLabels && labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
+			}), labelWidth > 0 && /* @__PURE__ */ jsx(ChartAxisLabelBox, {
 				x: -marginLeft + titleBand,
 				y: -20 / 2,
 				width: labelWidth,
@@ -37,7 +37,7 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 					})
 				})
 			})]
-		}, tick)), showLabels && title && /* @__PURE__ */ jsx("g", {
+		}, tick)), title && /* @__PURE__ */ jsx("g", {
 			transform: `translate(${-marginLeft + 18 / 2}, ${plotHeight / 2}) rotate(-90)`,
 			children: /* @__PURE__ */ jsx(ChartAxisLabelBox, {
 				x: -plotHeight / 2,
@@ -61,8 +61,7 @@ var ChartValueAxis = ({ ticks, scale, plotWidth, plotHeight, marginLeft, formatt
 		})]
 	});
 };
-var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, showLabels = true, title }) => {
-	if (!showLabels) return null;
+var ChartCategoryAxis = ({ labels, positions, step, plotWidth, plotHeight, formatter, mode = ChartCategoryLabelMode.AUTO, title }) => {
 	const formatted = labels.map(formatter);
 	const stride = mode === ChartCategoryLabelMode.AUTO ? getCategoryLabelStride(formatted, step) : 1;
 	const labelWidth = step * stride;

package/dist/charts/ChartEmptyState.js

@@ -19,9 +19,9 @@ var ChartEmptyState = ({ content }) => /* @__PURE__ */ jsx(ChartEmptyOverlay, {
 		justifyContent: JustifyContent.CENTER,
 		alignItems: AlignItems.CENTER,
 		children: /* @__PURE__ */ jsx(Text, {
-			size: TextSize.CAPTION,
-			variant: TextVariant.TERTIARY,
-			children: "No data"
+			size: TextSize.BODY_SM,
+			variant: TextVariant.SECONDARY,
+			children: "No data available"
 		})
 	})
 });

package/dist/charts/ChartFrame.js

@@ -22,8 +22,7 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 	* showing three. The two charts previously counted different things for the
 	* same situation, which is the drift this removes.
 	*/
-	const kindLabel = match(kind).with(ChartKind.PIE, () => "Pie").with(ChartKind.BAR, () => "Bar").with(ChartKind.LINE, () => "Line").exhaustive();
-	const resolvedAriaLabel = ariaLabel ?? (isLoading ? `${kindLabel} chart, loading` : match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive());
+	const resolvedAriaLabel = ariaLabel ?? match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive();
 	const tooltipModel = useMemo(() => noTooltip || interaction.activeIndex === null ? null : buildCategoryTooltip(interaction.activeIndex), [
 		noTooltip,
 		buildCategoryTooltip,
@@ -122,7 +121,6 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 			items: legendItems,
 			inset: legendInset ?? (legendRight ? 16 : margin.left),
 			vertical: legendRight,
-			isLoading,
 			hoveredKey: interaction.hoveredSeriesKey,
 			onItemEnter: interaction.onSeriesEnter,
 			onItemLeave: interaction.onSeriesLeave

package/dist/charts/ChartLegend.d.ts

@@ -7,14 +7,6 @@ interface ChartLegendProps {
     hoveredKey?: string | null;
     /** Stack entries in a column — the side-placed layout. */
     vertical?: boolean;
-    /**
-     * Render shimmer stubs instead of items.
-     *
-     * Keeps the legend's space reserved while the chart shows its skeleton, so
-     * data arriving doesn't shift the layout — which matters most beside a pie,
-     * where the legend's width decides the plot box's.
-     */
-    isLoading?: boolean;
     /**
      * Supplying these makes the legend interactive. Omit them and it renders as
      * inert text, with no button semantics for a screen reader to announce.
@@ -33,5 +25,5 @@ interface ChartLegendProps {
  * Isolation only changes opacity, so the domain is untouched and the numbers
  * keep meaning what they did.
  */
-declare const ChartLegend: ({ items, inset, hoveredKey, vertical, isLoading, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
+declare const ChartLegend: ({ items, inset, hoveredKey, vertical, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
 export default ChartLegend;

package/dist/charts/ChartLegend.js

@@ -1,21 +1,10 @@
 import Text, { TextSize } from "../text/Text.js";
-import TextShimmer from "../text/TextShimmer.js";
 import Circle from "../shapes/Circle.js";
 import { ChartMarkState } from "./types.js";
 import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow } from "./ChartPrimitives.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartLegend.tsx
 /**
-* Stub label widths in px, staggered so the placeholder reads as a legend
-* rather than a repeated block. Three entries: enough to hold a legend's
-* space without promising a series count.
-*/
-var SKELETON_LABEL_WIDTHS = [
-	40,
-	56,
-	48
-];
-/**
 * Legend for the chart components.
 *
 * Hovering or focusing an entry isolates its series; leaving releases it.
@@ -26,22 +15,7 @@ var SKELETON_LABEL_WIDTHS = [
 * Isolation only changes opacity, so the domain is untouched and the numbers
 * keep meaning what they did.
 */
-var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, isLoading = false, onItemEnter, onItemLeave }) => {
-	if (isLoading) return /* @__PURE__ */ jsx(ChartLegendRow, {
-		$inset: inset,
-		$vertical: vertical,
-		"data-active": "false",
-		children: SKELETON_LABEL_WIDTHS.map((labelWidth, index) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, {
-			"data-state": ChartMarkState.ACTIVE,
-			children: [/* @__PURE__ */ jsx(TextShimmer, {
-				height: 8,
-				width: 8
-			}), /* @__PURE__ */ jsx(TextShimmer, {
-				height: 10,
-				width: labelWidth
-			})]
-		}, index))
-	});
+var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, onItemEnter, onItemLeave }) => {
 	if (items.length === 0) return null;
 	const isInteractive = Boolean(onItemEnter);
 	const activeKey = hoveredKey;

package/dist/charts/ChartPrimitives.d.ts

@@ -55,19 +55,6 @@ export declare const ChartLinePath: import("@linaria/react").StyledComponent<imp
 export declare const ChartAreaPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 export declare const ChartPointCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & Record<never, unknown>>;
 export declare const ChartArcPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
-/**
- * Wraps the marks while the chart is loading.
- *
- * Only motion lives here — the slow pulse shared with `TextShimmer` and
- * `AvatarShimmer`, so a loading chart breathes in step with every other
- * skeleton on the page. Colour arrives through the series resolver like any
- * other mark colour, which is what lets bars and arcs ghost by `fill` and
- * lines by `stroke` without per-shape CSS here.
- *
- * Under reduced motion the pulse pins at its midpoint rather than sitting at
- * full strength, so the chart still reads as a placeholder and not as data.
- */
-export declare const ChartSkeletonGroup: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGGElement> & Record<never, unknown>>;
 /**
  * Per-category hit target, rendered above the marks.
  *
@@ -145,7 +132,7 @@ export declare const ChartTooltipPositioner: import("react").ComponentType<Pick<
     theme: import("../theme").Theme;
 } & {
     as?: React.ElementType;
-}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as" | "$x" | "$y" | "$isVisible"> & {
+}, "as" | keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "$x" | "$y" | "$isVisible"> & {
     theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $x: number;
@@ -166,6 +153,20 @@ export declare const ChartTooltipPositioner: import("react").ComponentType<Pick<
 } & {
     as?: React.ElementType;
 }>, {}>;
+/**
+ * Two-column tooltip body: label column, one gutter, value column.
+ *
+ * A grid rather than per-row `space-between`, so every row shares the same
+ * column boundary: the value column is sized by the widest value and every
+ * value is guaranteed its full width, while the labels take the remainder and
+ * all ellipsize against the same edge. Per-row flex made the label→value gap
+ * drift with each label's length, which read as misalignment down the list.
+ */
+export declare const ChartTooltipGrid: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+/** Swatch + label. `min-width: 0` is what lets the label actually ellipsize. */
+export declare const ChartTooltipLabelCell: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+/** Right-aligned and never wrapped — the value always shows in full. */
+export declare const ChartTooltipValueCell: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 /**
  * Content well inside a donut hole.
  *
@@ -187,7 +188,7 @@ export declare const ChartEmptyOverlay: import("react").ComponentType<Pick<impor
     theme: import("../theme").Theme;
 } & {
     as?: React.ElementType;
-}, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement> | "as"> & {
+}, "as" | keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme: import("../theme").Theme;