@galaxy-io/dls 2.0.0 → 2.0.2

package/dist/table/InfiniteSpreadsheet.js

@@ -754,7 +754,7 @@ var InfiniteSpreadsheetInner = forwardRef(function InfiniteSpreadsheet(props, re
 		}), showAddRow && isMounted && /* @__PURE__ */ jsx(AddRow, {
 			role: "row",
 			"aria-rowindex": rowCount + 2,
-			className: "gx-TableCore-VIRTUAL_ROW_CSS-vb9km4t",
+			className: "gx-TableCore-VIRTUAL_ROW_CSS-v1emgwoo",
 			style: startStyle(totalSize),
 			children: /* @__PURE__ */ jsx(AddRowCell, {
 				role: "gridcell",

package/dist/table/TableCore.js

@@ -192,7 +192,12 @@ var DropIndicator = /*#__PURE__*/ styled("span")({
 	class: "gx-TableCore-DropIndicator-d1po1i5a",
 	propsAsIs: false
 });
-/** Follows the table, inside the scroll container; observed for `onEndReached`. */
+/**
+* Follows the table, inside the scroll container; observed for `onEndReached`. Zero height: a 1px
+* sentinel made every table overflow its scroll box by a pixel, so the wheel scrolled that pixel
+* and a trackpad gesture latched onto the table instead of scrolling the page.
+* `IntersectionObserver` reports a zero-area target that touches the root's edge.
+*/
 var Sentinel = /*#__PURE__*/ styled("div")({
 	name: "Sentinel",
 	class: "gx-TableCore-Sentinel-scxvgum",
@@ -284,26 +289,71 @@ var ROW_SELECTED_CSS = "gx-TableCore-ROW_SELECTED_CSS-r1g7lrfg";
 var ROW_ACTIVE_CSS = "gx-TableCore-ROW_ACTIVE_CSS-r10dstoh";
 /** @internal The last row, or a row whose panel is open: no bottom hairline. */
 var ROW_NO_BORDER_CSS = "gx-TableCore-ROW_NO_BORDER_CSS-rpsswqs";
+/**
+* The rows end above the bottom of the scroll box (a full-height table with a few rows): the last
+* row keeps its hairline, so the list reads as finished instead of floating in empty space. Set by
+* `useRowsEndAboveBottom`; it outranks `ROW_NO_BORDER_CSS` and the panel rule by specificity, and
+* sits inside each row's fixed height, so nothing moves when it toggles.
+*/
+var ROWS_END_ABOVE_BOTTOM_CSS = "gx-TableCore-ROWS_END_ABOVE_BOTTOM_CSS-rwbqwrq";
+/**
+* Whether the table's rows end above the bottom of its scroll box. The last row drops its hairline
+* only when it lands on the box's bottom edge, where the container's frame (or a scrolled table's
+* end) already draws the line; above the edge, the hairline closes the list. Watches the scroll box
+* and every row group, so rows loading, expanding or the box resizing re-measure it.
+*/
+function useRowsEndAboveBottom(scrollRef, tableRef, isEnabled, bodyKey) {
+	const [isAbove, setIsAbove] = useState(false);
+	useIsomorphicLayoutEffect(() => {
+		const scroll = scrollRef.current;
+		const table = tableRef.current;
+		if (!isEnabled || scroll === null || table === null) {
+			setIsAbove(false);
+			return;
+		}
+		const measure = () => {
+			const rows = table.querySelectorAll(":scope > tbody > tr");
+			const last = rows[rows.length - 1];
+			if (last === void 0) {
+				setIsAbove(false);
+				return;
+			}
+			setIsAbove(last.getBoundingClientRect().bottom - scroll.getBoundingClientRect().top + scroll.scrollTop < scroll.clientHeight - 1);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(scroll);
+		for (const body of Array.from(table.tBodies)) observer.observe(body);
+		return () => observer.disconnect();
+	}, [
+		scrollRef,
+		tableRef,
+		isEnabled,
+		bodyKey
+	]);
+	return isAbove;
+}
 /** The last expanded panel: no bottom hairline. */
-var EXPANDED_LAST_CSS = "gx-TableCore-EXPANDED_LAST_CSS-ewbqwrq";
+var EXPANDED_LAST_CSS = "gx-TableCore-EXPANDED_LAST_CSS-e1jxalmm";
 /** The dragged header while reordering. 0.5 is a state, not a color token. */
-var HEADER_DRAGGING_CSS = "gx-TableCore-HEADER_DRAGGING_CSS-h1jxalmm";
+var HEADER_DRAGGING_CSS = "gx-TableCore-HEADER_DRAGGING_CSS-h1fx3qlj";
 /** The label wrapper grows when a trailing control (column actions) follows it. */
-var LABEL_GROW_CSS = "gx-TableCore-LABEL_GROW_CSS-l1fx3qlj";
-var DROP_START_CSS = "gx-TableCore-DROP_START_CSS-d2nd1ne";
-var DROP_END_CSS = "gx-TableCore-DROP_END_CSS-darqcf0";
+var LABEL_GROW_CSS = "gx-TableCore-LABEL_GROW_CSS-l2nd1ne";
+var DROP_START_CSS = "gx-TableCore-DROP_START_CSS-darqcf0";
+var DROP_END_CSS = "gx-TableCore-DROP_END_CSS-d132cb1v";
 /** Shows on hover, while dragged and on keyboard focus; straddles the column edge. */
-var COLUMN_RESIZE_HANDLE_CSS = "gx-TableCore-COLUMN_RESIZE_HANDLE_CSS-c132cb1v";
+var COLUMN_RESIZE_HANDLE_CSS = "gx-TableCore-COLUMN_RESIZE_HANDLE_CSS-c1vn45v6";
 /** Hovering a header cell reveals its resize handle. */
-var HEADER_HOVER_CSS = "gx-TableCore-HEADER_HOVER_CSS-h1vn45v6";
+var HEADER_HOVER_CSS = "gx-TableCore-HEADER_HOVER_CSS-h14za3v2";
 /** The expand caret button: a square of its rung. */
-var EXPAND_BUTTON_CSS = "gx-TableCore-EXPAND_BUTTON_CSS-e14za3v2";
+var EXPAND_BUTTON_CSS = "gx-TableCore-EXPAND_BUTTON_CSS-e1w0t3ir";
 /** @internal A virtual body: as tall as every row, which are positioned inside it. */
-var VIRTUAL_BODY_CSS = "gx-TableCore-VIRTUAL_BODY_CSS-v1w0t3ir";
+var VIRTUAL_BODY_CSS = "gx-TableCore-VIRTUAL_BODY_CSS-vb9km4t";
 /** @internal A virtual row, placed at `--gx-table-row-start`. */
-var VIRTUAL_ROW_CSS = "gx-TableCore-VIRTUAL_ROW_CSS-vb9km4t";
+var VIRTUAL_ROW_CSS = "gx-TableCore-VIRTUAL_ROW_CSS-v1emgwoo";
 /** @internal Default cells and footer strings: shrink to truncate. */
-var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-c1emgwoo";
+var CELL_TEXT_CSS = "gx-TableCore-CELL_TEXT_CSS-cw38cm1";
 /** "Oct 3, 2026": the DateInput default. */
 var DATE_FORMAT_OPTIONS = { dateStyle: "medium" };
 /** @internal The default cell renderer: one truncating line of formatted text. */
@@ -739,6 +789,9 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 	const colCount = leadingCount + visibleColumns.length + (hasTrailingColumn ? 1 : 0);
 	const surface = useTableSurface(ownRootRef);
 	const { width: viewportWidth } = useElementClientSize(scrollRef);
+	const tableRef = useRef(null);
+	const hasFooterRow = columnLayout.visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
+	const doRowsEndAboveBottom = useRowsEndAboveBottom(scrollRef, tableRef, !hasFooterRow && (rowCount > 0 || isLoading), `${rowCount}:${isLoading}:${error ?? ""}`);
 	const sentinelRef = useInfiniteScrollSentinel({
 		scrollRef,
 		onEndReached,
@@ -867,7 +920,7 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 		if (drag.beforeId === null && ids.at(-1) === columnId) return "end";
 		return null;
 	};
-	const hasFooter = visibleColumns.some(({ column }) => column.footer !== void 0 && column.footer !== null);
+	const hasFooter = hasFooterRow;
 	const footerRowIndex = ariaRowCount;
 	const variables = { ...columnLayout.variables };
 	if (viewportWidth !== void 0) variables["--gx-table-viewport-width"] = `${viewportWidth}px`;
@@ -943,6 +996,8 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 		children: [/* @__PURE__ */ jsxs(Scroll, {
 			ref: scrollRef,
 			children: [/* @__PURE__ */ jsxs(TableElement, {
+				ref: tableRef,
+				className: cx(doRowsEndAboveBottom && ROWS_END_ABOVE_BOTTOM_CSS),
 				...tableAria,
 				role,
 				...ariaLabel === void 0 ? {} : { "aria-label": ariaLabel },
@@ -1038,7 +1093,7 @@ function TableFrame({ metrics, columnLayout, leadingHeaders, trailingHeader, has
 										size: metrics.textSize,
 										weight: TextWeight.MEDIUM,
 										lineClamp: 1,
-										className: "gx-TableCore-CELL_TEXT_CSS-c1emgwoo",
+										className: "gx-TableCore-CELL_TEXT_CSS-cw38cm1",
 										children: column.footer
 									}) : column.footer
 								}, column.id)),

package/dist/theme/tokens/light.js

@@ -30,12 +30,12 @@ var LIGHT_THEME = {
 		background: {
 			base: "#ffffff",
 			primary: "#fafafb",
-			secondary: "#f1f1f2",
-			tertiary: "#ededee",
+			secondary: "#f3f3f4",
+			tertiary: "#efeff0",
 			hovered: "#f5f5f5",
 			pressed: "#eeeeee",
 			selected: "#e2e2e2",
-			disabled: "#f1f1f2",
+			disabled: "#f3f3f4",
 			success: "#ecfcf0",
 			warning: "#fff8eb",
 			error: "#fff2f2",
@@ -119,7 +119,7 @@ var LIGHT_THEME = {
 				pressed: "#494949"
 			},
 			neutral: {
-				background: "#f1f1f2",
+				background: "#f3f3f4",
 				text: "#101010",
 				hovered: "#e5e5e6",
 				pressed: "#dcdcdd"

package/dist/timeline/Timeline.d.ts

@@ -10,6 +10,15 @@ export declare enum TimelineSize {
     /** body_lg text, 24px box, 6px dot, 14px icon, 24px between events. */
     LARGE = "LARGE"
 }
+/** The frame around every event's dot or icon. One shape per timeline. */
+export declare enum TimelineMarkerShape {
+    /** A square hairline box with control-radius corners. The default. */
+    SQUARE = "SQUARE",
+    /** A round hairline box. */
+    CIRCLE = "CIRCLE",
+    /** No box: the dot or icon sits on the rail, 4px clear of the line above and below it. */
+    NONE = "NONE"
+}
 /** Marker color of one item (Constitution V-A color set; the Timeline item is listed in that column). */
 export declare enum TimelineVariant {
     /** `text.primary` marker in a `border.primary` box. */
@@ -85,6 +94,18 @@ export interface TimelineProps extends AriaAttributes {
      * @default TimelineSize.MEDIUM
      */
     size?: TimelineSize;
+    /**
+     * The frame around each dot or icon: a square box, a round box, or none (the rail runs straight
+     * into the marker). The marker keeps its 16 / 20 / 24px slot in every shape, so text never moves.
+     * @default TimelineMarkerShape.SQUARE
+     */
+    markerShape?: TimelineMarkerShape;
+    /**
+     * Fill each box with its item's background role: a neutral step, `background.<status>` or
+     * `background.<family>`, the way a `Chip` fills. Ignored with `TimelineMarkerShape.NONE`.
+     * @default false
+     */
+    isFilled?: boolean;
     /** DOM id on the root `<ol>`. */
     id?: string;
     /** Any `data-*` attribute, forwarded to the root `<ol>`. */
@@ -94,6 +115,6 @@ export interface TimelineProps extends AriaAttributes {
     /** Inline style on the root `<ol>`; only for setting CSS custom properties. */
     style?: CSSProperties;
 }
-/** A vertical list of events with boxed dot or icon markers on a hairline rail. */
+/** A vertical list of events with dot or icon markers (boxed or bare) on a hairline rail. */
 declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;
 export default Timeline;

package/dist/timeline/Timeline.js

@@ -10,12 +10,12 @@ import { cx } from "@linaria/core";
 /**
 * A sequence of events in time order, top to bottom: a pipeline run's history, a sync's steps, an
 * audit trail, an activity feed. Each item is a marker on a vertical rail (a `Beacon` dot, or an
-* `Icon` when `icon` is set, inside a small square hairline box with no fill), a one-line label
-* centered on the box, an optional time at the end of the label line, an optional description and
+* `Icon` when `icon` is set, inside a small hairline box: square, round, or no box at all with
+* `markerShape`, unfilled unless `isFilled`), a one-line label centered on the marker, an optional time at the end of the label line, an optional description and
 * an optional footer. A 0.5px rail runs from the bottom edge of each box to the top edge of the
 * next, whatever the item's height. Only the marker takes the item's color-set `variant` (a
 * meaning) or categorical `color` (a palette family): the dot or icon its text color, the box its
-* border color. The words stay primary and secondary.
+* border color (and its fill with `isFilled`). The words stay primary and secondary.
 *
 * Read-only: it does not order, group, fetch or format anything. An ordered list (`<ol>`, kept a
 * list in Safari with `role="list"` because the package reset removes list styling); the rail is
@@ -31,6 +31,16 @@ var TimelineSize = /* @__PURE__ */ function(TimelineSize) {
 	TimelineSize["LARGE"] = "LARGE";
 	return TimelineSize;
 }({});
+/** The frame around every event's dot or icon. One shape per timeline. */
+var TimelineMarkerShape = /* @__PURE__ */ function(TimelineMarkerShape) {
+	/** A square hairline box with control-radius corners. The default. */
+	TimelineMarkerShape["SQUARE"] = "SQUARE";
+	/** A round hairline box. */
+	TimelineMarkerShape["CIRCLE"] = "CIRCLE";
+	/** No box: the dot or icon sits on the rail, 4px clear of the line above and below it. */
+	TimelineMarkerShape["NONE"] = "NONE";
+	return TimelineMarkerShape;
+}({});
 /** Marker color of one item (Constitution V-A color set; the Timeline item is listed in that column). */
 var TimelineVariant = /* @__PURE__ */ function(TimelineVariant) {
 	/** `text.primary` marker in a `border.primary` box. */
@@ -84,10 +94,29 @@ var Marker = /*#__PURE__*/ styled("span")({
 	class: "gx-Timeline-Marker-m11eshsv",
 	propsAsIs: false
 });
+/**
+* The rail is a hairline from a zero-width box centered on the marker. Browsers paint it a whole CSS
+* pixel wide, starting at the center and snapped to the right of it, so on a 2× screen it sits one
+* device pixel right of the dot or icon. Half a pixel back centers it exactly and stays crisp at 2×
+* and up; at 1× a 1px line cannot center on an even-width mark, so it stays put.
+*/
+/**
+* The marker frame per shape. `NONE` drops the box and draws the rail through the empty slot, above
+* and below the dot or icon, stopping 4px short of it, so the line leads to the marker instead of an
+* invisible box edge. The first event has no line above its marker and the last none below (the
+* stubs keep their space, so the marker stays centered on its label).
+*/
+var TIMELINE_MARKER_SHAPE_TO_CSS_MAP = {
+	["SQUARE"]: "gx-Timeline-SQUARE-s1u5y4o2",
+	["CIRCLE"]: "gx-Timeline-CIRCLE-c132ryei",
+	["NONE"]: "gx-Timeline-NONE-n1j1o23c"
+};
+/** `isFilled`: the box takes its item's fill role (`--gx-timeline-fill`, set per variant and color). */
+var FILLED_CSS = "gx-Timeline-FILLED_CSS-f6c9753";
 /** The 0.5px hairline from the bottom of this box to the top of the next one. */
 var Connector = /*#__PURE__*/ styled("span")({
 	name: "Connector",
-	class: "gx-Timeline-Connector-c1u5y4o2",
+	class: "gx-Timeline-Connector-c1fj1oub",
 	propsAsIs: false
 });
 /**
@@ -96,13 +125,13 @@ var Connector = /*#__PURE__*/ styled("span")({
 */
 var Body = /*#__PURE__*/ styled("div")({
 	name: "Body",
-	class: "gx-Timeline-Body-b132ryei",
+	class: "gx-Timeline-Body-b1whgn5t",
 	propsAsIs: false
 });
 /** The label wraps; the time stays at the end of the first line. */
 var Heading = /*#__PURE__*/ styled("div")({
 	name: "Heading",
-	class: "gx-Timeline-Heading-h1j1o23c",
+	class: "gx-Timeline-Heading-h1j9kdi1",
 	propsAsIs: false
 });
 /**
@@ -111,19 +140,19 @@ var Heading = /*#__PURE__*/ styled("div")({
 */
 var Footer = /*#__PURE__*/ styled("div")({
 	name: "Footer",
-	class: "gx-Timeline-Footer-f6c9753",
+	class: "gx-Timeline-Footer-feakmyp",
 	propsAsIs: false
 });
 /**
 * The time in the second column, on one line. A flex box, so a `<time>` wrapper has no line strut
 * of its own (the inherited font size) and shares the label's baseline at every size.
 */
-var TIME_CSS = "gx-Timeline-TIME_CSS-t1fj1oub";
+var TIME_CSS = "gx-Timeline-TIME_CSS-t1vcatjx";
 /** Line height, marker box (16 / 20 / 24px), column gap and event spacing per rung. */
 var TIMELINE_SIZE_TO_CSS_MAP = {
-	["SMALL"]: "gx-Timeline-SMALL-s1whgn5t",
-	["MEDIUM"]: "gx-Timeline-MEDIUM-m1j9kdi1",
-	["LARGE"]: "gx-Timeline-LARGE-leakmyp"
+	["SMALL"]: "gx-Timeline-SMALL-s1195fxg",
+	["MEDIUM"]: "gx-Timeline-MEDIUM-m1oqbau9",
+	["LARGE"]: "gx-Timeline-LARGE-l11wi4d2"
 };
 /** The event text's type step. */
 var TIMELINE_SIZE_TO_TEXT_SIZE_MAP = {
@@ -165,42 +194,45 @@ var TIMELINE_VARIANT_TO_ICON_VARIANT_MAP = {
 	["WARNING"]: IconVariant.WARNING,
 	["ERROR"]: IconVariant.ERROR
 };
-/** The marker box's hairline per variant: neutral roles keep `border.primary`; statuses take theirs. */
-var TIMELINE_VARIANT_TO_BORDER_CSS_MAP = {
-	["PRIMARY"]: "gx-Timeline-PRIMARY-p1vcatjx",
-	["SECONDARY"]: "gx-Timeline-SECONDARY-s1195fxg",
-	["TERTIARY"]: "gx-Timeline-TERTIARY-t1oqbau9",
-	["DISABLED"]: "gx-Timeline-DISABLED-d11wi4d2",
-	["INHERIT"]: "gx-Timeline-INHERIT-i1r53y3e",
-	["SUCCESS"]: "gx-Timeline-SUCCESS-s61v3n7",
-	["WARNING"]: "gx-Timeline-WARNING-w1tjq5mm",
-	["ERROR"]: "gx-Timeline-ERROR-ea735oo"
+/**
+* The marker box's hairline and fill per variant: neutral roles keep `border.primary` and fill
+* `background.secondary`; statuses take their own border and background roles.
+*/
+var TIMELINE_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Timeline-PRIMARY-p1r53y3e",
+	["SECONDARY"]: "gx-Timeline-SECONDARY-s61v3n7",
+	["TERTIARY"]: "gx-Timeline-TERTIARY-t1tjq5mm",
+	["DISABLED"]: "gx-Timeline-DISABLED-da735oo",
+	["INHERIT"]: "gx-Timeline-INHERIT-i1ayi32k",
+	["SUCCESS"]: "gx-Timeline-SUCCESS-s155vzhv",
+	["WARNING"]: "gx-Timeline-WARNING-wtnc6wm",
+	["ERROR"]: "gx-Timeline-ERROR-e1q3p1vl"
 };
 /**
 * Categorical `color` on the marker: `text.<family>`, which an icon marker (`IconVariant.INHERIT`)
-* takes, and `border.<family>` on the box.
+* takes, and `border.<family>` and the `background.<family>` fill on the box.
 */
 var TIMELINE_COLOR_TO_CSS_MAP = {
-	red: "gx-Timeline-red-r1ayi32k",
-	orange: "gx-Timeline-orange-o155vzhv",
-	amber: "gx-Timeline-amber-atnc6wm",
-	yellow: "gx-Timeline-yellow-y1q3p1vl",
-	lime: "gx-Timeline-lime-l1khc5e9",
-	green: "gx-Timeline-green-gob0jun",
-	emerald: "gx-Timeline-emerald-ecpz10x",
-	teal: "gx-Timeline-teal-t1arc1uv",
-	cyan: "gx-Timeline-cyan-c1x7dvj6",
-	sky: "gx-Timeline-sky-s1fx1m3c",
-	blue: "gx-Timeline-blue-b1gy5gqm",
-	indigo: "gx-Timeline-indigo-ityv4re",
-	violet: "gx-Timeline-violet-v1506u15",
-	purple: "gx-Timeline-purple-p2f8n55",
-	fuchsia: "gx-Timeline-fuchsia-f1bza0tc",
-	pink: "gx-Timeline-pink-p1vbt6lr",
-	rose: "gx-Timeline-rose-rjtm0e"
+	red: "gx-Timeline-red-r1khc5e9",
+	orange: "gx-Timeline-orange-oob0jun",
+	amber: "gx-Timeline-amber-acpz10x",
+	yellow: "gx-Timeline-yellow-y1arc1uv",
+	lime: "gx-Timeline-lime-l1x7dvj6",
+	green: "gx-Timeline-green-g1fx1m3c",
+	emerald: "gx-Timeline-emerald-e1gy5gqm",
+	teal: "gx-Timeline-teal-ttyv4re",
+	cyan: "gx-Timeline-cyan-c1506u15",
+	sky: "gx-Timeline-sky-s2f8n55",
+	blue: "gx-Timeline-blue-b1bza0tc",
+	indigo: "gx-Timeline-indigo-i1vbt6lr",
+	violet: "gx-Timeline-violet-vjtm0e",
+	purple: "gx-Timeline-purple-pek3kdh",
+	fuchsia: "gx-Timeline-fuchsia-f13hn3pe",
+	pink: "gx-Timeline-pink-pdf3rdi",
+	rose: "gx-Timeline-rose-rjv99mk"
 };
-/** A vertical list of events with boxed dot or icon markers on a hairline rail. */
-var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", className, style, ...rest }, ref) {
+/** A vertical list of events with dot or icon markers (boxed or bare) on a hairline rail. */
+var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", markerShape = "SQUARE", isFilled = false, className, style, ...rest }, ref) {
 	const textSize = TIMELINE_SIZE_TO_TEXT_SIZE_MAP[size];
 	return /* @__PURE__ */ jsx(Root, {
 		...rest,
@@ -217,7 +249,7 @@ var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", className,
 				children: [/* @__PURE__ */ jsxs(Rail, {
 					"aria-hidden": true,
 					children: [/* @__PURE__ */ jsx(Marker, {
-						className: color !== void 0 ? TIMELINE_COLOR_TO_CSS_MAP[color] : TIMELINE_VARIANT_TO_BORDER_CSS_MAP[variant],
+						className: cx(color !== void 0 ? TIMELINE_COLOR_TO_CSS_MAP[color] : TIMELINE_VARIANT_TO_CSS_MAP[variant], TIMELINE_MARKER_SHAPE_TO_CSS_MAP[markerShape], isFilled && markerShape !== "NONE" && FILLED_CSS),
 						children: item.icon === void 0 ? /* @__PURE__ */ jsx(Beacon, {
 							size: TIMELINE_SIZE_TO_BEACON_SIZE_MAP[size],
 							...color !== void 0 ? { color } : { variant: TIMELINE_VARIANT_TO_BEACON_VARIANT_MAP[variant] },
@@ -266,4 +298,4 @@ var Timeline = forwardRef(function Timeline({ items, size = "MEDIUM", className,
 });
 Timeline.displayName = "Timeline";
 //#endregion
-export { TimelineSize, TimelineVariant, Timeline as default };
+export { TimelineMarkerShape, TimelineSize, TimelineVariant, Timeline as default };

package/dist/tokens.css

@@ -386,12 +386,12 @@
 [data-gx-theme="light"] {
   --gx-color-background-base: #ffffff;
   --gx-color-background-primary: #fafafb;
-  --gx-color-background-secondary: #f1f1f2;
-  --gx-color-background-tertiary: #ededee;
+  --gx-color-background-secondary: #f3f3f4;
+  --gx-color-background-tertiary: #efeff0;
   --gx-color-background-hovered: #f5f5f5;
   --gx-color-background-pressed: #eeeeee;
   --gx-color-background-selected: #e2e2e2;
-  --gx-color-background-disabled: #f1f1f2;
+  --gx-color-background-disabled: #f3f3f4;
   --gx-color-background-success: #ecfcf0;
   --gx-color-background-warning: #fff8eb;
   --gx-color-background-error: #fff2f2;
@@ -466,7 +466,7 @@
   --gx-color-solid-primary-text: #ffffff;
   --gx-color-solid-primary-hovered: #2d2d2d;
   --gx-color-solid-primary-pressed: #494949;
-  --gx-color-solid-neutral-background: #f1f1f2;
+  --gx-color-solid-neutral-background: #f3f3f4;
   --gx-color-solid-neutral-text: #101010;
   --gx-color-solid-neutral-hovered: #e5e5e6;
   --gx-color-solid-neutral-pressed: #dcdcdd;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",
@@ -157,6 +157,10 @@
       "types": "./dist/charts/chartScales.d.ts",
       "import": "./dist/charts/chartScales.js"
     },
+    "./charts/chartSelection": {
+      "types": "./dist/charts/chartSelection.d.ts",
+      "import": "./dist/charts/chartSelection.js"
+    },
     "./charts/constants": {
       "types": "./dist/charts/constants.d.ts",
       "import": "./dist/charts/constants.js"