@galaxy-io/dls 1.3.6 → 1.4.0

package/dist/charts/LineChart.js

@@ -1,10 +1,10 @@
 import { ChartKind, ChartTargetShape, LineChartCurve } from "./types.js";
-import { LINE_AREA_OPACITY, LINE_POINT_RADIUS, SKELETON_LINE_SERIES } from "./constants.js";
+import { LINE_AREA_OPACITY, LINE_POINT_RADIUS } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useCartesianChartLayout } from "./useCartesianChartLayout.js";
 import { buildLineChartGeometry, getLineValueDomain } from "./lineChartGeometry.js";
-import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle, ChartSkeletonGroup } from "./ChartPrimitives.js";
+import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { ChartCategoryAxis, ChartValueAxis } from "./ChartAxis.js";
 import { useCallback, useMemo, useRef } from "react";
@@ -21,27 +21,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
-	/**
-	* The data actually rendered: the caller's, or ghost lines while loading.
-	*
-	* Loading replaces the chart wholesale with skeleton data pushed through the
-	* real geometry pipeline — offset lines drawn with their area fills, so the
-	* placeholder has the layered depth of a real multi-series chart. The cast is
-	* safe because nothing derived from it ever surfaces: labels are hidden,
-	* targets are off, the legend shows stubs, and the accessible name says
-	* "loading" instead of counting.
-	*/
-	const displayLines = useMemo(() => isLoading ? SKELETON_LINE_SERIES.map((values, lineIndex) => ({
-		metric: `skeleton-${lineIndex}`,
-		showArea: true,
-		points: values.map((value, index) => ({
-			x: `skeleton-${index}`,
-			y: value
-		}))
-	})) : lines, [isLoading, lines]);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
 		containerRef,
-		rawDomain: useMemo(() => getLineValueDomain(displayLines), [displayLines]),
+		rawDomain: useMemo(() => getLineValueDomain(lines), [lines]),
 		valueDomain,
 		width,
 		height,
@@ -56,10 +38,10 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryAxisTitle
 	});
 	const { plotWidth, plotHeight } = dimensions;
-	const resolveColor = useCallback(({ metric }) => isLoading ? colors.placeholder : colors.resolve(metric), [colors, isLoading]);
+	const resolveColor = useCallback(({ metric }) => colors.resolve(metric), [colors]);
 	const geometry = useMemo(() => buildLineChartGeometry({
-		lines: displayLines,
-		categories: isLoading ? void 0 : categories,
+		lines,
+		categories,
 		plotWidth,
 		plotHeight,
 		curve,
@@ -67,8 +49,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		strokeWidth,
 		resolveColor
 	}), [
-		displayLines,
-		isLoading,
+		lines,
 		categories,
 		plotWidth,
 		plotHeight,
@@ -77,7 +58,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		strokeWidth,
 		resolveColor
 	]);
-	const isEmpty = geometry.categories.length === 0 || displayLines.length === 0;
+	const isEmpty = geometry.categories.length === 0 || lines.length === 0;
 	const legendItems = useMemo(() => colors.keys.map((metric) => ({
 		key: metric,
 		label: series[metric].label,
@@ -87,7 +68,8 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 	const interaction = useChartInteraction({
 		categoryCount: geometry.columns.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty
+		disabled: noTooltip || isLoading || isEmpty,
+		isLoading
 	});
 	const activeColumn = interaction.activeIndex === null ? null : geometry.columns[interaction.activeIndex];
 	const buildCategoryTooltip = useCallback((index) => {
@@ -121,42 +103,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		width: column.bandWidth,
 		height: plotHeight
 	})), [geometry.columns, plotHeight]);
-	const marks = /* @__PURE__ */ jsxs(Fragment, { children: [
-		geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
-			d: linePath.areaPath,
-			fill: linePath.color,
-			fillOpacity: LINE_AREA_OPACITY,
-			"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
-		}, `${linePath.id}:area`) : null),
-		showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
-			x1: activeColumn.x,
-			x2: activeColumn.x,
-			y1: 0,
-			y2: plotHeight
-		}),
-		geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
-			d: linePath.path,
-			stroke: linePath.color,
-			strokeWidth: linePath.strokeWidth,
-			strokeDasharray: linePath.dashArray,
-			"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
-		}, linePath.id)),
-		geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-			cx: point.x,
-			cy: point.y,
-			r: LINE_POINT_RADIUS,
-			fill: point.color,
-			"data-state": interaction.getMarkState({ seriesKey: point.metric })
-		}, `${point.id}:isolated`)),
-		activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
-			cx: point.x,
-			cy: point.y,
-			r: LINE_POINT_RADIUS,
-			fill: point.color,
-			"data-state": interaction.getMarkState({ seriesKey: point.metric })
-		}, point.id))
-	] });
-	return /* @__PURE__ */ jsx(ChartFrame, {
+	return /* @__PURE__ */ jsxs(ChartFrame, {
 		containerRef,
 		dimensions,
 		fillWidth,
@@ -174,7 +121,6 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			marginLeft: dimensions.margin.left,
 			formatter: formatValue,
 			showGrid,
-			showLabels: !isLoading,
 			title: valueAxisTitle
 		}), /* @__PURE__ */ jsx(ChartCategoryAxis, {
 			labels: geometry.categories,
@@ -184,7 +130,6 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 			plotHeight,
 			formatter: formatLabel,
 			mode: categoryLabelMode,
-			showLabels: !isLoading,
 			title: categoryAxisTitle
 		})] }),
 		noTooltip,
@@ -197,7 +142,41 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		contentWhenEmpty,
 		showLegend,
 		legendItems,
-		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
+		children: [
+			geometry.paths.map((linePath) => linePath.areaPath ? /* @__PURE__ */ jsx(ChartAreaPath, {
+				d: linePath.areaPath,
+				fill: linePath.color,
+				fillOpacity: LINE_AREA_OPACITY,
+				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
+			}, `${linePath.id}:area`) : null),
+			showCursor && activeColumn && /* @__PURE__ */ jsx(ChartCursorLine, {
+				x1: activeColumn.x,
+				x2: activeColumn.x,
+				y1: 0,
+				y2: plotHeight
+			}),
+			geometry.paths.map((linePath) => /* @__PURE__ */ jsx(ChartLinePath, {
+				d: linePath.path,
+				stroke: linePath.color,
+				strokeWidth: linePath.strokeWidth,
+				strokeDasharray: linePath.dashArray,
+				"data-state": interaction.getMarkState({ seriesKey: linePath.metric })
+			}, linePath.id)),
+			geometry.isolatedPoints.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
+			}, `${point.id}:isolated`)),
+			activeColumn?.points.map((point) => /* @__PURE__ */ jsx(ChartPointCircle, {
+				cx: point.x,
+				cy: point.y,
+				r: LINE_POINT_RADIUS,
+				fill: point.color,
+				"data-state": interaction.getMarkState({ seriesKey: point.metric })
+			}, point.id))
+		]
 	});
 };
 //#endregion

package/dist/charts/PieChart.js

@@ -1,13 +1,13 @@
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
 import { ChartKind, ChartLegendPlacement, ChartTargetShape } from "./types.js";
-import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE, SKELETON_PIE_VALUES } from "./constants.js";
+import { PIE_CHART_MARGIN, PIE_MIN_SLICE_SHARE } from "./constants.js";
 import { useSeriesColorResolver } from "./useSeriesColorResolver.js";
 import { ChartTooltipVerticalAlign } from "./useChartTooltipPosition.js";
 import { useChartInteraction } from "./useChartInteraction.js";
 import { useChartFormatters } from "./useChartFormatters.js";
 import { useChartDimensions } from "./useChartDimensions.js";
 import { buildPieChartGeometry } from "./pieChartGeometry.js";
-import { ChartArcPath, ChartCenterBox, ChartSkeletonGroup } from "./ChartPrimitives.js";
+import { ChartArcPath, ChartCenterBox } from "./ChartPrimitives.js";
 import ChartFrame from "./ChartFrame.js";
 import { useCallback, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -40,23 +40,9 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	});
 	const getSliceLabel = useCallback((sliceKey) => series[sliceKey]?.label ?? sliceKey, [series]);
 	const getSliceColor = useCallback((sliceKey) => series[sliceKey]?.color, [series]);
-	/**
-	* The slices actually rendered: the caller's, or three ghost arcs while
-	* loading, pushed through the real geometry so the skeleton donut gets the
-	* true pad angles and corner radii. The cast is safe because nothing derived
-	* from skeleton data ever surfaces: targets are off, the legend shows stubs,
-	* and the accessible name says "loading" instead of counting slices.
-	*/
-	const displaySlices = useMemo(() => isLoading ? SKELETON_PIE_VALUES.map((value, index) => ({
-		key: `skeleton-${index}`,
-		value
-	})) : slices, [isLoading, slices]);
-	const resolveColor = useCallback(({ sliceKey, explicit }) => {
-		if (isLoading) return colors.placeholder;
-		return sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit);
-	}, [colors, isLoading]);
+	const resolveColor = useCallback(({ sliceKey, explicit }) => sliceKey === null ? colors.neutral : colors.resolve(sliceKey, explicit), [colors]);
 	const geometry = useMemo(() => buildPieChartGeometry({
-		slices: displaySlices,
+		slices,
 		plotWidth,
 		plotHeight,
 		innerRadiusRatio,
@@ -68,7 +54,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		getSliceColor,
 		getSliceLabel
 	}), [
-		displaySlices,
+		slices,
 		plotWidth,
 		plotHeight,
 		innerRadiusRatio,
@@ -90,7 +76,8 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 	const interaction = useChartInteraction({
 		categoryCount: geometry.arcs.length,
 		seriesKeys: legendKeys,
-		disabled: noTooltip || isLoading || isEmpty
+		disabled: noTooltip || isLoading || isEmpty,
+		isLoading
 	});
 	const buildCategoryTooltip = useCallback((index) => {
 		const chartArc = geometry.arcs[index];
@@ -123,18 +110,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		shape: ChartTargetShape.PATH,
 		d: chartArc.path
 	})), [geometry.arcs]);
-	const showCenter = centerContent && !isLoading && (innerRadiusRatio ?? .62) > 0;
-	const marks = /* @__PURE__ */ jsx("g", {
-		transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
-		children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
-			d: chartArc.path,
-			fill: chartArc.color,
-			"data-state": interaction.getMarkState({
-				categoryIndex: index,
-				seriesKey: chartArc.id
-			})
-		}, chartArc.id))
-	});
+	const showCenter = centerContent && (innerRadiusRatio ?? .62) > 0;
 	return /* @__PURE__ */ jsx(ChartFrame, {
 		containerRef,
 		dimensions,
@@ -164,7 +140,17 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 			diameter: geometry.innerRadius * 2,
 			children: centerContent
 		}) : null,
-		children: isLoading ? /* @__PURE__ */ jsx(ChartSkeletonGroup, { children: marks }) : marks
+		children: /* @__PURE__ */ jsx("g", {
+			transform: `translate(${geometry.centerX}, ${geometry.centerY})`,
+			children: geometry.arcs.map((chartArc, index) => /* @__PURE__ */ jsx(ChartArcPath, {
+				d: chartArc.path,
+				fill: chartArc.color,
+				"data-state": interaction.getMarkState({
+					categoryIndex: index,
+					seriesKey: chartArc.id
+				})
+			}, chartArc.id))
+		})
 	});
 };
 /** Positions arbitrary content inside the donut hole. */

package/dist/charts/constants.d.ts

@@ -203,25 +203,6 @@ export declare const CHART_TOOLTIP_MIN_WIDTH = 168;
 export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 export declare const CHART_LEGEND_SIDE_GAP = 16;
-/**
- * Ghost bar heights, one inner array per group — three bars each, so the
- * skeleton reads as the grouped chart it usually stands in for rather than a
- * sparse row of lone bars.
- */
-export declare const SKELETON_BAR_GROUPS: number[][];
-/**
- * Ghost lines, one inner array per line, offset from each other and drawn with
- * their area fills so the skeleton has the layered depth of a real multi-series
- * chart instead of a single bare stroke.
- */
-export declare const SKELETON_LINE_SERIES: number[][];
-/** Ghost donut shares — three arcs, halving. */
-export declare const SKELETON_PIE_VALUES: number[];
-/**
- * Skeleton pulse period, matching the cadence of `TextShimmer` and
- * `AvatarShimmer` so charts load in step with everything else on the page.
- */
-export declare const CHART_SKELETON_PULSE_MS = 2500;
 /**
  * Approximate width of one CAPTION-size character.
  *

package/dist/charts/constants.js

@@ -214,83 +214,6 @@ var CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
 var CHART_LEGEND_SIDE_GAP = 16;
 /**
-* Ghost bar heights, one inner array per group — three bars each, so the
-* skeleton reads as the grouped chart it usually stands in for rather than a
-* sparse row of lone bars.
-*/
-var SKELETON_BAR_GROUPS = [
-	[
-		65,
-		45,
-		25
-	],
-	[
-		80,
-		55,
-		30
-	],
-	[
-		45,
-		70,
-		35
-	],
-	[
-		70,
-		50,
-		40
-	],
-	[
-		55,
-		75,
-		30
-	]
-];
-/**
-* Ghost lines, one inner array per line, offset from each other and drawn with
-* their area fills so the skeleton has the layered depth of a real multi-series
-* chart instead of a single bare stroke.
-*/
-var SKELETON_LINE_SERIES = [
-	[
-		30,
-		55,
-		45,
-		70,
-		60,
-		85,
-		75
-	],
-	[
-		20,
-		35,
-		50,
-		40,
-		60,
-		55,
-		70
-	],
-	[
-		10,
-		25,
-		20,
-		35,
-		30,
-		45,
-		40
-	]
-];
-/** Ghost donut shares — three arcs, halving. */
-var SKELETON_PIE_VALUES = [
-	5,
-	3,
-	2
-];
-/**
-* Skeleton pulse period, matching the cadence of `TextShimmer` and
-* `AvatarShimmer` so charts load in step with everything else on the page.
-*/
-var CHART_SKELETON_PULSE_MS = 2500;
-/**
 * Approximate width of one CAPTION-size character.
 *
 * Axis sizing estimates label widths arithmetically rather than measuring the
@@ -338,4 +261,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_SKELETON_PULSE_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, SKELETON_BAR_GROUPS, SKELETON_LINE_SERIES, SKELETON_PIE_VALUES, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_RESTORE_DELAY_MS, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/charts/useChartInteraction.d.ts

@@ -25,6 +25,16 @@ interface UseChartInteractionOptions {
     seriesKeys?: string[];
     /** Suppress all interaction — used while loading and when the tooltip is off. */
     disabled?: boolean;
+    /**
+     * Render every mark muted, whatever the two axes say.
+     *
+     * Distinct from {@link disabled}, which suppresses *input*. Loading suppresses
+     * *emphasis*: there is nothing yet worth drawing attention to. Folded in here
+     * rather than left to each mark, because the alternative is the same
+     * `isLoading ? MUTED : getMarkState(…)` ternary hand-copied at every mark —
+     * which is exactly how one of them came to be missing it.
+     */
+    isLoading?: boolean;
 }
 interface MarkStateArgs {
     /** Omit for marks that belong to no particular category, such as a line. */
@@ -55,5 +65,5 @@ export interface ChartInteraction {
     onSeriesEnter: (seriesKey: string) => void;
     onSeriesLeave: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -1,7 +1,7 @@
 import { ChartMarkState } from "./types.js";
 import { useCallback, useMemo, useState } from "react";
 //#region src/charts/useChartInteraction.ts
-function useChartInteraction({ categoryCount, seriesKeys, disabled = false }) {
+function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
 	const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
@@ -21,8 +21,13 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false }) {
 		setHoveredSeriesKey(null);
 	}, []);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
+		if (isLoading) return ChartMarkState.MUTED;
 		return categoryIndex !== void 0 && safeHovered !== null && categoryIndex !== safeHovered || seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries ? ChartMarkState.MUTED : ChartMarkState.ACTIVE;
-	}, [safeHovered, safeHoveredSeries]);
+	}, [
+		isLoading,
+		safeHovered,
+		safeHoveredSeries
+	]);
 	return useMemo(() => ({
 		activeIndex: safeHovered,
 		hoveredSeriesKey: safeHoveredSeries,

package/dist/charts/useSeriesColorResolver.d.ts

@@ -33,12 +33,5 @@ export interface SeriesColorResolver<TKey extends string> {
      * imply it is.
      */
     neutral: string;
-    /**
-     * Ghost colour for skeleton marks while the chart is loading.
-     *
-     * The same token the shimmer components use, so the loading vocabulary is
-     * one colour everywhere.
-     */
-    placeholder: string;
 }
 export declare function useSeriesColorResolver<TKey extends string>(series: ChartSeriesStyles<TKey>): SeriesColorResolver<TKey>;

package/dist/charts/useSeriesColorResolver.js

@@ -15,8 +15,7 @@ function useSeriesColorResolver(series) {
 		keys,
 		resolve,
 		resolveByIndex,
-		neutral: theme.color.text.tertiary,
-		placeholder: theme.color.border.primary
+		neutral: theme.color.text.tertiary
 	}), [
 		keys,
 		resolve,

package/dist/dividers/HorizontalDivider.d.ts

@@ -1,2 +1,5 @@
-declare const HorizontalDivider: () => import("react").JSX.Element;
+export interface HorizontalDividerProps {
+    label?: string;
+}
+declare const HorizontalDivider: ({ label }: HorizontalDividerProps) => import("react").JSX.Element;
 export default HorizontalDivider;

package/dist/dividers/HorizontalDivider.js

@@ -1,17 +1,38 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
 /* empty css                            */
 import { styled } from "@linaria/react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/dividers/HorizontalDivider.tsx
-var _exp = () => ({ theme }) => theme.color.border.primary;
-var HorizontalDividerWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "HorizontalDividerWrapper",
+var _exp = () => ({ $flex }) => $flex ? "auto" : "100%";
+var _exp2 = () => ({ $flex }) => $flex ? "1 1 0%" : "0 0 auto";
+var _exp3 = () => ({ theme }) => theme.color.border.primary;
+var HorizontalDividerLine = withTheme(/*#__PURE__*/ styled("div")({
+	name: "HorizontalDividerLine",
 	class: "h1sww5hz",
 	propsAsIs: false,
-	vars: { "h1sww5hz-0": [_exp()] }
+	vars: {
+		"h1sww5hz-0": [_exp()],
+		"h1sww5hz-1": [_exp2()],
+		"h1sww5hz-2": [_exp3()]
+	}
 }));
-var HorizontalDivider = () => {
-	return /* @__PURE__ */ jsx(HorizontalDividerWrapper, {});
+var LabeledDividerWrapper = /*#__PURE__*/ styled("div")({
+	name: "LabeledDividerWrapper",
+	class: "l44ah51",
+	propsAsIs: false
+});
+var HorizontalDivider = ({ label }) => {
+	if (!label) return /* @__PURE__ */ jsx(HorizontalDividerLine, {});
+	return /* @__PURE__ */ jsxs(LabeledDividerWrapper, { children: [
+		/* @__PURE__ */ jsx(HorizontalDividerLine, { $flex: true }),
+		/* @__PURE__ */ jsx(Text, {
+			size: TextSize.CAPTION,
+			variant: TextVariant.TERTIARY,
+			children: label
+		}),
+		/* @__PURE__ */ jsx(HorizontalDividerLine, { $flex: true })
+	] });
 };
 //#endregion
 export { HorizontalDivider as default };

package/dist/inputs/CopyInput.js

@@ -2,7 +2,7 @@ import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import { InputSize } from "./Input.js";
 import TextInput from "./TextInput.js";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
 //#region src/inputs/CopyInput.tsx
@@ -13,7 +13,9 @@ var INPUT_SIZE_TO_BUTTON_SIZE = {
 };
 var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
 	const [copied, setCopied] = useState(false);
+	const inputRef = useRef(null);
 	const handleCopy = useCallback(() => {
+		inputRef.current?.select();
 		navigator.clipboard.writeText(value).then(() => {
 			setCopied(true);
 			setTimeout(() => setCopied(false), 2e3);
@@ -24,6 +26,7 @@ var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, f
 		gap: 8,
 		fillWidth,
 		children: [/* @__PURE__ */ jsx(TextInput, {
+			ref: inputRef,
 			label,
 			labelTooltip,
 			value,

package/dist/inputs/Input.d.ts

@@ -24,7 +24,7 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
     theme: import("../theme").Theme;
 } & {
     as?: React.ElementType;
-}, "$width" | "$fillWidth" | "as" | "$size" | "$isMonospace" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | "$isDisabled" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+}, "$width" | "$fillWidth" | "$size" | "$isMonospace" | "as" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | "$isDisabled" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
     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<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     $size: InputSize;

package/dist/inputs/MultiSelectInput.js

@@ -1,5 +1,6 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
+import Rotate from "../transform/Rotate.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
@@ -7,7 +8,6 @@ import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrappe
 import CheckboxInput, { CheckboxInputVariant } from "./CheckboxInput.js";
 import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
 import { InputLabel, InputSize } from "./Input.js";
-import RotateWithTransition from "../animations/RotateWithTransition.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
 import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
@@ -503,7 +503,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 							disabled: effectiveIsDisabled,
 							onClick: (e) => e.stopPropagation()
 						}),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -541,7 +541,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 							isEllipsis: true,
 							children: displayValue
 						}),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {

package/dist/inputs/SelectInput.js

@@ -1,5 +1,6 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
+import Rotate from "../transform/Rotate.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
@@ -7,7 +8,6 @@ import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrappe
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Spacing from "../containers/Spacing.js";
 import { InputLabel, InputSize } from "./Input.js";
-import RotateWithTransition from "../animations/RotateWithTransition.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
 import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
@@ -451,7 +451,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 							onClick: (e) => e.stopPropagation()
 						}),
 						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -498,7 +498,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 							})]
 						}),
 						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {

package/dist/inputs/SwitcherInput.d.ts

@@ -0,0 +1,11 @@
+export interface SwitcherInputItem {
+    id: string;
+    label: string;
+    onClick: () => void;
+}
+interface SwitcherInputProps {
+    items: SwitcherInputItem[];
+    selectedId: string;
+}
+declare const SwitcherInput: ({ items, selectedId }: SwitcherInputProps) => import("react").JSX.Element;
+export default SwitcherInput;