@galaxy-io/dls 1.3.0 → 1.3.1

package/dist/charts/useCartesianChartLayout.d.ts

@@ -0,0 +1,70 @@
+import type { ChartLabelFormatter, ChartMargin, ChartValueDomain, ChartValueFormatter, ChartValueUnit } from "./types";
+import type { ChartDimensions } from "./useChartDimensions";
+/**
+ * Everything a cartesian chart resolves *before* it can be measured.
+ *
+ * There is a hard ordering inside bar and line alike:
+ *
+ * ```
+ * domain → ticks → left margin → dimensions → plot size → geometry
+ * ```
+ *
+ * The gutter has to fit the tick labels, the ticks come from the domain, and
+ * the domain comes from the data — none of which needs the plot. Everything
+ * after `geometry` does need it, which is why this hook stops there rather than
+ * trying to own the whole chart: the geometry builders are generic over the
+ * chart's own key types, and threading those through here would buy nothing.
+ *
+ * Deliberately **not generic**. `getBarValueDomain` and `getLineValueDomain`
+ * have already erased the key types by the time they return an extent, so
+ * nothing in this phase needs them.
+ */
+interface UseCartesianChartLayoutOptions {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * The data's own extent, before any override or nicing.
+     *
+     * Free to be a fresh array each render — the memo below keys on the two
+     * numbers, not the array's identity.
+     */
+    rawDomain: [number, number];
+    valueDomain?: Partial<ChartValueDomain>;
+    width?: number;
+    height?: number;
+    fillWidth?: boolean;
+    fillHeight?: boolean;
+    aspectRatio?: number;
+    margin?: Partial<ChartMargin>;
+    valueUnit?: ChartValueUnit;
+    valueFormatter?: ChartValueFormatter;
+    labelFormatter?: ChartLabelFormatter;
+    /**
+     * Rewrites the resolved value formatter for the axis alone.
+     *
+     * Takes the resolved formatter rather than replacing it, because the only
+     * caller — a percent-normalized bar chart — falls back to it whenever the
+     * consumer asked for something specific. Applies to the tick labels *and* the
+     * gutter estimate, which is the point: sizing the gutter with a different
+     * formatter than the one that renders into it is how a gutter ends up too
+     * narrow for its own labels.
+     *
+     * Must be stable; memoize it at the call site.
+     */
+    deriveAxisFormatter?: (formatValue: ChartValueFormatter) => ChartValueFormatter;
+    valueAxisTitle?: string;
+    categoryAxisTitle?: string;
+}
+export interface CartesianChartLayout {
+    dimensions: ChartDimensions;
+    /** Override applied, zero included, degenerate widened, `nice()` applied. */
+    domain: [number, number];
+    valueTicks: number[];
+    /** Tooltip rows and value labels. */
+    formatValue: ChartValueFormatter;
+    /** Category names — the axis and the tooltip heading. */
+    formatLabel: ChartLabelFormatter;
+    /** Axis ticks. Identical to `formatValue` unless `deriveAxisFormatter` said otherwise. */
+    formatAxisValue: ChartValueFormatter;
+}
+export declare function useCartesianChartLayout({ containerRef, rawDomain, valueDomain, width, height, fillWidth, fillHeight, aspectRatio, margin, valueUnit, valueFormatter, labelFormatter, deriveAxisFormatter, valueAxisTitle, categoryAxisTitle, }: UseCartesianChartLayoutOptions): CartesianChartLayout;
+export {};

package/dist/charts/useCartesianChartLayout.js

@@ -0,0 +1,56 @@
+import { addAxisTitleSpace, estimateValueAxisMargin, getValueTicks, resolveValueDomain } from "./chartScales.js";
+import { useChartFormatters } from "./useChartFormatters.js";
+import { useChartDimensions } from "./useChartDimensions.js";
+import { useMemo } from "react";
+//#region src/charts/useCartesianChartLayout.ts
+function useCartesianChartLayout({ containerRef, rawDomain, valueDomain, width, height, fillWidth, fillHeight, aspectRatio, margin, valueUnit, valueFormatter, labelFormatter, deriveAxisFormatter, valueAxisTitle, categoryAxisTitle }) {
+	const { formatValue, formatLabel } = useChartFormatters({
+		valueFormatter,
+		valueUnit,
+		labelFormatter
+	});
+	const formatAxisValue = useMemo(() => deriveAxisFormatter?.(formatValue) ?? formatValue, [deriveAxisFormatter, formatValue]);
+	const [rawMin, rawMax] = rawDomain;
+	const domain = useMemo(() => resolveValueDomain([rawMin, rawMax], valueDomain), [
+		rawMin,
+		rawMax,
+		valueDomain
+	]);
+	const valueTicks = useMemo(() => getValueTicks(domain, valueDomain), [domain, valueDomain]);
+	const dimensions = useChartDimensions({
+		containerRef,
+		width,
+		height,
+		fillWidth,
+		fillHeight,
+		aspectRatio,
+		margin: addAxisTitleSpace(useMemo(() => ({
+			...margin,
+			left: margin?.left ?? estimateValueAxisMargin(valueTicks, formatAxisValue)
+		}), [
+			margin,
+			valueTicks,
+			formatAxisValue
+		]), {
+			hasValueTitle: Boolean(valueAxisTitle),
+			hasCategoryTitle: Boolean(categoryAxisTitle)
+		})
+	});
+	return useMemo(() => ({
+		dimensions,
+		domain,
+		valueTicks,
+		formatValue,
+		formatLabel,
+		formatAxisValue
+	}), [
+		dimensions,
+		domain,
+		valueTicks,
+		formatValue,
+		formatLabel,
+		formatAxisValue
+	]);
+}
+//#endregion
+export { useCartesianChartLayout };

package/dist/charts/useChartDimensions.d.ts

@@ -21,6 +21,15 @@ interface UseChartDimensionsOptions {
     fillHeight?: boolean;
     aspectRatio?: number;
     margin?: Partial<ChartMargin>;
+    /**
+     * Fallback for whichever fields `margin` leaves out.
+     *
+     * Radial charts pass their own, since the cartesian default reserves gutters
+     * for axes they do not draw. Merged per field, so a caller's partial margin
+     * lands on top of *this* rather than reverting the chart to the cartesian
+     * defaults.
+     */
+    defaultMargin?: ChartMargin;
 }
 export interface ChartDimensions {
     width: number;
@@ -33,8 +42,6 @@ export interface ChartDimensions {
     /** Handed to the plot box so it reserves space before measurement lands. */
     reservedHeight?: number;
     reservedAspectRatio?: number;
-    /** Makes the plot box claim the flex track instead of reserving a height. */
-    fillHeight?: boolean;
 }
-export declare function useChartDimensions({ containerRef, width, height, fillWidth, fillHeight, aspectRatio, margin: marginOverride, }: UseChartDimensionsOptions): ChartDimensions;
+export declare function useChartDimensions({ containerRef, width, height, fillWidth, fillHeight, aspectRatio, margin: marginOverride, defaultMargin, }: UseChartDimensionsOptions): ChartDimensions;
 export {};

package/dist/charts/useChartDimensions.js

@@ -1,22 +1,33 @@
 import { useElementClientSize } from "../hooks/useElementClientSize.js";
+import { DEFAULT_CHART_MARGIN } from "./constants.js";
 import { getPlotDimensions, resolveMargin } from "./chartScales.js";
 import { useEffect, useMemo } from "react";
 //#region src/charts/useChartDimensions.ts
-function useChartDimensions({ containerRef, width, height, fillWidth = false, fillHeight = false, aspectRatio, margin: marginOverride }) {
+function useChartDimensions({ containerRef, width, height, fillWidth = false, fillHeight = false, aspectRatio, margin: marginOverride, defaultMargin }) {
 	const { width: measuredWidth, height: measuredHeight } = useElementClientSize(containerRef);
 	const resolvedWidth = fillWidth ? measuredWidth ?? 0 : width ?? 0;
 	const resolvedHeight = fillHeight ? measuredHeight ?? 0 : aspectRatio ? resolvedWidth / aspectRatio : height ?? 0;
 	const { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft } = marginOverride ?? {};
+	const { top: defaultTop, right: defaultRight, bottom: defaultBottom, left: defaultLeft } = defaultMargin ?? DEFAULT_CHART_MARGIN;
 	const margin = useMemo(() => resolveMargin({
 		top: marginTop,
 		right: marginRight,
 		bottom: marginBottom,
 		left: marginLeft
+	}, {
+		top: defaultTop,
+		right: defaultRight,
+		bottom: defaultBottom,
+		left: defaultLeft
 	}), [
 		marginTop,
 		marginRight,
 		marginBottom,
-		marginLeft
+		marginLeft,
+		defaultTop,
+		defaultRight,
+		defaultBottom,
+		defaultLeft
 	]);
 	const { plotWidth, plotHeight } = useMemo(() => getPlotDimensions(resolvedWidth, resolvedHeight, margin), [
 		resolvedWidth,
@@ -36,8 +47,7 @@ function useChartDimensions({ containerRef, width, height, fillWidth = false, fi
 		margin,
 		isMeasured: resolvedWidth > 0 && resolvedHeight > 0,
 		reservedHeight: fillHeight || aspectRatio ? void 0 : height,
-		reservedAspectRatio: fillHeight ? void 0 : aspectRatio,
-		fillHeight
+		reservedAspectRatio: fillHeight ? void 0 : aspectRatio
 	}), [
 		resolvedWidth,
 		resolvedHeight,

package/dist/charts/useChartInteraction.d.ts

@@ -11,8 +11,8 @@ import { ChartMarkState } from "./types";
  *
  * Both live here rather than one of them in the charts, so there is a single
  * `isEngaged` boolean. That matters more than it looks: `ChartPlotGroup` uses it
- * to cancel a 300ms restore delay, and a second hover source that didn't feed it
- * would sit through that delay before muting anything and feel broken.
+ * to cancel the mark restore delay, and a second hover source that didn't feed
+ * it would sit through that delay before muting anything and feel broken.
  *
  * Escape or a click on the plot background clears both pins.
  */
@@ -23,10 +23,18 @@ 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;
     /** Notified when the pinned category changes. */
     onPinnedChange?: (index: number | null) => void;
-    /** Notified when the pinned series changes. */
-    onPinnedSeriesChange?: (seriesKey: string | null) => void;
 }
 interface MarkStateArgs {
     /** Omit for marks that belong to no particular category, such as a line. */
@@ -35,14 +43,11 @@ interface MarkStateArgs {
     seriesKey?: string;
 }
 export interface ChartInteraction {
-    hoveredIndex: number | null;
     pinnedIndex: number | null;
     /** Pinned wins over hovered — this is what the tooltip follows. */
     activeIndex: number | null;
     hoveredSeriesKey: string | null;
     pinnedSeriesKey: string | null;
-    /** Pinned wins over hovered, matching the category axis. */
-    activeSeriesKey: string | null;
     /** True while *either* axis is engaged; cancels the mark restore delay. */
     isEngaged: boolean;
     /**
@@ -67,5 +72,5 @@ export interface ChartInteraction {
     /** Attach to the plot backdrop; clears both pins. */
     onBackdropClick: () => void;
 }
-export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, onPinnedChange, onPinnedSeriesChange, }: UseChartInteractionOptions): ChartInteraction;
+export declare function useChartInteraction({ categoryCount, seriesKeys, disabled, isLoading, onPinnedChange, }: UseChartInteractionOptions): ChartInteraction;
 export {};

package/dist/charts/useChartInteraction.js

@@ -1,21 +1,19 @@
 import { ChartMarkState } from "./types.js";
+import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/charts/useChartInteraction.ts
 /** How far back a state sits, so two axes can be compared and the worse taken. */
-var severity = (state) => {
-	if (state === ChartMarkState.ACTIVE) return 0;
-	return state === ChartMarkState.MUTED ? 1 : 2;
-};
-function useChartInteraction({ categoryCount, seriesKeys, disabled = false, onPinnedChange, onPinnedSeriesChange }) {
+function severity(state) {
+	return match(state).with(ChartMarkState.ACTIVE, () => 0).with(ChartMarkState.MUTED, () => 1).with(ChartMarkState.FADED, () => 2).exhaustive();
+}
+function useChartInteraction({ categoryCount, seriesKeys, disabled = false, isLoading = false, onPinnedChange }) {
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [pinnedIndex, setPinnedIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
 	const [pinnedSeriesKey, setPinnedSeriesKey] = useState(null);
 	const onPinnedChangeRef = useRef(onPinnedChange);
-	const onPinnedSeriesChangeRef = useRef(onPinnedSeriesChange);
 	useEffect(() => {
 		onPinnedChangeRef.current = onPinnedChange;
-		onPinnedSeriesChangeRef.current = onPinnedSeriesChange;
 	});
 	const safeHovered = hoveredIndex !== null && hoveredIndex < categoryCount ? hoveredIndex : null;
 	const safePinned = pinnedIndex !== null && pinnedIndex < categoryCount ? pinnedIndex : null;
@@ -26,7 +24,6 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, onPi
 		setPinnedIndex(null);
 		setPinnedSeriesKey(null);
 		onPinnedChangeRef.current?.(null);
-		onPinnedSeriesChangeRef.current?.(null);
 	}, []);
 	const hasPin = safePinned !== null || safePinnedSeries !== null;
 	useEffect(() => {
@@ -65,9 +62,9 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, onPi
 		const next = pinnedSeriesKey === seriesKey ? null : seriesKey;
 		setPinnedSeriesKey(next);
 		if (next === null) setHoveredSeriesKey(null);
-		onPinnedSeriesChangeRef.current?.(next);
 	}, [pinnedSeriesKey]);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
+		if (isLoading) return ChartMarkState.MUTED;
 		const categoryState = (() => {
 			if (categoryIndex === void 0) return ChartMarkState.ACTIVE;
 			if (safePinned !== null) {
@@ -90,18 +87,17 @@ function useChartInteraction({ categoryCount, seriesKeys, disabled = false, onPi
 		})();
 		return severity(categoryState) >= severity(seriesState) ? categoryState : seriesState;
 	}, [
+		isLoading,
 		safePinned,
 		safeHovered,
 		safePinnedSeries,
 		safeHoveredSeries
 	]);
 	return useMemo(() => ({
-		hoveredIndex: safeHovered,
 		pinnedIndex: safePinned,
 		activeIndex: safePinned ?? safeHovered,
 		hoveredSeriesKey: safeHoveredSeries,
 		pinnedSeriesKey: safePinnedSeries,
-		activeSeriesKey: safePinnedSeries ?? safeHoveredSeries,
 		isEngaged: safePinned !== null || safeHovered !== null || safePinnedSeries !== null || safeHoveredSeries !== null,
 		getMarkState,
 		onCategoryEnter,

package/dist/charts/useSeriesColorResolver.d.ts

@@ -0,0 +1,37 @@
+import type { ChartPalette, ChartSeriesStyles } from "./types";
+/**
+ * Palette assignment for a chart's series, shared by all three charts.
+ *
+ * Every chart resolved colour the same way — look the key up in the `series`
+ * record, take its slot, fall back to the palette — but each spelled it
+ * differently and each rebuilt the key list itself. Doing it once here is what
+ * makes "adding a series never recolours the existing ones" a property of the
+ * design rather than of three separate call sites remembering to use
+ * `indexOf` instead of the loop counter.
+ */
+export interface SeriesColorResolver<TKey extends string> {
+    /**
+     * Series keys in `series` record order.
+     *
+     * Insertion order is what makes a key's palette slot stable regardless of
+     * which data happens to contain it, so this is never sorted.
+     */
+    keys: TKey[];
+    /** Colour for a series. The record's own `color` wins over the slot. */
+    resolve: (key: TKey, explicit?: ChartPalette) => string;
+    /**
+     * Colour by palette position, for marks that are not series.
+     *
+     * A stacked bar's segments are a second dimension with no record of their
+     * own, so they take the ramp by position rather than by key.
+     */
+    resolveByIndex: (index: number, explicit?: ChartPalette) => string;
+    /**
+     * Neutral, for a mark that names no series at all.
+     *
+     * The pie's folded bucket is not one of the slices, so borrowing a hue would
+     * imply it is.
+     */
+    neutral: string;
+}
+export declare function useSeriesColorResolver<TKey extends string>(series: ChartSeriesStyles<TKey>): SeriesColorResolver<TKey>;

package/dist/charts/useSeriesColorResolver.js

@@ -0,0 +1,27 @@
+import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
+import { resolveChartPaletteColor, resolveSeriesColor } from "./chartTheme.js";
+import { useCallback, useMemo } from "react";
+//#region src/charts/useSeriesColorResolver.ts
+function useSeriesColorResolver(series) {
+	const { theme } = useGalaxyTheme();
+	const keys = useMemo(() => Object.keys(series), [series]);
+	const resolveByIndex = useCallback((index, explicit) => explicit ? resolveChartPaletteColor(theme, explicit) : resolveSeriesColor(theme, index), [theme]);
+	const resolve = useCallback((key, explicit) => resolveSeriesColor(theme, keys.indexOf(key), explicit ?? series[key]?.color), [
+		theme,
+		keys,
+		series
+	]);
+	return useMemo(() => ({
+		keys,
+		resolve,
+		resolveByIndex,
+		neutral: theme.color.text.tertiary
+	}), [
+		keys,
+		resolve,
+		resolveByIndex,
+		theme
+	]);
+}
+//#endregion
+export { useSeriesColorResolver };

package/dist/styles.css

@@ -32,17 +32,19 @@
 .ceqlpek{stroke:none;pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.ceqlpek[data-state="muted"]{opacity:0.1;}.ceqlpek[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.ceqlpek{-webkit-transition:none;transition:none;}}
 .c1fcbddl{pointer-events:none;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1fcbddl[data-state="muted"]{opacity:0.1;}.c1fcbddl[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.c1fcbddl{-webkit-transition:none;transition:none;}}
 .cpcxr59{opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cpcxr59[data-state="muted"]{opacity:0.1;}.cpcxr59[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.cpcxr59{-webkit-transition:none;transition:none;}}
-.c1wvzvu4{fill:transparent;outline:none;}.c1wvzvu4[data-interactive="true"]{cursor:pointer;}.c1wvzvu4:focus-visible{outline:1.5px solid currentColor;outline-offset:1px;}
-.c17guewt{fill:transparent;}.c17guewt[data-interactive="true"]{cursor:pointer;}
-.cblgiyf{stroke:var(--cblgiyf-0);shape-rendering:crispEdges;}
-.c1lr03cc{stroke:var(--c1lr03cc-0);pointer-events:none;}
-.cizy1s8{overflow:visible;pointer-events:none;}
-.c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
-.cwcko2m{position:absolute;left:var(--cwcko2m-0);top:var(--cwcko2m-1);width:var(--cwcko2m-2);height:var(--cwcko2m-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
-.cqwhvyz{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:12px;border:0.5px solid var(--cqwhvyz-0);border-radius:6px;background-color:var(--cqwhvyz-1);pointer-events:none;text-align:center;}
-.c1iaray{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px 16px;min-width:0;padding-top:10px;padding-left:var(--c1iaray-0);}.c1iaray[data-active="true"]>*{transition-delay:0ms;}
-.cz6jod1{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:2px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cz6jod1[data-state="muted"]{opacity:0.1;}.cz6jod1[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.cz6jod1{-webkit-transition:none;transition:none;}}.cz6jod1:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
-.c1de5mqk{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1de5mqk[data-state="muted"]{opacity:0.1;}.c1de5mqk[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.c1de5mqk{-webkit-transition:none;transition:none;}}
+.c1wvzvu4{color:var(--c1wvzvu4-0);}
+.c17guewt{fill:transparent;outline:none;}.c17guewt[data-interactive="true"]{cursor:pointer;}.c17guewt:focus-visible{outline:none;stroke:currentColor;stroke-width:2;}
+.cblgiyf{fill:transparent;outline:none;}.cblgiyf[data-interactive="true"]{cursor:pointer;}.cblgiyf:focus-visible{outline:none;stroke:currentColor;stroke-width:2;}
+.c1lr03cc{fill:transparent;}.c1lr03cc[data-interactive="true"]{cursor:pointer;}
+.cizy1s8{stroke:var(--cizy1s8-0);shape-rendering:crispEdges;}
+.c1ukq11d{stroke:var(--c1ukq11d-0);pointer-events:none;}
+.cwcko2m{overflow:visible;pointer-events:none;}
+.cqwhvyz{position:absolute;z-index:10;pointer-events:none;left:var(--cqwhvyz-0);top:var(--cqwhvyz-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--cqwhvyz-2);border-radius:6px;background-color:var(--cqwhvyz-3);opacity:var(--cqwhvyz-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.cqwhvyz{-webkit-transition:none;transition:none;}}
+.c1iaray{position:absolute;left:var(--c1iaray-0);top:var(--c1iaray-1);width:var(--c1iaray-2);height:var(--c1iaray-2);-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:none;text-align:center;}
+.cz6jod1{position:absolute;top:38%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:60%;padding:12px;border:0.5px solid var(--cz6jod1-0);border-radius:6px;background-color:var(--cz6jod1-1);pointer-events:none;text-align:center;}
+.c1de5mqk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px 16px;min-width:0;padding-top:10px;padding-left:var(--c1de5mqk-0);}.c1de5mqk[data-active="true"]>*{transition-delay:0ms;}
+.cjirv6a{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:2px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.cjirv6a[data-state="muted"]{opacity:0.1;}.cjirv6a[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.cjirv6a{-webkit-transition:none;transition:none;}}.cjirv6a:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
+.c1armna5{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1armna5[data-state="muted"]{opacity:0.1;}.c1armna5[data-state="faded"]{opacity:0.04;}@media (prefers-reduced-motion: reduce){.c1armna5{-webkit-transition:none;transition:none;}}
 .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
 .shdcix9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;gap:4px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;min-width:16px;cursor:var(--shdcix9-0);-webkit-transition:border-color 0.1s ease-out;transition:border-color 0.1s ease-out;height:var(--shdcix9-1);padding:var(--shdcix9-2);background-color:var(--shdcix9-3);border:0.5px solid var(--shdcix9-4);border-radius:var(--shdcix9-5);}
 .szfsuud{margin-left:0.5px;}.szfsuud>span{display:inline-block;-webkit-animation:ellipsisPulse-szfsuud var(--szfsuud-0) infinite ease-in-out both;animation:ellipsisPulse-szfsuud var(--szfsuud-0) infinite ease-in-out both;-webkit-animation-play-state:var(--szfsuud-1);animation-play-state:var(--szfsuud-1);}.szfsuud>span:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s;}.szfsuud>span:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}.szfsuud>span:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes ellipsisPulse-szfsuud{0%,80%,100%{opacity:0.5;}40%{opacity:1;}}@keyframes ellipsisPulse-szfsuud{0%,80%,100%{opacity:0.5;}40%{opacity:1;}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",