@galaxy-io/dls 1.4.0 → 1.4.1

package/dist/charts/BarChart.js

@@ -8,7 +8,7 @@ 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.
@@ -150,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,

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/ChartPrimitives.d.ts

@@ -153,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.
  *

package/dist/charts/ChartPrimitives.js

@@ -201,7 +201,7 @@ var ChartAxisLabelBox = /*#__PURE__*/ styled("foreignObject")({
 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 _exp22 = () => ({ theme }) => theme.color.background.tertiary;
 var _exp23 = () => ({ $isVisible }) => $isVisible ? 1 : 0;
 var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartTooltipPositioner",
@@ -216,6 +216,32 @@ var ChartTooltipPositioner = withTheme(/*#__PURE__*/ styled("div")({
 	}
 }));
 /**
+* 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.
+*/
+var ChartTooltipGrid = /*#__PURE__*/ styled("div")({
+	name: "ChartTooltipGrid",
+	class: "cwcko2m",
+	propsAsIs: false
+});
+/** Swatch + label. `min-width: 0` is what lets the label actually ellipsize. */
+var ChartTooltipLabelCell = /*#__PURE__*/ styled("div")({
+	name: "ChartTooltipLabelCell",
+	class: "cqwhvyz",
+	propsAsIs: false
+});
+/** Right-aligned and never wrapped — the value always shows in full. */
+var ChartTooltipValueCell = /*#__PURE__*/ styled("div")({
+	name: "ChartTooltipValueCell",
+	class: "c1iaray",
+	propsAsIs: false
+});
+/**
 * Content well inside a donut hole.
 *
 * Rendered as HTML positioned over the SVG rather than as `<text>`, so the
@@ -228,12 +254,12 @@ var _exp28 = () => ({ $centerY }) => `${$centerY}px`;
 var _exp30 = () => ({ $diameter }) => `${$diameter}px`;
 var ChartCenterBox = /*#__PURE__*/ styled("div")({
 	name: "ChartCenterBox",
-	class: "cwcko2m",
+	class: "cz6jod1",
 	propsAsIs: false,
 	vars: {
-		"cwcko2m-0": [_exp27()],
-		"cwcko2m-1": [_exp28()],
-		"cwcko2m-2": [_exp30()]
+		"cz6jod1-0": [_exp27()],
+		"cz6jod1-1": [_exp28()],
+		"cz6jod1-2": [_exp30()]
 	}
 });
 /**
@@ -241,14 +267,14 @@ var ChartCenterBox = /*#__PURE__*/ styled("div")({
 * legible underneath.
 */
 var _exp31 = () => ({ theme }) => theme.color.border.primary;
-var _exp32 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp32 = () => ({ theme }) => theme.color.background.primary;
 var ChartEmptyOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ChartEmptyOverlay",
-	class: "cqwhvyz",
+	class: "c1de5mqk",
 	propsAsIs: false,
 	vars: {
-		"cqwhvyz-0": [_exp31()],
-		"cqwhvyz-1": [_exp32()]
+		"c1de5mqk-0": [_exp31()],
+		"c1de5mqk-1": [_exp32()]
 	}
 }));
 /**
@@ -268,15 +294,15 @@ var _exp37 = () => ({ $vertical }) => $vertical ? "0" : "10px";
 var _exp38 = () => ({ $inset }) => `${$inset}px`;
 var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendRow",
-	class: "c1iaray",
+	class: "cjirv6a",
 	propsAsIs: false,
 	vars: {
-		"c1iaray-0": [_exp33()],
-		"c1iaray-1": [_exp34()],
-		"c1iaray-2": [_exp35()],
-		"c1iaray-3": [_exp36()],
-		"c1iaray-4": [_exp37()],
-		"c1iaray-5": [_exp38()]
+		"cjirv6a-0": [_exp33()],
+		"cjirv6a-1": [_exp34()],
+		"cjirv6a-2": [_exp35()],
+		"cjirv6a-3": [_exp36()],
+		"cjirv6a-4": [_exp37()],
+		"cjirv6a-5": [_exp38()]
 	}
 });
 /**
@@ -293,14 +319,14 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 */
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "cz6jod1",
+	class: "c1armna5",
 	propsAsIs: false
 });
 /** The same row, when the legend is inert — no button semantics to announce. */
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "c1de5mqk",
+	class: "cgd77rv",
 	propsAsIs: false
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipPositioner };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPlotGroup, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };

package/dist/charts/ChartTooltip.js

@@ -1,10 +1,10 @@
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
-import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import Circle from "../shapes/Circle.js";
 import { useChartTooltipPosition } from "./useChartTooltipPosition.js";
-import { ChartTooltipPositioner } from "./ChartPrimitives.js";
-import { useState } from "react";
+import { ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell } from "./ChartPrimitives.js";
+import { Fragment, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartTooltip.tsx
 var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer }) => {
@@ -34,37 +34,24 @@ 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,
-				gap: 6,
-				fillWidth: true,
-				children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(FlexWrapper, {
-					alignItems: AlignItems.CENTER,
-					justifyContent: JustifyContent.SPACE_BETWEEN,
-					gap: 16,
-					fillWidth: true,
-					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
-						alignItems: AlignItems.CENTER,
-						gap: 6,
-						children: [/* @__PURE__ */ jsx(FlexItem, {
-							shrink: 0,
-							children: /* @__PURE__ */ jsx(Circle, {
-								size: 8,
-								hex: row.color
-							})
-						}), /* @__PURE__ */ jsx(Text, {
-							size: TextSize.BODY_SM,
-							isEllipsis: true,
-							children: row.label
-						})]
-					}), /* @__PURE__ */ jsx(Text, {
-						size: TextSize.BODY_SM,
-						weight: TextWeight.MEDIUM,
-						children: row.formattedValue
-					})]
-				}, row.key))
-			})]
+			}), /* @__PURE__ */ jsx(ChartTooltipGrid, { children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { children: [/* @__PURE__ */ jsx(FlexItem, {
+				shrink: 0,
+				children: /* @__PURE__ */ jsx(Circle, {
+					size: 8,
+					hex: row.color
+				})
+			}), /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				isEllipsis: true,
+				children: row.label
+			})] }), /* @__PURE__ */ jsx(ChartTooltipValueCell, { children: /* @__PURE__ */ jsx(Text, {
+				size: TextSize.BODY_SM,
+				weight: TextWeight.MEDIUM,
+				align: "right",
+				children: row.formattedValue
+			}) })] }, row.key)) })]
 		})
 	});
 };

package/dist/charts/LineChart.js

@@ -8,7 +8,7 @@ import { ChartAreaPath, ChartCursorLine, ChartLinePath, ChartPointCircle } from
 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/LineChart.tsx
 /**
 * Line chart over a categorical x-axis.
@@ -113,7 +113,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		categoryCount: geometry.categories.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,

package/dist/icons/GalaxyLogomark3D.js

@@ -4,7 +4,7 @@ import galaxy_logomark_default from "../assets/models/galaxy-logomark.js";
 /* empty css                           */
 import { styled } from "@linaria/react";
 import { Suspense, useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Center, Environment, OrbitControls } from "@react-three/drei";
 import { Canvas, useFrame, useLoader } from "@react-three/fiber";
 import * as THREE from "three";
@@ -139,7 +139,7 @@ function LogoMesh({ color, isDark, isAutoRotate = false, isHoverable = true, isH
 	});
 }
 function SimpleLighting() {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("ambientLight", { intensity: .5 }),
 		/* @__PURE__ */ jsx("directionalLight", {
 			position: [
@@ -160,7 +160,7 @@ function SimpleLighting() {
 	] });
 }
 function DramaticLighting({ backlight, spotlight, fillLight }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("ambientLight", { intensity: .15 }),
 		/* @__PURE__ */ jsx("directionalLight", {
 			position: [
@@ -227,7 +227,7 @@ function DramaticLighting({ backlight, spotlight, fillLight }) {
 	] });
 }
 function Scene({ color, isDark, isAutoRotate, isInteractive, isHoverable, isHovered, speed, isDramaticMode, backlight, spotlight, fillLight, material, environmentPreset }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		isDramaticMode && backlight && spotlight && fillLight ? /* @__PURE__ */ jsx(DramaticLighting, {
 			backlight,
 			spotlight,

package/dist/inputs/ColorInput.js

@@ -12,7 +12,7 @@ import { InputLabel, InputSize } from "./Input.js";
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { Hue, Saturation } from "@uiw/react-color";
 //#region src/inputs/ColorInput.tsx
@@ -339,7 +339,7 @@ var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						/* @__PURE__ */ jsxs(FlexWrapper, {
 							alignItems: AlignItems.CENTER,
 							gap: 8,
-							children: [value && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorInputPreviewSwatch, { $color: value }), /* @__PURE__ */ jsx(Spacing, { left: 4 })] }), /* @__PURE__ */ jsx(Text, {
+							children: [value && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorInputPreviewSwatch, { $color: value }), /* @__PURE__ */ jsx(Spacing, { left: 4 })] }), /* @__PURE__ */ jsx(Text, {
 								variant: textVariant,
 								size: COLOR_INPUT_SIZE_TO_TEXT_SIZE[size],
 								isEllipsis: true,

package/dist/inputs/MultiSelectInput.js

@@ -16,7 +16,7 @@ import { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SEL
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCounterClockwiseIcon, CaretDownIcon } from "@phosphor-icons/react";
 //#region src/inputs/MultiSelectInput.tsx
 var _exp = () => ({ $size }) => {
@@ -324,7 +324,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 		$fillWidth: fillWidth,
 		$width: resolvedDropdownWidth,
 		children: [
-			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsx(PinnedOptionButton, {
+			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsx(PinnedOptionButton, {
 				ref: (el) => {
 					optionsRefs.current[index] = el;
 				},
@@ -409,7 +409,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 					})
 				})
 			}),
-			onReset && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FlexItem, {
+			onReset && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexItem, {
 				shrink: 0,
 				children: /* @__PURE__ */ jsx(HorizontalDivider, {})
 			}), /* @__PURE__ */ jsx(PinnedOptionButton, {

package/dist/inputs/SelectInput.js

@@ -15,7 +15,7 @@ import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCounterClockwiseIcon, CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 //#region src/inputs/SelectInput.tsx
 var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
@@ -301,7 +301,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 		$fillWidth: fillWidth,
 		$width: resolvedDropdownWidth,
 		children: [
-			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsxs(PinnedOptionButton, {
+			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsxs(PinnedOptionButton, {
 				ref: (el) => {
 					optionsRefs.current[index] = el;
 				},
@@ -369,7 +369,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 					})
 				})
 			}),
-			onReset && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HorizontalDivider, {}), /* @__PURE__ */ jsx(PinnedOptionButton, {
+			onReset && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HorizontalDivider, {}), /* @__PURE__ */ jsx(PinnedOptionButton, {
 				onClick: handleReset,
 				$isSelected: false,
 				$isFocused: false,

package/dist/styles.css

@@ -36,11 +36,14 @@
 .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-flex-direction:var(--c1iaray-0);-ms-flex-direction:var(--c1iaray-0);flex-direction:var(--c1iaray-0);-webkit-box-flex-wrap:var(--c1iaray-1);-webkit-flex-wrap:var(--c1iaray-1);-ms-flex-wrap:var(--c1iaray-1);flex-wrap:var(--c1iaray-1);-webkit-align-items:var(--c1iaray-2);-webkit-box-align:var(--c1iaray-2);-ms-flex-align:var(--c1iaray-2);align-items:var(--c1iaray-2);gap:var(--c1iaray-3);min-width:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--c1iaray-4);padding-left:var(--c1iaray-5);}.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:default;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;}@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;}@media (prefers-reduced-motion: reduce){.c1de5mqk{-webkit-transition:none;transition:none;}}
+.cwcko2m{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0, 1fr) auto;grid-template-columns:minmax(0, 1fr) auto;-webkit-column-gap:16px;column-gap:16px;row-gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
+.cqwhvyz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;min-width:0;}
+.c1iaray{text-align:right;white-space:nowrap;}
+.cz6jod1{position:absolute;left:var(--cz6jod1-0);top:var(--cz6jod1-1);width:var(--cz6jod1-2);height:var(--cz6jod1-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;}
+.c1de5mqk{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:6px 8px;border:0.5px solid var(--c1de5mqk-0);border-radius:6px;background-color:var(--c1de5mqk-1);pointer-events:none;text-align:center;}
+.cjirv6a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:var(--cjirv6a-1);-webkit-flex-wrap:var(--cjirv6a-1);-ms-flex-wrap:var(--cjirv6a-1);flex-wrap:var(--cjirv6a-1);-webkit-align-items:var(--cjirv6a-2);-webkit-box-align:var(--cjirv6a-2);-ms-flex-align:var(--cjirv6a-2);align-items:var(--cjirv6a-2);gap:var(--cjirv6a-3);min-width:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cjirv6a-4);padding-left:var(--cjirv6a-5);}.cjirv6a[data-active="true"]>*{transition-delay:0ms;}
+.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;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;-webkit-transition:opacity 100ms ease-in-out 200ms;transition:opacity 100ms ease-in-out 200ms;}.c1armna5[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.c1armna5{-webkit-transition:none;transition:none;}}.c1armna5:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
+.cgd77rv{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;}.cgd77rv[data-state="muted"]{opacity:0.1;}@media (prefers-reduced-motion: reduce){.cgd77rv{-webkit-transition:none;transition:none;}}
 .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
 .s1yc7aow{position:relative;height:var(--s1yc7aow-0);width:100%;background-color:var(--s1yc7aow-1);border:0.5px solid var(--s1yc7aow-2);border-radius:4px;overflow:hidden;}
 .p1sc05jm{position:absolute;top:0;left:0;height:100%;width:var(--p1sc05jm-0);background-color:var(--p1sc05jm-1);-webkit-animation:var(--p1sc05jm-2);animation:var(--p1sc05jm-2);-webkit-transition:width 0.075s ease-in-out;transition:width 0.075s ease-in-out;}@-webkit-keyframes pulse-p1sc05jm{0%,100%{opacity:0.9;}50%{opacity:0.6;}}@keyframes pulse-p1sc05jm{0%,100%{opacity:0.9;}50%{opacity:0.6;}}

package/dist/table/SpreadsheetCell.js

@@ -6,7 +6,7 @@ import { CellStatusDot } from "./SpreadsheetPrimitives.js";
 import SpreadsheetCellEditor from "./SpreadsheetCellEditor.js";
 import { match } from "ts-pattern";
 import React, { useCallback } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/table/SpreadsheetCell.tsx
 function formatDisplayValue(value, cellType) {
 	if (value === null || value === void 0 || value === "") return "—";
@@ -40,7 +40,7 @@ function SpreadsheetCellInner({ column, row, rowIndex, columnIndex, isEditing, o
 			onCommit,
 			onCancel
 		});
-		return /* @__PURE__ */ jsxs(Fragment, { children: [showStatusDot && /* @__PURE__ */ jsx(CellStatusDot, { $status: enrichmentStatus }), /* @__PURE__ */ jsx(Text, {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [showStatusDot && /* @__PURE__ */ jsx(CellStatusDot, { $status: enrichmentStatus }), /* @__PURE__ */ jsx(Text, {
 			variant: TextVariant.PRIMARY,
 			size: TextSize.BODY_SM,
 			isEllipsis: true,

package/dist/toast/ToastProvider.js

@@ -2,7 +2,7 @@ import Toast, { ToastVariant } from "./Toast.js";
 import ToastContainer from "./ToastContainer.js";
 import ToastWrapper from "./ToastWrapper.js";
 import { createContext, useCallback, useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
 //#region src/toast/ToastProvider.tsx
@@ -89,7 +89,7 @@ var ToastProvider = ({ children }) => {
 		if (group) group.push(toast);
 		else positionGroups.set(key, [toast]);
 	});
-	const toastContent = /* @__PURE__ */ jsx(Fragment, { children: [...positionGroups.entries()].map(([key, group]) => /* @__PURE__ */ jsx(ToastContainer, {
+	const toastContent = /* @__PURE__ */ jsx(Fragment$1, { children: [...positionGroups.entries()].map(([key, group]) => /* @__PURE__ */ jsx(ToastContainer, {
 		top: group[0].top,
 		right: group[0].right,
 		bottom: group[0].bottom,

package/package.json

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