@galaxy-io/dls 1.3.6 → 1.4.0

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,11 +1,10 @@
 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";
@@ -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,
@@ -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/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;
@@ -187,7 +174,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;

package/dist/charts/ChartPrimitives.js

@@ -138,23 +138,6 @@ var ChartArcPath = /*#__PURE__*/ styled("path")({
 	propsAsIs: true
 });
 /**
-* 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.
-*/
-var ChartSkeletonGroup = /*#__PURE__*/ styled("g")({
-	name: "ChartSkeletonGroup",
-	class: "c1wvzvu4",
-	propsAsIs: true
-});
-/**
 * Per-category hit target, rendered above the marks.
 *
 * Hit testing the full column rather than the bars themselves means a two-pixel
@@ -167,7 +150,7 @@ var ChartSkeletonGroup = /*#__PURE__*/ styled("g")({
 */
 var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 	name: "ChartHitTarget",
-	class: "c17guewt",
+	class: "c1wvzvu4",
 	propsAsIs: true
 });
 /**
@@ -180,7 +163,7 @@ var ChartHitTarget = /*#__PURE__*/ styled("rect")({
 */
 var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 	name: "ChartHitTargetPath",
-	class: "cblgiyf",
+	class: "c17guewt",
 	propsAsIs: true
 });
 /**
@@ -188,24 +171,24 @@ var ChartHitTargetPath = /*#__PURE__*/ styled("path")({
 * zero — the line under the bars is what makes them read as resting on a
 * baseline.
 */
-var _exp16 = () => ({ theme }) => theme.color.border.primary;
+var _exp15 = () => ({ theme }) => theme.color.border.primary;
 var ChartGridLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartGridLine",
-	class: "c1lr03cc",
+	class: "cblgiyf",
 	propsAsIs: true,
-	vars: { "c1lr03cc-0": [_exp16()] }
+	vars: { "cblgiyf-0": [_exp15()] }
 }));
 /** Vertical rule marking the hovered category on a line chart. */
-var _exp17 = () => ({ theme }) => theme.color.border.secondary;
+var _exp16 = () => ({ theme }) => theme.color.border.secondary;
 var ChartCursorLine = withTheme(/*#__PURE__*/ styled("line")({
 	name: "ChartCursorLine",
-	class: "cizy1s8",
+	class: "c1lr03cc",
 	propsAsIs: true,
-	vars: { "cizy1s8-0": [_exp17()] }
+	vars: { "c1lr03cc-0": [_exp16()] }
 }));
 var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 	name: "ChartAxisLabelBox",
-	class: "c1ukq11d",
+	class: "cizy1s8",
 	propsAsIs: true
 });
 /**
@@ -215,21 +198,21 @@ var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 * than teleporting, and it stays mounted while hidden so the fade can actually
 * run — unmounting on hide is why a fade-out never appears.
 */
-var _exp18 = () => ({ $x }) => `${$x}px`;
-var _exp19 = () => ({ $y }) => `${$y}px`;
-var _exp22 = () => ({ theme }) => theme.color.border.primary;
-var _exp23 = () => ({ theme }) => theme.color.background.primary;
-var _exp24 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
+var _exp17 = () => ({ $x }) => `${$x}px`;
+var _exp18 = () => ({ $y }) => `${$y}px`;
+var _exp21 = () => ({ theme }) => theme.color.border.primary;
+var _exp22 = () => ({ theme }) => theme.color.background.primary;
+var _exp23 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
-	class: "cwcko2m",
+	class: "c1ukq11d",
 	propsAsIs: false,
 	vars: {
-		"cwcko2m-0": [_exp18()],
-		"cwcko2m-1": [_exp19()],
-		"cwcko2m-2": [_exp22()],
-		"cwcko2m-3": [_exp23()],
-		"cwcko2m-4": [_exp24()]
+		"c1ukq11d-0": [_exp17()],
+		"c1ukq11d-1": [_exp18()],
+		"c1ukq11d-2": [_exp21()],
+		"c1ukq11d-3": [_exp22()],
+		"c1ukq11d-4": [_exp23()]
 	}
 }));
 /**
@@ -240,32 +223,32 @@ var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 * of the DLS. `pointer-events: none` keeps it from stealing hover from the arc
 * behind it.
 */
-var _exp28 = () => ({ $centerX }) => `${$centerX}px`;
-var _exp29 = () => ({ $centerY }) => `${$centerY}px`;
-var _exp31 = () => ({ $diameter }) => `${$diameter}px`;
+var _exp27 = () => ({ $centerX }) => `${$centerX}px`;
+var _exp28 = () => ({ $centerY }) => `${$centerY}px`;
+var _exp30 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
-	class: "cqwhvyz",
+	class: "cwcko2m",
 	propsAsIs: false,
 	vars: {
-		"cqwhvyz-0": [_exp28()],
-		"cqwhvyz-1": [_exp29()],
-		"cqwhvyz-2": [_exp31()]
+		"cwcko2m-0": [_exp27()],
+		"cwcko2m-1": [_exp28()],
+		"cwcko2m-2": [_exp30()]
 	}
 });
 /**
 * Sits slightly above centre, over where the bars would be, so the axes stay
 * legible underneath.
 */
-var _exp32 = () => ({ theme }) => theme.color.border.primary;
-var _exp33 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp31 = () => ({ theme }) => theme.color.border.primary;
+var _exp32 = () => ({ theme }) => theme.color.background.tertiary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
-	class: "c1iaray",
+	class: "cqwhvyz",
 	propsAsIs: false,
 	vars: {
-		"c1iaray-0": [_exp32()],
-		"c1iaray-1": [_exp33()]
+		"cqwhvyz-0": [_exp31()],
+		"cqwhvyz-1": [_exp32()]
 	}
 }));
 /**
@@ -277,23 +260,23 @@ var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 * the marks dim instantly while their legend entries sit through the full
 * {@link CHART_RESTORE_DELAY_MS}, and the two visibly fall out of step.
 */
-var _exp34 = () => ({ $vertical }) => $vertical ? "column" : "row";
-var _exp35 = () => ({ $vertical }) => $vertical ? "nowrap" : "wrap";
-var _exp36 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
-var _exp37 = () => ({ $vertical }) => $vertical ? "8px" : "8px 16px";
-var _exp38 = () => ({ $vertical }) => $vertical ? "0" : "10px";
-var _exp39 = () => ({ $inset }) => `${$inset}px`;
+var _exp33 = () => ({ $vertical }) => $vertical ? "column" : "row";
+var _exp34 = () => ({ $vertical }) => $vertical ? "nowrap" : "wrap";
+var _exp35 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
+var _exp36 = () => ({ $vertical }) => $vertical ? "8px" : "8px 16px";
+var _exp37 = () => ({ $vertical }) => $vertical ? "0" : "10px";
+var _exp38 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
-	class: "cz6jod1",
+	class: "c1iaray",
 	propsAsIs: false,
 	vars: {
-		"cz6jod1-0": [_exp34()],
-		"cz6jod1-1": [_exp35()],
-		"cz6jod1-2": [_exp36()],
-		"cz6jod1-3": [_exp37()],
-		"cz6jod1-4": [_exp38()],
-		"cz6jod1-5": [_exp39()]
+		"c1iaray-0": [_exp33()],
+		"c1iaray-1": [_exp34()],
+		"c1iaray-2": [_exp35()],
+		"c1iaray-3": [_exp36()],
+		"c1iaray-4": [_exp37()],
+		"c1iaray-5": [_exp38()]
 	}
 });
 /**
@@ -310,14 +293,14 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 */
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "c1de5mqk",
+	class: "cz6jod1",
 	propsAsIs: false
 });
 /** The same row, when the legend is inert — no button semantics to announce. */
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "cjirv6a",
+	class: "c1de5mqk",
 	propsAsIs: false
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSkeletonGroup, ChartSvg, ChartTooltipPositioner };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };

package/dist/charts/ChartTooltip.js

@@ -34,7 +34,6 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 			children: [/* @__PURE__ */ jsx(Text, {
 				size: TextSize.BODY_SM,
 				variant: TextVariant.TERTIARY,
-				isEllipsis: true,
 				children: displayed.label
 			}), /* @__PURE__ */ jsx(FlexWrapper, {
 				direction: FlexDirection.COLUMN,
@@ -48,7 +47,6 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
 						alignItems: AlignItems.CENTER,
 						gap: 6,
-						minWidth: 0,
 						children: [/* @__PURE__ */ jsx(FlexItem, {
 							shrink: 0,
 							children: /* @__PURE__ */ jsx(Circle, {
@@ -60,13 +58,10 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 							isEllipsis: true,
 							children: row.label
 						})]
-					}), /* @__PURE__ */ jsx(FlexItem, {
-						shrink: 0,
-						children: /* @__PURE__ */ jsx(Text, {
-							size: TextSize.BODY_SM,
-							weight: TextWeight.MEDIUM,
-							children: row.formattedValue
-						})
+					}), /* @__PURE__ */ jsx(Text, {
+						size: TextSize.BODY_SM,
+						weight: TextWeight.MEDIUM,
+						children: row.formattedValue
 					})]
 				}, row.key))
 			})]