@galaxy-io/dls 1.4.0 → 1.4.2

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/chips/Chip.js

@@ -46,11 +46,7 @@ var _exp4 = () => ({ theme, $variant, $noBackground }) => {
 	if ($noBackground) return "transparent";
 	return match($variant).with("PRIMARY", () => theme.color.background.primary).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.success).with("WARNING", () => theme.color.background.warning).with("ERROR", () => theme.color.background.error).with("PINK", () => theme.color.background.pink).with("ORANGE", () => theme.color.background.orange).with("YELLOW", () => theme.color.background.yellow).with("LIME", () => theme.color.background.lime).with("BLUE", () => theme.color.background.blue).with("PURPLE", () => theme.color.background.purple).with("TEAL", () => theme.color.background.teal).exhaustive();
 };
-var _exp5 = () => ({ theme, $variant, $isActive }) => {
-	if (!$isActive) return match($variant).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).with("PINK", () => theme.color.border.pink).with("ORANGE", () => theme.color.border.orange).with("YELLOW", () => theme.color.border.yellow).with("LIME", () => theme.color.border.lime).with("BLUE", () => theme.color.border.blue).with("PURPLE", () => theme.color.border.purple).with("TEAL", () => theme.color.border.teal).otherwise(() => theme.color.border.primary);
-	return match($variant).with("PRIMARY", () => theme.color.icon.primary).with("PRIMARY_ALT", () => theme.color.icon.primaryAlt).with("SECONDARY", () => theme.color.icon.secondary).with("TERTIARY", () => theme.color.icon.tertiary).with("SUCCESS", () => theme.color.icon.success).with("WARNING", () => theme.color.icon.warning).with("ERROR", () => theme.color.icon.error).with("PINK", () => theme.color.icon.pink).with("ORANGE", () => theme.color.icon.orange).with("YELLOW", () => theme.color.icon.yellow).with("LIME", () => theme.color.icon.lime).with("BLUE", () => theme.color.icon.blue).with("PURPLE", () => theme.color.icon.purple).with("TEAL", () => theme.color.icon.teal).exhaustive();
-};
-var _exp6 = () => ({ $isPill }) => $isPill ? "200px" : "4px";
+var _exp5 = () => ({ $isPill }) => $isPill ? "200px" : "4px";
 var StyledChip = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledChip",
 	class: "shdcix9",
@@ -60,8 +56,7 @@ var StyledChip = withTheme(/*#__PURE__*/ styled("div")({
 		"shdcix9-1": [_exp2()],
 		"shdcix9-2": [_exp3()],
 		"shdcix9-3": [_exp4()],
-		"shdcix9-4": [_exp5()],
-		"shdcix9-5": [_exp6()]
+		"shdcix9-4": [_exp5()]
 	}
 }));
 var CHIP_SIZE_TO_SHIMMER_HEIGHT = {

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/inputs/SwitcherInput.js

@@ -31,7 +31,7 @@ var SwitcherInput = ({ items, selectedId }) => {
 		onClick: item.onClick,
 		$isSelected: item.id === selectedId,
 		children: /* @__PURE__ */ jsx(Text, {
-			weight: TextWeight.MEDIUM,
+			weight: item.id === selectedId ? TextWeight.MEDIUM : TextWeight.REGULAR,
 			cursor: "pointer",
 			children: item.label
 		})

package/dist/styles.css

@@ -36,16 +36,19 @@
 .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;}}
 .slaxlp8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;min-width:140px;background-color:var(--slaxlp8-0);padding:12px 16px;border:0.5px solid var(--slaxlp8-1);border-radius:5px;}
-.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);}
+.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);height:var(--shdcix9-1);padding:var(--shdcix9-2);background-color:var(--shdcix9-3);border-radius:var(--shdcix9-4);}
 .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;}}
 .s1p67zkf{display:inline-block;background:linear-gradient(
     90deg,

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/theme/variants/dark.js

@@ -23,20 +23,20 @@ var GALAXY_DARK_COLOR = {
 		galaxyAlt: "#3075FF"
 	},
 	background: {
-		base: "#131313",
+		base: "#141415",
 		baseAlt: "#ffffff",
-		primary: "#161616",
+		primary: "#161617",
 		primaryAlt: "#fafafa",
-		secondary: "#1e1e1e",
+		secondary: "#1c1c1d",
 		secondaryAlt: "#f0f0f0",
-		tertiary: "#1B1B1B",
+		tertiary: "#1a1a1b",
 		tertiaryAlt: "#f5f5f5",
 		success: "#1d3329",
-		successAlt: "#327056",
+		successAlt: "#2f8f64",
 		warning: "#3f2e19",
-		warningAlt: "#B66A1E",
+		warningAlt: "#c4882a",
 		error: "#3d1f24",
-		errorAlt: "#AA3247",
+		errorAlt: "#d63d4e",
 		pink: "#361c23",
 		pinkAlt: "#f8e6f7",
 		orange: "#3d2a12",
@@ -51,25 +51,25 @@ var GALAXY_DARK_COLOR = {
 		tealAlt: "#e6f7f9",
 		purple: "#272442",
 		purpleAlt: "#f2f0ff",
-		disabled: "#1e1e1e",
+		disabled: "#1c1c1d",
 		disabledAlt: "#ffffff",
 		galaxy: "#005EFF",
 		galaxyAlt: "#3075FF"
 	},
 	border: {
-		primary: "#2c2c2c",
-		secondary: "#3a3a3a",
-		tertiary: "#4a4a4a",
-		selected: "#777777",
+		primary: "#2b2b2c",
+		secondary: "#39393a",
+		tertiary: "#49494a",
+		selected: "#787879",
 		success: "#3aa175",
-		warning: "#aa6d2f",
-		error: "#ac4757",
-		disabled: "#2e2e2e",
+		warning: "#b98a2e",
+		error: "#c94e55",
+		disabled: "#2d2d2e",
 		pink: "#a8527e",
 		orange: "#b3722e",
 		yellow: "#a09b3f",
 		lime: "#d5f2a7",
-		blue: "#3f6ea5",
+		blue: "#4c9eff",
 		teal: "#3a8a8f",
 		purple: "#b7b1f1",
 		galaxy: "#005EFF",
@@ -84,8 +84,8 @@ var GALAXY_DARK_COLOR = {
 		tertiaryAlt: "#000000",
 		success: "#4cb782",
 		warning: "#ffb265",
-		error: "#e53f4f",
-		pink: "#f3a8ef",
+		error: "#f6525c",
+		pink: "#f3a8e5",
 		orange: "#ffd2a8",
 		yellow: "#fff7aa",
 		lime: "#d5f2a7",

package/dist/theme/variants/light.js

@@ -8,7 +8,7 @@ var GALAXY_LIGHT_COLOR = {
 		tertiary: "#9e9e9e",
 		tertiaryAlt: "#868686",
 		success: "#4cb782",
-		warning: "#ff6b24",
+		warning: "#ca8404",
 		error: "#e53f4f",
 		pink: "#ff4595",
 		orange: "#e99243",
@@ -19,24 +19,24 @@ var GALAXY_LIGHT_COLOR = {
 		teal: "#20b2a5",
 		purple: "#b080f3",
 		disabled: "#b8b8b8",
-		galaxy: "#3075FF",
-		galaxyAlt: "#005EFF"
+		galaxy: "#005EFF",
+		galaxyAlt: "#004BD1"
 	},
 	background: {
 		base: "#ffffff",
-		baseAlt: "#131313",
-		primary: "#fafafa",
-		primaryAlt: "#161616",
-		secondary: "#f0f0f0",
-		secondaryAlt: "#242424",
-		tertiary: "#f5f5f5",
-		tertiaryAlt: "#202020",
+		baseAlt: "#141415",
+		primary: "#fafafb",
+		primaryAlt: "#161617",
+		secondary: "#f1f1f2",
+		secondaryAlt: "#1c1c1d",
+		tertiary: "#f6f6f7",
+		tertiaryAlt: "#1a1a1b",
 		success: "#e3f6ec",
-		successAlt: "#1d3329",
-		warning: "#ffe6d2",
-		warningAlt: "#3f2e19",
+		successAlt: "#2f8f64",
+		warning: "#fdeec6",
+		warningAlt: "#cf8c10",
 		error: "#fce8ec",
-		errorAlt: "#3d1f24",
+		errorAlt: "#d63d4e",
 		pink: "#f8e6f7",
 		pinkAlt: "#361c23",
 		orange: "#fdefdc",
@@ -52,28 +52,28 @@ var GALAXY_LIGHT_COLOR = {
 		purple: "#f2f0ff",
 		purpleAlt: "#272442",
 		disabled: "#ffffff",
-		disabledAlt: "#1e1e1e",
-		galaxy: "#3075FF",
-		galaxyAlt: "#005EFF"
+		disabledAlt: "#1c1c1d",
+		galaxy: "#005EFF",
+		galaxyAlt: "#004BD1"
 	},
 	border: {
-		primary: "#cdcecd",
-		secondary: "#d5d6d7",
-		tertiary: "#e0e0e0",
-		selected: "#d5d6d7",
+		primary: "#d2d2d4",
+		secondary: "#dadadc",
+		tertiary: "#e2e2e4",
+		selected: "#d8d8da",
 		success: "#62c796",
-		warning: "#f78d55",
-		error: "#e26178",
-		disabled: "#e7e7e7",
+		warning: "#efae3c",
+		error: "#e2555f",
+		disabled: "#e8e8e9",
 		pink: "#f57bb0",
 		orange: "#e2a65c",
 		yellow: "#d4cc6a",
 		lime: "#9cca55",
-		blue: "#7aa7f8",
+		blue: "#4c9eff",
 		teal: "#4cc2b7",
 		purple: "#b080f3",
-		galaxy: "#3075FF",
-		galaxyAlt: "#005EFF"
+		galaxy: "#005EFF",
+		galaxyAlt: "#004BD1"
 	},
 	icon: {
 		primary: "#101010",
@@ -82,19 +82,19 @@ var GALAXY_LIGHT_COLOR = {
 		secondaryAlt: "#acacac",
 		tertiary: "#9e9e9e",
 		tertiaryAlt: "#868686",
-		success: "#55c393",
-		warning: "#ff6b24",
-		error: "#f3506b",
-		pink: "#ff4595",
-		orange: "#e99243",
-		yellow: "#cbc24d",
-		lime: "#966a55",
-		blue: "#4885ff",
-		teal: "#20b2a5",
-		purple: "#b080f3",
+		success: "#7ccfaa",
+		warning: "#f7a928",
+		error: "#f6525c",
+		pink: "#f77fb4",
+		orange: "#eeab72",
+		yellow: "#d9cf74",
+		lime: "#b3d67d",
+		blue: "#7dabff",
+		teal: "#5cc6bb",
+		purple: "#c4a1f5",
 		disabled: "#b8b8b8",
-		galaxy: "#3075FF",
-		galaxyAlt: "#005EFF"
+		galaxy: "#005EFF",
+		galaxyAlt: "#004BD1"
 	},
 	opacity: {
 		bw100: "rgba(255, 255, 255, 1)",

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.2",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",